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

fix: improve dark mode for orientation and page buttons 

Changed selected state backgrounds and text colors for better
dark mode appearance:

Orientation buttons (Portrait/Landscape):
- Background: brand.50 → brand.900 (dark mode)
- Text: brand.700 → brand.200 (dark mode)

Page number buttons (1-4):
- Background: brand.50 → brand.900 (dark mode)
- Text: brand.700 → brand.200 (dark mode)

Dropdown selection:
- Reverted to brand.50 (user preference - darker brand.900 was too subtle)

These changes reduce the bright contrast of selected buttons in dark mode
while keeping the dropdown selection highly visible.

🤖 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:32:21 -06:00
parent 34553cebf7
commit fe9b9f9ffa
1 changed files with 23 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -106,7 +106,7 @@ export function OrientationPanel({
border: '2px solid', border: '2px solid',
borderColor: borderColor:
orientation === 'portrait' ? 'brand.500' : isDark ? 'gray.600' : 'gray.300', orientation === 'portrait' ? 'brand.500' : isDark ? 'gray.600' : 'gray.300',
bg: orientation === 'portrait' ? 'brand.50' : isDark ? 'gray.700' : 'white', bg: orientation === 'portrait' ? (isDark ? 'brand.900' : 'brand.50') : isDark ? 'gray.700' : 'white',
rounded: 'lg', rounded: 'lg',
cursor: 'pointer', cursor: 'pointer',
transition: 'all 0.15s', transition: 'all 0.15s',
@ -127,7 +127,7 @@ export function OrientationPanel({
fontSize: 'sm', fontSize: 'sm',
fontWeight: 'semibold', fontWeight: 'semibold',
color: color:
orientation === 'portrait' ? 'brand.700' : isDark ? 'gray.300' : 'gray.600', orientation === 'portrait' ? (isDark ? 'brand.200' : 'brand.700') : isDark ? 'gray.300' : 'gray.600',
})} })}
> >
Portrait Portrait
@ -147,7 +147,7 @@ export function OrientationPanel({
border: '2px solid', border: '2px solid',
borderColor: borderColor:
orientation === 'landscape' ? 'brand.500' : isDark ? 'gray.600' : 'gray.300', orientation === 'landscape' ? 'brand.500' : isDark ? 'gray.600' : 'gray.300',
bg: orientation === 'landscape' ? 'brand.50' : isDark ? 'gray.700' : 'white', bg: orientation === 'landscape' ? (isDark ? 'brand.900' : 'brand.50') : isDark ? 'gray.700' : 'white',
rounded: 'lg', rounded: 'lg',
cursor: 'pointer', cursor: 'pointer',
transition: 'all 0.15s', transition: 'all 0.15s',
@ -168,7 +168,7 @@ export function OrientationPanel({
fontSize: 'sm', fontSize: 'sm',
fontWeight: 'semibold', fontWeight: 'semibold',
color: color:
orientation === 'landscape' ? 'brand.700' : isDark ? 'gray.300' : 'gray.600', orientation === 'landscape' ? (isDark ? 'brand.200' : 'brand.700') : isDark ? 'gray.300' : 'gray.600',
})} })}
> >
Landscape Landscape
@ -205,12 +205,12 @@ export function OrientationPanel({
h: '10', h: '10',
border: '2px solid', border: '2px solid',
borderColor: isSelected ? 'brand.500' : isDark ? 'gray.600' : 'gray.300', borderColor: isSelected ? 'brand.500' : isDark ? 'gray.600' : 'gray.300',
bg: isSelected ? 'brand.50' : isDark ? 'gray.700' : 'white', bg: isSelected ? (isDark ? 'brand.900' : 'brand.50') : isDark ? 'gray.700' : 'white',
rounded: 'lg', rounded: 'lg',
cursor: 'pointer', cursor: 'pointer',
fontSize: 'sm', fontSize: 'sm',
fontWeight: 'bold', fontWeight: 'bold',
color: isSelected ? 'brand.700' : isDark ? 'gray.300' : 'gray.600', color: isSelected ? (isDark ? 'brand.200' : 'brand.700') : isDark ? 'gray.300' : 'gray.600',
transition: 'all 0.15s', transition: 'all 0.15s',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
@ -325,43 +325,23 @@ export function OrientationPanel({
key={count} key={count}
data-action={`select-problems-${count}`} data-action={`select-problems-${count}`}
onSelect={() => handleProblemsPerPageChange(count)} onSelect={() => handleProblemsPerPageChange(count)}
className={ className={css({
isDark display: 'flex',
? css({ alignItems: 'center',
display: 'flex', gap: '3',
alignItems: 'center', px: '3',
gap: '3', py: '2',
px: '3', rounded: 'md',
py: '2', cursor: 'pointer',
rounded: 'md', outline: 'none',
cursor: 'pointer', bg: isSelected ? 'brand.50' : 'transparent',
outline: 'none', _hover: {
bg: isSelected ? 'brand.900' : 'transparent', bg: 'brand.50',
_hover: { },
bg: 'brand.900', _focus: {
}, bg: 'brand.100',
_focus: { },
bg: 'brand.800', })}
},
})
: 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 */} {/* Grid visualization */}
<div <div