Sprint 9 — UI: engagement 2-col + global contrast pass

Base: sprint/8-c2 (sprint 8 not yet merged on origin/main, but its C2ConfigCard is the right pane). Scope: frontend-only. No backend, no schema. No new features.

Decisions (locked)

Engagement page : passer en 2 colonnes sur desktop (lg:grid-cols-2), [engagement form | C2ConfigCard]. Mobile/tablet : stack vertical (comportement actuel).
Contraste global : le problème est que canvas (page bg) et paper (card bg) sont tous deux #ffffff en light mode. Les cartes ne ressortent que par leur hairline 1px → fatigue oculaire confirmée par l'utilisateur.
Fix retenu : tinter le canvas light d'un neutre froid très pâle. paper reste blanc pur. Les cartes "lèvent" naturellement sans casser le brutalisme.
- Proposition : canvas light #f3f5f8 (gris-bleu très pâle, cohérent avec l'electric blue), paper light #ffffff.
- Dark mode inchangé (canvas #111827 / paper #1f2937 déjà différenciés).
Pas de shadow, pas de radius. La brutalité reste intacte — seul le contraste de surface change.
Hairline : à vérifier sur le nouveau canvas. Si nécessaire, passer hairline light de la valeur actuelle à un poil plus sombre pour préserver la lisibilité du bord sur tinted canvas. Mais éviter si la lecture est déjà bonne.

Task A — EngagementFormPage 2-col

File : frontend/src/pages/EngagementFormPage.tsx

Remplacer le wrapper <div className="flex flex-col gap-xl max-w-2xl"> par un container plus large + grid 2-col responsive.
Header reste en haut, full width.
Body : grid grid-cols-1 lg:grid-cols-2 gap-xl avec :
- Col gauche : <form> engagement (déjà en card-product).
- Col droite : <C2ConfigCard> (seulement quand editing && canEditEngagements).
Si pas en edit (création) : col droite vide → garder la grid mais que la col gauche se déploie via lg:col-span-2 (pour pas avoir un vide à droite). Acceptable alternative : flex + max-w-2xl quand non-editing.
Pas de modif sur la logique de form, validation, mutations.

Task B — Contrast pass (tokens)

Files :

DESIGN.md § Surface : mettre à jour canvas light = #f3f5f8, conserver paper light = #ffffff. Documenter dans la même section que "canvas tints lift paper cards in light mode without violating brutalism".
Token source de vérité (Tailwind config ou CSS vars). Localiser et appliquer la même MAJ. Probablement frontend/tailwind.config.js ou un frontend/src/styles/tokens.css / index.css.
Vérifier qu'aucun composant ne hardcode #ffffff pour la page bg (devrait utiliser bg-canvas).
Tests CSS smoke : bg-canvas continue de matcher, dark mode inchangé.

Task C — Visual regression check

pnpm vitest run clean.
pnpm tsc --noEmit clean.
pnpm lint clean.
Screenshots avant/après (au moins) :
- EngagementsListPage (cards-on-canvas)
- EngagementDetailPage
- EngagementFormPage (edit, avec C2ConfigCard à droite)
- SimulationFormPage (déjà 2-col sprint 7, vérifier que le tinted canvas n'écrase pas)
- LoginPage
Dark mode : passe rapide pour confirmer aucune régression.

Sequencing

frontend-builder : Task A + B + C. Une seule passe, commits atomiques.
design-reviewer : revue visuelle après merge des commits builder. Focus :
- Lecture confortable cards-on-tinted-canvas.
- Hairline encore visible.
- Dark mode inchangé.
- Pas de régression sur components qui pourraient ré-utiliser bg-canvas pour autre chose (dropdowns, modals).

Definition of Done

EngagementFormPage en édition : 2 colonnes desktop, stack mobile.
Page bg différencié de card bg en light mode (eyes confort).
Vitest + typecheck + lint verts.
Design-reviewer APPROVED.
Screenshots livrés ou écueil documenté.
Commits conventional, branche sprint/9-ui-contrast.

3.9 KiB Raw Blame History