diff options
| -rw-r--r-- | src/app.js | 38 | ||||
| -rw-r--r-- | src/style.css | 12 | ||||
| -rw-r--r-- | tools/signup-quick-test.js | 1 |
3 files changed, 29 insertions, 22 deletions
@@ -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 |