clawd/gravl
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feature/03-design-polish #1

Merged
sphinxen merged 9 commits from feature/03-design-polish into main 2026-03-02 09:08:10 +01:00
Conversation 0 Commits 9 Files Changed 21
+68 -27
2 changed files with 68 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6d1da03fec - Show all commits
.pm-checkpoint.json
+6 -11
View File
@@ -1,13 +1,8 @@
{
"lastRun": "2026-02-28T22:49:00+01:00",
"status": "completed",
"tasksCompleted": [
"emoji-replacement",
"alternative-modal",
"workout-page-ux-redesign",
"chat-onboarding",
"03-01-login-onboarding-polish"
],
"currentPhase": "03-design-polish",
"notes": "03-01 klar: Logo.jsx med SVG barbell, LoginPage/RegisterPage uppdaterade med logotyp, taglines, index.css polerad med animationer."
"lastRun": "2026-02-28T23:33:00+01:00",
"status": "in_progress",
"tasksCompleted": ["emoji-replacement", "alternative-modal", "workout-page-ux-redish", "chat-onboarding", "03-01-login-onboarding-polish", "03-02-dashboard-polish"],
"activeTask": "03-03-workout-experience",
"nextTask": null,
"notes": "Starting 03-03 Workout Experience Polish - spawning frontend agent"
}
frontend/src/App.css
+62 -16
View File
@@ -133,7 +133,7 @@
.day-card {
background: var(--bg-card);
border-radius: var(--radius-lg);
border-radius: var(--radius-xl);
padding: var(--space-4);
margin-bottom: var(--space-3);
cursor: pointer;
@@ -234,7 +234,7 @@
.exercise-card {
background: var(--bg-card);
border-radius: var(--radius-lg);
border-radius: var(--radius-xl);
margin-bottom: var(--space-3);
overflow: hidden;
border: 1px solid var(--border);
@@ -459,7 +459,7 @@
.klart-btn {
width: 100%;
min-height: 52px;
border-radius: var(--radius-lg);
border-radius: var(--radius-xl);
background: var(--accent);
color: white;
border: none;
@@ -851,7 +851,7 @@
color: white;
border: none;
padding: var(--space-4);
border-radius: var(--radius-lg);
border-radius: var(--radius-xl);
font-size: var(--font-base);
font-weight: 600;
cursor: pointer;
@@ -925,7 +925,7 @@
.stat-card {
background: var(--bg-card);
border-radius: var(--radius-lg);
border-radius: var(--radius-xl);
padding: var(--space-4);
text-align: center;
border: 1px solid var(--border);
@@ -990,7 +990,7 @@
gap: var(--space-4);
background: var(--bg-card);
padding: var(--space-4);
border-radius: var(--radius-lg);
border-radius: var(--radius-xl);
border: 1px solid var(--border);
cursor: pointer;
transition: all var(--transition-base);
@@ -1384,7 +1384,7 @@
.measurement-card {
background: var(--bg-secondary);
padding: var(--space-4);
border-radius: var(--radius-lg);
border-radius: var(--radius-xl);
display: flex;
flex-direction: column;
align-items: center;
@@ -1418,7 +1418,7 @@
justify-content: space-between;
padding: var(--space-4);
background: var(--bg-secondary);
border-radius: var(--radius-lg);
border-radius: var(--radius-xl);
}
.strength-exercise {
@@ -1445,7 +1445,7 @@
gap: var(--space-2);
background: var(--bg-card);
padding: var(--space-2);
border-radius: var(--radius-lg);
border-radius: var(--radius-xl);
border: 1px solid var(--border);
}
@@ -1666,7 +1666,7 @@
.rest-timer-btn {
min-height: 48px;
border-radius: var(--radius-lg);
border-radius: var(--radius-xl);
border: 1px solid var(--border);
font-weight: 600;
cursor: pointer;
@@ -1888,7 +1888,7 @@
padding: var(--space-4);
background: var(--bg-secondary);
border: 2px dashed var(--border);
border-radius: var(--radius-lg);
border-radius: var(--radius-xl);
color: var(--text-muted);
font-size: var(--font-sm);
cursor: pointer;
@@ -2502,7 +2502,7 @@
width: 56px;
height: 56px;
min-width: 56px;
border-radius: var(--radius-lg);
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
@@ -2583,7 +2583,7 @@
background: var(--accent);
color: white;
border: none;
border-radius: var(--radius-lg);
border-radius: var(--radius-xl);
font-size: var(--font-lg);
font-weight: 600;
cursor: pointer;
@@ -2687,7 +2687,7 @@
width: 100%;
background: var(--bg-elevated);
border: 1.5px solid var(--border);
border-radius: var(--radius-lg);
border-radius: var(--radius-xl);
padding: var(--space-4) var(--space-5);
color: var(--text-primary);
font-size: 16px; /* prevents iOS auto-zoom */
@@ -2711,7 +2711,7 @@
background: var(--accent);
color: white;
border: none;
border-radius: var(--radius-lg);
border-radius: var(--radius-xl);
font-size: var(--font-base);
font-weight: 600;
cursor: pointer;
@@ -2860,7 +2860,7 @@
/* ── Calendar day cells: tighter spacing, better font ────── */
.calendar-day {
border-radius: var(--radius-lg);
border-radius: var(--radius-xl);
gap: var(--space-1);
min-height: 64px;
}
@@ -2912,3 +2912,49 @@
.week-calendar { animation: sectionIn 300ms ease both; }
.coach-section { animation: sectionIn 300ms ease 80ms both; }
.quick-stats { animation: sectionIn 300ms ease 160ms both; }
/* WORKOUT POLISH - 03-03 */
.exercise-card { position: relative; }
.exercise-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--accent), #ff8a65); opacity: 0;
transition: opacity 0.2s ease;
}
.exercise-card.expanded::before { opacity: 1; }
.exercise-card.all-done::before {
background: linear-gradient(90deg, var(--success), #4ade80); opacity: 1;
}
.exercise-info h3 { font-size: var(--font-lg); font-weight: 700; }
.muscle-group {
display: inline-block; font-size: var(--font-xs); font-weight: 600;
text-transform: uppercase; padding: var(--space-1) var(--space-2);
background: var(--bg-tertiary); border-radius: var(--radius-full);
}
.progress-badge {
background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
}
.progress-badge.complete {
background: linear-gradient(135deg, var(--success), #16a34a);
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}
.rest-timer-card {
box-shadow: 0 4px 16px rgba(255, 107, 74, 0.1);
}
.rest-timer-time.running {
text-shadow: 0 0 20px rgba(255, 107, 74, 0.4);
animation: pulse-timer 1s ease-in-out infinite;
}
@keyframes pulse-timer { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
.klart-btn {
background: linear-gradient(135deg, var(--accent), #e85a3c);
border-radius: var(--radius-xl);
}
.klart-btn.done {
background: linear-gradient(135deg, var(--success), #16a34a);
animation: success-bounce 0.5s ease;
}
@keyframes success-bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.warmup-check {
width: 22px; height: 22px; border-radius: var(--radius-md);
border: 2px solid var(--border); display: flex; align-items: center; justify-content: center;
}
.warmup-item.done .warmup-check { background: var(--success); border-color: var(--success); color: white; }