From c0ae6cc9a02b1b69f6c5205884202a7086b9e88a Mon Sep 17 00:00:00 2001
From: Tero Halla-aho <thallaa@gmail.com>
Date: Sun, 21 Dec 2025 12:12:38 +0200
Subject: [PATCH] Restyle billing toggles like amenity cards

---
 app/me/page.tsx | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/app/me/page.tsx b/app/me/page.tsx
index 68812ea..8c5f4c5 100644
--- a/app/me/page.tsx
+++ b/app/me/page.tsx
@@ -217,9 +217,16 @@ export default function ProfilePage() {
             {billingMessage ? <p style={{ color: 'green' }}>{billingMessage}</p> : null}
             {billingError ? <p style={{ color: 'red' }}>{billingError}</p> : null}
             <form onSubmit={onSaveBilling} style={{ display: 'grid', gap: 14, marginTop: 8 }}>
-              <label style={{ display: 'inline-flex', alignItems: 'center', columnGap: 6 }}>
-                <input type="checkbox" checked={billingEnabled} onChange={(e) => setBillingEnabled(e.target.checked)} />
-                <span>{t('billingEnableLabel')}</span>
+              <label className="amenity-option" style={{ maxWidth: 460, alignItems: 'center' }}>
+                <div className="amenity-option-meta" style={{ fontWeight: 600 }}>
+                  <span className="amenity-name">{t('billingEnableLabel')}</span>
+                </div>
+                <input
+                  type="checkbox"
+                  checked={billingEnabled}
+                  onChange={(e) => setBillingEnabled(e.target.checked)}
+                  style={{ width: 18, height: 18 }}
+                />
               </label>
               {billingEnabled ? (
                 <>
@@ -232,13 +239,16 @@ export default function ProfilePage() {
                       {t('billingIbanLabel')}
                       <input value={billingIban} onChange={(e) => setBillingIban(e.target.value)} placeholder="FI00 1234 5600 0007 85" />
                     </label>
-                    <label style={{ display: 'inline-flex', alignItems: 'center', columnGap: 6 }}>
+                    <label className="amenity-option" style={{ maxWidth: 460, alignItems: 'center' }}>
+                      <div className="amenity-option-meta" style={{ fontWeight: 600 }}>
+                        <span className="amenity-name">{t('billingIncludeVat')}</span>
+                      </div>
                       <input
                         type="checkbox"
                         checked={billingIncludeVatLine}
                         onChange={(e) => setBillingIncludeVatLine(e.target.checked)}
+                        style={{ width: 18, height: 18 }}
                       />
-                      <span>{t('billingIncludeVat')}</span>
                     </label>
                   </div>
                   <div style={{ border: '1px solid #eee', padding: 12, borderRadius: 6 }}>