From f9e2343ffbf5694c0b9e2f2f108d86a40f2a756f Mon Sep 17 00:00:00 2001 From: Thomas Hallock Date: Tue, 11 Nov 2025 05:30:23 -0600 Subject: [PATCH] fix: improve dark mode contrast in OrientationPanel dropdown MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Updated the problems-per-page dropdown menu to use darker brand colors in dark mode for better visual harmony: - Selected/hover state: brand.50 → brand.900 (dark mode) - Focus state: brand.100 → brand.800 (dark mode) - Unselected grid dots: gray.400 → gray.500 (dark mode) These changes reduce the bright contrast of selected items against the dark gray.800 dropdown background, creating a more cohesive dark mode experience. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../worksheets/addition/components/OrientationPanel.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/web/src/app/create/worksheets/addition/components/OrientationPanel.tsx b/apps/web/src/app/create/worksheets/addition/components/OrientationPanel.tsx index cd38d82b..54b87ce9 100644 --- a/apps/web/src/app/create/worksheets/addition/components/OrientationPanel.tsx +++ b/apps/web/src/app/create/worksheets/addition/components/OrientationPanel.tsx @@ -334,12 +334,12 @@ export function OrientationPanel({ rounded: 'md', cursor: 'pointer', outline: 'none', - bg: isSelected ? 'brand.50' : 'transparent', + bg: isSelected ? (isDark ? 'brand.900' : 'brand.50') : 'transparent', _hover: { - bg: 'brand.50', + bg: isDark ? 'brand.900' : 'brand.50', }, _focus: { - bg: 'brand.100', + bg: isDark ? 'brand.800' : 'brand.100', }, })} > @@ -364,7 +364,7 @@ export function OrientationPanel({ className={css({ w: '1.5', h: '1.5', - bg: isSelected ? 'brand.500' : 'gray.400', + bg: isSelected ? 'brand.500' : (isDark ? 'gray.500' : 'gray.400'), rounded: 'full', })} />