109 lines
4.0 KiB
Markdown
109 lines
4.0 KiB
Markdown
---
|
|
phase: 05-design-system-token-rework
|
|
plan: "02"
|
|
subsystem: frontend-components
|
|
tags: [design-system, sharp-corners, spacing, shared-components]
|
|
dependency_graph:
|
|
requires: []
|
|
provides: [sharp-corners-in-shared-components, gap-8-page-spacing]
|
|
affects: [all-9-pages, dashboard-skeleton, category-sections, chart-empty-states, quick-add-picker]
|
|
tech_stack:
|
|
added: []
|
|
patterns: [remove-hardcoded-rounded-classes, upgrade-gap-spacing]
|
|
key_files:
|
|
modified:
|
|
- src/components/shared/PageShell.tsx
|
|
- src/components/dashboard/DashboardSkeleton.tsx
|
|
- src/components/dashboard/CategorySection.tsx
|
|
- src/components/dashboard/charts/ChartEmptyState.tsx
|
|
- src/components/QuickAddPicker.tsx
|
|
decisions:
|
|
- "Upgraded DashboardSkeleton summary-cards grid from gap-4 to gap-6 (not gap-8) to match plan spec for the inner card grid"
|
|
- "Upgraded DashboardSkeleton chart grid from gap-6 to gap-8 as specified"
|
|
metrics:
|
|
duration: "91s"
|
|
completed: "2026-04-20"
|
|
tasks_completed: 2
|
|
tasks_total: 2
|
|
files_modified: 5
|
|
---
|
|
|
|
# Phase 05 Plan 02: Shared Component Rounding and Spacing Cleanup Summary
|
|
|
|
Sharp corners enforced across all 5 shared components by removing hardcoded `rounded-*` classes, and page-level spacing upgraded from `gap-6` to `gap-8` in PageShell propagating to all 9 pages.
|
|
|
|
## Tasks Completed
|
|
|
|
| Task | Name | Commit | Files Modified |
|
|
|------|------|--------|----------------|
|
|
| 1 | Upgrade PageShell spacing and remove rounded-* from DashboardSkeleton | e8f13c9 | PageShell.tsx, DashboardSkeleton.tsx |
|
|
| 2 | Remove rounded-* from CategorySection, ChartEmptyState, QuickAddPicker | e7282fa | CategorySection.tsx, ChartEmptyState.tsx, QuickAddPicker.tsx |
|
|
|
|
## Changes Made
|
|
|
|
### Task 1: PageShell + DashboardSkeleton
|
|
|
|
**PageShell.tsx**
|
|
- `gap-6` → `gap-8` in the root flex container (line 15) — applies generous section spacing across all 9 pages
|
|
|
|
**DashboardSkeleton.tsx**
|
|
- Outer flex: `gap-6` → `gap-8`
|
|
- Summary cards grid: `gap-4` → `gap-6`
|
|
- Chart area grid: `gap-6` → `gap-8`
|
|
- Removed `rounded-md` from 3 chart skeleton `<Skeleton>` elements
|
|
- Removed `rounded-md` from collapsible section row `<div>`
|
|
- Removed `rounded-full` from 2 badge `<Skeleton>` elements (2 occurrences via replace_all)
|
|
|
|
### Task 2: CategorySection + ChartEmptyState + QuickAddPicker
|
|
|
|
**CategorySection.tsx**
|
|
- Removed `rounded-md` from collapsible trigger `<button>` — sharp left-bordered row maintained via `border-l-4`
|
|
|
|
**ChartEmptyState.tsx**
|
|
- Removed `rounded-lg` from the dashed-border container div — sharp rectangular empty state
|
|
|
|
**QuickAddPicker.tsx**
|
|
- Removed `rounded-sm` from picker item `<button>` elements in the popover list
|
|
- Removed `rounded-full` from the category type dot indicator `<div>`
|
|
|
|
## Verification
|
|
|
|
```
|
|
bun run build → exit 0 (both tasks)
|
|
grep rounded-md PageShell.tsx → 0 matches
|
|
grep rounded-md DashboardSkeleton.tsx → 0 matches
|
|
grep rounded-full DashboardSkeleton.tsx → 0 matches
|
|
grep rounded-md CategorySection.tsx → 0 matches
|
|
grep rounded-lg ChartEmptyState.tsx → 0 matches
|
|
grep rounded-sm QuickAddPicker.tsx → 0 matches
|
|
grep rounded-full QuickAddPicker.tsx → 0 matches
|
|
grep gap-8 PageShell.tsx → 1 match ✓
|
|
```
|
|
|
|
## Deviations from Plan
|
|
|
|
None — plan executed exactly as written.
|
|
|
|
## Known Stubs
|
|
|
|
None — this plan modifies only CSS class strings. No data wiring or UI stubs introduced.
|
|
|
|
## Threat Flags
|
|
|
|
None — pure CSS class changes, no security-relevant surface modified.
|
|
|
|
## Self-Check
|
|
|
|
**Commits exist:**
|
|
- e8f13c9: feat(05-02): upgrade PageShell spacing to gap-8 and remove rounded-* from DashboardSkeleton
|
|
- e7282fa: feat(05-02): remove hardcoded rounded-* from CategorySection, ChartEmptyState, QuickAddPicker
|
|
|
|
**Files exist:**
|
|
- src/components/shared/PageShell.tsx — modified
|
|
- src/components/dashboard/DashboardSkeleton.tsx — modified
|
|
- src/components/dashboard/CategorySection.tsx — modified
|
|
- src/components/dashboard/charts/ChartEmptyState.tsx — modified
|
|
- src/components/QuickAddPicker.tsx — modified
|
|
|
|
## Self-Check: PASSED
|