74 lines
2.5 KiB
Markdown
74 lines
2.5 KiB
Markdown
# 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
|