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

3 files changed, 29 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 = () => {
diff --git a/src/style.css b/src/style.css
index 8206000..cd17b48 100644
--- a/src/style.css
+++ b/src/style.css
@@ -2183,3 +2183,15 @@ html:has(.call-overlay:not(.call-min)) { overflow: hidden; scrollbar-gutter: aut
 /* Settings → Wallet: the ways back into an account */
 .ways-back .ways-back-row + .ways-back-row { border-top: 1px solid var(--line); }
 .ways-back .ways-back-check { color: var(--green, #2e9d5b); font-weight: 700; font-size: 16px; padding: 0 4px; }
+
+/* Settings → Wallet → Balance settings rows */
+.balance-settings-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
+  padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
+@media (hover: hover) { .balance-settings-row:hover { background: rgba(127,127,127,.06); } }
+.balance-settings-row .bs-tile { display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+  width: 38px; height: 38px; border-radius: 11px; }
+.balance-settings-row .bs-tile.spend { color: #7c3aed; background: rgba(124, 58, 237, .14); }
+.balance-settings-row .bs-tile.save { color: #f7931a; background: rgba(247, 147, 26, .14); }
+.balance-settings-row .bs-text { flex: 1; gap: 3px; min-width: 0; }
+.balance-settings-row .bs-title { font-weight: 600; }
+.balance-settings-row .bs-tail { color: var(--muted); font-size: 20px; line-height: 1; flex-shrink: 0; width: 14px; text-align: center; }
diff --git a/tools/signup-quick-test.js b/tools/signup-quick-test.js
index a26a9ef..673319a 100644
--- a/tools/signup-quick-test.js
+++ b/tools/signup-quick-test.js
@@ -92,6 +92,7 @@ try {
   const views = await page.$$eval('.balance-settings-row[data-view]', (l) => l.map((e) => e.dataset.view));
   check('the ways back in read as auth buttons', (await page.$$eval('.ways-back-add', (l) => l.map((e) => e.textContent.trim()))).join('|') === 'Passkey auth|Google auth|Nostr auth|Pen and paper', (await page.$$eval('.ways-back-add', (l) => l.map((e) => e.textContent.trim()))).join('|'));
   check('only Spending is listed, with Add a savings account', views.join() === 'spending' && !!(await page.$('#add-savings')), views.join());
+  if (process.env.SHOT2) { await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'dark')); await page.evaluate(() => document.querySelector('.balance-settings-row').closest('.card').scrollIntoView()); await sleep(300); await page.screenshot({ path: process.env.SHOT2 }); await page.evaluate(() => document.documentElement.removeAttribute('data-theme')); }
   if (process.env.SHOT) { await page.evaluate(() => document.querySelector('.ways-back').scrollIntoView()); await page.screenshot({ path: process.env.SHOT }); }
   // a passkey: the relays are stubbed, so the publish fails offline — the
   // error says so and nothing is listed