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:
+40
-14
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user