65 lines
1.9 KiB
Markdown
65 lines
1.9 KiB
Markdown
# Plan 03-02: Dashboard Polish
|
|
|
|
**Goal:** Transform dashboard from "functional but plain" to polished, enterprise-grade experience
|
|
|
|
## Current Issues
|
|
|
|
1. **Header** - Basic brand title, no logo mark like auth pages
|
|
2. **Stat cards** - Plain boxes, no depth or premium feel
|
|
3. **Calendar** - Functional but lacks visual polish
|
|
4. **Coach section** - Avatar icon looks basic, message bubble plain
|
|
5. **Today's workout card** - Needs better visual weight and polish
|
|
6. **Spacing rhythm** - Inconsistent paddings/margins throughout
|
|
|
|
## Implementation
|
|
|
|
### Files to Modify
|
|
|
|
- frontend/src/pages/Dashboard.jsx
|
|
- frontend/src/App.css (dashboard section)
|
|
|
|
### Changes
|
|
|
|
**1. Header Branding**
|
|
- Replace "Gravl" text with Logo component (reuse from LoginPage)
|
|
- Add gradient text or subtle brand treatment
|
|
- Better nav button styling with active states
|
|
|
|
**2. Stat Cards Enhancement**
|
|
- Gradient backgrounds or subtle depth
|
|
- Better number typography (larger, bolder)
|
|
- Icons with color accents
|
|
- Improved spacing and hover states
|
|
|
|
**3. Calendar Polish**
|
|
- Today highlight with brand color
|
|
- Better day cell sizing and spacing
|
|
- Subtle shadows on workout days
|
|
- Smoother transitions
|
|
|
|
**4. Coach Section**
|
|
- Better avatar styling (circle with gradient bg)
|
|
- Message bubble with subtle background
|
|
- Improved typography hierarchy
|
|
|
|
**5. Today's Workout Card**
|
|
- Full-width card with improved styling
|
|
- Better exercise count/time display
|
|
- Arrow button with hover animation
|
|
- Subtle gradient or depth
|
|
|
|
**6. CSS Polish**
|
|
- Consistent section spacing (use --space-* variables)
|
|
- Improve typography scale
|
|
- Add subtle animations/transitions
|
|
- Better mobile touch targets
|
|
|
|
## Success Criteria
|
|
|
|
- [ ] Header uses same Logo component as auth pages
|
|
- [ ] Stat cards feel premium (depth/color/accent)
|
|
- [ ] Calendar has improved today indicator
|
|
- [ ] Coach section looks polished and friendly
|
|
- [ ] Workout card has clear visual hierarchy
|
|
- [ ] Consistent spacing throughout dashboard
|