antialias
/
soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(practice): replace "hide" text with close button on stats panel 

Add an × close button in the top-right corner of the stats visualization
panel instead of toggling "hide" text in the main paragraph.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock 2025-12-11 16:54:11 -06:00
parent a892902e8a
commit 883b683463
1 changed files with 54 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
apps/web/src/components/practice/SessionPausedModal.tsx
View File

@ -445,37 +445,72 @@ export function SessionPausedModal({
})}
>
Usually you take {formatSecondsFriendly(stats.meanMs)}. This one took longer, so we
paused to check in.{' '}
<button
type="button"
onClick={() => setShowStats(!showStats)}
className={css({
color: isDark ? 'gray.500' : 'gray.400',
fontSize: '0.75rem',
background: 'none',
border: 'none',
cursor: 'pointer',
textDecoration: 'underline',
padding: 0,
_hover: {
color: isDark ? 'gray.400' : 'gray.500',
},
})}
>
{showStats ? 'hide' : 'really?'}
</button>
paused to check in.
{!showStats && (
<>
{' '}
<button
type="button"
onClick={() => setShowStats(true)}
className={css({
color: isDark ? 'gray.500' : 'gray.400',
fontSize: '0.75rem',
background: 'none',
border: 'none',
cursor: 'pointer',
textDecoration: 'underline',
padding: 0,
_hover: {
color: isDark ? 'gray.400' : 'gray.500',
},
})}
>
really?
</button>
</>
)}
</p>
{/* Collapsible stats visualization */}
{showStats && (
<div
className={css({
position: 'relative',
padding: '0.75rem',
backgroundColor: isDark ? 'gray.700/50' : 'gray.100',
borderRadius: '8px',
marginTop: '0.5rem',
})}
>
{/* Close button */}
<button
type="button"
onClick={() => setShowStats(false)}
className={css({
position: 'absolute',
top: '4px',
right: '4px',
width: '20px',
height: '20px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: 'none',
border: 'none',
cursor: 'pointer',
color: isDark ? 'gray.500' : 'gray.400',
fontSize: '0.875rem',
lineHeight: 1,
borderRadius: '4px',
_hover: {
color: isDark ? 'gray.400' : 'gray.500',
backgroundColor: isDark ? 'gray.600' : 'gray.200',
},
})}
aria-label="Close stats"
>
×
</button>
<SpeedMeter
meanMs={stats.meanMs}
stdDevMs={stats.stdDevMs}