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:
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user