From 662564653effbd3ebcedf905e3dcc27abfc5676b Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Mon, 19 Jun 2023 19:29:18 -0300
Subject: [PATCH] feat[tailwind.config.js]: Add new colors variables and remove
 hex colors from the code

---
 .../chatComponent/buildTrigger/index.tsx          |  8 ++++----
 src/frontend/src/index.css                        | 14 ++++++++++++++
 .../components/extraSidebarComponent/index.tsx    |  8 ++++----
 .../components/nodeToolbarComponent/index.tsx     | 15 ++++++++-------
 src/frontend/tailwind.config.js                   |  7 +++++++
 5 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index a2fd118e5..8b11ffdcb 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -142,8 +142,8 @@ export default function BuildTrigger({
           side="left"
         >
           <div
-            className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md hover:shadow-sm shadow-[#00000063] hover:shadow-[#00000063]
-            bg-[#E2E7EE] dark:border-gray-600 cursor-pointer"
+            className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md hover:shadow-sm shadow-btn-shadow hover:shadow-btn-shadow
+            bg-buildBackground dark:border-gray-600 cursor-pointer"
             onClick={() => {
               handleBuild(flow);
             }}
@@ -152,9 +152,9 @@ export default function BuildTrigger({
               <div className="flex gap-3 items-center">
                 {isBuilding ? (
                   // Render your loading animation here when isBuilding is true
-                  <Loading strokeWidth={1.5} style={{ color: "#dc735b" }} />
+                  <Loading strokeWidth={1.5} className="text-build" />
                 ) : (
-                  <Zap className="sh-6 w-6 fill-[#dc735b] stroke-1 stroke-[#dc735b]"/>
+                  <Zap className="sh-6 w-6 fill-build stroke-1 stroke-build"/>
                 )}
               </div>
             </button>
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 30eea80ba..58506ee7e 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -34,6 +34,14 @@
 	  --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
 
     --radius: 0.5rem;
+
+    --build: 11, 65% 61%; /* hsl(11, 65%, 61%) */
+
+    --build-background: #E2E7EE; /* hsl(215, 26%, 91%) */
+
+    --round-btn-shadow: #00000063;
+
+    --hover-btn-background: #242f47;
   }
 
 	.dark {
@@ -67,6 +75,8 @@
 	  --ring: 216 34% 17%; /* hsl(216 34% 17%) */
 
     --radius: 0.5rem;
+
+    --build-trigger: 11, 65% 61%; /* hsl(11, 65%, 61%) */
   }
 }
 
@@ -91,6 +101,10 @@
   --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
   --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
   --radius: 0.5rem;
+  --build-trigger: 	#dc735b; /* hsl(11, 65%, 61%) */
+  --build-background: #E2E7EE; /*	hsl(215, 26%, 91%) */
+  --round-btn-shadow: #00000063;
+  --hover-btn-background: #242f47;
 }
 
 .dark {
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index f8a5dc106..bce0c6919 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -66,7 +66,7 @@ export default function ExtraSidebar() {
       <div className="mt-2 mb-2 w-full flex gap-2 justify-between px-2 items-center">
         <ShadTooltip delayDuration={1000} content="Import" side="top">
           <button
-            className="hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center rounded-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+            className="hover:dark:hover:bg-btn-hover-bg text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center rounded-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
             onClick={() => {
               // openPopUp(<ImportModal />);
               uploadFlow();
@@ -79,7 +79,7 @@ export default function ExtraSidebar() {
         <ShadTooltip delayDuration={1000} content="Export" side="top">
           <button
             className={classNames(
-              "hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
+              "hover:dark:hover:bg-btn-hover-bg text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
             )}
             onClick={(event) => {
               openPopUp(<ExportModal />);
@@ -91,7 +91,7 @@ export default function ExtraSidebar() {
         <ShadTooltip delayDuration={1000} content="Code" side="top">
           <button
             className={classNames(
-              "hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
+              "hover:dark:hover:bg-btn-hover-bg text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
             )}
             onClick={(event) => {
               openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
@@ -103,7 +103,7 @@ export default function ExtraSidebar() {
 
         <ShadTooltip delayDuration={1000} content="Save" side="top">
           <button
-            className="hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center transition-all shadow-sm duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
+            className="hover:dark:hover:bg-btn-hover-bg text-gray-700 w-full justify-center transition-all shadow-sm duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
             onClick={(event) => {
               saveFlow(flows.find((f) => f.id === tabId));
               setSuccessData({ title: "Changes saved successfully" });
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index a5827b932..f5636fc12 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -1,10 +1,11 @@
 import { useContext, useState } from "react";
-import { Settings2, Copy, Trash2 } from "lucide-react";
+import { Settings2, Copy, Trash2, Menu } from "lucide-react";
 import { classNames } from "../../../../utils";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import { useReactFlow } from "reactflow";
 import EditNodeModal from "../../../../modals/EditNodeModal";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
+import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
 
 const NodeToolbarComponent = (props) => {
   const [nodeLength, setNodeLength] = useState(
@@ -31,7 +32,7 @@ const NodeToolbarComponent = (props) => {
         <span className="isolate inline-flex rounded-md shadow-sm">
           <ShadTooltip delayDuration={1000} content="Delete" side="top">
             <button
-              className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative inline-flex items-center rounded-l-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
+              className="hover:dark:hover:bg-btn-hover-bg text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative inline-flex items-center rounded-l-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
               onClick={() => {
                 props.deleteNode(props.data.id);
               }}
@@ -44,8 +45,8 @@ const NodeToolbarComponent = (props) => {
             <button
               className={classNames(
                 nodeLength > 0
-                  ? "hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
-                  : "hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md"
+                  ? "hover:dark:hover:bg-btn-hover-bg text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
+                  : "hover:dark:hover:bg-btn-hover-bg text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md"
               )}
               onClick={(event) => {
                 event.preventDefault();
@@ -71,7 +72,7 @@ const NodeToolbarComponent = (props) => {
           {nodeLength > 0 && (
             <ShadTooltip delayDuration={1000} content="Edit" side="top">
               <button
-                className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md"
+                className="hover:dark:hover:bg-btn-hover-bg text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md"
                 onClick={(event) => {
                   event.preventDefault();
                   props.openPopUp(<EditNodeModal data={props.data} />);
@@ -83,7 +84,7 @@ const NodeToolbarComponent = (props) => {
           )}
 
           
-          <Menu as="div" className="relative inline-block text-left z-100">
+          {/* <Menu as="div" className="relative inline-block text-left z-100">
             <button className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md">
               <div>
                 <Menu.Button className="flex items-center">
@@ -173,7 +174,7 @@ const NodeToolbarComponent = (props) => {
                 </Menu.Items>
               </Transition>
             </button>
-          </Menu>
+          </Menu> */}
         </span>
       </div>
     </>
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index 4c871cfa3..55feba232 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -16,6 +16,9 @@ module.exports = {
     },
     extend: {
       colors: {
+        '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))",
@@ -91,6 +94,10 @@ module.exports = {
     },
     extend: {
       colors: {
+        '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))",