curo1305andClaude Sonnet 4.6
123ae5b29b
Moves phases 08–11 execution artifacts from .planning/phases/ to .planning/milestones/v0.2-phases/ to keep .planning/phases/ clean for the next milestone. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
47 lines
1.9 KiB
Markdown
47 lines
1.9 KiB
Markdown
---
|
|
phase: 11-visual-design-responsive-layout-cleanup
|
|
plan: 5
|
|
type: execute
|
|
wave: 4
|
|
depends_on: [11-04]
|
|
requirements: [VISUAL-01, VISUAL-03, VISUAL-04]
|
|
files_modified:
|
|
- frontend/src/components/**/*.vue
|
|
- frontend/src/views/**/*.vue
|
|
autonomous: true
|
|
---
|
|
|
|
# Plan 11-05 — Visual Consistency Pass
|
|
|
|
## Objective
|
|
|
|
Make spacing, typography, hover, focus-visible, and active states consistent across the frontend without introducing a component-library rewrite.
|
|
|
|
## Tasks
|
|
|
|
1. Preserve legitimate data-driven inline styles:
|
|
- topic color swatches
|
|
- quota/progress widths
|
|
- Teleport dropdown coordinates
|
|
- tree indentation
|
|
2. Remove arbitrary spacing and decorative inline styles unless they are data-driven layout values with no Tailwind equivalent.
|
|
3. Normalize typography to this app scale:
|
|
- page title: `text-2xl font-semibold`
|
|
- section title: `text-lg font-semibold`
|
|
- panel/table heading: `text-sm font-semibold`
|
|
- body: `text-sm`
|
|
- caption/metadata: `text-xs`
|
|
4. Replace generic `focus:ring-*` only patterns on interactive elements with this keyboard focus convention: `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1`.
|
|
5. Ensure buttons, links, card rows, table rows, menu items, and icon actions have coherent hover and active states.
|
|
6. Avoid broad palette changes; preserve the current DocuVault identity while removing one-off visual drift.
|
|
7. Add focused tests or static checks for the agreed invariants where practical.
|
|
|
|
## Acceptance Criteria
|
|
|
|
- No unnecessary `px-[...]`, margin `style=`, or one-off typography overrides remain.
|
|
- Interactive elements have hover plus keyboard-visible focus states.
|
|
- Typography reads as one app scale, not per-component choices.
|
|
- Data-driven inline styles remain where they carry runtime values.
|
|
- Visual changes are behavior-preserving.
|
|
- Frontend tests and build pass.
|