quikcue/calvana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Settings: deep UX redesign — checklist pattern, not form boxes

Browse Source 
THE INSIGHT:
Settings pages feel like work because they're designed as FORMS.
6 identical white boxes stacked vertically = 'I have to fill all this in?'

But Aaisha's mental model is a CHECKLIST:
'Am I set up? What's left? Let me fix the one thing that's missing.'

THE PATTERN:
Each setting has 3 visual states:

✓ CONFIGURED → single summary line
  'Bank account · Barclays · ****5678'         [Edit]
  Clicking Edit expands the form inline.

○ NEEDS SETUP → expanded with instructions + form
  The first unconfigured item auto-expands.

→ EDITING → expanded form with Save/Cancel
  Save auto-collapses back. Green flash confirms.

THE RESULT:
- Everything configured? Page is SHORT. Green dots, one-liners.
- Something missing? That section is expanded and loud.
- No 'wall of forms' feeling.
- Only one section open at a time (accordion).

HEADER:
Old: Dark stats bar with 5 cells of status dots
New: Thin progress bar + human sentence
  'You're all set' / '2 things left before you go live'
  Counts only essentials (WhatsApp, bank, charity name).

LAYOUT:
Old: 6 separate bordered boxes, each with header + form
New: Single bordered container, divide-y between items
  Each item is a clickable ROW that expands/collapses
  Blue left-border accent on expanded form
  Status dot: green=done, amber=needed, gray=optional

SPECIFICS:
- WhatsApp: collapsed to 'Connected · +447xxx · Receipts, reminders'
  Expands to show QR or features grid
- Bank: collapsed to 'Barclays · ****5678'
  Expands to form + live 'What donors see' preview
- Charity: collapsed to name + color swatch
  Expands to form + pledge page header preview
- Stripe: collapsed to 'Connected' or 'Optional'
  Expands to key field + webhook setup
- Team: collapsed to '3 members · 1 leader'
  Expands to member list + invite flow
- GoCardless: dimmed when collapsed (advanced), expands normally

NEW COMPONENTS:
- SettingRow: generic expand/collapse row pattern
- WhatsAppRow: special case with QR polling
- TeamRow: special case with member list + invite
- SaveRow: Save + Cancel buttons, auto-collapse on save
- Field: reusable input (unchanged)
This commit is contained in:
Omair Saleh
2026-03-04 23:02:17 +08:00
parent 3b46222118
commit ce4f2ba52a
1 changed files with 583 additions and 640 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1223
pledge-now-pay-later/src/app/dashboard/settings/page.tsx
View File

File diff suppressed because it is too large Load Diff