Summary
Several parts of the app have an "edit mode" or "enter information" panel — History session editing, the MuscleMap confirm step, TemplateSessionEditor, and ExerciseForm in Bibliotek. Each has grown independently and currently looks different: backgrounds, button placement, section labels, and affordances vary between them. A user switching between these contexts has to re-orient each time. The goal is a shared visual language for all edit/entry states so the app feels cohesive and the user always knows they are in an editable context.
Priority
Medium
UI spec (Carbon g100)
- Edit-state container: all edit/entry panels use `var(--cds-layer-02)` as background (one level deeper than the surrounding card) with a 2px `var(--accent)` top border to signal "you are editing"
- Panel header: every edit panel opens with a `SectionLabel` row that includes an `Edit` (or context-appropriate) Carbon icon and a short label, e.g. "Rediger økt", "Bekreft økt", "Rediger mal", "Ny øvelse" — sentence case, no emoji
- Button bar: Save (primary) and Cancel (ghost) always rendered as a sticky or pinned bottom row within the panel; Save on the right, Cancel on the left — no exceptions
- Input spacing: 16px vertical gap between input groups; consistent use of Carbon `TextInput`, `Select`, `Toggle` — no ad-hoc `` or ``
Error placement: `InlineNotification kind="error"` always appears directly above the button bar, not scattered through the form
Affected surfaces: History edit mode, MuscleMap confirm step, TemplateSessionEditor, ExerciseForm
Data model
No schema changes.
Acceptance criteria
[ ] All edit/entry panels share the `var(--cds-layer-02)` background + 2px `var(--accent)` top border treatment
[ ] Every panel has a consistent `SectionLabel` header with an icon and action label
[ ] Save / Cancel button placement is uniform across all panels (Save primary right, Cancel ghost left)
[ ] `InlineNotification` errors appear above the button bar in all panels
[ ] No raw `` or `` elements remain in edit panels — Carbon components only
[ ] Verified by developer on dev/qa/prod before closing
Out of scope
Settings page (persistent form, not a toggle-in/out edit mode)
Login page
Read-only expanded views (History session read mode, Bibliotek exercise rows)
Summary
Several parts of the app have an "edit mode" or "enter information" panel — History session editing, the MuscleMap confirm step, TemplateSessionEditor, and ExerciseForm in Bibliotek. Each has grown independently and currently looks different: backgrounds, button placement, section labels, and affordances vary between them. A user switching between these contexts has to re-orient each time. The goal is a shared visual language for all edit/entry states so the app feels cohesive and the user always knows they are in an editable context.
Priority
Medium
UI spec (Carbon g100)