diff --git a/.claude/skills/krow-paper-design/SKILL.md b/.claude/skills/krow-paper-design/SKILL.md index 0f2bca58..f7c92a61 100644 --- a/.claude/skills/krow-paper-design/SKILL.md +++ b/.claude/skills/krow-paper-design/SKILL.md @@ -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`