From eea87ac02f0ca87d7732fcfac2e2ebb8a81f8012 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Mon, 13 Jan 2025 11:08:04 -0800
Subject: [PATCH] Better SegmentedControl styles

---
 src-web/components/core/SegmentedControl.tsx | 43 ++++++++++++--------
 1 file changed, 27 insertions(+), 16 deletions(-)

diff --git a/src-web/components/core/SegmentedControl.tsx b/src-web/components/core/SegmentedControl.tsx
index 3ed7bf41..4241a7b5 100644
--- a/src-web/components/core/SegmentedControl.tsx
+++ b/src-web/components/core/SegmentedControl.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { useRef } from 'react';
 import { useStateWithDeps } from '../../hooks/useStateWithDeps';
 import type { IconProps } from './Icon';
@@ -18,10 +19,10 @@ export function SegmentedControl<T extends string>({ value, onChange, options, n
   return (
     <HStack
       ref={containerRef}
-      space={1}
       role="group"
       dir="ltr"
-      className="mb-auto bg-surface opacity-0 group-focus-within/markdown:opacity-100 group-hover/markdown:opacity-100 transition-opacity transform-gpu"
+      space={0.5}
+      className="bg-surface-highlight rounded-md mb-auto opacity-0 group-focus-within/markdown:opacity-100 group-hover/markdown:opacity-100 transition-opacity transform-gpu"
       onKeyDown={(e) => {
         const selectedIndex = options.findIndex((o) => o.value === selectedValue);
         if (e.key === 'ArrowRight') {
@@ -37,20 +38,30 @@ export function SegmentedControl<T extends string>({ value, onChange, options, n
         }
       }}
     >
-      {options.map((o, i) => (
-        <IconButton
-          size="xs"
-          variant={value === o.value ? 'solid' : 'border'}
-          color={value === o.value ? 'secondary' : 'default'}
-          role="radio"
-          event={{ id: name, value: String(o.value) }}
-          tabIndex={selectedValue === o.value ? 0 : -1}
-          key={i}
-          title={o.label}
-          icon={o.icon}
-          onClick={() => onChange(o.value)}
-        />
-      ))}
+      {options.map((o, i) => {
+        const isSelected = selectedValue === o.value;
+        const isActive = value === o.value;
+        return (
+          <IconButton
+            size="xs"
+            variant={isActive ? "border" : "solid"}
+            // color={isActive ? "secondary": "default"}
+            color={isActive ? "default" : "default"}
+            role="radio"
+            event={{ id: name, value: String(o.value) }}
+            tabIndex={isSelected ? 0 : -1}
+            className={classNames(
+                '!px-1.5 !w-auto',
+                !isActive &&  'opacity-disabled',
+                'focus:ring-border-focus',
+            )}
+            key={i}
+            title={o.label}
+            icon={o.icon}
+            onClick={() => onChange(o.value)}
+          />
+        );
+      })}
     </HStack>
   );
 }