Labels: frontend, feature-timer
Description:
The mode toggle (Stopwatch/Tabata) and duration inputs need to be more intuitive and visually distinct. We will replace the standard toggle buttons with a segmented control style and enhance the duration input visibility.
Acceptance Criteria:
Technical Implementation:
- Segmented Control:
<ToggleButtonGroup sx={{ background: 'rgba(15, 23, 42, 0.6)', border: '1px solid rgba(255, 255, 255, 0.1)' }}>
{/* Selected state: background gradient + shadow */}
</ToggleButtonGroup>
- Duration Display:
Wrap the number in a Box with a radial gradient background:
background: 'radial-gradient(circle, rgba(244, 63, 94, 0.3) 0%, transparent 70%)',
filter: 'blur(20px)',
Labels:
frontend,feature-timerDescription:
The mode toggle (Stopwatch/Tabata) and duration inputs need to be more intuitive and visually distinct. We will replace the standard toggle buttons with a segmented control style and enhance the duration input visibility.
Acceptance Criteria:
ToggleButtonGroupinTimerControls.tsxwith a "Segmented Control" style (smooth background transition).Technical Implementation:
Wrap the number in a
Boxwith a radial gradient background: