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
@@ -0,0 +1,73 @@
+# Plan 03-03: Workout Experience Polish
+
+**Goal:** Transform the workout session from "functional" to a polished, motivating experience
+
+## Current Issues
+
+1. **Exercise cards** - Plain layout, no visual polish, basic text styling
+2. **Set logging UX** - Stepper inputs work but lack visual refinement
+3. **Progress indicators** - Progress badges are basic, no visual hierarchy
+4. **Warmup section** - Collapsible but visually plain, checklist items lack polish
+5. **Rest timer** - Functional but doesn't feel integrated or premium
+6. **Alternative exercise modal** - Just implemented (02-02), needs polish pass
+
+## Implementation
+
+### Files to Modify
+
+- frontend/src/pages/WorkoutPage.jsx
+- frontend/src/components/AlternativeModal.jsx
+- frontend/src/App.css (workout section)
+
+### Changes
+
+**1. Exercise Cards Enhancement**
+- Add subtle card depth/shadow
+- Better exercise name typography (larger, weight hierarchy)
+- Muscle group badges with color coding
+- Improved spacing between elements
+- Subtle hover/focus states for interactive elements
+
+**2. Set Logging UX Polish**
+- Refined stepper input styling (consistent with dashboard buttons)
+- Better "Log Set" button - more prominent when active
+- Clearer visual distinction between logged/unlogged sets
+- Improved checkmark animation on completion
+
+**3. Progress Indicators**
+- Premium progress badges (gradient or subtle depth)
+- Better "All Done" state - celebration micro-interaction
+- Visual progress bar or completion percentage
+
+**4. Warmup Section Polish**
+- Cleaner checklist styling (custom checkboxes)
+- Better expansion animation
+- Subtle completion progress indicator
+
+**5. Rest Timer Enhancement**
+- Better visual integration with set cards
+- Circular progress indicator or countdown animation
+- Brand color accent when timer active
+- Gentle pulse animation when running
+
+**6. Alternative Modal Polish**
+- Consistent styling with other modals
+- Better exercise card layouts in modal
+- Hover states for alternative options
+
+**7. CSS Polish**
+- Consistent use of CSS variables (--space-*, --radius-*)
+- Better typography scale for workout context
+- Subtle animations (card entry, completion)
+- Mobile-optimized spacing
+
+## Success Criteria
+
+- [ ] Exercise cards have visual depth and hierarchy
+- [ ] Set logging feels smooth and responsive
+- [ ] Progress badges look premium
+- [ ] Warmup section feels motivating, not tedious
+- [ ] Rest timer is visually integrated
+- [ ] Alternative modal matches app polish level
+- [ ] All animations feel smooth (not janky)
+- [ ] Mobile experience is thumb-friendly