From e38775b9910751c4cd1d7aed420324315f21537a Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Sat, 8 Nov 2025 13:11:14 -0600
Subject: [PATCH] feat: add theme support to orientation and generate panels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add light/dark mode support to OrientationPanel and GenerateButton:
- OrientationPanel: themed backgrounds for all sections
- Orientation buttons adapt to theme (selected/unselected states)
- Page number buttons use themed backgrounds
- Problems per page dropdown has themed content
- Dropdown items and labels adjust for readability
- Total badge remains consistent (brand colors)
- GenerateButton panel uses themed background

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../addition/components/GenerateButton.tsx    |  5 +-
 .../addition/components/OrientationPanel.tsx  | 48 ++++++++++---------
 2 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/apps/web/src/app/create/worksheets/addition/components/GenerateButton.tsx b/apps/web/src/app/create/worksheets/addition/components/GenerateButton.tsx
index 50e8ffe2..8d677303 100644
--- a/apps/web/src/app/create/worksheets/addition/components/GenerateButton.tsx
+++ b/apps/web/src/app/create/worksheets/addition/components/GenerateButton.tsx
@@ -9,13 +9,14 @@ type GenerationStatus = 'idle' | 'generating' | 'error'
 interface GenerateButtonProps {
   status: GenerationStatus
   onGenerate: () => void
+  isDark?: boolean
 }
 
 /**
  * Button to trigger worksheet PDF generation
  * Shows loading state during generation
  */
