Skip to content

As a user I want the period report to lead with my untrained muscles so the insight is impossible to miss #105

@ChristopherRotnes

Description

@ChristopherRotnes

Summary

Redesign `Report.jsx` to lead with the killer insight — untrained muscles — via a bold Condensed hero, dashed white outlines on the body map for gap muscles, a magenta-tinted gap callout card, and styled recommendation rows. Also accepts pre-fill props from MuscleMap's "Analyser perioden" CTA and shows a dynamic filter eyebrow.

Part of #96. Depends on phase 1 (tokens + `gaps` prop on BodySVG) and phase 3 (App.jsx prefill state).

Priority

High

UI spec (Carbon g100)

  • Dynamic eyebrow: `"PERIODE · {UKEDAG} · {N} UKER"` computed from active filters
  • Hero (two lines, Plex Cond 700 30px): `"{N} muskler"` (magenta) + `"aldri trent."` (white)
  • KPI hero: large ratio display — numerator in Plex Cond 600 56px, denominator in `var(--text-disabled-wl)` 32px
  • Body map: `gaps={untrainedMuscles}` prop → dashed white outlines on un-trained muscle regions
  • Gap callout card: magenta-tinted, 16px radius, "IKKE TRUFFET" eyebrow, each muscle as AccentChip with stale-time
  • Recommendation rows: 3px left accent strip, mono muscle-coverage meta, 28px round magenta `+` button
  • `FilterChip`: pill radius, active → `background: var(--accent)`
  • Sticky CTA: "Disse bør du legge inn i programmet →" → navigates to Bibliotek
  • Consume `prefill` prop on mount via `useRef` (empty deps array)

Acceptance criteria

  • Hero shows untrained muscle count in magenta on two lines
  • Arriving via "Analyser perioden" pre-fills period, weekday, and session type with no manual input
  • Dynamic eyebrow reflects active filters
  • Body map shows dashed white outlines on untrained muscles above heat fills
  • Gap callout card is magenta-tinted with stale-time on each muscle chip
  • Recommendation rows have 3px left strip and round `+` button
  • FilterChip pills have pill radius; active state is magenta
  • Sticky CTA navigates to Bibliotek
  • Pre-fill state cleared from App.jsx after consumed
  • WCAG AA on all new elements; focus rings intact

Out of scope

  • Planning / auto-scheduling a future session

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions