fix: minor ui changes

frontend/src/Setting.tsx

@@ -281,6 +281,7 @@ const Prompts: React.FC<PromptProps> = ({
           ...prompts,
           { name: newPromptName, id: newPrompt.id, type: 'private' },
         ]);
+        setModalState('INACTIVE');
       }
       onSelectPrompt(newPromptName, newPrompt.id, newPromptContent);
       setNewPromptName(newPromptName);
@@ -305,7 +306,6 @@ const Prompts: React.FC<PromptProps> = ({
         // get 1st prompt and set it as selected
         if (prompts.length > 0) {
           onSelectPrompt(prompts[0].name, prompts[0].id, prompts[0].type);
-          setNewPromptName(prompts[0].name);
         }
       })
       .catch((error) => {

frontend/src/components/Dropdown.tsx

@@ -76,7 +76,7 @@ function Dropdown({
         />
       </button>
       {isOpen && (
-        <div className="absolute left-0 right-0 z-50 -mt-1 max-h-40 overflow-y-auto rounded-b-xl border-2 bg-white shadow-lg dark:border-chinese-silver dark:bg-dark-charcoal">
+        <div className="absolute left-0 right-0 z-20 -mt-1 max-h-40 overflow-y-auto rounded-b-xl border-2 bg-white shadow-lg dark:border-chinese-silver dark:bg-dark-charcoal">
           {options.map((option: any, index) => (
             <div
               key={index}
@@ -111,12 +111,20 @@ function Dropdown({
                 />
               )}
               {showDelete && onDelete && (
-                <img
-                  src={Trash}
-                  alt="Delete"
-                  className="mr-2 h-4 w-4 cursor-pointer hover:opacity-50"
+                <button
                   onClick={() => onDelete(option.id)}
-                />
+                  disabled={option.type === 'public'}
+                >
+                  <img
+                    src={Trash}
+                    alt="Delete"
+                    className={`mr-2 h-4 w-4 cursor-pointer hover:opacity-50 ${
+                      option.type === 'public'
+                        ? 'cursor-not-allowed opacity-50'
+                        : ''
+                    }`}
+                  />
+                </button>
               )}
             </div>
           ))}

frontend/src/preferences/PromptsModal.tsx

@@ -48,7 +48,7 @@ function AddPrompt({
       <div className="mt-6 flex flex-row-reverse gap-4">
         <button
           onClick={handleAddPrompt}
-          className="rounded-3xl bg-purple-30 px-5 py-2 text-white transition-all hover:bg-purple-30"
+          className="rounded-3xl bg-purple-30 px-5 py-2 text-white transition-all hover:opacity-90"
         >
           Save
         </button>
@@ -86,7 +86,7 @@ function EditPrompt({
     <div className="rounded-3xl px-4 py-2">
       <p className="mb-1 text-xl text-jet dark:text-bright-gray">Edit Prompt</p>
       <p className="mb-7 text-xs text-[#747474] dark:text-[#7F7F82]">
-        Edit your custom prompt and save it to DocsGPT.
+        Edit your custom prompt and save it to DocsGPT
       </p>
       <div>
         <input
@@ -114,10 +114,10 @@ function EditPrompt({
       </div>
       <div className="mt-6 flex flex-row-reverse gap-4">
         <button
-          className={`rounded-3xl bg-purple-30 px-5 py-2 text-white transition-all hover:bg-purple-30 ${
+          className={`rounded-3xl bg-purple-30 px-5 py-2 text-white transition-all ${
             currentPromptEdit.type === 'public'
               ? 'cursor-not-allowed opacity-50'
-              : ''
+              : 'hover:opacity-90'
           }`}
           onClick={() => {
             handleEditPrompt &&