(fix:ui) minor perfections

frontend/src/modals/AddActionModal.tsx

@@ -59,6 +59,7 @@ export default function AddActionModal({
               setFunctionNameError(!isValidFunctionName(value));
             }}
             borderVariant="thin"
+            labelBgClassName="bg-white dark:bg-charleston-green-2"
             placeholder={'Enter name'}
           />
           <p

frontend/src/modals/ChunkModal.tsx

@@ -61,6 +61,7 @@ export default function ChunkModal({
                   onChange={(e) => setTitle(e.target.value)}
                   borderVariant="thin"
                   placeholder={'Enter title'}
+                  labelBgClassName="bg-white dark:bg-charleston-green-2"
                 ></Input>
               </div>
               <div className="mt-6 relative px-3">
@@ -123,15 +124,13 @@ export default function ChunkModal({
                 Edit Chunk
               </h2>
               <div className="mt-6 relative px-3">
-                <span className="z-10 absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
-                  Title
-                </span>
                 <Input
                   type="text"
                   value={title}
                   onChange={(e) => setTitle(e.target.value)}
                   borderVariant="thin"
                   placeholder={'Enter title'}
+                  labelBgClassName="bg-white dark:bg-charleston-green-2"
                 ></Input>
               </div>
               <div className="mt-6 relative px-3">

frontend/src/modals/ConfigToolModal.tsx

@@ -59,7 +59,7 @@ export default function ConfigToolModal({
             onChange={(e) => setAuthKey(e.target.value)}
             borderVariant="thin"
             placeholder={t('modals.configTool.apiKeyPlaceholder')}
-            label={t('modals.configTool.apiKeyLabel')}
+            labelBgClassName="bg-white dark:bg-charleston-green-2"
           />
         </div>
         <div className="mt-8 flex flex-row-reverse gap-1 px-3">

frontend/src/modals/CreateAPIKeyModal.tsx

@@ -84,9 +84,10 @@ export default function CreateAPIKeyModal({
           type="text"
           className="rounded-md"
           value={APIKeyName}
-          label={t('modals.createAPIKey.apiKeyName')}
+          placeholder={t('modals.createAPIKey.apiKeyName')}
           onChange={(e) => setAPIKeyName(e.target.value)}
           borderVariant="thin"
+          labelBgClassName="bg-white dark:bg-charleston-green-2"
         ></Input>
       </div>
       <div className="my-4">

frontend/src/preferences/PromptsModal.tsx

@@ -38,7 +38,6 @@ function AddPrompt({
         <Input
           placeholder={t('modals.prompts.promptName')}
           type="text"
-          label={t('modals.prompts.promptName')}
           className="h-10 rounded-lg"
           value={newPromptName}
           onChange={(e) => setNewPromptName(e.target.value)}
@@ -115,6 +114,7 @@ function EditPrompt({
             className="h-10 rounded-lg"
             value={editPromptName}
             onChange={(e) => setEditPromptName(e.target.value)}
+            labelBgClassName="bg-white dark:bg-charleston-green-2"
           />
           <div className="relative bottom-12 left-3 mt-[-3.00px]">
             <span className="bg-white px-1 text-xs text-silver dark:bg-outer-space dark:text-silver">

frontend/src/settings/APIKeys.tsx

@@ -109,7 +109,7 @@ export default function APIKeys() {
         <div className="mb-6 flex flex-col sm:flex-row justify-end items-start sm:items-center gap-3">
           <button
             onClick={() => setCreateModal(true)}
-            className="rounded-full w-full sm:w-40 bg-purple-30 px-4 py-3 text-white hover:bg-[#6F3FD1]"
+            className="rounded-full text-sm w-[108px] h-[30px] bg-purple-30 text-white hover:bg-[#6F3FD1] flex items-center justify-center"
             title={t('settings.apiKeys.createNew')}
           >
             {t('settings.apiKeys.createNew')}