From bdd39a506a2f7e37fddb315c46b9d66d8be56bd7 Mon Sep 17 00:00:00 2001
From: Rodrigo Nader <rodrigosilvanader@gmail.com>
Date: Sat, 8 Jul 2023 01:33:12 -0300
Subject: [PATCH] feat(css): Update styles for chat thought and initial prompt

This commit updates the styles for the chat thought and initial prompt components in the frontend. The changes include modifying the border color to use a custom ring color, adjusting the padding and margin, and updating the text size and color. Additionally, the label for the "Initial Prompt" button has been changed to "Display Prompt" for clarity.
---
 src/frontend/src/index.css                              | 6 +++---
 src/frontend/src/modals/formModal/chatMessage/index.tsx | 2 +-
 src/frontend/src/modals/formModal/index.tsx             | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 428bd6d7c..261e783bf 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -968,19 +968,19 @@ The cursor: default; property value restores the browser's default cursor style
     @apply h-4 w-4 animate-bounce dark:text-white
   }
   .form-modal-chat-thought-border {
-    @apply rounded-md border border-gray-300
+    @apply rounded-md border border-ring/60
   }
   .form-modal-chat-thought-size {
     @apply inline-block h-full w-[95%]
   }
   .form-modal-chat-thought {
-    @apply ml-3 cursor-pointer overflow-scroll  bg-muted px-2 text-start text-primary scrollbar-hide dark:border-gray-500 dark:bg-gray-800 form-modal-chat-thought-border form-modal-chat-thought-size
+    @apply cursor-pointer overflow-scroll bg-background text-start text-primary scrollbar-hide form-modal-chat-thought-border form-modal-chat-thought-size py-2 px-2
   }
   .form-modal-markdown-span {
     @apply mt-1 animate-pulse cursor-default
   }
   .form-modal-initial-prompt-btn {
-    @apply mb-2 flex items-center gap-4 rounded-md border border-ring/60 bg-background px-4 py-2 text-base font-semibold
+    @apply mb-2 flex items-center gap-2 rounded-md border border-border bg-background shadow-sm px-4 py-2 text-sm font-semibold
   }
   .form-modal-iv-box {
     @apply mt-2 flex-max-width h-[80vh]
diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx
index ccaaa2227..091dacfe5 100644
--- a/src/frontend/src/modals/formModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx
@@ -138,7 +138,7 @@ export default function ChatMessage({
               setPromptOpen((old) => !old);
             }}
           >
-            Initial Prompt
+            Display Prompt
             <ChevronDown
               className={
                 "h-3 w-3 transition-all " + (promptOpen ? "rotate-180" : "")
diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx
index 1b6eae53d..52544b2a5 100644
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/src/frontend/src/modals/formModal/index.tsx
@@ -488,7 +488,7 @@ export default function FormModal({
                           {i}
                         </Badge>
                       </div>
-                      Used as Memory Key
+                      Used as memory key
                     </div>
                   </AccordionItem>
                 ))}