From 0b3cad152f40ed09eb72fff8ea3ff4cb1045b1c1 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Thu, 13 Mar 2025 00:43:56 +0530
Subject: [PATCH] (fix:prompts) design specs

---
 frontend/src/preferences/PromptsModal.tsx | 32 +++++++++--------------
 frontend/src/settings/Prompts.tsx         |  6 ++---
 2 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/frontend/src/preferences/PromptsModal.tsx b/frontend/src/preferences/PromptsModal.tsx
index d4ad0e92..28f2dc5e 100644
--- a/frontend/src/preferences/PromptsModal.tsx
+++ b/frontend/src/preferences/PromptsModal.tsx
@@ -32,15 +32,14 @@ function AddPrompt({
         {t('modals.prompts.addDescription')}
       </p>
       <div>
-        <label htmlFor="new-prompt-name" className="sr-only">
-          Prompt Name
-        </label>
         <Input
           placeholder={t('modals.prompts.promptName')}
           type="text"
-          className="h-10 rounded-lg"
+          className="mb-4"
           value={newPromptName}
           onChange={(e) => setNewPromptName(e.target.value)}
+          labelBgClassName="bg-white dark:bg-[#26272E]"
+          borderVariant="thin"
         />
         <div className="relative top-[7px] left-3">
           <span className="bg-white px-1 text-xs text-silver dark:bg-[#26272E] dark:text-silver">
@@ -48,7 +47,7 @@ function AddPrompt({
           </span>
         </div>
         <label htmlFor="new-prompt-content" className="sr-only">
-          Prompt Text
+          {t('modals.prompts.promptText')}
         </label>
         <textarea
           id="new-prompt-content"
@@ -61,7 +60,7 @@ function AddPrompt({
       <div className="mt-6 flex flex-row-reverse">
         <button
           onClick={handleAddPrompt}
-          className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:opacity-90"
+          className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-violets-are-blue disabled:hover:bg-purple-30"
           disabled={disableSave}
           title={
             disableSave && newPromptName ? t('modals.prompts.nameExists') : ''
@@ -97,7 +96,7 @@ function EditPrompt({
 
   return (
     <div>
-      <div className="p-8">
+      <div className="">
         <p className="mb-1 text-xl text-jet dark:text-bright-gray">
           {t('modals.prompts.editPrompt')}
         </p>
@@ -105,29 +104,22 @@ function EditPrompt({
           {t('modals.prompts.editDescription')}
         </p>
         <div>
-          <label htmlFor="edit-prompt-name" className="sr-only">
-            Prompt Name
-          </label>
           <Input
             placeholder={t('modals.prompts.promptName')}
             type="text"
-            className="h-10 rounded-lg"
+            className="mb-4"
             value={editPromptName}
             onChange={(e) => setEditPromptName(e.target.value)}
             labelBgClassName="bg-white dark:bg-charleston-green-2"
+            borderVariant="thin"
           />
-          <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">
-              {t('modals.prompts.promptName')}
-            </span>
-          </div>
           <div className="relative top-[7px] left-3">
-            <span className="bg-white px-1 text-xs text-silver dark:bg-outer-space dark:text-silver">
+            <span className="bg-white px-1 text-xs text-silver dark:bg-charleston-green-2 dark:text-silver">
               {t('modals.prompts.promptText')}
             </span>
           </div>
           <label htmlFor="edit-prompt-content" className="sr-only">
-            Prompt Text
+            {t('modals.prompts.promptText')}
           </label>
           <textarea
             id="edit-prompt-content"
@@ -139,10 +131,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-sm text-white transition-all ${
+            className={`rounded-3xl bg-purple-30 disabled:hover:bg-purple-30  hover:bg-violets-are-blue px-5 py-2 text-sm text-white transition-all ${
               currentPromptEdit.type === 'public'
                 ? 'cursor-not-allowed opacity-50'
-                : 'hover:opacity-90'
+                : ''
             }`}
             onClick={() => {
               handleEditPrompt &&
diff --git a/frontend/src/settings/Prompts.tsx b/frontend/src/settings/Prompts.tsx
index 490c8153..654b610a 100644
--- a/frontend/src/settings/Prompts.tsx
+++ b/frontend/src/settings/Prompts.tsx
@@ -132,8 +132,8 @@ export default function Prompts({
   return (
     <>
       <div>
-        <div className="flex flex-col">
-          <p className="font-semibold dark:text-bright-gray">
+        <div className="flex flex-col gap-4">
+          <p className="font-medium dark:text-bright-gray">
             {t('settings.general.prompt')}
           </p>
           <div className="flex flex-row justify-start items-baseline gap-6">
@@ -165,7 +165,7 @@ export default function Prompts({
             />
 
             <button
-              className="mt-[24px] rounded-3xl border border-solid border-violets-are-blue px-5 py-3 text-violets-are-blue transition-colors hover:text-white hover:bg-violets-are-blue"
+              className="rounded-3xl w-20 h-10 text-sm border border-solid border-violets-are-blue text-violets-are-blue transition-colors hover:text-white hover:bg-violets-are-blue"
               onClick={() => {
                 setModalType('ADD');
                 setModalState('ACTIVE');