Files

T

clawd 8301803a6f 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

2026-02-28 21:25:23 +01:00

2.2 KiB

Raw Blame History

Plan 03-01: Login/Onboarding Polish

\Goal: Transform auth pages from "hobby app" to enterprise-grade fitness product

Current Issues

Emoji branding - $ \nCravl" looks amateur, violates design system (no emojis)
Basic form styling - No visual polish, lacks professional feel
Missing brand presence - No logo mark, weak visual identity
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 = () => ( );

2. LoginPage Changes

Remove \nGavl" h1
Add Logo component above "Logga in"
Update to: +
Logga in
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.

2.2 KiB Raw Blame History Unescape Escape