Jean-Luc Makiola
e5637511d7
3 plans across 2 waves covering DS-01, DS-02, DS-03: - Plan 01: Token edits (radius, colors, chart vars) + chart components - Plan 02: Shared component rounded-* removal + spacing upgrades - Plan 03: Per-page sweep (9 pages) + visual verification checkpoint Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
8.0 KiB
8.0 KiB
phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves
| phase | plan | type | wave | depends_on | files_modified | autonomous | requirements | must_haves | |||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 05-design-system-token-rework | 02 | execute | 1 |
|
true |
|
|
Purpose: These shared components are used across multiple pages. Fixing them first ensures consistent sharp corners and generous spacing everywhere they appear. Output: 5 modified component files with no hardcoded rounding and upgraded spacing values.
<execution_context> @.planning/phases/05-design-system-token-rework/05-RESEARCH.md @.planning/phases/05-design-system-token-rework/05-PATTERNS.md </execution_context>
@.planning/ROADMAP.md @.planning/STATE.md From src/components/shared/PageShell.tsx (line 15): ```tsx gap-8 -->
```
Task 1: Upgrade PageShell spacing and remove rounded-* from DashboardSkeleton
src/components/shared/PageShell.tsx, src/components/dashboard/DashboardSkeleton.tsx
src/components/shared/PageShell.tsx, src/components/dashboard/DashboardSkeleton.tsx
1. In PageShell.tsx line 15: Change `gap-6` to `gap-8` in the className string `"flex flex-col gap-6"`.
- `bun run build` passes after both tasks
- grep confirms no `rounded-md`, `rounded-full`, `rounded-lg`, `rounded-sm` remain in the 5 modified files
- grep confirms `gap-8` in PageShell.tsx
From src/components/dashboard/DashboardSkeleton.tsx:
// Line 20: <div className="flex flex-col gap-6"> -- gap-8
// Line 22: <div className="grid gap-4 sm:grid-cols-2..."> -- gap-6
// Line 29: <div className="grid gap-6 md:grid-cols-2..."> -- gap-8
// Line 35,43,51: <Skeleton className="h-[250px] w-full rounded-md" /> -- remove rounded-md
// Line 59: <div className="... rounded-md border-l-4 ..."> -- remove rounded-md
// Lines 63-64: <Skeleton className="h-5 w-24 rounded-full" /> -- remove rounded-full
From src/components/dashboard/CategorySection.tsx (line 73):
<button className="... rounded-md border-l-4 bg-card px-4 py-3 ...">
From src/components/dashboard/charts/ChartEmptyState.tsx (line 12):
className={cn("... rounded-lg border border-dashed ...", className)}
From src/components/QuickAddPicker.tsx:
// Line 156: className="... rounded-sm px-2 py-1.5 ..."
// Line 201: <div className="size-2 rounded-full" .../>
- In DashboardSkeleton.tsx, make all of the following changes:
- Line 20: Change
gap-6togap-8in"flex flex-col gap-6" - Line 22: Change
gap-4togap-6in"grid gap-4 sm:grid-cols-2 lg:grid-cols-3" - Line 29: Change
gap-6togap-8in"grid gap-6 md:grid-cols-2 lg:grid-cols-3" - Lines 35, 43, 51: Remove
rounded-mdfrom<Skeleton className="h-[250px] w-full rounded-md" />(3 occurrences). Result:className="h-[250px] w-full" - Line 59: Remove
rounded-mdfrom the div className"flex items-center gap-3 rounded-md border-l-4 ...". The border-l-4 remains. - Lines 63, 64: Remove
rounded-fullfrom<Skeleton className="h-5 w-24 rounded-full" />(2 occurrences). Result:className="h-5 w-24"cd /home/jlmak/Projects/jlmak/SimpleFinanceDash && bun run build <acceptance_criteria> - PageShell.tsx contains
gap-8and does NOT containgap-6 - DashboardSkeleton.tsx does NOT contain
rounded-mdorrounded-full - DashboardSkeleton.tsx contains
gap-8(2 occurrences) andgap-6(1 occurrence for the summary cards grid) bun run buildexits 0 </acceptance_criteria> PageShell uses gap-8 for header-to-content spacing; DashboardSkeleton has no hardcoded rounding and upgraded spacing
- Line 20: Change
-
In ChartEmptyState.tsx line 12: Remove
rounded-lgfrom the cn() className string. The class goes from"flex min-h-[250px] w-full items-center justify-center rounded-lg border border-dashed ..."to"flex min-h-[250px] w-full items-center justify-center border border-dashed ...". -
In QuickAddPicker.tsx:
- Line 156: Remove
rounded-smfrom the picker item className. Goes from"flex w-full items-center gap-2 rounded-sm px-2 py-1.5 ..."to"flex w-full items-center gap-2 px-2 py-1.5 ...". - Line 201: Remove
rounded-fullfrom the category dot className. Goes fromclassName="size-2 rounded-full"toclassName="size-2". cd /home/jlmak/Projects/jlmak/SimpleFinanceDash && bun run build <acceptance_criteria> - CategorySection.tsx does NOT contain
rounded-md - ChartEmptyState.tsx does NOT contain
rounded-lg - QuickAddPicker.tsx does NOT contain
rounded-smorrounded-full bun run buildexits 0 </acceptance_criteria> All 3 shared components have no hardcoded rounding classes; sharp corners enforced everywhere they appear
- Line 156: Remove
<threat_model>
Trust Boundaries
No trust boundaries affected. This plan modifies CSS class strings in component JSX only. No user input handling, no data access, no authentication changes.
STRIDE Threat Register
| Threat ID | Category | Component | Disposition | Mitigation Plan |
|---|---|---|---|---|
| — | — | — | — | No applicable threats — pure CSS class changes |
| </threat_model> |
<success_criteria>
- PageShell provides gap-8 section spacing to all pages
- DashboardSkeleton has sharp skeletons and upgraded spacing
- CategorySection trigger button has no rounded corners
- ChartEmptyState border has no rounded corners
- QuickAddPicker items and dots have no rounded corners
- Build passes cleanly </success_criteria>