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