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
This commit is contained in:
2026-02-01 19:45:03 +01:00
parent aff9ce7ce9
commit d2f157c73d
5 changed files with 109 additions and 46 deletions
+38 -12
View File
@@ -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;
}