status-colours

Summary

Amber, blue, green and red are reserved for the state of a visitor, a bill, a member or a society, and mean the same thing wherever they appear.

Why it matters

A guard, a resident and an admin look at the same visitor request in three different apps. If "approved" is blue for one and green for another, the gate and the flat disagree about whether someone may come in.

Implications

• warn (amber) — waiting on someone: PENDING, PENDING_APPROVAL, IN_REVIEW.
• info (blue) — allowed, not finished: APPROVED, PARTIALLY_PAID, TRIAL.
• success (green) — done: CHECKED_IN ("Inside"), PAID, ACTIVE.
• danger (red) — refused or late: REJECTED, OVERDUE, SUSPENDED.
• Grey — over: CHECKED_OUT, CANCELLED, EXPIRED, LEFT, REMOVED.
• The colours may not be spent on decoration in a design set. The brand gradient is the other reserved colour; see shared.css.
• The app is not yet consistent with itself. lib/enums.ts maps CHECKED_IN to info, while VisitorStatusBadge.tsx and VisitorList.tsx paint it green. The designs follow the two components that render it.

Related

• visitor-request
• bill
• membership
• society

Sources

• apps/mobile/src/components/ui/Badge.tsx
• apps/mobile/src/components/visitor/VisitorStatusBadge.tsx
• apps/mobile/src/lib/enums.ts
• apps/admin/src/components/ui/StatusBadge.tsx
• .context/designs/mobile/shared.css