From 3d9faca20b7375e949546ac6b701307d4f7795ac Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Sun, 6 Sep 2026 21:08:09 -0700 Subject: Auto-pay: no "Paying" screen — the badge animates spinner → green check into Paid. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The armed auto-pay flow flashed a "Paying" title/spinner card that then swapped title, badge and footer for the "Paid" card — too much text change and layout shift for something that completes in a moment. Now the in-flight and success states are ONE structurally identical card (autopayCard): recipient name and amount sit in their final positions the whole time, and the step to Paid is just a class flip. The badge starts as a spinner ring (the ⚡ hidden) and, on success, settles into the green success check with a pop while the ⚡ fades in; the "tap to proceed" footer occupies reserved height so nothing jumps. No "Paying" wording at all — the badge carries the state. Respects prefers-reduced-motion. Manual (non-auto) pays keep their normal Paid screen. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01MGzU12QrAA4G6BYGzGVdXz --- src/style.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) (limited to 'src/style.css') diff --git a/src/style.css b/src/style.css index 6779579..95c0935 100644 --- a/src/style.css +++ b/src/style.css @@ -677,6 +677,23 @@ hr.divider { margin: 16px 0; } @keyframes check-ring { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 45%, transparent); } to { box-shadow: 0 0 0 30px transparent; } } .anim-page .check-badge { animation: check-pop .55s cubic-bezier(.34, 1.56, .64, 1) both, check-ring 1.1s ease-out .25s both; } +/* Auto-pay card: the badge is a spinner ring while paying, then flips to the + green success check with a pop — one node, so the transition is smooth and + nothing around it shifts. */ +.autopay-badge { position: relative; transition: background .3s ease, color .3s ease; } +.autopay-card:not(.paid) .autopay-badge { background: var(--accent-soft); color: transparent; animation: none; } +.autopay-card:not(.paid) .autopay-badge::after { + content: ''; position: absolute; inset: -7px; border-radius: 50%; + border: 2px solid var(--line-strong); border-top-color: var(--accent); + animation: spin .7s linear infinite; +} +.autopay-card.paid .autopay-badge { animation: check-pop .5s cubic-bezier(.34, 1.56, .64, 1) both, check-ring 1.1s ease-out .2s both; } +.autopay-foot { min-height: 1.15em; } +@media (prefers-reduced-motion: reduce) { + .autopay-card:not(.paid) .autopay-badge::after { animation: none; } + .autopay-card.paid .autopay-badge { animation: none; } +} + /* micro-interactions */ button, .btn { transition: filter .12s, background .15s, border-color .15s, box-shadow .15s, transform .1s; } .btn-primary:hover { filter: brightness(1.15); } -- cgit v1.2.3