chore: maia thinking time more clear

Author: ashtonanderson

src/components/Common/PlaySetupModal.tsx

@@ -39,13 +39,17 @@ interface OptionSelectProps<T> {
   labels: string[]
   selected: T
   onChange: (selected: T) => void
+  selectedClassName?: string
+  unselectedClassName?: string
 }
 
 function OptionSelect<T>({
   options,
   labels,
   selected,
   onChange,
+  selectedClassName = 'border border-glass-border bg-glass-stronger text-white',
+  unselectedClassName = 'border border-glass-border bg-glass text-white/90 hover:bg-glass-stronger',
 }: OptionSelectProps<T>) {
   return (
     <div className="flex overflow-hidden rounded-lg">
@@ -55,8 +59,8 @@ function OptionSelect<T>({
             key={index}
             className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
               option === selected
-                ? 'border border-glass-border bg-glass-stronger text-white'
-                : 'border border-glass-border bg-glass text-white/90 hover:bg-glass-stronger'
+                ? selectedClassName
+                : unselectedClassName
             } ${index === 0 ? 'rounded-l-lg' : ''} ${
               index === options.length - 1 ? 'rounded-r-lg' : ''
             }`}
@@ -403,6 +407,7 @@ export const PlaySetupModal: React.FC<Props> = (props: Props) => {
                     labels={['Instant', 'Human-like']}
                     selected={simulateMaiaTime}
                     onChange={setSimulateMaiaTime}
+                    selectedClassName="border-human-4 bg-human-4 text-white hover:bg-human-4/90"
                   />
                 </div>
               </div>

src/components/Play/HandBrainPlayControls.tsx

@@ -187,7 +187,7 @@ export const HandBrainPlayControls: React.FC<Props> = ({
                     <button
                       className={`flex-1 px-3 py-1.5 text-xs font-medium transition-colors duration-200 ${
                         !simulateMaiaTime
-                          ? 'bg-glass-stronger text-white'
+                          ? 'bg-human-4 text-white hover:bg-human-4/90'
                           : 'text-white/70 hover:bg-glass-strong hover:text-white'
                       }`}
                       onClick={() => setSimulateMaiaTime(false)}
@@ -197,7 +197,7 @@ export const HandBrainPlayControls: React.FC<Props> = ({
                     <button
                       className={`flex-1 px-3 py-1.5 text-xs font-medium transition-colors duration-200 ${
                         simulateMaiaTime
-                          ? 'bg-glass-stronger text-white'
+                          ? 'bg-human-4 text-white hover:bg-human-4/90'
                           : 'text-white/70 hover:bg-glass-strong hover:text-white'
                       }`}
                       onClick={() => setSimulateMaiaTime(true)}

src/components/Play/PlayControls.tsx

@@ -81,7 +81,7 @@ export const PlayControls: React.FC<Props> = ({
                   <button
                     className={`flex-1 px-3 py-1.5 text-xs font-medium transition-colors duration-200 ${
                       !simulateMaiaTime
-                        ? 'bg-glass-stronger text-white'
+                        ? 'bg-human-4 text-white hover:bg-human-4/90'
                         : 'text-white/70 hover:bg-glass-strong hover:text-white'
                     }`}
                     onClick={() => setSimulateMaiaTime(false)}
@@ -91,7 +91,7 @@ export const PlayControls: React.FC<Props> = ({
                   <button
                     className={`flex-1 px-3 py-1.5 text-xs font-medium transition-colors duration-200 ${
                       simulateMaiaTime
-                        ? 'bg-glass-stronger text-white'
+                        ? 'bg-human-4 text-white hover:bg-human-4/90'
                         : 'text-white/70 hover:bg-glass-strong hover:text-white'
                     }`}
                     onClick={() => setSimulateMaiaTime(true)}