design: WorkoutPage Hevy-style redesign + AlternativeModal + backend API
- Add GET /api/exercises/:id/alternatives endpoint - Add GET /api/exercises/:id/last-workout endpoint - New AlternativeModal component for swapping exercises - WorkoutPage: single-tap logging, +/- buttons, rest timer - Updated Icons with new workout icons - Polish: card shadows, borders, micro-interactions - Tasks directory for project management
This commit is contained in:
@@ -0,0 +1,70 @@
|
||||
# Plan 03-01: Login/Onboarding Polish
|
||||
|
||||
**\Goal:** Transform auth pages from "hobby app" to enterprise-grade fitness product
|
||||
|
||||
## Current Issues
|
||||
|
||||
1. **Emoji branding** - $ \nCravl\" looks amateur, violates design system (no emojis)
|
||||
2. **Basic form styling** - No visual polish, lacks professional feel
|
||||
3. **Missing brand presence** - No logo mark, weak visual identity
|
||||
4. **Form interactions** - No focus states, weak error presentation
|
||||
|
||||
## Implementation
|
||||
|
||||
### Files to Modify
|
||||
|
||||
- frontend/src/pages/LoginPage.jsx
|
||||
- frontend/src/pages/RegisterPage.jsx
|
||||
- frontend/src/App.css (auth section)
|
||||
|
||||
### Changes
|
||||
|
||||
**1. Branding Component**
|
||||
Create SVG logo mark - abstract barbell/rack silhouette (single color, clean lines):
|
||||
const Logo = () => (
|
||||
<svg viewBox="0 0 48 48" className="logo-mark">
|
||||
<path d="M12 16h4v16h-4zM20 12h8v24h-8zM32 16h4v16h-4z" fill="currentColor"/>
|
||||
<rect x="8" y="20" width="4" height="8"/>
|
||||
<rect x="36" y="20" width="4" height="8"/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
**2. LoginPage Changes**
|
||||
- Remove \nGavl\" h1
|
||||
- Add Logo component above \"Logga in\"
|
||||
- Update to: <Logo /> + <h1 className="auth-title">Logga in</h1>
|
||||
- Add subtle tagline under title: \"Din personliga träningspartner\"
|
||||
- Improve error display with animation/fade-in
|
||||
|
||||
**3. RegisterPage Changes**
|
||||
- Same logo/title treatment
|
||||
- Tagline: \"Börja din träningsresa\"
|
||||
- Form field focus improvements
|
||||
|
||||
**4. CSS Updates (App.css auth section)**
|
||||
Add professional polish: gradient background, improved card styling with shadows, focus states, animations, proper spacing.
|
||||
|
||||
- auth-page: add gradient bg, better spacing
|
||||
- auth-card: add borter, shadow, padding
|
||||
- logo-mark: 56px svg, accent color
|
||||
- auth-title: centered, font-2xl
|
||||
- auth-tagline: text-secondary, small
|
||||
- input focus: indicator (accent border + glow)
|
||||
- button: hover/active states, scale effect
|
||||
- error: animated error box
|
||||
|
||||
|
||||
## Verification
|
||||
|
||||
- [ ] No emojis remain on auth pages
|
||||
- [ ] Logo mark displays correctly (56px, accent color)
|
||||
- [ ] Tagline visible under title
|
||||
- [ ] Focus states work on inputs (accent border + glow)
|
||||
- [ ] Error messages animate in smoothly
|
||||
- [ ] Button hover/active states feel responsive
|
||||
- [ ] Card has proper shadow and border
|
||||
- [ ] Form is centered vertically on mobile/desktop
|
||||
|
||||
## Blockers
|
||||
|
||||
None - frontend only changes.
|
||||
Reference in New Issue
Block a user