From db2a746df75bd415c5dcb4120be77633ff6bc5aa Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Wed, 12 Jul 2023 13:29:40 -0300
Subject: [PATCH] refactor: Remove hard-coded colors and unnecessary dark
 classes

---
 src/frontend/src/index.css                              | 6 +++++-
 src/frontend/src/modals/formModal/chatInput/index.tsx   | 4 ++--
 src/frontend/src/modals/formModal/chatMessage/index.tsx | 2 +-
 src/frontend/src/modals/formModal/index.tsx             | 2 +-
 src/frontend/src/modals/genericModal/index.tsx          | 4 ++--
 src/frontend/tailwind.config.js                         | 2 ++
 6 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 0c8aa9ca2..31d48bf77 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -38,9 +38,10 @@
 
   --info-background: #f0f4fd;
   --info-foreground: #141653;
-  
+
   --high-indigo: #4338ca;
   --medium-indigo: #6366f1;
+  --low-indigo: #e0e7ff;
 
   --chat-bot-icon: #afe6ef;
   --chat-user-icon: #aface9;
@@ -52,6 +53,7 @@
   --chat-trigger-disabled: #b4c3da;
   --status-red: #ef4444;
   --status-yellow: #eab308;
+  --chat-send: #059669;
   --status-green: #4ade80;
   --status-blue:#2563eb;
   --connection: #555;
@@ -104,6 +106,7 @@
 
   --high-indigo: #4338ca;
   --medium-indigo: #6366f1;
+  --low-indigo: #e0e7ff;
 
   /* Colors that are shared in dark and light mode */
   --blur-shared: #151923d2;
@@ -112,6 +115,7 @@
   --chat-trigger-disabled: #2d3b54;
   --status-red: #ef4444;
   --status-yellow: #eab308;
+  --chat-send: #059669;
   --status-green: #4ade80;
   --status-blue: #2563eb;
   --connection: #555;
diff --git a/src/frontend/src/modals/formModal/chatInput/index.tsx b/src/frontend/src/modals/formModal/chatInput/index.tsx
index ec62c0505..6e7d45405 100644
--- a/src/frontend/src/modals/formModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/formModal/chatInput/index.tsx
@@ -68,10 +68,10 @@ export default function ChatInput({
           className={classNames(
             "form-modal-send-button",
             noInput
-              ? "bg-indigo-600 text-background"
+              ? "bg-high-indigo text-background"
               : chatValue === ""
               ? "text-primary"
-              : "bg-emerald-600 text-background"
+              : "bg-chat-send text-background"
           )}
           disabled={lockChat}
           onClick={() => sendMessage()}
diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx
index d75b901fe..7737a171b 100644
--- a/src/frontend/src/modals/formModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx
@@ -181,7 +181,7 @@ export default function ChatMessage({
                       // Push div with matched text
                       if (chat.message[match[1]]) {
                         parts.push(
-                          <span className="my-1 rounded-md bg-indigo-100">
+                          <span className="my-1 rounded-md bg-low-indigo">
                             {chat.message[match[1]]}
                           </span>
                         );
diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx
index e80bc6c35..e17c6c2e9 100644
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/src/frontend/src/modals/formModal/index.tsx
@@ -392,7 +392,7 @@ export default function FormModal({
             <DialogTitle className="flex items-center">
               <span className="pr-2">Chat</span>
               <TerminalSquare
-                className="h-6 w-6 pl-1 text-gray-800 dark:text-white"
+                className="h-6 w-6 pl-1 text-foreground"
                 aria-hidden="true"
               />
             </DialogTitle>
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 923549e28..1f7335fd8 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -203,7 +203,7 @@ export default function GenericModal({
           {type === TypeModal.PROMPT && isEdit ? (
             <Textarea
               ref={ref}
-              className="form-input h-full w-full rounded-lg border-gray-300 custom-scroll focus-visible:ring-1 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+              className="form-input h-full w-full rounded-lg border-border custom-scroll focus-visible:ring-1"
               value={inputValue}
               onBlur={() => {
                 setIsEdit(false);
@@ -220,7 +220,7 @@ export default function GenericModal({
           ) : type !== TypeModal.PROMPT ? (
             <Textarea
               ref={ref}
-              className="form-input h-full w-full rounded-lg border-gray-300 focus-visible:ring-1 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+              className="form-input h-full w-full rounded-lg border-border focus-visible:ring-1"
               value={inputValue}
               onChange={(e) => {
                 setInputValue(e.target.value);
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index 429b9b26a..40c4f3db0 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -43,6 +43,8 @@ module.exports = {
         "accordion-up": "accordion-up 0.2s ease-out",
       },
       colors: {
+        "low-indigo": "var(--low-indigo)",
+        "chat-send": "var(--chat-send)",
         connection: "var(--connection)",
         "almost-dark-gray": "var(--almost-dark-gray)",
         "almost-light-blue": "var(--almost-light-blue)",