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

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