From fe9b9f9ffacc992ee654364fdf63eebbba0e9aa7 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Tue, 11 Nov 2025 05:32:21 -0600
Subject: [PATCH] fix: improve dark mode for orientation and page buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../addition/components/OrientationPanel.tsx  | 66 +++++++------------
 1 file changed, 23 insertions(+), 43 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 95814e47..814d5181 100644
--- a/apps/web/src/app/create/worksheets/addition/components/OrientationPanel.tsx
+++ b/apps/web/src/app/create/worksheets/addition/components/OrientationPanel.tsx
@@ -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