clawd
50dc29097d
- Added reset button (refresh icon) to custom workout cards - Implemented confirmation dialog to prevent accidental resets - Integrated with DELETE /api/custom-workouts/:id endpoint - Added CSS styling: reset button, success message, modal dialog - Added refresh icon to SVG library - Frontend build successful Changes: - frontend/src/pages/WorkoutSelectPage.jsx (reset flow logic) - frontend/src/App.css (170 new lines for reset/modal styling) - frontend/src/components/Icons.jsx (refresh icon) - Checkpoint updated with task completion metadata
320 lines
12 KiB
React
320 lines
12 KiB
React
// Clean SVG icons for the Gravl app
|
|
// Replaces emojis with professional vector icons
|
|
|
|
export const Icons = {
|
|
// Navigation & UI
|
|
home: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
|
<polyline points="9 22 9 12 15 12 15 22"/>
|
|
</svg>
|
|
),
|
|
chart: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<line x1="18" y1="20" x2="18" y2="10"/>
|
|
<line x1="12" y1="20" x2="12" y2="4"/>
|
|
<line x1="6" y1="20" x2="6" y2="14"/>
|
|
</svg>
|
|
),
|
|
user: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
|
|
<circle cx="12" cy="7" r="4"/>
|
|
</svg>
|
|
),
|
|
logout: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
|
|
<polyline points="16 17 21 12 16 7"/>
|
|
<line x1="21" y1="12" x2="9" y2="12"/>
|
|
</svg>
|
|
),
|
|
arrowLeft: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<line x1="19" y1="12" x2="5" y2="12"/>
|
|
<polyline points="12 19 5 12 12 5"/>
|
|
</svg>
|
|
),
|
|
arrowRight: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<line x1="5" y1="12" x2="19" y2="12"/>
|
|
<polyline points="12 5 19 12 12 19"/>
|
|
</svg>
|
|
),
|
|
chevronLeft: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<polyline points="15 18 9 12 15 6"/>
|
|
</svg>
|
|
),
|
|
chevronRight: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<polyline points="9 18 15 12 9 6"/>
|
|
</svg>
|
|
),
|
|
chevronDown: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<polyline points="6 9 12 15 18 9"/>
|
|
</svg>
|
|
),
|
|
plus: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<line x1="12" y1="5" x2="12" y2="19"/>
|
|
<line x1="5" y1="12" x2="19" y2="12"/>
|
|
</svg>
|
|
),
|
|
swap: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<polyline points="7 7 3 11 7 15"/>
|
|
<polyline points="17 9 21 13 17 17"/>
|
|
<line x1="3" y1="11" x2="21" y2="11"/>
|
|
<line x1="3" y1="13" x2="21" y2="13"/>
|
|
</svg>
|
|
),
|
|
check: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
),
|
|
|
|
// Workout types
|
|
dumbbell: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M6.5 6.5a2 2 0 0 0-3 0L2 8l6 6 1.5-1.5a2 2 0 0 0 0-3L6.5 6.5z"/>
|
|
<path d="M17.5 17.5a2 2 0 0 0 3 0L22 16l-6-6-1.5 1.5a2 2 0 0 0 0 3l3 3z"/>
|
|
<line x1="8" y1="8" x2="16" y2="16"/>
|
|
</svg>
|
|
),
|
|
arm: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M12 3c-1.5 0-2.5 1-3 2.5-.5 1.5-.5 3 0 4.5.5 1.5 1 3 1 4.5 0 1.5-.5 3-1.5 4.5"/>
|
|
<path d="M8 8c0-1 .5-2 1.5-2.5"/>
|
|
<path d="M16 8c0-1-.5-2-1.5-2.5"/>
|
|
<path d="M9 14c1.5 0 3 .5 4.5 1.5s3 1.5 4.5 1.5"/>
|
|
</svg>
|
|
),
|
|
leg: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M12 3v7"/>
|
|
<path d="M9 10c0 2-.5 4-1.5 5.5S5 18 5 20v1"/>
|
|
<path d="M15 10c0 2 .5 4 1.5 5.5S19 18 19 20v1"/>
|
|
<ellipse cx="12" cy="4" rx="3" ry="1"/>
|
|
</svg>
|
|
),
|
|
back: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M12 2v6"/>
|
|
<path d="M6 8c0 3 2 6 6 8 4-2 6-5 6-8"/>
|
|
<path d="M6 8c0-2 2.5-4 6-4s6 2 6 4"/>
|
|
<path d="M9 16v4a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-4"/>
|
|
</svg>
|
|
),
|
|
chest: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M6 8c0-3 2.5-5 6-5s6 2 6 5c0 4-3 8-6 10-3-2-6-6-6-10z"/>
|
|
<path d="M12 8v5"/>
|
|
<path d="M9 9.5h6"/>
|
|
</svg>
|
|
),
|
|
shoulder: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<circle cx="12" cy="6" r="3"/>
|
|
<path d="M5 17c0-4 3-7 7-7s7 3 7 7"/>
|
|
<path d="M8 12l-3 5"/>
|
|
<path d="M16 12l3 5"/>
|
|
</svg>
|
|
),
|
|
core: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<rect x="6" y="4" width="12" height="16" rx="2"/>
|
|
<line x1="12" y1="8" x2="12" y2="16"/>
|
|
<line x1="9" y1="10" x2="15" y2="10"/>
|
|
<line x1="9" y1="14" x2="15" y2="14"/>
|
|
</svg>
|
|
),
|
|
fullBody: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<circle cx="12" cy="4" r="2"/>
|
|
<path d="M12 6v5"/>
|
|
<path d="M8 8l-3 3"/>
|
|
<path d="M16 8l3 3"/>
|
|
<path d="M12 11l-3 9"/>
|
|
<path d="M12 11l3 9"/>
|
|
</svg>
|
|
),
|
|
|
|
// Activity & rest
|
|
walking: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<circle cx="12" cy="4" r="2"/>
|
|
<path d="M14 10l2 7-3 3"/>
|
|
<path d="M10 10l-2 7 3 3"/>
|
|
<path d="M10 10h4l2-2"/>
|
|
<path d="M10 10l-2-2"/>
|
|
</svg>
|
|
),
|
|
yoga: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<circle cx="12" cy="4" r="2"/>
|
|
<path d="M12 6v5"/>
|
|
<path d="M4 14l8-3 8 3"/>
|
|
<path d="M9 20l3-9 3 9"/>
|
|
</svg>
|
|
),
|
|
swimming: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<circle cx="8" cy="6" r="2"/>
|
|
<path d="M10 6h8"/>
|
|
<path d="M4 18c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/>
|
|
<path d="M4 14c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/>
|
|
</svg>
|
|
),
|
|
cycling: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<circle cx="6" cy="17" r="3"/>
|
|
<circle cx="18" cy="17" r="3"/>
|
|
<path d="M6 17l4-7h4l3 5"/>
|
|
<circle cx="12" cy="7" r="2"/>
|
|
</svg>
|
|
),
|
|
sleep: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
|
|
</svg>
|
|
),
|
|
|
|
// Stats & metrics
|
|
fire: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M12 22c4-2 7-6 7-10 0-3-2-5-4-7l-3 4-3-4c-2 2-4 4-4 7 0 4 3 8 7 10z"/>
|
|
<path d="M12 22c-2-1-3-3-3-5 0-1.5.5-2.5 1.5-3.5l1.5 2 1.5-2c1 1 1.5 2 1.5 3.5 0 2-1 4-3 5z"/>
|
|
</svg>
|
|
),
|
|
calendar: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
|
|
<line x1="16" y1="2" x2="16" y2="6"/>
|
|
<line x1="8" y1="2" x2="8" y2="6"/>
|
|
<line x1="3" y1="10" x2="21" y2="10"/>
|
|
</svg>
|
|
),
|
|
target: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<circle cx="12" cy="12" r="6"/>
|
|
<circle cx="12" cy="12" r="2"/>
|
|
</svg>
|
|
),
|
|
trophy: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M6 9H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h2"/>
|
|
<path d="M18 9h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-2"/>
|
|
<path d="M6 3v6a6 6 0 0 0 12 0V3"/>
|
|
<path d="M12 15v4"/>
|
|
<path d="M8 21h8"/>
|
|
</svg>
|
|
),
|
|
|
|
// Coach avatar (silhouette)
|
|
coach: (
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<circle cx="12" cy="7" r="4" opacity="0.9"/>
|
|
<path d="M12 13c-5 0-8 2.5-8 5v2h16v-2c0-2.5-3-5-8-5z" opacity="0.7"/>
|
|
<circle cx="17" cy="5" r="1.5" opacity="0.5"/>
|
|
<path d="M18 4l1.5-1.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" opacity="0.5"/>
|
|
</svg>
|
|
),
|
|
|
|
// Actions
|
|
trash: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<polyline points="3 6 5 6 21 6"/>
|
|
<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
|
|
<path d="M10 11v6"/>
|
|
<path d="M14 11v6"/>
|
|
<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>
|
|
</svg>
|
|
),
|
|
edit: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
|
|
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
|
</svg>
|
|
),
|
|
search: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<circle cx="11" cy="11" r="8"/>
|
|
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
|
</svg>
|
|
),
|
|
x: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<line x1="18" y1="6" x2="6" y2="18"/>
|
|
<line x1="6" y1="6" x2="18" y2="18"/>
|
|
</svg>
|
|
),
|
|
|
|
// Brand
|
|
gravl: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M6.5 6.5a2 2 0 0 0-3 0L2 8l6 6 1.5-1.5a2 2 0 0 0 0-3L6.5 6.5z"/>
|
|
<path d="M17.5 17.5a2 2 0 0 0 3 0L22 16l-6-6-1.5 1.5a2 2 0 0 0 0 3l3 3z"/>
|
|
<line x1="8" y1="8" x2="16" y2="16"/>
|
|
</svg>
|
|
),
|
|
refresh: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M1 4v6h6M23 20v-6h-6"/>
|
|
<path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/>
|
|
</svg>
|
|
),
|
|
}
|
|
|
|
// Icon component wrapper
|
|
export function Icon({ name, size = 24, className = '', style = {} }) {
|
|
const icon = Icons[name]
|
|
if (!icon) return null
|
|
|
|
return (
|
|
<span
|
|
className={`icon ${className}`}
|
|
style={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: size,
|
|
height: size,
|
|
...style
|
|
}}
|
|
>
|
|
{icon}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
// Helper to get workout icon name based on workout name
|
|
export function getWorkoutIconName(name) {
|
|
const lower = name.toLowerCase()
|
|
if (lower.includes('push') || lower.includes('bröst') || lower.includes('chest')) return 'chest'
|
|
if (lower.includes('pull') || lower.includes('rygg') || lower.includes('back')) return 'back'
|
|
if (lower.includes('ben') || lower.includes('leg') || lower.includes('lower')) return 'leg'
|
|
if (lower.includes('axlar') || lower.includes('shoulder')) return 'shoulder'
|
|
if (lower.includes('arm')) return 'arm'
|
|
if (lower.includes('core') || lower.includes('mage')) return 'core'
|
|
if (lower.includes('helkropp') || lower.includes('full')) return 'fullBody'
|
|
if (lower.includes('överkropp') || lower.includes('upper')) return 'chest'
|
|
if (lower.includes('underkropp')) return 'leg'
|
|
return 'dumbbell'
|
|
}
|
|
|
|
// Helper to get activity icon name
|
|
export function getActivityIconName(activity) {
|
|
const lower = activity.toLowerCase()
|
|
if (lower.includes('promenad') || lower.includes('walk')) return 'walking'
|
|
if (lower.includes('yoga') || lower.includes('stretch')) return 'yoga'
|
|
if (lower.includes('sim') || lower.includes('swim')) return 'swimming'
|
|
if (lower.includes('cyk') || lower.includes('bike')) return 'cycling'
|
|
return 'walking'
|
|
}
|
|
|
|
export default Icon
|