From 3bd5c00d212e838abb709e2359ff103dbce97552 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Wed, 12 Nov 2025 18:06:22 -0600
Subject: [PATCH] fix: use ASCII characters for operator icons to support dark
 mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace emoji operator icons (➕ ➖ ✖️ ➗) with ASCII characters
(+ − × ÷) that properly inherit font colors in dark mode.

Changes:
- Update SETTING_ICONS to use ASCII: +, −, ×, ÷, ±
- Update TabNavigation operator icon function to match
- Change styling check from isPlusMinus to isOperatorSymbol
- All operator symbols now display correctly in light and dark modes

Fixes issue where emoji operators stayed dark in dark mode because
they don't inherit text color properties.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/config-sidebar/TabNavigation.tsx       | 11 ++++++-----
 .../app/create/worksheets/utils/settingsSummary.ts    |  8 ++++----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/app/create/worksheets/components/config-sidebar/TabNavigation.tsx b/apps/web/src/app/create/worksheets/components/config-sidebar/TabNavigation.tsx
index de0ffe94..e186478f 100644
--- a/apps/web/src/app/create/worksheets/components/config-sidebar/TabNavigation.tsx
+++ b/apps/web/src/app/create/worksheets/components/config-sidebar/TabNavigation.tsx
@@ -15,8 +15,8 @@ export const TABS: Tab[] = [
     label: 'Operator',
     icon: (operator) => {
       if (operator === 'mixed') return '±'
-      if (operator === 'subtraction') return '➖'
-      return '➕'
+      if (operator === 'subtraction') return '−'
+      return '+'
     },
   },
   { id: 'layout', label: 'Layout', icon: '📐' },
@@ -52,7 +52,8 @@ export function TabNavigation({ activeTab, onChange, operator }: TabNavigationPr
     >
       {TABS.map((tab) => {
         const icon = getTabIcon(tab)
-        const isPlusMinus = icon === '±'
+        // All operator symbols (+, −, ±) are ASCII characters that need larger font size
+        const isOperatorSymbol = tab.id === 'operator'
 
         return (
           <button
@@ -100,8 +101,8 @@ export function TabNavigation({ activeTab, onChange, operator }: TabNavigationPr
             >
               <span
                 className={css({
-                  fontSize: isPlusMinus ? 'lg' : undefined,
-                  fontWeight: isPlusMinus ? 'bold' : undefined,
+                  fontSize: isOperatorSymbol ? 'lg' : undefined,
+                  fontWeight: isOperatorSymbol ? 'bold' : undefined,
                 })}
               >
                 {icon}
diff --git a/apps/web/src/app/create/worksheets/utils/settingsSummary.ts b/apps/web/src/app/create/worksheets/utils/settingsSummary.ts
index d65b288d..ef85b883 100644
--- a/apps/web/src/app/create/worksheets/utils/settingsSummary.ts
+++ b/apps/web/src/app/create/worksheets/utils/settingsSummary.ts
@@ -5,10 +5,10 @@ import type { WorksheetFormState } from '../types'
  */
 export const SETTING_ICONS = {
   operator: {
-    addition: '➕',
-    subtraction: '➖',
-    multiplication: '✖️',
-    division: '➗',
+    addition: '+',
+    subtraction: '−',
+    multiplication: '×',
+    division: '÷',
     mixed: '±',
   },
   difficulty: {