feat(04-04-visual-distinction): Add custom vs program workout badges on WorkoutSelectPage

- Fetch custom workouts for authenticated user
- Display 'Anpassad' (custom) or 'Program' badge on each workout card
- Add badge component with orange accent for custom, muted color for program
- Badge positioned bottom-right of workout icon
- Responsive styling consistent with Gravl dark theme
- All build checks pass
This commit is contained in:
2026-03-01 19:41:54 +01:00
parent 81e0caab42
commit a2a3949269
8 changed files with 147 additions and 80 deletions
+40
View File
@@ -2958,3 +2958,43 @@
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; }
/* Workout badge styling */
.workout-badge-container {
position: relative;
display: flex;
align-items: flex-end;
}
.workout-badge {
position: absolute;
bottom: -6px;
right: -6px;
font-size: var(--font-xs);
font-weight: 600;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
border: 1px solid transparent;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
white-space: nowrap;
color: white;
}
.workout-badge.custom {
background: var(--accent);
color: white;
border-color: var(--accent);
}
.workout-badge.program {
background: var(--text-muted);
color: white;
border-color: var(--text-muted);
opacity: 0.7;
}
.workout-select-card:hover .workout-badge {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}