fix(toolkit): tool list and switch design fixes (#718)

* fix tool list styling

* update switch styling with on/off

* use changes in create assistant flow

Author: abimacarmes

src/interfaces/assistants_web/src/components/AgentSettingsForm/ToolsStep.tsx

@@ -57,7 +57,7 @@ const ToolRow: React.FC<{
   handleSwitch: (checked: boolean) => void;
 }> = ({ name, description, icon, checked, handleSwitch }) => {
   return (
-    <div className="flex flex-col space-y-4 rounded-md border p-4 dark:border-volcanic-300 dark:bg-volcanic-100">
+    <div className="flex flex-col space-y-1 rounded-md border p-4 dark:border-volcanic-300 dark:bg-volcanic-100">
       <div className="flex justify-between">
         <div className="flex items-center space-x-2">
           <div className="flex h-5 w-5 items-center justify-center rounded-sm bg-marble-800 dark:bg-volcanic-200">
@@ -70,6 +70,7 @@ const ToolRow: React.FC<{
         <Switch
           checked={checked}
           onChange={(checked: boolean) => !!name && handleSwitch(checked)}
+          showCheckedState
         />
       </div>
       <Text className="dark:text-marble-800">{description}</Text>

src/interfaces/assistants_web/src/components/Composer/DataSourceMenu.tsx

@@ -113,6 +113,7 @@ export const DataSourceMenu: React.FC<Props> = ({ agent, tools }) => {
                     theme="evolved-blue"
                     checked={!!paramsTools?.find((t) => t.name === tool.name)}
                     onChange={(checked) => handleToggle(tool.name!, checked)}
+                    showCheckedState
                   />
                 )}
               </div>

src/interfaces/assistants_web/src/components/UI/Switch.tsx

@@ -19,6 +19,7 @@ type Props = {
   label?: string;
   name?: string;
   theme?: COHERE_BRANDED_COLORS;
+  showCheckedState?: boolean;
   className?: string;
 };
 
@@ -30,8 +31,30 @@ export const Switch: React.FC<Props> = ({
   tooltip,
   theme = 'evolved-green',
   name,
+  showCheckedState = false,
   className = '',
 }) => {
+  const themeColors: Partial<Record<COHERE_BRANDED_COLORS, string>> = {
+    blue: 'bg-blue-500 group-hover:bg-blue-400',
+    'evolved-green': 'bg-evolved-green-700 group-hover:bg-evolved-green-500',
+    quartz: 'bg-quartz-500 group-hover:bg-quartz-400',
+    green: 'bg-green-250 group-hover:bg-green-200',
+    mushroom: 'bg-mushroom-600 group-hover:bg-mushroom-500',
+    coral: 'bg-coral-600 group-hover:bg-coral-500',
+    'evolved-blue': 'bg-evolved-blue-500 group-hover:bg-blue-400',
+    'evolved-mushroom': 'bg-evolved-mushroom-500 group-hover:bg-evolved-mushroom-600',
+    'evolved-quartz': 'bg-evolved-quartz-500 group-hover:bg-evolved-quartz-700',
+  };
+
+  const checkedColor = checked
+    ? themeColors[theme]
+    : 'bg-mushroom-900 hover:bg-mushroom-800 dark:bg-volcanic-500 dark:group-hover:bg-volcanic-400';
+
+  const toggleTextClassNames = cn(
+    'pointer-events-none absolute',
+    'pt-0.5 font-variable text-[6px] font-medium uppercase',
+    'transform transition-all duration-300 ease-in-out'
+  );
   return (
     <div className="group flex w-10 items-center">
       <Field>
@@ -47,34 +70,41 @@ export const Switch: React.FC<Props> = ({
             checked={checked}
             onChange={onChange}
             className={cn(
-              'relative inline-flex h-5 w-10 shrink-0 cursor-pointer rounded border-2 border-transparent',
+              'relative inline-flex h-4 w-[30px] shrink-0 cursor-pointer rounded border-2 border-transparent',
               'transition-colors duration-300 ease-in-out',
               'focus-visible:outline focus-visible:outline-offset-4 focus-visible:outline-volcanic-500',
-              {
-                'bg-mushroom-900 hover:bg-mushroom-800 dark:bg-volcanic-500 dark:group-hover:bg-volcanic-400':
-                  !checked,
-                'bg-blue-500 group-hover:bg-blue-400': checked && theme === 'blue',
-                'bg-evolved-green-700 group-hover:bg-evolved-green-500':
-                  checked && theme === 'evolved-green',
-                'bg-quartz-500 group-hover:bg-quartz-400': checked && theme === 'quartz',
-                'bg-green-250 group-hover:bg-green-200': checked && theme === 'green',
-                'bg-mushroom-600 group-hover:bg-mushroom-500': checked && theme === 'mushroom',
-                'bg-coral-600 group-hover:bg-coral-500': checked && theme === 'coral',
-                'bg-evolved-blue-500 group-hover:bg-blue-400': checked && theme === 'evolved-blue',
-                'bg-evolved-mushroom-500 group-hover:bg-evolved-mushroom-600':
-                  checked && theme === 'evolved-mushroom',
-                'bg-evolved-quartz-500 group-hover:bg-evolved-quartz-700':
-                  checked && theme === 'evolved-quartz',
-              }
+              checkedColor
             )}
           >
+            {showCheckedState && (
+              <>
+                <Text
+                  aria-hidden="true"
+                  className={cn(toggleTextClassNames, {
+                    'translate-x-[3px] opacity-100': checked,
+                    'translate-x-[14px] opacity-0': !checked,
+                  })}
+                >
+                  On
+                </Text>
+                <Text
+                  aria-hidden="true"
+                  className={cn(toggleTextClassNames, 'text-mushroom-700 dark:text-volcanic-800', {
+                    'translate-x-[14px] opacity-100': !checked,
+                    'translate-x-0 opacity-0': checked,
+                  })}
+                >
+                  Off
+                </Text>
+              </>
+            )}
             <span
               aria-hidden="true"
               className={cn(
-                'pointer-events-none inline-block h-4 w-5 rounded shadow-lg',
+                'pointer-events-none absolute h-3 w-3 rounded shadow-lg',
                 'transform transition-all duration-300 ease-in-out',
                 {
-                  'translate-x-4': checked,
+                  'translate-x-[14px]': checked,
                   'translate-x-0': !checked,
                   'bg-mushroom-700 dark:bg-volcanic-800': !checked,
                   'bg-marble-950': checked,

src/interfaces/assistants_web/src/components/UI/ToggleCard.tsx

@@ -43,23 +43,21 @@ export const ToggleCard: React.FC<Props> = ({
   return (
     <div className="flex flex-col rounded-md border border-volcanic-800 bg-volcanic-950 p-4 dark:border-volcanic-300 dark:bg-volcanic-150">
       <div className="flex items-start gap-x-6">
-        <div className="flex flex-grow flex-col gap-y-2">
+        <div className="flex flex-grow flex-col gap-y-1">
           <div className="flex items-center gap-x-2">
-            <div className="flex size-6 items-center justify-center rounded bg-volcanic-900 dark:bg-volcanic-200">
+            <div className="flex size-5 items-center justify-center rounded bg-volcanic-900 dark:bg-volcanic-200">
               <Icon
                 name={icon}
                 kind="outline"
-                size="sm"
+                size="xs"
                 className="fill-volcanic-300 dark:fill-marble-950"
               />
             </div>
             <Text styleAs="label" as="span" className="font-medium">
               {label}
             </Text>
           </div>
-          <Text styleAs="p-sm" className="text-mushroom-300 dark:text-marble-800">
-            {description}
-          </Text>
+          <Text className="text-mushroom-300 dark:text-marble-800">{description}</Text>
           {errorMessage && (
             <Text styleAs="p-sm" className="text-danger-350">
               Error: {errorMessage}
@@ -72,6 +70,7 @@ export const ToggleCard: React.FC<Props> = ({
             onChange={onToggle}
             className="flex-shrink-0 gap-0"
             theme={theme}
+            showCheckedState
           />
         )}
       </div>