From e629a20cec45447ccbe83e6bf42653a013e9b44a Mon Sep 17 00:00:00 2001 From: Clawd Date: Sun, 1 Feb 2026 19:45:03 +0100 Subject: [PATCH] Design overhaul: Dark fitness theme, no emojis CSS: - Dark background (#0a0a0f, #0d0d12, #15151b) - Orange accent (#ff6b35) - Muted text (#a1a1aa, #71717a) - Inter font from Google Fonts - Workout type colors (push/pull/legs/etc) Dashboard: - Calendar dots are CSS circles, not emoji - Coach avatar uses SVG icon - All emojis replaced with Icons.jsx SVGs - Navigation uses proper icons WorkoutPage: - Warmup exercises without emojis - Check icons instead of emoji checkmarks - Arrow icons for navigation - Fire icon for warmup section Professional fitness app aesthetic inspired by Nike/FITBOD --- frontend/index.html | 5 ++- frontend/src/App.css | 54 ++++++++++++++++++++++-------- frontend/src/index.css | 50 ++++++++++++++++++++------- frontend/src/pages/Dashboard.jsx | 2 +- frontend/src/pages/WorkoutPage.jsx | 44 ++++++++++++++---------- 5 files changed, 109 insertions(+), 46 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index e56959f..b7c037c 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,9 +4,12 @@ - + + + + Gravl - Träning diff --git a/frontend/src/App.css b/frontend/src/App.css index 003ec2c..3a1b153 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -461,15 +461,15 @@ } .coach-avatar { - font-size: 2.5rem; - width: 60px; - height: 60px; - background: rgba(255,255,255,0.2); + width: 52px; + height: 52px; + background: rgba(255,255,255,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; + color: rgba(255,255,255,0.9); } .coach-message { @@ -549,13 +549,6 @@ color: white; } -.calendar-day.has-workout .day-dot { - color: var(--success); -} - -.calendar-day.today .day-dot { - color: white; -} .day-name { font-size: 0.7rem; @@ -574,10 +567,17 @@ } .day-dot { - font-size: 0.5rem; + width: 4px; + height: 4px; + border-radius: 50%; + background: var(--success); margin-top: 0.25rem; } +.calendar-day.today .day-dot { + background: rgba(255,255,255,0.8); +} + /* Today's Workout */ .todays-workout { display: flex; @@ -731,6 +731,19 @@ text-transform: uppercase; } +.stat-icon { + display: flex; + align-items: center; + justify-content: center; +} + +/* Brand title with icon */ +.brand-title { + display: flex; + align-items: center; + gap: 0.5rem; +} + /* Upcoming Workouts */ .upcoming-workouts h2 { font-size: 1.1rem; @@ -818,6 +831,9 @@ font-size: 1rem; cursor: pointer; padding: 0.5rem; + display: flex; + align-items: center; + gap: 0.25rem; } /* Page Main */ @@ -1242,7 +1258,9 @@ } .warmup-icon { - font-size: 1.5rem; + display: flex; + align-items: center; + color: var(--accent); } .warmup-title h2 { @@ -1260,7 +1278,8 @@ } .expand-icon { - font-size: 0.75rem; + display: flex; + align-items: center; color: var(--text-muted); transition: transform 0.2s; } @@ -1362,6 +1381,10 @@ font-size: 0.95rem; cursor: pointer; transition: all 0.2s; + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; } .warmup-done-btn:hover { @@ -1573,6 +1596,9 @@ } .tip-badge { + display: flex; + align-items: center; + gap: 0.4rem; background: var(--bg-secondary); border: 1px solid var(--border); padding: 0.5rem 0.75rem; diff --git a/frontend/src/index.css b/frontend/src/index.css index 5c53841..424d6ff 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -5,21 +5,43 @@ } :root { - --bg-primary: #0f0f1a; - --bg-secondary: #1a1a2e; - --bg-card: #16213e; - --bg-card-hover: #1f3460; - --text-primary: #eaeaea; - --text-secondary: #a0a0a0; - --accent: #e94560; - --accent-hover: #ff6b6b; - --success: #4ecca3; - --warning: #ffd93d; - --border: #2a2a4a; + /* Dark fitness palette */ + --bg-primary: #0a0a0f; + --bg-secondary: #0d0d12; + --bg-card: #15151b; + --bg-card-hover: #1a1a22; + --bg: #0a0a0f; + + /* Text colors */ + --text-primary: #ffffff; + --text-secondary: #a1a1aa; + --text-muted: #71717a; + --text: #ffffff; + + /* Accent - energetic orange */ + --accent: #ff6b35; + --accent-hover: #ff8555; + + /* Status colors */ + --success: #22c55e; + --warning: #f59e0b; + --error: #ef4444; + + /* Border */ + --border: #1f1f28; + + /* Workout type colors - muted, professional */ + --workout-push: #ef4444; + --workout-pull: #3b82f6; + --workout-legs: #22c55e; + --workout-shoulders: #f59e0b; + --workout-upper: #8b5cf6; + --workout-lower: #06b6d4; + --workout-default: #ff6b35; } html, body { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; @@ -27,6 +49,10 @@ html, body { -moz-osx-font-smoothing: grayscale; } +h1, h2, h3, h4, h5, h6 { + font-weight: 700; +} + #root { min-height: 100vh; } diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx index ee18d3e..fe6ae9f 100644 --- a/frontend/src/pages/Dashboard.jsx +++ b/frontend/src/pages/Dashboard.jsx @@ -136,7 +136,7 @@ function Dashboard({ onStartWorkout, onNavigate }) { > {name} {date.getDate()} - {hasWorkout && } + {hasWorkout && } ) })} diff --git a/frontend/src/pages/WorkoutPage.jsx b/frontend/src/pages/WorkoutPage.jsx index 03bb1ce..e9789d6 100644 --- a/frontend/src/pages/WorkoutPage.jsx +++ b/frontend/src/pages/WorkoutPage.jsx @@ -1,13 +1,14 @@ import { useState, useEffect } from 'react' +import { Icon } from '../components/Icons' // Uppvärmningsövningar baserat på muskelgrupp const warmupExercises = { general: [ - { name: 'Cykel eller roddmaskin', duration: '5 min', icon: '🚴' }, - { name: 'Armcirklar', duration: '30 sek/riktning', icon: '🔄' }, - { name: 'Bensvingar (framåt/bakåt)', duration: '10 per ben', icon: '🦵' }, - { name: 'Bensvingar (sidled)', duration: '10 per ben', icon: '🦵' }, - { name: 'Höftcirklar', duration: '10 per riktning', icon: '⭕' }, + { name: 'Cykel eller roddmaskin', duration: '5 min' }, + { name: 'Armcirklar', duration: '30 sek/riktning' }, + { name: 'Bensvingar (framåt/bakåt)', duration: '10 per ben' }, + { name: 'Bensvingar (sidled)', duration: '10 per ben' }, + { name: 'Höftcirklar', duration: '10 per riktning' }, ], specific: { 'Bröst': [ @@ -97,7 +98,9 @@ function WorkoutPage({ day, week, logs, onLogSet, onBack, fetchProgression }) { return (
- +

{day.name}

Vecka {week} • Dag {day.day_number} @@ -123,11 +126,13 @@ function WorkoutPage({ day, week, logs, onLogSet, onBack, fetchProgression }) { onClick={() => setWarmupExpanded(!warmupExpanded)} >
- 🔥 +

Uppvärmning

{warmupProgress}/{totalWarmups}
- ▼ + + +
{warmupExpanded && ( @@ -143,9 +148,8 @@ function WorkoutPage({ day, week, logs, onLogSet, onBack, fetchProgression }) { onClick={() => toggleWarmup(idx)} > - {completedWarmups.has(idx) ? '✓' : '○'} + {completedWarmups.has(idx) ? : ''} - {warmup.icon} {warmup.name} {warmup.duration || warmup.reps}
@@ -167,7 +171,7 @@ function WorkoutPage({ day, week, logs, onLogSet, onBack, fetchProgression }) { onClick={() => toggleWarmup(globalIdx)} > - {completedWarmups.has(globalIdx) ? '✓' : '○'} + {completedWarmups.has(globalIdx) ? : ''} {warmup.name} {warmup.reps} @@ -196,10 +200,10 @@ function WorkoutPage({ day, week, logs, onLogSet, onBack, fetchProgression }) { }} > - {completedWarmups.has('prep') ? '✓' : '○'} + {completedWarmups.has('prep') ? : ''} Lätta set {exercises[0].name} - 2×10 @ 50% + 2x10 @ 50% @@ -209,7 +213,11 @@ function WorkoutPage({ day, week, logs, onLogSet, onBack, fetchProgression }) { className={`warmup-done-btn ${warmupDone ? 'completed' : ''}`} onClick={() => setWarmupDone(!warmupDone)} > - {warmupDone ? '✓ Uppvärmning klar!' : 'Markera uppvärmning som klar'} + {warmupDone ? ( + <> Uppvärmning klar + ) : ( + 'Markera uppvärmning som klar' + )} )} @@ -239,7 +247,7 @@ function WorkoutPage({ day, week, logs, onLogSet, onBack, fetchProgression }) { onClick={onBack} > {completedExercises === exercises.length - ? '🎉 Avsluta pass' + ? 'Avsluta pass' : `Avsluta pass (${completedExercises}/${exercises.length} klara)`} @@ -302,9 +310,9 @@ function ExerciseCard({ exercise, logs, progression, expanded, onToggle, onLogSe
{progression && (
- 💡 {progression.reason} + {progression.reason} {progression.suggestedWeight && ( - → {progression.suggestedWeight} kg + {progression.suggestedWeight} kg )}
)} @@ -338,7 +346,7 @@ function ExerciseCard({ exercise, logs, progression, expanded, onToggle, onLogSe className={`complete-btn ${input.completed ? 'done' : ''}`} onClick={() => handleComplete(setNum)} > - {input.completed ? '✓' : '○'} + {input.completed ? : ''}
)