-export function GenerateButton({ status, onGenerate }: GenerateButtonProps) {
+export function GenerateButton({ status, onGenerate, isDark = false }: GenerateButtonProps) {
   const t = useTranslations('create.worksheets.addition')
   const isGenerating = status === 'generating'
 
@@ -23,7 +24,7 @@ export function GenerateButton({ status, onGenerate }: GenerateButtonProps) {
     <div
       data-section="generate-panel"
       className={css({
-        bg: 'white',
+        bg: isDark ? 'gray.800' : 'white',
         rounded: '2xl',
         shadow: 'card',
         p: '6',
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 79d25b27..1f4dd3ff 100644
--- a/apps/web/src/app/create/worksheets/addition/components/OrientationPanel.tsx
+++ b/apps/web/src/app/create/worksheets/addition/components/OrientationPanel.tsx
@@ -16,6 +16,7 @@ interface OrientationPanelProps {
   ) => void
   onProblemsPerPageChange: (problemsPerPage: number, cols: number) => void
   onPagesChange: (pages: number) => void
+  isDark?: boolean
 }
 
 /**
@@ -30,6 +31,7 @@ export function OrientationPanel({
   onOrientationChange,
   onProblemsPerPageChange,
   onPagesChange,
+  isDark = false,
 }: OrientationPanelProps) {
   const handleOrientationChange = (newOrientation: 'portrait' | 'landscape') => {
     const newProblemsPerPage = newOrientation === 'portrait' ? 15 : 20
@@ -50,7 +52,7 @@ export function OrientationPanel({
     <div
       data-section="orientation-panel"
       className={css({
-        bg: 'white',
+        bg: isDark ? 'gray.800' : 'white',
         rounded: '2xl',
         shadow: 'card',
         p: '4',
@@ -72,7 +74,7 @@ export function OrientationPanel({
               className={css({
                 fontSize: '2xs',
                 fontWeight: 'semibold',
-                color: 'gray.500',
+                color: isDark ? 'gray.400' : 'gray.500',
                 textTransform: 'uppercase',
                 letterSpacing: 'wider',
                 mb: '1.5',
@@ -93,8 +95,8 @@ export function OrientationPanel({
                   px: '3',
                   py: '2',
                   border: '2px solid',
-                  borderColor: orientation === 'portrait' ? 'brand.500' : 'gray.300',
-                  bg: orientation === 'portrait' ? 'brand.50' : 'white',
+                  borderColor: orientation === 'portrait' ? 'brand.500' : isDark ? 'gray.600' : 'gray.300',
+                  bg: orientation === 'portrait' ? 'brand.50' : isDark ? 'gray.700' : 'white',
                   rounded: 'lg',
                   cursor: 'pointer',
                   transition: 'all 0.15s',
@@ -114,7 +116,7 @@ export function OrientationPanel({
                   className={css({
                     fontSize: 'sm',
                     fontWeight: 'semibold',
-                    color: orientation === 'portrait' ? 'brand.700' : 'gray.600',
+                    color: orientation === 'portrait' ? 'brand.700' : isDark ? 'gray.300' : 'gray.600',
                   })}
                 >
                   Portrait
@@ -132,8 +134,8 @@ export function OrientationPanel({
                   px: '3',
                   py: '2',
                   border: '2px solid',
-                  borderColor: orientation === 'landscape' ? 'brand.500' : 'gray.300',
-                  bg: orientation === 'landscape' ? 'brand.50' : 'white',
+                  borderColor: orientation === 'landscape' ? 'brand.500' : isDark ? 'gray.600' : 'gray.300',
+                  bg: orientation === 'landscape' ? 'brand.50' : isDark ? 'gray.700' : 'white',
                   rounded: 'lg',
                   cursor: 'pointer',
                   transition: 'all 0.15s',
@@ -153,7 +155,7 @@ export function OrientationPanel({
                   className={css({
                     fontSize: 'sm',
                     fontWeight: 'semibold',
-                    color: orientation === 'landscape' ? 'brand.700' : 'gray.600',
+                    color: orientation === 'landscape' ? 'brand.700' : isDark ? 'gray.300' : 'gray.600',
                   })}
                 >
                   Landscape
@@ -168,7 +170,7 @@ export function OrientationPanel({
               className={css({
                 fontSize: '2xs',
                 fontWeight: 'semibold',
-                color: 'gray.500',
+                color: isDark ? 'gray.400' : 'gray.500',
                 textTransform: 'uppercase',
                 letterSpacing: 'wider',
                 mb: '1.5',
@@ -189,13 +191,13 @@ export function OrientationPanel({
                       w: '10',
                       h: '10',
                       border: '2px solid',
-                      borderColor: isSelected ? 'brand.500' : 'gray.300',
-                      bg: isSelected ? 'brand.50' : 'white',
+                      borderColor: isSelected ? 'brand.500' : isDark ? 'gray.600' : 'gray.300',
+                      bg: isSelected ? 'brand.50' : isDark ? 'gray.700' : 'white',
                       rounded: 'lg',
                       cursor: 'pointer',
                       fontSize: 'sm',
                       fontWeight: 'bold',
-                      color: isSelected ? 'brand.700' : 'gray.600',
+                      color: isSelected ? 'brand.700' : isDark ? 'gray.300' : 'gray.600',
                       transition: 'all 0.15s',
                       display: 'flex',
                       alignItems: 'center',
@@ -227,7 +229,7 @@ export function OrientationPanel({
               className={css({
                 fontSize: '2xs',
                 fontWeight: 'semibold',
-                color: 'gray.500',
+                color: isDark ? 'gray.400' : 'gray.500',
                 textTransform: 'uppercase',
                 letterSpacing: 'wider',
                 display: 'block',
@@ -246,13 +248,13 @@ export function OrientationPanel({
                     px: '3',
                     py: '2',
                     border: '2px solid',
-                    borderColor: 'gray.300',
-                    bg: 'white',
+                    borderColor: isDark ? 'gray.600' : 'gray.300',
+                    bg: isDark ? 'gray.700' : 'white',
                     rounded: 'lg',
                     cursor: 'pointer',
                     fontSize: 'sm',
                     fontWeight: 'medium',
-                    color: 'gray.700',
+                    color: isDark ? 'gray.200' : 'gray.700',
                     transition: 'all 0.15s',
                     display: 'flex',
                     alignItems: 'center',
@@ -266,18 +268,20 @@ export function OrientationPanel({
                     {problemsPerPage} problems ({cols} cols × {Math.ceil(problemsPerPage / cols)}{' '}
                     rows)
                   </span>
-                  <span className={css({ fontSize: 'xs', color: 'gray.400' })}>▼</span>
+                  <span className={css({ fontSize: 'xs', color: isDark ? 'gray.500' : 'gray.400' })}>
+                    ▼
+                  </span>
                 </button>
               </DropdownMenu.Trigger>
 
               <DropdownMenu.Portal>
                 <DropdownMenu.Content
                   className={css({
-                    bg: 'white',
+                    bg: isDark ? 'gray.800' : 'white',
                     rounded: 'lg',
                     shadow: 'modal',
                     border: '1px solid',
-                    borderColor: 'gray.200',
+                    borderColor: isDark ? 'gray.700' : 'gray.200',
                     p: '2',
                     minW: '64',
                     maxH: '96',
@@ -354,7 +358,7 @@ export function OrientationPanel({
                               className={css({
                                 fontSize: 'sm',
                                 fontWeight: 'semibold',
-                                color: isSelected ? 'brand.700' : 'gray.700',
+                                color: isSelected ? 'brand.700' : isDark ? 'gray.200' : 'gray.700',
                               })}
                             >
                               {count} problems
@@ -362,7 +366,7 @@ export function OrientationPanel({
                             <div
                               className={css({
                                 fontSize: 'xs',
-                                color: isSelected ? 'brand.600' : 'gray.500',
+                                color: isSelected ? 'brand.600' : isDark ? 'gray.400' : 'gray.500',
                               })}
                             >
                               {itemCols} cols × {rows} rows
@@ -390,7 +394,7 @@ export function OrientationPanel({
               className={css({
                 fontSize: '2xs',
                 fontWeight: 'semibold',
-                color: 'gray.500',
+                color: isDark ? 'gray.400' : 'gray.500',
                 textTransform: 'uppercase',
                 letterSpacing: 'wider',
               })}