Merge pull request #276 from CSSLab/codex/fix-edge-dark-selects

fix: keep Edge analysis selects on dark surfaces

Author: ashtonanderson

src/components/Analysis/BroadcastGameList.tsx

@@ -96,7 +96,7 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
             id="round-selector"
             value={selectedRoundId}
             onChange={(e) => handleRoundChange(e.target.value)}
-            className="w-full rounded-md border border-glass-border bg-glass px-2 py-1 text-xs text-white/90 backdrop-blur-sm focus:outline-none focus:ring-1 focus:ring-human-4"
+            className="edge-dark-select w-full rounded-md border border-glass-border bg-glass px-2 py-1 text-xs text-white/90 backdrop-blur-sm focus:outline-none focus:ring-1 focus:ring-human-4"
           >
             {broadcastController.currentBroadcast.rounds.map((round) => (
               <option key={round.id} value={round.id}>

src/components/Analysis/ConfigureAnalysis.tsx

@@ -45,15 +45,11 @@ export const ConfigureAnalysis: React.FC<Props> = ({
         <div className="relative inline-flex w-full items-center">
           <select
             value={currentMaiaModel}
-            className="w-full cursor-pointer appearance-none rounded border border-glass-border bg-glass py-[5px] pl-2.5 pr-6 text-xs text-white/90 outline-none transition duration-200 hover:bg-glass-stronger"
+            className="edge-dark-select w-full cursor-pointer appearance-none rounded border border-glass-border bg-glass py-[5px] pl-2.5 pr-6 text-xs text-white/90 outline-none transition duration-200 hover:bg-glass-stronger"
             onChange={(e) => setCurrentMaiaModel(e.target.value)}
           >
             {MAIA_MODELS.map((model) => (
-              <option
-                value={model}
-                key={model}
-                className="bg-transparent text-white"
-              >
+              <option value={model} key={model}>
                 {model.replace('maia_kdd_', 'Maia ')}
               </option>
             ))}

src/components/Analysis/Highlight.tsx

@@ -427,7 +427,7 @@ export const Highlight: React.FC<Props> = ({
                       ref={maiaHeaderSelectRef}
                       value={currentMaiaModel}
                       onChange={(e) => setCurrentMaiaModel(e.target.value)}
-                      className="pointer-events-none absolute inset-0 h-full w-full appearance-none opacity-0"
+                      className="edge-dark-select pointer-events-none absolute inset-0 h-full w-full appearance-none opacity-0"
                     >
                       {MAIA_MODELS.map((model) => (
                         <option
@@ -448,7 +448,7 @@ export const Highlight: React.FC<Props> = ({
                     ref={maiaHeaderSelectRef}
                     value={currentMaiaModel}
                     onChange={(e) => setCurrentMaiaModel(e.target.value)}
-                    className={`cursor-pointer appearance-none bg-transparent text-center ${splitTitleTextClass} text-human-1 outline-none transition-colors duration-200 hover:text-human-1/80`}
+                    className={`edge-dark-select cursor-pointer appearance-none bg-transparent text-center ${splitTitleTextClass} text-human-1 outline-none transition-colors duration-200 hover:text-human-1/80`}
                   >
                     {MAIA_MODELS.map((model) => (
                       <option

src/components/Common/GameInfo.tsx

@@ -82,7 +82,7 @@ export const GameInfo: React.FC<Props> = ({
                   <select
                     ref={maiaSelectRef}
                     value={currentMaiaModel}
-                    className="maia-native-select cursor-pointer appearance-none bg-transparent leading-none focus:outline-none"
+                    className="edge-dark-select cursor-pointer appearance-none bg-transparent leading-none focus:outline-none"
                     onChange={(e) => setCurrentMaiaModel(e.target.value)}
                   >
                     {MAIA_MODELS?.map((model) => (

src/components/Common/PlaySetupModal.tsx

@@ -297,7 +297,7 @@ export const PlaySetupModal: React.FC<Props> = (props: Props) => {
                       <select
                         id="partner-select"
                         value={maiaPartnerVersion}
-                        className="maia-native-select w-full min-w-0 rounded border border-glass-border bg-glass px-3 py-2 text-sm text-white/90 focus:outline-none"
+                        className="edge-dark-select w-full min-w-0 rounded border border-glass-border bg-glass px-3 py-2 text-sm text-white/90 focus:outline-none"
                         onChange={(e) => setMaiaPartnerVersion(e.target.value)}
                       >
                         {maiaOptions.map((maia) => (
@@ -327,7 +327,7 @@ export const PlaySetupModal: React.FC<Props> = (props: Props) => {
                   <select
                     id="opponent-select"
                     value={maiaVersion}
-                    className="maia-native-select w-full min-w-0 rounded border border-glass-border bg-glass px-3 py-2 text-sm text-white/90 focus:outline-none"
+                    className="edge-dark-select w-full min-w-0 rounded border border-glass-border bg-glass px-3 py-2 text-sm text-white/90 focus:outline-none"
                     onChange={(e) => setMaiaVersion(e.target.value)}
                   >
                     {maiaOptions.map((maia) => (

src/components/Openings/OpeningSelectionModal.tsx

@@ -1121,7 +1121,7 @@ const DrillStudioPanel: React.FC<{
                       setSelectedMaiaVersion(version)
                     }
                   }}
-                  className="maia-native-select w-full rounded-md border border-white/[0.08] bg-white/[0.06] px-2.5 py-[8px] text-[14px] text-white/90 focus:outline-none"
+                  className="edge-dark-select w-full rounded-md border border-white/[0.08] bg-white/[0.06] px-2.5 py-[8px] text-[14px] text-white/90 focus:outline-none"
                 >
                   {MAIA3_OPPONENT_RATINGS.map((version) => (
                     <option key={version.id} value={version.id}>
@@ -1402,7 +1402,7 @@ const SelectedPanel: React.FC<{
               setSelectedMaiaVersion(version)
             }
           }}
-          className="maia-native-select w-full rounded border border-glass-border bg-white/5 p-2 text-xs text-white/90 backdrop-blur-sm focus:outline-none focus:ring-1 focus:ring-white/20 md:text-sm"
+          className="edge-dark-select w-full rounded border border-glass-border bg-white/5 p-2 text-xs text-white/90 backdrop-blur-sm focus:outline-none focus:ring-1 focus:ring-white/20 md:text-sm"
         >
           {MAIA3_OPPONENT_RATINGS.map((version) => (
             <option key={version.id} value={version.id}>

src/styles/tailwind.css

@@ -185,11 +185,15 @@ svg {
   background-color: rgb(var(--color-human-accent4));
 }
 
-.maia-native-select option,
-.maia-native-select optgroup {
-  background-color: rgb(255 255 255);
-  color: rgb(17 24 39);
-  -webkit-text-fill-color: rgb(17 24 39);
+.edge-dark-select {
+  color-scheme: dark;
+}
+
+.edge-dark-select option,
+.edge-dark-select optgroup {
+  background-color: rgb(var(--color-backdrop));
+  color: rgb(var(--color-text-primary));
+  -webkit-text-fill-color: rgb(var(--color-text-primary));
 }
 
 .spinner {