diff --git a/apps/web/src/components/RoutinesSection.tsx b/apps/web/src/components/RoutinesSection.tsx index 2bacb24406..eccbff10a3 100644 --- a/apps/web/src/components/RoutinesSection.tsx +++ b/apps/web/src/components/RoutinesSection.tsx @@ -14,6 +14,10 @@ import { navigate } from '../router'; type ProjectSummary = { id: string; name: string }; +type RoutinesSectionProps = { + onClose?: () => void; +}; + type ScheduleKind = RoutineSchedule['kind']; const SCHEDULE_KINDS: { kind: ScheduleKind; label: string }[] = [ @@ -360,7 +364,7 @@ function RunHistory({ routineId, refreshKey, onClose }: { routineId: string; ref ); } -export function RoutinesSection({ onClose }: { onClose?: () => void }) { +export function RoutinesSection({ onClose }: RoutinesSectionProps) { const [routines, setRoutines] = useState([]); const [projects, setProjects] = useState([]); const [loading, setLoading] = useState(true); @@ -571,6 +575,7 @@ export function RoutinesSection({ onClose }: { onClose?: () => void }) {
Project + + - {form.mode === 'reuse' ? ( + + {form.mode === 'reuse' && ( - ) : null} + )}
diff --git a/apps/web/src/index.css b/apps/web/src/index.css index 958234e297..79b7119f6f 100644 --- a/apps/web/src/index.css +++ b/apps/web/src/index.css @@ -18662,28 +18662,74 @@ body.entry-resizing { cursor: col-resize; user-select: none; } flex-direction: column; gap: 8px; } + .routines-fieldset legend { font-size: 12px; font-weight: 600; color: var(--text-muted); padding: 0 6px; } -.routines-radio { - display: grid; - grid-template-columns: 16px minmax(0, 1fr); - gap: 8px 10px; - padding: 10px 8px; - border-radius: var(--radius); - cursor: pointer; - transition: background 120ms ease; - align-items: flex-start; -} -.routines-radio:hover { background: var(--bg-subtle); } -.routines-radio input { margin-top: 3px; } -.routines-radio span { display: flex; flex-direction: column; gap: 2px; min-width: 0; } -.routines-radio strong { font-size: 14px; color: var(--text); font-weight: 600; } -.routines-radio small { font-size: 12px; color: var(--text-muted); } +.routines-radio { + display: flex; + flex-direction: column; + gap: 2px; + padding: 12px 14px; + border-radius: var(--radius); + border: 1px solid var(--border); + background: var(--bg-panel); + cursor: pointer; + transition: border-color 120ms ease, background 120ms ease; +} + +.routines-radio:hover { + background: var(--bg-subtle); + border-color: var(--border-strong); +} + +.routines-radio:has(input:focus-visible) { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + +.routines-radio input[type="radio"] { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.routines-radio:has(input[type="radio"]:checked) { + border-color: var(--accent); + background: var(--accent-tint); +} + +.routines-radio:has(input[type="radio"]:checked) strong { + color: var(--accent-strong); +} + +.routines-radio span { + display: flex; + flex-direction: column; + gap: 2px; + flex: 1; +} + +.routines-radio strong { + font-size: 14px; + font-weight: 600; + color: var(--text); +} + +.routines-radio small { + font-size: 12px; + color: var(--text-muted); +} .routines-form-actions { display: flex; gap: 8px; @@ -18956,4 +19002,4 @@ body.entry-resizing { cursor: col-resize; user-select: none; } border: 1px dashed var(--border-strong, var(--border)); border-radius: 4px; } .palette-tweaks-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.palette-tweaks-check { display: inline-flex; align-items: center; color: var(--text-muted); } +.palette-tweaks-check { display: inline-flex; align-items: center; color: var(--text-muted); } \ No newline at end of file