gravl/.planning/phases/03-design-polish/03-02-PLAN.md

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