makiolaj/SimpleFinanceDash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
4bb37ef7eafe4c9652a35f72c4851aa2d3c374b1
SimpleFinanceDash/.planning/phases/05-design-system-token-rework/05-03-PLAN.md
Jean-Luc Makiola e5637511d7 docs(05): create phase 5 design system token rework plans 
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>
2026-04-20 16:53:20 +02:00

250 lines
12 KiB
Markdown
Raw Blame History

---
phase: 05-design-system-token-rework
plan: 03
type: execute
wave: 2
depends_on:
- 05-01
- 05-02
files_modified:
- src/pages/DashboardPage.tsx
- src/pages/BudgetListPage.tsx
- src/pages/BudgetDetailPage.tsx
- src/pages/TemplatePage.tsx
- src/pages/CategoriesPage.tsx
- src/pages/QuickAddPage.tsx
- src/pages/SettingsPage.tsx
- src/pages/LoginPage.tsx
- src/pages/RegisterPage.tsx
autonomous: false
requirements:
- DS-01
- DS-02
- DS-03
must_haves:
truths:
- "All 9 pages have no hardcoded rounded-* classes remaining"
- "All 9 pages have upgraded spacing (space-y-8, gap-8 for sections)"
- "Visual pass confirms sharp corners, colorful pastels, and generous whitespace everywhere"
artifacts:
- path: "src/pages/DashboardPage.tsx"
provides: "Dashboard with space-y-8 and gap-8 section spacing"
contains: "space-y-8"
- path: "src/pages/BudgetListPage.tsx"
provides: "Budget list without rounded-md on row containers"
- path: "src/pages/BudgetDetailPage.tsx"
provides: "Budget detail without rounded-sm/md/full, upgraded spacing"
- path: "src/pages/TemplatePage.tsx"
provides: "Template page without rounded-sm/full, upgraded spacing"
- path: "src/pages/CategoriesPage.tsx"
provides: "Categories page without rounded-sm/full, upgraded spacing"
- path: "src/pages/QuickAddPage.tsx"
provides: "Quick add page without rounded-full/md"
- path: "src/pages/SettingsPage.tsx"
provides: "Settings page with space-y-6 card content spacing"
- path: "src/pages/LoginPage.tsx"
provides: "Login page verified (token cascade handles Card rounding)"
- path: "src/pages/RegisterPage.tsx"
provides: "Register page verified (token cascade handles Card rounding)"
key_links:
- from: "all 9 pages"
to: "src/index.css"
via: "--radius: 0 token cascade through Tailwind utilities"
pattern: "no rounded-full or rounded-sm or rounded-md classes remain"
---
<objective>
Sweep all 9 pages to remove hardcoded rounded-* classes and upgrade spacing values. Finish with a visual verification checkpoint across all pages.
Purpose: Complete the per-page visual rework ensuring DS-01 (sharp edges), DS-02 (colorful pastels visible), and DS-03 (generous whitespace) are met everywhere.
Output: 9 modified page files with no rounding and upgraded spacing + visual confirmation.
</objective>
<execution_context>
@.planning/phases/05-design-system-token-rework/05-RESEARCH.md
@.planning/phases/05-design-system-token-rework/05-PATTERNS.md
@.planning/phases/05-design-system-token-rework/05-UI-SPEC.md
</execution_context>
<context>
@.planning/ROADMAP.md
@.planning/STATE.md
@.planning/phases/05-design-system-token-rework/05-01-SUMMARY.md
@.planning/phases/05-design-system-token-rework/05-02-SUMMARY.md
<interfaces>
<!-- From 05-PATTERNS.md: Complete inventory of hardcoded rounded-* per page -->
DashboardPage.tsx: No hardcoded rounded-* classes. Spacing: space-y-6 -> space-y-8 (line 186), gap-6 -> gap-8 (line 207).
BudgetListPage.tsx: Line 243 rounded-md on row div. Spacing: gap-4 -> gap-6, gap-6 -> gap-8, space-y-6 -> space-y-8 where present.
BudgetDetailPage.tsx: Lines 290 (rounded-sm), 303 (rounded-md), 353 (rounded-sm), 439 (rounded-md), 497 (rounded-full). Spacing: verify no space-y-6/gap-6 remain.
TemplatePage.tsx: Lines 250 (rounded-sm), 256 (rounded-full), 258 (rounded-md), 292 (rounded-sm), 385 (rounded-full). Spacing: 247 space-y-6->space-y-8, 268 gap-6->gap-8, 287 space-y-6->space-y-8.
CategoriesPage.tsx: Lines 101 (rounded-sm), 107 (rounded-full), 108 (rounded-md), 134 (rounded-sm). Spacing: 98 space-y-6->space-y-8, 130 space-y-6->space-y-8.
QuickAddPage.tsx: Lines 98 (rounded-full), 100 (rounded-md). No major spacing changes.
SettingsPage.tsx: No rounded-* classes. Spacing: line 87 space-y-4->space-y-6 in CardContent.
LoginPage.tsx: No rounded-* classes. Token cascade handles Card. Verify p-4->p-6 if card content wrapper has p-4.
RegisterPage.tsx: No rounded-* classes. Token cascade handles Card. Verify p-4->p-6 if card content wrapper has p-4.
</interfaces>
</context>
<tasks>
<task type="auto">
<name>Task 1: Remove rounded-* and upgrade spacing on all 9 pages</name>
<files>src/pages/DashboardPage.tsx, src/pages/BudgetListPage.tsx, src/pages/BudgetDetailPage.tsx, src/pages/TemplatePage.tsx, src/pages/CategoriesPage.tsx, src/pages/QuickAddPage.tsx, src/pages/SettingsPage.tsx, src/pages/LoginPage.tsx, src/pages/RegisterPage.tsx</files>
<read_first>src/pages/DashboardPage.tsx, src/pages/BudgetListPage.tsx, src/pages/BudgetDetailPage.tsx, src/pages/TemplatePage.tsx, src/pages/CategoriesPage.tsx, src/pages/QuickAddPage.tsx, src/pages/SettingsPage.tsx, src/pages/LoginPage.tsx, src/pages/RegisterPage.tsx</read_first>
<action>
Apply two categories of changes to each page: (A) remove hardcoded rounded-* classes, (B) upgrade spacing values. Use the exact inventory from 05-PATTERNS.md.
**DashboardPage.tsx:**
- (B) Line ~186: `space-y-6` -> `space-y-8`
- (B) Line ~207: `gap-6` -> `gap-8`
**BudgetListPage.tsx:**
- (A) Line ~243: Remove `rounded-md` from `"flex items-center gap-3 rounded-md border p-3"` -> `"flex items-center gap-3 border p-3"`
- (B) Upgrade any `gap-4` -> `gap-6`, `gap-6` -> `gap-8`, `space-y-6` -> `space-y-8` found in the file
**BudgetDetailPage.tsx:**
- (A) Line ~290: Remove `rounded-sm` from skeleton header div className
- (A) Line ~303: Remove `rounded-md` from `<Skeleton>` className
- (A) Line ~353: Remove `rounded-sm` from group heading div className `"mb-2 flex items-center gap-3 rounded-sm border-l-4 bg-muted/30 px-3 py-2"` -> `"mb-2 flex items-center gap-3 border-l-4 bg-muted/30 px-3 py-2"`
- (A) Line ~439: Remove `rounded-md` from summary box `"rounded-md border p-4"` -> `"border p-4"`
- (A) Line ~497: Remove `rounded-full` from SelectLabel category dot `"size-2 rounded-full"` -> `"size-2"`
- (B) Verify existing space-y-8 at line ~338 is correct. Upgrade any remaining space-y-6 or gap-6 instances.
**TemplatePage.tsx:**
- (A) Line ~250: Remove `rounded-sm` from skeleton group heading div
- (A) Line ~256: Remove `rounded-full` from `<Skeleton>` className
- (A) Line ~258: Remove `rounded-md` from `<Skeleton>` className
- (A) Line ~292: Remove `rounded-sm` from template item group heading div `"mb-2 flex items-center gap-3 rounded-sm border-l-4 bg-muted/30 px-3 py-2"` -> `"mb-2 flex items-center gap-3 border-l-4 bg-muted/30 px-3 py-2"`
- (A) Line ~385: Remove `rounded-full` from SelectLabel category dot `"size-2 rounded-full"` -> `"size-2"`
- (B) Line ~247: `space-y-6` -> `space-y-8`
- (B) Line ~268: `gap-6` -> `gap-8`
- (B) Line ~287: `space-y-6` -> `space-y-8`
**CategoriesPage.tsx:**
- (A) Line ~101: Remove `rounded-sm` from skeleton group heading div
- (A) Line ~107: Remove `rounded-full` from `<Skeleton>` className
- (A) Line ~108: Remove `rounded-md` from `<Skeleton>` className
- (A) Line ~134: Remove `rounded-sm` from category group heading div `"mb-2 flex items-center gap-3 rounded-sm border-l-4 bg-muted/30 px-3 py-2"` -> `"mb-2 flex items-center gap-3 border-l-4 bg-muted/30 px-3 py-2"`
- (B) Line ~98: `space-y-6` -> `space-y-8`
- (B) Line ~130: `space-y-6` -> `space-y-8`
**QuickAddPage.tsx:**
- (A) Line ~98: Remove `rounded-full` from `<Skeleton>` className
- (A) Line ~100: Remove `rounded-md` from `<Skeleton>` className
**SettingsPage.tsx:**
- (B) Line ~87: `space-y-4` -> `space-y-6` in CardContent className
- (B) Also check skeleton equivalent (~line 69) for same `space-y-4` -> `space-y-6`
**LoginPage.tsx:**
- No rounded-* to remove (Card uses token cascade).
- (B) Check for any `p-4` on card content wrappers and upgrade to `p-6` if found. If no `p-4` exists (CardContent already uses px-6 from shadcn defaults), no change needed.
**RegisterPage.tsx:**
- Same as LoginPage -- check for `p-4` card content wrapper upgrades.
**IMPORTANT:** Line numbers are approximate from the PATTERNS.md inventory. Read each file first to find the exact locations. Search for the exact class strings listed above.
</action>
<verify>
<automated>cd /home/jlmak/Projects/jlmak/SimpleFinanceDash && bun run build && grep -rn "rounded-full\|rounded-sm\|rounded-md\|rounded-lg" src/pages/ || echo "NO HARDCODED ROUNDED CLASSES FOUND IN PAGES - PASS"</automated>
</verify>
<acceptance_criteria>
- grep -rn "rounded-full\|rounded-sm\|rounded-md\|rounded-lg" src/pages/ returns NO matches
- DashboardPage.tsx contains `space-y-8` and `gap-8`
- BudgetListPage.tsx does NOT contain `rounded-md`
- BudgetDetailPage.tsx does NOT contain `rounded-sm` or `rounded-md` or `rounded-full`
- TemplatePage.tsx does NOT contain `rounded-sm` or `rounded-full` or `rounded-md`
- CategoriesPage.tsx does NOT contain `rounded-sm` or `rounded-full` or `rounded-md`
- QuickAddPage.tsx does NOT contain `rounded-full` or `rounded-md`
- SettingsPage.tsx contains `space-y-6` in CardContent
- `bun run build` exits 0
</acceptance_criteria>
<done>All 9 pages have zero hardcoded rounded-* classes and upgraded spacing values</done>
</task>
<task type="checkpoint:human-verify" gate="blocking">
<name>Task 2: Visual verification of all 9 pages</name>
<what-built>
Complete design system token rework across all files:
- --radius: 0 (sharp corners on all shadcn components)
- Category fill colors raised to 0.22+ chroma (vibrant pastels)
- Background warmed to 0.01 chroma
- Chart color vars deleted and replaced with fill token references
- All hardcoded rounded-* classes removed from pages and shared components
- Spacing upgraded: gap-8 section gaps, space-y-8 section rhythm, p-6 card padding
- CSS overrides for Recharts bars and Sonner toasts
</what-built>
<how-to-verify>
1. Run `bun run dev` to start the dev server
2. Open the app in your browser
3. Check each of the 9 pages against this checklist:
**Sharp corners (DS-01):**
- [ ] Dashboard: Cards, buttons, chart containers all have sharp corners
- [ ] Budget List: Row containers have sharp corners
- [ ] Budget Detail: Group headings, summary box, select dots all sharp
- [ ] Template: Group headings, skeleton placeholders, category dots all sharp
- [ ] Categories: Group headings, skeleton placeholders all sharp
- [ ] Quick Add: Picker items, category dots all sharp
- [ ] Settings: Card and form elements all sharp
- [ ] Login: Auth card sharp
- [ ] Register: Auth card sharp
- [ ] Recharts bar charts have square ends (no rounded caps)
- [ ] Any toast notifications have sharp corners
**Colorful pastels (DS-02):**
- [ ] Category color swatches are visibly colorful against white backgrounds (not washed-out or grey)
- [ ] Chart bar colors are vibrant and distinct from each other
**Generous whitespace (DS-03):**
- [ ] Section gaps feel spacious (not crowded)
- [ ] Card internal padding feels generous
- [ ] Page headers have consistent spacing before first content section
</how-to-verify>
<resume-signal>Type "approved" if all checks pass, or describe any visual issues found</resume-signal>
</task>
</tasks>
<threat_model>
## Trust Boundaries
No trust boundaries affected. This plan modifies CSS class strings in page JSX only.
## STRIDE Threat Register
| Threat ID | Category | Component | Disposition | Mitigation Plan |
|-----------|----------|-----------|-------------|-----------------|
| — | — | — | — | No applicable threats — pure CSS class changes |
</threat_model>
<verification>
- `bun run build` passes
- grep confirms zero rounded-full/sm/md/lg in src/pages/
- Human visual pass confirms all 9 pages meet DS-01, DS-02, DS-03
</verification>
<success_criteria>
- Zero hardcoded rounded-* classes remain across all 9 page files
- All spacing values upgraded per the mapping (space-y-8, gap-8 for sections)
- Human confirms sharp corners visible on every page
- Human confirms category colors are vibrant (not grey/washed-out)
- Human confirms generous whitespace between sections
- Build passes cleanly
</success_criteria>
<output>
After completion, create `.planning/phases/05-design-system-token-rework/05-03-SUMMARY.md`
</output>
Reference in New Issue View Git Blame Copy Permalink