From 8ee4d0cbdcb6a0e75be7751e27814dd3c57719ed Mon Sep 17 00:00:00 2001
From: Lily Delalande <119957291+lily-de@users.noreply.github.com>
Date: Thu, 20 Mar 2025 16:45:45 -0400
Subject: [PATCH] tweak darkmode for modal (#1797)

---
 .../extensions/modal/EnvVarsSection.tsx       |  6 +-
 .../extensions/modal/ExtensionInfoFields.tsx  | 57 +++++++++++++++++++
 .../extensions/modal/ExtensionModal.tsx       | 49 +++-------------
 3 files changed, 69 insertions(+), 43 deletions(-)
 create mode 100644 ui/desktop/src/components/settings_v2/extensions/modal/ExtensionInfoFields.tsx

diff --git a/ui/desktop/src/components/settings_v2/extensions/modal/EnvVarsSection.tsx b/ui/desktop/src/components/settings_v2/extensions/modal/EnvVarsSection.tsx
index d79cb3a6..39d95e28 100644
--- a/ui/desktop/src/components/settings_v2/extensions/modal/EnvVarsSection.tsx
+++ b/ui/desktop/src/components/settings_v2/extensions/modal/EnvVarsSection.tsx
@@ -45,7 +45,7 @@ export default function EnvVarsSection({
                 value={envVar.key}
                 onChange={(e) => onChange(index, 'key', e.target.value)}
                 placeholder="Variable name"
-                className={`w-full bg-bgSubtle border-borderSubtle text-textStandard`}
+                className={`w-full border-borderSubtle text-textStandard`}
               />
             </div>
             <div className="relative">
@@ -53,7 +53,7 @@ export default function EnvVarsSection({
                 value={envVar.value}
                 onChange={(e) => onChange(index, 'value', e.target.value)}
                 placeholder="Value"
-                className={`w-full bg-bgSubtle border-borderSubtle text-textStandard`}
+                className={`w-full border-borderSubtle text-textStandard`}
               />
             </div>
             <Button
@@ -80,7 +80,7 @@ export default function EnvVarsSection({
         <Button
           onClick={onAdd}
           variant="ghost"
-          className="flex items-center justify-start gap-1 px-2 pr-4 text-s font-medium rounded-full dark:bg-slate-400 dark:text-gray-300 bg-gray-300 text-slate-400 dark:hover:bg-slate-300 hover:bg-gray-500 hover:text-white dark:hover:text-gray-900 transition-colors min-w-[60px] h-9"
+          className="flex items-center justify-start gap-1 px-2 pr-4 text-s font-medium rounded-full dark:bg-slate-400 dark:text-gray-300 bg-gray-300 dark:bg-slate text-slate-400 dark:hover:bg-slate-300 hover:bg-gray-500 hover:text-white dark:hover:text-gray-900 transition-colors min-w-[60px] h-9"
         >
           <Plus className="h-3 w-3" /> Add
         </Button>
diff --git a/ui/desktop/src/components/settings_v2/extensions/modal/ExtensionInfoFields.tsx b/ui/desktop/src/components/settings_v2/extensions/modal/ExtensionInfoFields.tsx
new file mode 100644
index 00000000..b0bf0b74
--- /dev/null
+++ b/ui/desktop/src/components/settings_v2/extensions/modal/ExtensionInfoFields.tsx
@@ -0,0 +1,57 @@
+import { Input } from '../../../ui/input';
+import Select from 'react-select';
+import React, { useState } from 'react';
+
+interface ExtensionInfoFieldsProps {
+  name: string;
+  type: 'stdio' | 'sse' | 'builtin';
+  onChange: (key: string, value: any) => void;
+  submitAttempted: boolean;
+}
+
+export default function ExtensionInfoFields({
+  name,
+  type,
+  onChange,
+  submitAttempted,
+}: ExtensionInfoFieldsProps) {
+  const isNameValid = () => {
+    return name.trim() !== '';
+  };
+
+  return (
+    <div className="flex justify-between gap-4 mb-6">
+      <div className="flex-1">
+        <label className="text-sm font-medium mb-2 block text-textStandard">Extension Name</label>
+        <div className="relative">
+          <Input
+            value={name}
+            onChange={(e) => onChange('name', e.target.value)}
+            placeholder="Enter extension name..."
+            className={`${!submitAttempted || isNameValid() ? 'border-borderSubtle' : 'border-red-500'} text-textStandard focus:border-borderStandard`}
+          />
+          {submitAttempted && !isNameValid() && (
+            <div className="absolute text-xs text-red-500 mt-1">Name is required</div>
+          )}
+        </div>
+      </div>
+      {/* Type Dropdown */}
+      <div className="w-[200px]">
+        <label className="text-sm font-medium mb-2 block text-textStandard">Type</label>
+        <Select
+          value={{ value: type, label: type.toUpperCase() }}
+          onChange={(option: { value: string; label: string } | null) => {
+            if (option) {
+              onChange('type', option.value);
+            }
+          }}
+          options={[
+            { value: 'stdio', label: 'Standard IO (STDIO)' },
+            { value: 'sse', label: 'Security Service Edge (SSE)' },
+          ]}
+          isSearchable={false}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/ui/desktop/src/components/settings_v2/extensions/modal/ExtensionModal.tsx b/ui/desktop/src/components/settings_v2/extensions/modal/ExtensionModal.tsx
index 3e853de5..49026af9 100644
--- a/ui/desktop/src/components/settings_v2/extensions/modal/ExtensionModal.tsx
+++ b/ui/desktop/src/components/settings_v2/extensions/modal/ExtensionModal.tsx
@@ -8,6 +8,7 @@ import { ExtensionFormData } from '../utils';
 import EnvVarsSection from './EnvVarsSection';
 import ExtensionConfigFields from './ExtensionConfigFields';
 import { PlusIcon, Edit, Trash2, AlertTriangle } from 'lucide-react';
+import ExtensionInfoFields from './ExtensionInfoFields';
 
 interface ExtensionModalProps {
   title: string;
@@ -172,50 +173,18 @@ export default function ExtensionModal({
       ) : (
         <>
           {/* Form Fields */}
-          {/* Name */}
-          <div className="flex justify-between gap-4 mb-6">
-            <div className="flex-1">
-              <label className="text-sm font-medium mb-2 block text-textStandard">
-                Extension Name
-              </label>
-              <div className="relative">
-                <Input
-                  value={formData.name}
-                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                  placeholder="Enter extension name..."
-                  className={`${!submitAttempted || formData.name.trim() !== '' ? 'border-borderSubtle' : 'border-red-500'} text-textStandard focus:border-borderStandard`}
-                />
-                {submitAttempted && !isNameValid() && (
-                  <div className="absolute text-xs text-red-500 mt-1">Name is required</div>
-                )}
-              </div>
-            </div>
-            {/*Type Dropdown */}
-            <div className="w-[200px]">
-              <label className="text-sm font-medium mb-2 block text-textStandard">Type</label>
-              <Select
-                value={{ value: formData.type, label: formData.type.toUpperCase() }}
-                onChange={(option: { value: string; label: string } | null) =>
-                  setFormData({
-                    ...formData,
-                    type: (option?.value as 'stdio' | 'sse' | 'builtin') || 'stdio',
-                  })
-                }
-                options={[
-                  { value: 'stdio', label: 'Standard IO (STDIO)' },
-                  { value: 'sse', label: 'Security Service Edge (SSE)' },
-                ]}
-                styles={createDarkSelectStyles('200px')}
-                theme={darkSelectTheme}
-                isSearchable={false}
-              />
-            </div>
-          </div>
+          {/* Name and Type */}
+          <ExtensionInfoFields
+            name={formData.name}
+            type={formData.type}
+            onChange={(key, value) => setFormData({ ...formData, [key]: value })}
+            submitAttempted={submitAttempted}
+          />
 
           {/* Divider */}
           <hr className="border-t border-borderSubtle mb-6" />
 
-          {/* Config Fields */}
+          {/* Command */}
           <div className="mb-6">
             <ExtensionConfigFields
               type={formData.type}