Processing Steps
Four sequential steps with three visually distinct states: done (light green bg + green check), active (light teal bg + teal spinner), pending (white bg + gray dot + opacity 0.4). Real labels from TotemContext.tsx. Matches Processing.tsx in production.
Step states
Done · Active · Pending
Verifying payment
Connecting to URBS server
Crediting balance to card
• Finalizing transaction
- Done BG
- --color-success-bg-faint
- Done border
- 1px · --color-success-border-faint
- Active BG
- --color-accent-bg-faint
- Active border
- 1px · --color-accent-border
- Pending BG
- --color-surface · opacity 0.4
- Pending border
- 1px · --color-border
- Padding
- 10px 20px
- Radius
- --radius-sm · 8px
- Label
- 15px · active:600 / else:400
- Spinner
- --color-accent · #00B4AE
- Icons
- circle-check · spinner · 16px