Balance settings rows: each balance in its own tinted tile, with room around it. "Icons and padding need work here" (Adam, 2026-11-15, phone screenshot of Settings → Wallet): a gear sat against the left border of the Spending row and a small grey coin beside Add a savings account. Now Spending wears the purple bolt and Savings (and Add a savings account) the orange bitcoin disc, each in a 38px rounded tile, the rows padded 14px 16px with a 14px radius and 8px apart, the › or + in a fixed column on the right; the hover tint only where there is a mouse. signup-quick-test (with a dark-mode screenshot hook), balance-settings-row and features-smoke pass

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01VMan6SwkivduFDDkMmnXjZ

1 files changed, 16 insertions, 22 deletions

diff --git a/src/app.js b/src/app.js
index f3c2dcb..e1a606a 100644
--- a/src/app.js
+++ b/src/app.js
@@ -3948,31 +3948,25 @@ function recoveryCard(a) {
 function balanceSettingsCard(a) {
   if (a.id !== activeId) return null;
   const views = a.kind ? [a.kind] : spendingActive() ? ['spending', 'savings'] : ['savings'];
-  const row = (view) => h('button', {
-    class: 'btn-ghost btn-block balance-settings-row', 'data-view': view,
-    style: 'display:flex;align-items:center;gap:10px;text-align:left;padding:10px 4px',
-    onClick: () => openWalletSettings(view),
-  },
-    h('span', { style: 'display:flex;color:var(--muted)', html: GEAR_ICON(18) }),
-    h('span', { class: 'col', style: 'flex:1;gap:2px' },
-      h('span', { style: 'font-weight:600' }, viewLabel(a, view)),
-      h('span', { class: 'small muted' }, t(view === 'spending' ? 'spendingSettingsDesc' : 'savingsSettingsDesc'))),
-    h('span', { class: 'muted' }, '›'));
+  // Each balance wears its own mark in a tinted tile — the bolt and the
+  // bitcoin disc the balance card uses — rather than a gear beside one and a
+  // coin beside the other (Adam, 2026-11-15: "Icons and padding need work").
+  const BOLT = '<svg width="21" height="21" viewBox="0 0 24 24" fill="currentColor" style="display:block"><path d="M13.5 2 4 13.5h6.5L9.5 22 20 9.5h-6.6z"/></svg>';
+  const tile = (view) => h('span', { class: 'bs-tile ' + (view === 'spending' ? 'spend' : 'save'), html: view === 'spending' ? BOLT : BITCOIN_ICON(22) });
+  const rowOf = (attrs, view, title, desc, tail) => h('button', { class: 'balance-settings-row', ...attrs },
+    tile(view),
+    h('span', { class: 'col bs-text' },
+      h('span', { class: 'bs-title' }, title),
+      h('span', { class: 'small muted' }, desc)),
+    h('span', { class: 'bs-tail', 'aria-hidden': 'true' }, tail));
+  const row = (view) => rowOf({ 'data-view': view, onClick: () => openWalletSettings(view) }, view,
+    viewLabel(a, view), t(view === 'spending' ? 'spendingSettingsDesc' : 'savingsSettingsDesc'), '›');
   // a sign-up's Spending-only account: Savings is one tap away
   const addRow = a.kind === 'spending' && a.savingsLater && !a.deriveIndex
-    ? h('button', {
-        id: 'add-savings',
-        class: 'btn-ghost btn-block balance-settings-row',
-        style: 'display:flex;align-items:center;gap:10px;text-align:left;padding:10px 4px',
-        onClick: () => { addSavings(a); toast(t('savingsAddedToast')); },
-      },
-        h('span', { style: 'display:flex;color:var(--muted)', html: BITCOIN_ICON(18) }),
-        h('span', { class: 'col', style: 'flex:1;gap:2px' },
-          h('span', { style: 'font-weight:600' }, t('addSavings')),
-          h('span', { class: 'small muted' }, t('addSavingsDesc'))),
-        h('span', { class: 'muted' }, '+'))
+    ? rowOf({ id: 'add-savings', onClick: () => { addSavings(a); toast(t('savingsAddedToast')); } }, 'savings',
+        t('addSavings'), t('addSavingsDesc'), '+')
     : null;
-  return h('div', { class: 'card col', style: 'gap:4px' }, h('h3', {}, t('balanceSettingsTitle')), ...views.map(row), addRow);
+  return h('div', { class: 'card col', style: 'gap:8px' }, h('h3', {}, t('balanceSettingsTitle')), ...views.map(row), addRow);
 }
 function walletNameCard(a) {
   const saveName = () => {