From 50ed2a64c6f090653dfffa93e132bc244dc3dcfd Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 25 Jun 2025 18:26:33 +0530
Subject: [PATCH] (fix/ddropdown) use complete classNames, interpolation

---
 frontend/src/agents/NewAgent.tsx     | 21 +++++++++----------
 frontend/src/components/Dropdown.tsx | 30 ++++++++++------------------
 frontend/src/upload/Upload.tsx       | 10 +++++++---
 3 files changed, 26 insertions(+), 35 deletions(-)

diff --git a/frontend/src/agents/NewAgent.tsx b/frontend/src/agents/NewAgent.tsx
index 9da7b0d9..2162191a 100644
--- a/frontend/src/agents/NewAgent.tsx
+++ b/frontend/src/agents/NewAgent.tsx
@@ -447,12 +447,11 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                   }
                   size="w-full"
                   rounded="3xl"
-                  buttonDarkBackgroundColor="[#222327]"
                   border="border"
-                  darkBorderColor="[#7E7E7E]"
+                  buttonClassName="bg-white dark:bg-[#222327] border-silver dark:border-[#7E7E7E]"
+                  optionsClassName="bg-white dark:bg-[#383838] border-silver dark:border-[#7E7E7E]"
                   placeholder="Chunks per query"
-                  placeholderTextColor="gray-400"
-                  darkPlaceholderTextColor="silver"
+                  placeholderClassName="text-gray-400 dark:text-silver"
                   contentSize="text-sm"
                 />
               </div>
@@ -479,12 +478,11 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                   }
                   size="w-full"
                   rounded="3xl"
-                  buttonDarkBackgroundColor="[#222327]"
                   border="border"
-                  darkBorderColor="[#7E7E7E]"
+                  buttonClassName="bg-white dark:bg-[#222327] border-silver dark:border-[#7E7E7E]"
+                  optionsClassName="bg-white dark:bg-[#383838] border-silver dark:border-[#7E7E7E] dark:border-[#7E7E7E] dark:bg-dark-charcoal"
+                  placeholderClassName="text-gray-400 dark:text-silver"
                   placeholder="Select a prompt"
-                  placeholderTextColor="gray-400"
-                  darkPlaceholderTextColor="silver"
                   contentSize="text-sm"
                 />
               </div>
@@ -548,12 +546,11 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                 }
                 size="w-full"
                 rounded="3xl"
-                buttonDarkBackgroundColor="[#222327]"
                 border="border"
-                darkBorderColor="[#7E7E7E]"
+                buttonClassName="bg-white dark:bg-[#222327] border-silver dark:border-[#7E7E7E]"
+                optionsClassName="bg-white dark:bg-[#383838] border-silver dark:border-[#7E7E7E]"
                 placeholder="Select type"
-                placeholderTextColor="gray-400"
-                darkPlaceholderTextColor="silver"
+                placeholderClassName="text-gray-400 dark:text-silver"
                 contentSize="text-sm"
               />
             </div>
diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx
index 3839a089..d741497f 100644
--- a/frontend/src/components/Dropdown.tsx
+++ b/frontend/src/components/Dropdown.tsx
@@ -10,20 +10,15 @@ function Dropdown({
   onSelect,
   size = 'w-32',
   rounded = 'xl',
-  buttonBackgroundColor = 'white',
-  buttonDarkBackgroundColor = 'transparent',
-  optionsBackgroundColor = 'white',
-  optionsDarkBackgroundColor = 'dark-charcoal',
+  buttonClassName = 'border-silver bg-white dark:bg-transparent dark:border-dim-gray',
+  optionsClassName = 'border-silver bg-white dark:border-dim-gray dark:bg-dark-charcoal',
   border = 'border-2',
-  borderColor = 'silver',
-  darkBorderColor = 'dim-gray',
   showEdit,
   onEdit,
   showDelete,
   onDelete,
   placeholder,
-  placeholderTextColor = 'gray-500',
-  darkPlaceholderTextColor = 'gray-400',
+  placeholderClassName = 'text-gray-500 dark:text-gray-400',
   contentSize = 'text-base',
 }: {
   options:
@@ -44,20 +39,15 @@ function Dropdown({
     | ((value: { value: number; description: string }) => void);
   size?: string;
   rounded?: 'xl' | '3xl';
-  buttonBackgroundColor?: string;
-  buttonDarkBackgroundColor?: string;
-  optionsBackgroundColor?: string;
-  optionsDarkBackgroundColor?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
   border?: 'border' | 'border-2';
-  borderColor?: string;
-  darkBorderColor?: string;
   showEdit?: boolean;
   onEdit?: (value: { name: string; id: string; type: string }) => void;
   showDelete?: boolean | ((option: any) => boolean);
   onDelete?: (value: string) => void;
   placeholder?: string;
-  placeholderTextColor?: string;
-  darkPlaceholderTextColor?: string;
+  placeholderClassName?: string;
   contentSize?: string;
 }) {
   const dropdownRef = React.useRef<HTMLDivElement>(null);
@@ -80,6 +70,7 @@ function Dropdown({
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
+
   return (
     <div
       className={[
@@ -92,7 +83,7 @@ function Dropdown({
     >
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className={`flex w-full cursor-pointer items-center justify-between ${border} border-${borderColor} bg-${buttonBackgroundColor} px-5 py-3 dark:border-${darkBorderColor} dark:bg-${buttonDarkBackgroundColor} ${
+        className={`flex w-full cursor-pointer items-center justify-between ${border} ${buttonClassName} px-5 py-3 ${
           isOpen ? `${borderTopRadius}` : `${borderRadius}`
         }`}
       >
@@ -103,8 +94,7 @@ function Dropdown({
         ) : (
           <span
             className={`truncate ${selectedValue && `dark:text-bright-gray`} ${
-              !selectedValue &&
-              `text-${placeholderTextColor} dark:text-${darkPlaceholderTextColor}`
+              !selectedValue && ` ${placeholderClassName}`
             } ${contentSize}`}
           >
             {selectedValue && 'label' in selectedValue
@@ -130,7 +120,7 @@ function Dropdown({
       </button>
       {isOpen && (
         <div
-          className={`absolute right-0 left-0 z-20 -mt-1 max-h-40 overflow-y-auto rounded-b-xl ${border} border-${borderColor} bg-${optionsBackgroundColor} shadow-lg dark:border-${darkBorderColor} dark:bg-${optionsDarkBackgroundColor}`}
+          className={`absolute right-0 left-0 z-20 -mt-1 max-h-40 overflow-y-auto rounded-b-xl ${border} ${optionsClassName} shadow-lg`}
         >
           {options.map((option: any, index) => (
             <div
diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index 2441d7c6..420427d4 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -150,7 +150,10 @@ function Upload({
             rounded="3xl"
             placeholder={field.label}
             border="border"
-            borderColor="gray-5000"
+            buttonClassName="border-silver bg-white dark:border-dim-gray dark:bg-[#222327]"
+            optionsClassName="border-silver bg-white dark:border-dim-gray dark:bg-[#383838]"
+            placeholderClassName="text-gray-400 dark:text-silver"
+            contentSize="text-sm"
           />
         );
       case 'boolean':
@@ -651,7 +654,6 @@ function Upload({
         {activeTab === 'remote' && (
           <>
             <Dropdown
-              border="border"
               options={urlOptions}
               selectedValue={
                 urlOptions.find((opt) => opt.value === ingestor.type) || null
@@ -660,8 +662,10 @@ function Upload({
                 handleIngestorTypeChange(selected.value as IngestorType)
               }
               size="w-full"
-              darkBorderColor="dim-gray"
               rounded="3xl"
+              border="border"
+              placeholder="Select ingestor type"
+              placeholderClassName="text-gray-400 dark:text-silver"
             />
             {/* Dynamically render form fields based on schema */}