03-03: Workout Experience Polish - enhanced exercise cards, progress badges, rest timer, KLART button, warmup styling

2026-02-28 23:47:36 +01:00
parent 718b210a14
commit 3d28d9985b
4 changed files with 205 additions and 27 deletions
@@ -0,0 +1,64 @@
+# 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