# 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