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

fix: use subtle gray highlights for dropdown in dark mode 

Problems per page dropdown now uses appropriate colors for each theme:

Dark mode:
- Selected/hover: gray.700 (subtle, matches gray.800 background)
- Focus: gray.600 (slightly lighter for keyboard navigation)

Light mode:
- Selected/hover: brand.50 (light blue, stands out on white)
- Focus: brand.100 (slightly more emphasis)

This creates proper visual hierarchy without jarring contrast in dark mode.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock 2025-11-11 05:33:19 -06:00
parent fe9b9f9ffa
commit 8d6170a8c7
1 changed files with 37 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
apps/web/src/app/create/worksheets/addition/components/OrientationPanel.tsx
View File

@ -325,23 +325,43 @@ export function OrientationPanel({
key={count}
data-action={`select-problems-${count}`}
onSelect={() => handleProblemsPerPageChange(count)}
className={css({
display: 'flex',
alignItems: 'center',
gap: '3',
px: '3',
py: '2',
rounded: 'md',
cursor: 'pointer',
outline: 'none',
bg: isSelected ? 'brand.50' : 'transparent',
_hover: {
bg: 'brand.50',
},
_focus: {
bg: 'brand.100',
},
})}
className={
isDark
? css({
display: 'flex',
alignItems: 'center',
gap: '3',
px: '3',
py: '2',
rounded: 'md',
cursor: 'pointer',
outline: 'none',
bg: isSelected ? 'gray.700' : 'transparent',
_hover: {
bg: 'gray.700',
},
_focus: {
bg: 'gray.600',
},
})
: css({
display: 'flex',
alignItems: 'center',
gap: '3',
px: '3',
py: '2',
rounded: 'md',
cursor: 'pointer',
outline: 'none',
bg: isSelected ? 'brand.50' : 'transparent',
_hover: {
bg: 'brand.50',
},
_focus: {
bg: 'brand.100',
},
})
}
>
{/* Grid visualization */}
<div