From 05d2e82f2db81675aa3f49b58c310e5cfd7642f1 Mon Sep 17 00:00:00 2001
From: Rodrigo Nader <rodrigosilvanader@gmail.com>
Date: Thu, 29 Jun 2023 00:50:58 -0300
Subject: [PATCH] feat: Update class names and colors in various components

- Update class names and colors in parameterComponent, GenericNode, alertDropDown, error, notice, success, buildTrigger, dropdownComponent, headerComponent, and inputListComponent to improve consistency and visual appeal.
---
 .../components/parameterComponent/index.tsx   |   2 +-
 .../src/CustomNodes/GenericNode/index.tsx     |  10 +-
 .../components/singleAlertComponent/index.tsx |  22 ++--
 src/frontend/src/alerts/error/index.tsx       |   2 +-
 src/frontend/src/alerts/notice/index.tsx      |   2 +-
 src/frontend/src/alerts/success/index.tsx     |   2 +-
 .../chatComponent/buildTrigger/index.tsx      |   4 +-
 .../components/dropdownComponent/index.tsx    |   2 +-
 .../src/components/headerComponent/index.tsx  |   4 +-
 .../components/inputListComponent/index.tsx   |   2 +-
 src/frontend/src/index.css                    | 108 +-----------------
 src/frontend/src/modals/ApiModal/index.tsx    |   2 +-
 .../src/modals/EditNodeModal/index.tsx        |   4 +-
 src/frontend/src/modals/NodeModal/index.tsx   |   2 +-
 .../src/modals/chatModal/chatInput/index.tsx  |   8 +-
 .../modals/chatModal/chatMessage/index.tsx    |   4 +-
 .../src/modals/codeAreaModal/index.tsx        |   2 +-
 .../src/modals/genericModal/index.tsx         |   2 +-
 .../components/DisclosureComponent/index.tsx  |   4 +-
 .../extraSidebarComponent/index.tsx           |   6 +-
 src/frontend/tailwind.config.js               |  16 +--
 21 files changed, 54 insertions(+), 156 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index d2b75d7e6..37a1b09a2 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -97,7 +97,7 @@ export default function ParameterComponent({
         >
           {React.createElement(nodeIconsLucide[item.family])}
         </div>
-        <span className="ps-2 text-gray-950">
+        <span className="ps-2 text-foreground">
           {nodeNames[item.family] ?? ""}{" "}
           <span className={classNames(left ? "hidden" : "")}>
             {" "}
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index d66fc70e6..d15aae152 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -108,7 +108,7 @@ export default function GenericNode({
                 delayDuration={1500}
                 content={data.node.display_name}
               >
-                <div className="ml-2 truncate text-gray-800">
+                <div className="ml-2 truncate text-primary">
                   {data.node.display_name}
                 </div>
               </ShadTooltip>
@@ -143,7 +143,7 @@ export default function GenericNode({
                   <div
                     className={classNames(
                       validationStatus && validationStatus.valid
-                        ? "w-4 h-4 rounded-full bg-red-600 opacity-100"
+                        ? "w-4 h-4 rounded-full bg-status-red opacity-100"
                         : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
                       "absolute w-4 hover:text-ring hover: transition-all ease-in-out duration-200"
                     )}
@@ -159,9 +159,9 @@ export default function GenericNode({
                   <div
                     className={classNames(
                       !validationStatus || isBuilding
-                        ? "w-4 h-4 rounded-full  bg-yellow-500 opacity-100"
-                        : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-gray-500 transition-all ease-in-out duration-200"
+                        ? "w-4 h-4 rounded-full  bg-status-yellow opacity-100"
+                        : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
+                      "absolute w-4 hover:text-ring transition-all ease-in-out duration-200"
                     )}
                   ></div>
                 </div>
diff --git a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
index 97b5f5529..78e28f6d6 100644
--- a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
@@ -30,16 +30,16 @@ export default function SingleAlert({
         >
           <div className="flex-shrink-0">
             <XCircle
-              className="h-5 w-5 text-red-400"
+              className="h-5 w-5 text-status-red"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3">
-            <h3 className="text-sm break-words font-medium text-red-800">
+            <h3 className="text-sm break-words font-medium text-error-foreground">
               {dropItem.title}
             </h3>
             {dropItem.list ? (
-              <div className="mt-2 text-sm text-red-700">
+              <div className="mt-2 text-sm text-error-foreground">
                 <ul className="list-disc space-y-1 pl-5">
                   {dropItem.list.map((item, idx) => (
                     <li className="break-words" key={idx}>
@@ -62,7 +62,7 @@ export default function SingleAlert({
                     removeAlert(dropItem.id);
                   }, 500);
                 }}
-                className="inline-flex rounded-md bg-red-50 p-1.5 text-red-500"
+                className="inline-flex rounded-md bg-red-50 p-1.5 text-status-red"
               >
                 <span className="sr-only">Dismiss</span>
                 <X className="h-5 w-5" aria-hidden="true" />
@@ -77,19 +77,19 @@ export default function SingleAlert({
         >
           <div className="flex-shrink-0">
             <Info
-              className="h-5 w-5 text-blue-400 "
+              className="h-5 w-5 text-medium-dark-blue"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-sm text-blue-700">
+            <p className="text-sm text-medium-dark-blue">
               {dropItem.title}
             </p>
             <p className="mt-3 text-sm md:mt-0 md:ml-6">
               {dropItem.link ? (
                 <Link
                   to={dropItem.link}
-                  className="whitespace-nowrap font-medium text-blue-700 hover:text-ring"
+                  className="whitespace-nowrap font-medium text-medium-dark-blue hover:text-ring"
                 >
                   Details
                 </Link>
@@ -108,7 +108,7 @@ export default function SingleAlert({
                     removeAlert(dropItem.id);
                   }, 500);
                 }}
-                className="inline-flex rounded-md bg-blue-50 p-1.5 text-blue-500 "
+                className="inline-flex rounded-md bg-blue-50 p-1.5 text-medium-dark-blue "
               >
                 <span className="sr-only">Dismiss</span>
                 <X className="h-5 w-5" aria-hidden="true" />
@@ -123,12 +123,12 @@ export default function SingleAlert({
         >
           <div className="flex-shrink-0">
             <CheckCircle2
-              className="h-5 w-5 text-green-400 "
+              className="h-5 w-5 text-status-green"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3">
-            <p className="text-sm font-medium text-green-800">
+            <p className="text-sm font-medium text-success-foreground">
               {dropItem.title}
             </p>
           </div>
@@ -142,7 +142,7 @@ export default function SingleAlert({
                     removeAlert(dropItem.id);
                   }, 500);
                 }}
-                className="inline-flex rounded-md bg-green-50 p-1.5 text-green-500 "
+                className="inline-flex rounded-md bg-success-background p-1.5 text-status-green"
               >
                 <span className="sr-only">Dismiss</span>
                 <X className="h-5 w-5" aria-hidden="true" />
diff --git a/src/frontend/src/alerts/error/index.tsx b/src/frontend/src/alerts/error/index.tsx
index 69fb34ef4..111bb7cfd 100644
--- a/src/frontend/src/alerts/error/index.tsx
+++ b/src/frontend/src/alerts/error/index.tsx
@@ -44,7 +44,7 @@ export default function ErrorAlert({
         <div className="flex">
           <div className="flex-shrink-0">
             <XCircle
-              className="h-5 w-5 text-red-400"
+              className="h-5 w-5 text-status-red"
               aria-hidden="true"
             />
           </div>
diff --git a/src/frontend/src/alerts/notice/index.tsx b/src/frontend/src/alerts/notice/index.tsx
index 78095018e..c5a917aae 100644
--- a/src/frontend/src/alerts/notice/index.tsx
+++ b/src/frontend/src/alerts/notice/index.tsx
@@ -41,7 +41,7 @@ export default function NoticeAlert({
         <div className="flex">
           <div className="flex-shrink-0">
             <Info
-              className="h-5 w-5 text-blue-400 "
+              className="h-5 w-5 text-medium-dark-blue "
               aria-hidden="true"
             />
           </div>
diff --git a/src/frontend/src/alerts/success/index.tsx b/src/frontend/src/alerts/success/index.tsx
index 3589f944d..56ef8a2ad 100644
--- a/src/frontend/src/alerts/success/index.tsx
+++ b/src/frontend/src/alerts/success/index.tsx
@@ -39,7 +39,7 @@ export default function SuccessAlert({
         <div className="flex">
           <div className="flex-shrink-0">
             <CheckCircle2
-              className="h-5 w-5 text-green-400 "
+              className="h-5 w-5 text-status-green"
               aria-hidden="true"
             />
           </div>
diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index 1b8e7a201..dda2e31e1 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -174,9 +174,9 @@ export default function BuildTrigger({
                   value={progress}
                 ></RadialProgressComponent>
               ) : isBuilding ? (
-                <Loading strokeWidth={1.5} style={{ color: "#fb923c" }} />
+                <Loading strokeWidth={1.5} className="stroke-build-trigger"/>
               ) : (
-                <Zap className="sh-6 w-6 fill-orange-400 stroke-1 stroke-orange-400" />
+                <Zap className="sh-6 w-6 fill-build-trigger stroke-1 stroke-build-trigger" />
               )}
             </div>
           </button>
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 7b2a03fd6..e34ef05fd 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -47,7 +47,7 @@ export default function Dropdown({
                   }
                 >
                   <ChevronsUpDown
-                    className="h-5 w-5 text-gray-400"
+                    className="h-5 w-5 text-border"
                     aria-hidden="true"
                   />
                 </span>
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index 0266ff381..add19c0bf 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -75,7 +75,7 @@ export default function Header() {
             href="https://github.com/logspace-ai/langflow"
             target="_blank"
             rel="noreferrer"
-            className="inline-flex shadow-sm items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-gray-600  border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
+            className="inline-flex shadow-sm items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-muted-foreground  border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
           >
             <FaGithub className="h-5 w-5 mr-2" />
             Star
@@ -102,7 +102,7 @@ export default function Header() {
 
           <Separator orientation="vertical" />
           <button
-            className="text-gray-600 hover:text-gray-500 "
+            className="text-muted-foreground hover:text-ring "
             onClick={() => {
               setDark(!dark);
             }}
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index 062155af7..d81da6183 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -73,7 +73,7 @@ export default function InputListComponent({
                 onChange(inputList);
               }}
             >
-              <X className="w-4 h-4 hover:text-red-600" />
+              <X className="w-4 h-4 hover:text-status-red" />
             </button>
           )}
         </div>
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 329539241..959b137d0 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -3,109 +3,6 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
-	  --background: 0 0% 100%; /* hsl(0 0% 100%) */
-	  --foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-    
-	  --muted: 210 40% 96.1%; /* hsl(210 40% 96%) */
-	  --muted-foreground: 215.4 16.3% 46.9%; /* hsl(215 16% 46%) */
-    
-	  --popover: 0 0% 100%; /* hsl(0 0% 100%) */
-	  --popover-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-
-	  --card: 0 0% 100%; /* hsl(0 0% 100%) */
-	  --card-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-    
-	  --border: 214.3 31.8% 91.4%; /* hsl(214 32% 91%) */
-	  --input: 214.3 31.8% 91.4%; /* hsl(214 32% 91%) */
-    
-	  --primary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-	  --primary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-    
-	  --secondary: 210 40% 96.1%; /* hsl(210 40% 96%) */
-	  --secondary-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-    
-	  --accent: 210 40% 96.1%; /* hsl(210 40% 96%) */
-	  --accent-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-    
-	  --destructive: 0 100% 50%; /* hsl(0 100% 50%) */
-	  --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-    
-    
-	  --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
-    
-    --radius: 0.5rem;
-    
-    
-    --build-background: #E2E7EE; /* hsl(215, 26%, 91%) */
-    
-    --round-btn-shadow: #00000063;
-    
-    --hover-btn-background: #242f47;
-    
-    --build-trigger: 	#dc735b; /* hsl(11, 65%, 61%) */
-    --chat-trigger: #dbeafe; /* tailwind blue 100 USED IN CHAT BACKGROUND */
-
-    --error-background: #fef2f2; /* tailwind red 50 USED IN START ERROR MESSAGE BG light-red */
-    --error-foreground: #991b1b; /* tailwind red 800 USED IN START ERROR MESSAGE TEXT almost-dark-red */
-
-    --status-red: #ef4444; /* tailwind red 500 medium-red*/
-    --status-yellow: #eab308; /* tailwind yellow 500 medium-yellow*/
-    --status-green: #4ade80; /* tailwind green 400 medium-green*/
-
-    --success-background: #f0fdf4; /* tailwind green 50 USED IN SUCCESS MSG light-green*/ 
-    --success-foreground: #14532d; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
-
-    /* --high-indigo: #4338ca;  tailwind indigo 700 
-  --medium-indigo: #6366f1;  tailwind indigo 500 
-  --medium-dark-blue:#1d4ed8;  tailwind blue 700 Change in component (--ring)
-  --medium-high-indigo: #4f46e5;  tailwind indigo 600 
-  --medium-emerald: #10b981;  tailwind emerald 500 Unused
-  --medium-dark-green: #166534;  tailwind green 800 Unused
-  --almost-medium-green: #22c55e;  tailwind green 500 Unused
-  --light-slate: #cbd5e1;  tailwind slate 300 UNUSED
-  --light-blue: #eff6ff;  tailwind blue 50
-  --dark-blue: #1e3a8a;  tailwind blue 900
-  --medium-blue: #60a5fa;  tailwind blue 400
-  --almost-dark-blue:#3b82f6;  tailwind blue 500
-  --almost-light-blue: #dbeafe;   tailwind blue 100 */
-  }
-
-  .dark {
-    --background: 224 71% 4%; /* hsl(224 71% 4%) */
-    --foreground: 213 31% 91%; /* hsl(213 31% 91%) */
-
-    --muted: 223 47% 11%; /* hsl(223 47% 11%) */
-    --muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */
-
-    --popover: 224 71% 4%; /* hsl(224 71% 4%) */
-    --popover-foreground: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
-
-    --card: 224 71% 4%; /* hsl(224 71% 4%) */
-    --card-foreground: 213 31% 91%; /* hsl(213 31% 91%) */
-
-    --border: 216 34% 17%; /* hsl(216 34% 17%) */
-    --input: 216 34% 17%; /* hsl(216 34% 17%) */
-
-    --primary: 210 40% 98%; /* hsl(210 40% 98%) */
-    --primary-foreground: 222.2 47.4% 1.2%; /* hsl(222 47% 1%) */
-
-    --secondary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-    --secondary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-
-    --accent: 216 34% 17%; /* hsl(216 34% 17%) */
-    --accent-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-
-    --destructive: 0 63% 31%; /* hsl(0 63% 31%) */
-    --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-
-    --ring: 216 34% 17%; /* hsl(216 34% 17%) */
-
-    --radius: 0.5rem;
-
-    --build-trigger: 11, 65% 61%; /* hsl(11, 65%, 61%) */
-  }
-}
 
 :root {
   --background: 0 0% 100%; /* hsl(0 0% 100%) */
@@ -145,6 +42,7 @@
 
   --success-background: #f0fdf4; /* tailwind green 50 USED IN SUCCESS MSG light-green*/ 
   --success-foreground: #14532d; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
+
   --high-indigo: #4338ca;  /*tailwind indigo 700*/ 
   --medium-indigo: #6366f1;  /* tailwind indigo 500 */
   --medium-dark-blue:#1d4ed8; /* tailwind blue 700 Change in component (--ring)*/
@@ -191,7 +89,7 @@
   --high-indigo: #000000;  /*tailwind indigo 700*/ 
   --medium-indigo: #000000;  /* tailwind indigo 500 */
   --medium-dark-blue:#000000; /* tailwind blue 700 Change in component (--ring)*/
-}
+}}
 
 @layer base {
   * {
@@ -222,4 +120,4 @@ code {
 The cursor: default; property value restores the browser's default cursor style for the targeted element. By applying this style, the element will no longer have a custom cursor appearance such as "grab" or any other custom cursor defined elsewhere in the application. Instead, it will revert to the default cursor style determined by the browser, typically an arrow-shaped cursor. */
 .react-flow__pane {
   cursor: default;
-}
+}
\ No newline at end of file
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index f72dd2d77..f9949f091 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -88,7 +88,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
           <DialogTitle className="flex items-center">
             <span className="pr-2">Code</span>
             <Code2
-              className="h-6 w-6 text-gray-800 pl-1 "
+              className="h-6 w-6 text-primary pl-1 "
               aria-hidden="true"
             />
           </DialogTitle>
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index c7bd3f577..d1041429a 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -90,8 +90,8 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
           <DialogDescription>
             {data.node?.description}
             <div className="flex pt-4">
-              <Variable className="w-5 h-5 pe-1 text-gray-700 stroke-2 "></Variable>
-              <span className="text-sm font-semibold text-gray-800 ">
+              <Variable className="w-5 h-5 pe-1 text-muted-foreground stroke-2 "></Variable>
+              <span className="text-sm font-semibold text-primary ">
                 Parameters
               </span>
             </div>
diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx
index 3af0e66dd..1ae11d08e 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -147,7 +147,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                   <div className="bg-input w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-red-500 px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
+                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-status-red px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
                       onClick={() => {
                         setModalOpen(false);
                       }}
diff --git a/src/frontend/src/modals/chatModal/chatInput/index.tsx b/src/frontend/src/modals/chatModal/chatInput/index.tsx
index 5517cc92a..dfde0e1ac 100644
--- a/src/frontend/src/modals/chatModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatInput/index.tsx
@@ -51,8 +51,8 @@ export default function ChatInput({
         }}
         className={classNames(
           lockChat
-            ? " bg-input text-black "
-            : "  bg-background-200 text-black ",
+            ? " bg-input text-foreground "
+            : "  bg-background text-foreground ",
           "form-input block w-full custom-scroll rounded-md border-ring  pr-10 sm:text-sm" +
             INPUT_STYLE
         )}
@@ -62,12 +62,12 @@ export default function ChatInput({
         <button disabled={lockChat} onClick={() => sendMessage()}>
           {lockChat ? (
             <Lock
-              className="h-5 w-5 text-gray-500   animate-pulse"
+              className="h-5 w-5 text-ring   animate-pulse"
               aria-hidden="true"
             />
           ) : (
             <Send
-              className="h-5 w-5 text-gray-500 hover:text-gray-600 "
+              className="h-5 w-5 text-ring hover:text-muted-foreground "
               aria-hidden="true"
             />
           )}
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index 6fda80f36..50e30bd1c 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -61,7 +61,7 @@ export default function ChatMessage({
           </div>
         )}
         {chat.isSend && (
-          <User2 className="w-6 h-6 -mb-1 text-gray-800 " />
+          <User2 className="w-6 h-6 -mb-1 text-primary " />
         )}
       </div>
       {!chat.isSend ? (
@@ -151,7 +151,7 @@ export default function ChatMessage({
         </div>
       ) : (
         <div className="w-full flex items-center">
-          <div className="text-start inline-block px-3 text-gray-600 ">
+          <div className="text-start inline-block px-3 text-muted-foreground ">
             <span
               className="text-muted-foreground "
               dangerouslySetInnerHTML={{
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 177fc6692..da7eeb2d0 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -52,7 +52,7 @@ export default function CodeAreaModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">Edit Code</span>
             <TerminalSquare
-              className="h-6 w-6 text-gray-800 pl-1 "
+              className="h-6 w-6 text-primary pl-1 "
               aria-hidden="true"
             />
           </DialogTitle>
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 3117c3a34..c15b33f53 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -55,7 +55,7 @@ export default function GenericModal({
           <DialogTitle className="flex items-center">
             <span className="pr-2">{myModalTitle}</span>
             <FileText
-              className="h-6 w-6 text-gray-800 pl-1 "
+              className="h-6 w-6 text-primary pl-1 "
               aria-hidden="true"
             />
           </DialogTitle>
diff --git a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index 6a2395b59..364ed52d9 100644
--- a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -14,8 +14,8 @@ export default function DisclosureComponent({
           <div>
             <Disclosure.Button className="select-none bg-muted w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-input">
               <div className="flex gap-4">
-                <Icon size={22} className="text-gray-800 " />
-                <span className="flex items-center text-sm text-gray-800  font-medium">
+                <Icon size={22} className="text-primary " />
+                <span className="flex items-center text-sm text-primary  font-medium">
                   {title}
                 </span>
               </div>
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 9986c2f6a..3ec4474bd 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -182,11 +182,11 @@ export default function ExtraSidebar() {
                               );
                             }}
                           >
-                            <div className="flex w-full justify-between text-sm px-3 py-1 bg-white items-center border-dashed border-gray-400  border-l-0 rounded-md rounded-l-none border">
-                              <span className="text-black  w-full pr-1 truncate text-xs">
+                            <div className="flex w-full justify-between text-sm px-3 py-1 bg-white items-center border-dashed border-ring  border-l-0 rounded-md rounded-l-none border">
+                              <span className="text-foreground  w-full pr-1 truncate text-xs">
                                 {data[d][t].display_name}
                               </span>
-                              <Menu className="w-4 h-6  text-gray-400 " />
+                              <Menu className="w-4 h-6  text-ring " />
                             </div>
                           </div>
                         </div>
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index 922eb9a20..4273588d8 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -164,14 +164,14 @@ module.exports = {
         'dark-gray': "var(--dark-gray)",
         'btn-hover-bg': "var(--hover-btn-background)",
         'btn-shadow': "var(--round-btn-shadow)",
-        buildBackground: "var(--build-background)",
-        build: "var(--build-trigger)",
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
+        'build-background': "var(--build-background)",
+        'build-trigger': "var(--build-trigger)",
+        'border': "hsl(var(--border))",
+        'input': "hsl(var(--input))",
+        'ring': "hsl(var(--ring))",
+        'background': "hsl(var(--background))",
+        'foreground': "hsl(var(--foreground))",
+        'primary': {
           DEFAULT: "hsl(var(--primary))",
           foreground: "hsl(var(--primary-foreground))",
         },