From 33255cd554e8844f0ccdbba6126d1f49a000c4b5 Mon Sep 17 00:00:00 2001
From: Nahiyan Khan <nahiyan.khan@gmail.com>
Date: Fri, 11 Apr 2025 19:33:34 -0400
Subject: [PATCH] styles: settings extensions tweaks (#2173)

---
 .../settings_v2/extensions/ExtensionsSection.tsx          | 2 +-
 .../settings_v2/models/subcomponents/AddModelButton.tsx   | 2 +-
 ui/desktop/src/components/ui/switch.tsx                   | 8 ++++----
 ui/desktop/src/styles/main.css                            | 4 ++++
 ui/desktop/tailwind.config.ts                             | 2 ++
 5 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/ui/desktop/src/components/settings_v2/extensions/ExtensionsSection.tsx b/ui/desktop/src/components/settings_v2/extensions/ExtensionsSection.tsx
index be651c97..c3f81064 100644
--- a/ui/desktop/src/components/settings_v2/extensions/ExtensionsSection.tsx
+++ b/ui/desktop/src/components/settings_v2/extensions/ExtensionsSection.tsx
@@ -153,7 +153,7 @@ export default function ExtensionsSection({ deepLinkConfig, showEnvVars }: Exten
 
         <div className="flex gap-4 pt-4 w-full">
           <Button
-            className="flex items-center gap-2 justify-center text-white dark:text-textSubtle bg-bgAppInverse hover:bg-bgStandardInverse [&>svg]:!size-4"
+            className="flex items-center gap-2 justify-center text-white dark:text-black bg-bgAppInverse hover:bg-bgStandardInverse [&>svg]:!size-4"
             onClick={() => setIsAddModalOpen(true)}
           >
             <Plus className="h-4 w-4" />
diff --git a/ui/desktop/src/components/settings_v2/models/subcomponents/AddModelButton.tsx b/ui/desktop/src/components/settings_v2/models/subcomponents/AddModelButton.tsx
index 37b7217f..38f0a758 100644
--- a/ui/desktop/src/components/settings_v2/models/subcomponents/AddModelButton.tsx
+++ b/ui/desktop/src/components/settings_v2/models/subcomponents/AddModelButton.tsx
@@ -14,7 +14,7 @@ export const AddModelButton = ({ setView }: AddModelButtonProps) => {
   return (
     <>
       <Button
-        className="flex items-center gap-2 justify-center text-white dark:text-textSubtle bg-bgAppInverse hover:bg-bgStandardInverse [&>svg]:!size-4"
+        className="flex items-center gap-2 justify-center text-white dark:text-black bg-bgAppInverse hover:bg-bgStandardInverse [&>svg]:!size-4"
         onClick={() => setIsAddModelModalOpen(true)}
       >
         <ArrowLeftRight />
diff --git a/ui/desktop/src/components/ui/switch.tsx b/ui/desktop/src/components/ui/switch.tsx
index e3f01108..2dbeb752 100644
--- a/ui/desktop/src/components/ui/switch.tsx
+++ b/ui/desktop/src/components/ui/switch.tsx
@@ -12,8 +12,8 @@ export const Switch = React.forwardRef<
     className={cn(
       'peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50',
       variant === 'default'
-        ? 'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input'
-        : 'data-[state=checked]:bg-gray-900 dark:data-[state=checked]:bg-white data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700',
+        ? 'data-[state=checked]:bg-bgStandard data-[state=unchecked]:bg-input'
+        : 'data-[state=checked]:bg-black dark:data-[state=checked]:bg-white data-[state=unchecked]:bg-bgStandard dark:data-[state=unchecked]:bg-[#333333]',
       className
     )}
     {...props}
@@ -23,8 +23,8 @@ export const Switch = React.forwardRef<
       className={cn(
         'pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-transform',
         variant === 'default'
-          ? 'bg-background data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
-          : 'bg-white dark:bg-gray-900 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
+          ? 'bg-bgProminent data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
+          : 'bg-white dark:bg-black data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
       )}
     />
   </SwitchPrimitives.Root>
diff --git a/ui/desktop/src/styles/main.css b/ui/desktop/src/styles/main.css
index 6372cbe3..7e8b350a 100644
--- a/ui/desktop/src/styles/main.css
+++ b/ui/desktop/src/styles/main.css
@@ -99,7 +99,9 @@
     --background-standard: var(--grey-90);
     --background-subtle: var(--grey-95);
     --background-app-inverse: var(--constant-black);
+    --background-subtle-inverse: var(--dark-grey-15);
     --background-standard-inverse: var(--dark-grey-25);
+    --background-prominent-inverse: var(--dark-grey-40);
 
     --border-divider: var(--grey-90);
     --border-inverse: var(--constant-white);
@@ -128,6 +130,8 @@
       --background-standard: var(--dark-grey-25);
       --background-subtle: var(--dark-grey-15);
       --background-app-inverse: var(--constant-white);
+      --background-subtle-inverse: var(--grey-95);
+      --background-standard-inverse: var(--grey-90);
       --background-prominent-inverse: var(--grey-80);
 
       --border-divider: var(--dark-grey-25);
diff --git a/ui/desktop/tailwind.config.ts b/ui/desktop/tailwind.config.ts
index 4de8e340..5ef512cd 100644
--- a/ui/desktop/tailwind.config.ts
+++ b/ui/desktop/tailwind.config.ts
@@ -55,7 +55,9 @@ export default {
         bgStandard: 'var(--background-standard)',
         bgProminent: 'var(--background-prominent)',
         bgAppInverse: 'var(--background-app-inverse)',
+        bgSubtleInverse: 'var(--background-subtle-inverse)',
         bgStandardInverse: 'var(--background-standard-inverse)',
+        bgProminentInverse: 'var(--background-prominent-inverse)',
 
         borderSubtle: 'var(--border-subtle)',
         borderStandard: 'var(--border-standard)',