jacobh2/F-r-ldraledigplannerare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix calendar style

Browse Source
This commit is contained in:
Jacob Hagstedt
2026-06-14 13:05:53 +02:00
parent 4924982a8a
commit 6ed2a3ae0c
10 changed files with 1005 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
JUNIOR_styling_plan.md
+7 -10
View File
@@ -107,18 +107,15 @@ Targets `.form-group`, `.error-message`, `.settings-page__message--success/--err
---
## S5 — Calendar (the "Google Calendar-like" view)
## S5 — Calendar (the "Google Calendar-like" view) — ⚠️ SUPERSEDED
Targets `.calendar`, `.calendar__header`, `.calendar__grid`, `.calendar__weekday`, `.calendar-day*`, `.calendar-event*`, `.calendar__legend*`.
> **SUPERSEDED by `junior_calendar_fix.md`.** The calendar is being fixed as its own focused task, which already covers the 7-column grid, day cells, today/weekend/adjacent-month states, the legend, plus correctness fixes (Monday-first Swedish week, default-to-current-month) and tests. **Do not restyle the calendar from this section** — you'll collide with that work.
>
> **Only remaining action here:** once `junior_calendar_fix.md` has shipped *and* `global.css` tokens (S1) exist, reconcile the calendar's co-located `calendar.css` to reference the tokens (`--c-*`, `--sp-*`, `--radius`) and define per-type color tokens (`--type-sjukpenning`, `--type-lagsta`, `--type-vacation`, plus a dubbeldagar marker) so cell chips and the legend stay in sync with the rest of the app. No layout or markup changes.
**Do:**
- `calendar__grid` as a **7-column CSS grid** with square-ish day cells, thin borders, day number top-left, room for event chips below.
- Distinguish **current month vs. adjacent**, **today** (accent ring/dot), and **weekends/red days** (subtle tint).
- **Event chips** (`calendar-event`) color-coded by leave type — define a token per type and reuse the same colors in the legend so they match: e.g. `--type-sjukpenning`, `--type-lagsta`, `--type-vacation`, plus a marker for dubbeldagar. Keep chips compact and readable.
- Month nav header (prev/next + month label) styled as a clean toolbar.
- Legend as small labeled swatches.
The original styling targets, kept for reference during that token reconciliation: `.calendar`, `.calendar__header`, `.calendar__grid`, `.calendar__weekday`, `.calendar-day*`, `.calendar-event*`, `.calendar__legend*`.
**Acceptance:** The calendar looks like a familiar month calendar; leave types are color-coded consistently between cells and legend; today/weekends/other-month are visually distinct.
**Acceptance:** Calendar colors/spacing reference S1 tokens; leave-type colors match between cells and legend. (Layout, states, and behavior are owned by `junior_calendar_fix.md`.)
---
@@ -146,7 +143,7 @@ Targets the `QRCodeModal` (built in the MVP rounds) and `LoadingSpinner`.
## Sequencing & guardrails
1. **S1 → S2 → S3 → S4** give the biggest visible lift fastest (foundation + shell + cards + controls).
2. **S5 (calendar)** is the most involved; do it once `frontend_mvp_complete.md` T2.1 has the calendar interactive.
2. **S5 (calendar) is superseded** by `junior_calendar_fix.md` — which is being delivered **first**, before this styling plan. Don't restyle the calendar here; the only S5 task left is the token reconciliation noted in that section, done *after* both this plan's S1 and the calendar fix have landed.
3. **S6, S7** finish it off.
- **Don't change component markup or `data-testid`s** to style — tests rely on them. Style via the existing classes; only add a `className` where one is genuinely missing.