Processing Steps
Quatro etapas sequenciais com três estados visualmente distintos: done (bg verde claro + check verde), active (bg teal claro + spinner teal), pending (bg branco + ponto cinza + opacity 0.4). Labels reais de TotemContext.tsx. Espelha Processing.tsx em produção.
Estados da etapa
Done · Active · Pending
Verifying payment
Connecting to URBS server
Crediting balance to card
• Finalizing transaction
- BG done
- --color-success-bg-faint
- Borda done
- 1px · --color-success-border-faint
- BG active
- --color-accent-bg-faint
- Borda active
- 1px · --color-accent-border
- BG pending
- --color-surface · opacity 0.4
- Borda pending
- 1px · --color-border
- Padding
- 10px 20px
- Radius
- --radius-sm · 8px
- Label
- 15px · active:600 / else:400
- Spinner
- --color-accent · #00B4AE
- Ícones
- circle-check · spinner · 16px