From 1c55a722fe5240e22740bf2df3dd97731ef3054c Mon Sep 17 00:00:00 2001
From: Igor Carvalho <igorsilvabhz6@gmail.com>
Date: Sat, 17 Jun 2023 12:05:58 -0300
Subject: [PATCH] feat: Add buildTrigger ShadTooltip

---
 .../chatComponent/buildTrigger/index.tsx      | 41 +++++++++++--------
 .../extraSidebarComponent/index.tsx           |  4 +-
 src/frontend/src/pages/MainPage/index.tsx     |  4 +-
 3 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index 79e7ee247..a2fd118e5 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -8,6 +8,7 @@ import { useSSE } from "../../../contexts/SSEContext";
 import { typesContext } from "../../../contexts/typesContext";
 import { alertContext } from "../../../contexts/alertContext";
 import { postBuildInit } from "../../../controllers/API";
+import ShadTooltip from "../../ShadTooltipComponent";
 
 export default function BuildTrigger({
   open,
@@ -135,24 +136,30 @@ export default function BuildTrigger({
       leaveTo="translate-y-96"
     >
       <div className={`fixed right-4` + (isBuilt ? " bottom-20" : " bottom-4")}>
-        <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"
-          onClick={() => {
-            handleBuild(flow);
-          }}
+        <ShadTooltip
+          delayDuration={500}
+          content="Build Flow"
+          side="left"
         >
-          <button>
-            <div className="flex gap-3 items-center">
-              {isBuilding ? (
-                // Render your loading animation here when isBuilding is true
-                <Loading strokeWidth={1.5} style={{ color: "white" }} />
-              ) : (
-                <Zap className="sh-6 w-6 fill-[#dc735b] stroke-1 stroke-[#dc735b]"/>
-              )}
-            </div>
-          </button>
-        </div>
+          <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"
+            onClick={() => {
+              handleBuild(flow);
+            }}
+          >
+            <button>
+              <div className="flex gap-3 items-center">
+                {isBuilding ? (
+                  // Render your loading animation here when isBuilding is true
+                  <Loading strokeWidth={1.5} style={{ color: "#dc735b" }} />
+                ) : (
+                  <Zap className="sh-6 w-6 fill-[#dc735b] stroke-1 stroke-[#dc735b]"/>
+                )}
+              </div>
+            </button>
+          </div>
+        </ShadTooltip>
       </div>
     </Transition>
   );
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 7bec0517c..f8a5dc106 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -158,13 +158,13 @@ export default function ExtraSidebar() {
                     .map((t: string, k) => (
                       <ShadTooltip
                         content={t}
-                        delayDuration={1500}
+                        delayDuration={500}
                         side="right"
                       >
                         <div key={k} data-tooltip-id={t}>
                           <div
                             draggable
-                            className={" cursor-grab border-l-8 rounded-l-md"}
+                            className={"cursor-grab border-l-8 rounded-l-md"}
                             style={{
                               borderLeftColor:
                                 nodeColors[d] ?? nodeColors.unknown,
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index e6bfaa58d..d9575cd6c 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -1,5 +1,5 @@
 import { useContext, useEffect } from "react";
-import { COLUMN_DIV_STYLE, NAV_DISPLAY_STYLE } from "../../constants";
+import { COLUMN_DIV_STYLE, NAV_DISPLAY_STYLE, BUTTON_DIV_STYLE } from "../../constants";
 
   import { Download, Upload, Plus, Home, ExternalLink } from "lucide-react";
   import { TabsContext } from "../../contexts/tabsContext";
@@ -20,7 +20,7 @@ import { COLUMN_DIV_STYLE, NAV_DISPLAY_STYLE } from "../../constants";
           <Home className=" w-6 " />
           My Projects
         </span>
-        <div className="hi flex gap-2">
+        <div className={`${ BUTTON_DIV_STYLE }`}>
           <Button
             variant="primary"
             onClick={() => {