diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/app.js | 21 | ||||
| -rw-r--r-- | src/style.css | 9 |
2 files changed, 25 insertions, 5 deletions
@@ -24,6 +24,7 @@ import { timeAgo, SATS, BITCOIN_ICON, + ARK_MARK, } from './format.js'; const wallet = new Wallet(); @@ -3347,9 +3348,19 @@ function balanceCard() { const viewSpending = view === 'spending'; return h('div', { class: 'balance-face' }, h('div', { class: 'row between', style: 'align-items:center' }, - h('div', { class: 'small faint', style: 'text-transform:uppercase;letter-spacing:.06em' }, - kindLocked ? viewLabel(acc0, view) - : hasSpending ? (viewSpending ? t('spendingLabel') : t('savingLabel')) : t('balance')), + h('div', { class: 'row', style: 'gap:7px;align-items:center;min-width:0' }, + // account identity at a glance (user feedback): spending wears + // lightning + the ark mark, savings the bitcoin disc — color says + // which rail before the label is read + hasSpending && !kindLocked + ? h('span', { + class: 'face-ico ' + (viewSpending ? 'spend' : 'save'), + html: viewSpending ? '\u26a1' + ARK_MARK(12) : BITCOIN_ICON(14), + }) + : null, + h('div', { class: 'small faint', style: 'text-transform:uppercase;letter-spacing:.06em' }, + kindLocked ? viewLabel(acc0, view) + : hasSpending ? (viewSpending ? t('spendingLabel') : t('savingLabel')) : t('balance'))), manageBtn()), h('div', { class: 'amt', style: firstLoad ? 'opacity:.3' : '' }, firstLoad ? h('span', { class: 'spinner sm', style: 'margin-right:8px' }) : null, @@ -3631,7 +3642,7 @@ function balanceCard() { el._settle = setTimeout(() => settle(el), 130); }, }, ORDER2.map((v) => h('div', { - class: 'card balance bal-slide', + class: 'card balance bal-slide face-' + v, // Tapping the peeking neighbor switches to it outright — the post-render // alignment then glides it into place. Guarded against a desktop drag's // release click and against buttons riding on the card. @@ -3657,7 +3668,7 @@ function balanceCard() { const heroEl = faceFor(sel); applyAnim(heroEl, 'anim-tab-' + (_accDir || 'left'), dtAcc); _accDir = null; - return h('div', { class: 'card balance' }, heroEl, ...cardExtras()); + return h('div', { class: 'card balance' + (hasSpending && !kindLocked ? ' face-' + sel : '') }, heroEl, ...cardExtras()); } diff --git a/src/style.css b/src/style.css index 53f306f..a99212d 100644 --- a/src/style.css +++ b/src/style.css @@ -156,6 +156,15 @@ input { scroll-margin-top: 12px; } .card + .card { margin-top: 16px; } /* ---- balance card ---- */ +/* Account identity at a glance: a symbol beside the label and a colored + hairline across the card's crown — spending wears lightning + the ark + mark (violet), savings the bitcoin disc (orange). Inset shadow stacks + with the card's own and clips to the radius; no layout shift. */ +.face-ico { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; line-height: 1; flex-shrink: 0; } +.face-ico.save { color: #f7931a; } +.face-ico.spend { color: #7c3aed; } +.balance.face-spending { box-shadow: inset 0 3px 0 rgba(124, 58, 237, .55), var(--shadow); } +.balance.face-savings { box-shadow: inset 0 3px 0 rgba(247, 147, 26, .6), var(--shadow); } .balance .amt { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; font-family: var(--mono); } .balance .amt .unit { font-size: 18px; color: var(--muted); margin-left: 6px; font-weight: 600; } .balance .usd { color: var(--muted); margin-top: 2px; } |