feat(SKILL.md): add shift card design specifications and status chip variants

This commit is contained in:
Achintha Isuru
2026-03-15 21:42:12 -04:00
parent 5c99ddbca7
commit 86335dd177

View File

@@ -285,6 +285,44 @@ Contextual banners for alerts, warnings, and informational notices. Used in form
- Label: Manrope 13px/500 `#6A7382`, width 72px fixed
- Value: Manrope 13px/500 `#121826` (or `#0A39DF` for phone/links)
### Shift Cards
Two variants for displaying shifts in lists. Cards are grouped under month headers.
**Common card container:**
- Background: `#FFFFFF`, border: 0.5px `#D1D5DB`, radius: 12px, padding: 16px, gap: 12px
**Header row** (top of card):
- Layout: flex row, space-between
- Left side: Role title + Venue subtitle (stacked)
- Role: Inter Tight 16px/600 `#121826` (primary — always most prominent)
- Venue: Manrope 13px/400 `#6A7382`
- Right side: XSmall status chip (flex-shrink 0)
**Details row** (bottom of card):
- Layout: flex row, space-between, align start
- Left column (flex column, gap 6px): date, time, location — each as icon (16px `#6A7382`) + text (Manrope 13px/500-600 `#6A7382`) row with 6px gap
- Right column (earnings — only in Variant 1)
**Variant 1 — With Earnings (Completed shifts):**
- Right side shows earnings, right-aligned:
- Amount: Inter Tight 14px/600 `#121826` (e.g., "$192.00")
- Rate below: Manrope 13px/500 `#6A7382` (e.g., "6 hrs · $32/hr")
**Variant 2 — Without Earnings (Cancelled, No-Show, Upcoming):**
- No right-side earnings section — details row takes full width
**Status chip variants on shift cards:**
| Status | Background | Text |
|--------|-----------|------|
| Confirmed | `#E9F0FF` | `#0A39DF` |
| Active | `#ECFDF5` | `#059669` |
| Pending | `#FEF9EE` | `#D97706` |
| Completed | `#ECFDF5` | `#059669` |
| Swap Requested | `#FEF9EE` | `#D97706` |
| No-Show | `#FEF2F2` | `#F04444` |
| Cancelled | `#F1F3F5` | `#6A7382` |
### Section Headers
- Text: Manrope 11px/600, uppercase, letter-spacing 0.06em, color `#6A7382`