diff --git a/.planning/phases/03-design-polish/03-02-PLAN.md b/.planning/phases/03-design-polish/03-02-PLAN.md new file mode 100644 index 0000000..c45b9db --- /dev/null +++ b/.planning/phases/03-design-polish/03-02-PLAN.md @@ -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 diff --git a/.planning/phases/03-design-polish/03-03-PLAN.md b/.planning/phases/03-design-polish/03-03-PLAN.md new file mode 100644 index 0000000..37e5317 --- /dev/null +++ b/.planning/phases/03-design-polish/03-03-PLAN.md @@ -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 diff --git a/.pm-checkpoint.json b/.pm-checkpoint.json index a51114d..8ca2995 100644 --- a/.pm-checkpoint.json +++ b/.pm-checkpoint.json @@ -1,13 +1,8 @@ { - "lastRun": "2026-02-28T22:49:00+01:00", - "status": "completed", - "tasksCompleted": [ - "emoji-replacement", - "alternative-modal", - "workout-page-ux-redesign", - "chat-onboarding", - "03-01-login-onboarding-polish" - ], - "currentPhase": "03-design-polish", - "notes": "03-01 klar: Logo.jsx med SVG barbell, LoginPage/RegisterPage uppdaterade med logotyp, taglines, index.css polerad med animationer." + "lastRun": "2026-02-28T23:33:00+01:00", + "status": "in_progress", + "tasksCompleted": ["emoji-replacement", "alternative-modal", "workout-page-ux-redish", "chat-onboarding", "03-01-login-onboarding-polish", "03-02-dashboard-polish"], + "activeTask": "03-03-workout-experience", + "nextTask": null, + "notes": "Starting 03-03 Workout Experience Polish - spawning frontend agent" } diff --git a/frontend/src/App.css b/frontend/src/App.css index 9f665e4..0ae13cd 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -133,7 +133,7 @@ .day-card { background: var(--bg-card); - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); padding: var(--space-4); margin-bottom: var(--space-3); cursor: pointer; @@ -234,7 +234,7 @@ .exercise-card { background: var(--bg-card); - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); margin-bottom: var(--space-3); overflow: hidden; border: 1px solid var(--border); @@ -459,7 +459,7 @@ .klart-btn { width: 100%; min-height: 52px; - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); background: var(--accent); color: white; border: none; @@ -851,7 +851,7 @@ color: white; border: none; padding: var(--space-4); - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); font-size: var(--font-base); font-weight: 600; cursor: pointer; @@ -925,7 +925,7 @@ .stat-card { background: var(--bg-card); - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); padding: var(--space-4); text-align: center; border: 1px solid var(--border); @@ -990,7 +990,7 @@ gap: var(--space-4); background: var(--bg-card); padding: var(--space-4); - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); border: 1px solid var(--border); cursor: pointer; transition: all var(--transition-base); @@ -1384,7 +1384,7 @@ .measurement-card { background: var(--bg-secondary); padding: var(--space-4); - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); display: flex; flex-direction: column; align-items: center; @@ -1418,7 +1418,7 @@ justify-content: space-between; padding: var(--space-4); background: var(--bg-secondary); - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); } .strength-exercise { @@ -1445,7 +1445,7 @@ gap: var(--space-2); background: var(--bg-card); padding: var(--space-2); - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); border: 1px solid var(--border); } @@ -1666,7 +1666,7 @@ .rest-timer-btn { min-height: 48px; - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); border: 1px solid var(--border); font-weight: 600; cursor: pointer; @@ -1888,7 +1888,7 @@ padding: var(--space-4); background: var(--bg-secondary); border: 2px dashed var(--border); - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); color: var(--text-muted); font-size: var(--font-sm); cursor: pointer; @@ -2502,7 +2502,7 @@ width: 56px; height: 56px; min-width: 56px; - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; @@ -2583,7 +2583,7 @@ background: var(--accent); color: white; border: none; - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); font-size: var(--font-lg); font-weight: 600; cursor: pointer; @@ -2687,7 +2687,7 @@ width: 100%; background: var(--bg-elevated); border: 1.5px solid var(--border); - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); padding: var(--space-4) var(--space-5); color: var(--text-primary); font-size: 16px; /* prevents iOS auto-zoom */ @@ -2711,7 +2711,7 @@ background: var(--accent); color: white; border: none; - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); font-size: var(--font-base); font-weight: 600; cursor: pointer; @@ -2860,7 +2860,7 @@ /* ── Calendar day cells: tighter spacing, better font ────── */ .calendar-day { - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); gap: var(--space-1); min-height: 64px; } @@ -2912,3 +2912,49 @@ .week-calendar { animation: sectionIn 300ms ease both; } .coach-section { animation: sectionIn 300ms ease 80ms both; } .quick-stats { animation: sectionIn 300ms ease 160ms both; } +/* WORKOUT POLISH - 03-03 */ +.exercise-card { position: relative; } +.exercise-card::before { + content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; + background: linear-gradient(90deg, var(--accent), #ff8a65); opacity: 0; + transition: opacity 0.2s ease; +} +.exercise-card.expanded::before { opacity: 1; } +.exercise-card.all-done::before { + background: linear-gradient(90deg, var(--success), #4ade80); opacity: 1; +} +.exercise-info h3 { font-size: var(--font-lg); font-weight: 700; } +.muscle-group { + display: inline-block; font-size: var(--font-xs); font-weight: 600; + text-transform: uppercase; padding: var(--space-1) var(--space-2); + background: var(--bg-tertiary); border-radius: var(--radius-full); +} +.progress-badge { + background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary)); +} +.progress-badge.complete { + background: linear-gradient(135deg, var(--success), #16a34a); + box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3); +} +.rest-timer-card { + box-shadow: 0 4px 16px rgba(255, 107, 74, 0.1); +} +.rest-timer-time.running { + text-shadow: 0 0 20px rgba(255, 107, 74, 0.4); + animation: pulse-timer 1s ease-in-out infinite; +} +@keyframes pulse-timer { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } +.klart-btn { + background: linear-gradient(135deg, var(--accent), #e85a3c); + border-radius: var(--radius-xl); +} +.klart-btn.done { + background: linear-gradient(135deg, var(--success), #16a34a); + animation: success-bounce 0.5s ease; +} +@keyframes success-bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } +.warmup-check { + width: 22px; height: 22px; border-radius: var(--radius-md); + border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; +} +.warmup-item.done .warmup-check { background: var(--success); border-color: var(--success); color: white; }