04-05: Reset to Original feature - custom workouts can be reverted to program versions
- 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
This commit is contained in:
@@ -2998,3 +2998,173 @@
|
||||
.workout-select-card:hover .workout-badge {
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/* Reset button for custom workouts */
|
||||
.reset-btn {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--accent);
|
||||
border: 2px solid var(--bg-primary);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 8px rgba(255, 107, 74, 0.3);
|
||||
padding: 0;
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.reset-btn:hover {
|
||||
background: #e85a3c;
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 4px 12px rgba(255, 107, 74, 0.4);
|
||||
}
|
||||
|
||||
.reset-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Success message */
|
||||
.success-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: linear-gradient(135deg, var(--success), #16a34a);
|
||||
color: white;
|
||||
border-radius: var(--radius-lg);
|
||||
margin-bottom: var(--space-4);
|
||||
animation: slideDown 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Modal dialog styles */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
|
||||
max-width: 400px;
|
||||
width: 90%;
|
||||
animation: slideUp 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: var(--space-4);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
font-size: var(--font-lg);
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.modal-body p {
|
||||
font-size: var(--font-md);
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: var(--space-4);
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
padding: var(--space-2) var(--space-4);
|
||||
border-radius: var(--radius-md);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: var(--font-md);
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.modal-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.modal-btn.cancel {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.modal-btn.cancel:hover:not(:disabled) {
|
||||
background: var(--bg-tertiary);
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.modal-btn.confirm {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.modal-btn.confirm:hover:not(:disabled) {
|
||||
background: #e85a3c;
|
||||
box-shadow: 0 4px 12px rgba(255, 107, 74, 0.3);
|
||||
}
|
||||
|
||||
.modal-btn.confirm:active:not(:disabled) {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user