feat: Add buildTrigger ShadTooltip

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
+        <ShadTooltip
-          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]
+          delayDuration={500}
-           bg-[#E2E7EE] dark:border-gray-600 cursor-pointer"
+          content="Build Flow"
-          onClick={() => {
+          side="left"
-            handleBuild(flow);
-          }}
         >
-          <button>
+          <div
-            <div className="flex gap-3 items-center">
+            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]
-              {isBuilding ? (
+            bg-[#E2E7EE] dark:border-gray-600 cursor-pointer"
-                // Render your loading animation here when isBuilding is true
+            onClick={() => {
-                <Loading strokeWidth={1.5} style={{ color: "white" }} />
+              handleBuild(flow);
-              ) : (
+            }}
-                <Zap className="sh-6 w-6 fill-[#dc735b] stroke-1 stroke-[#dc735b]"/>
+          >
-              )}
+            <button>
-            </div>
+              <div className="flex gap-3 items-center">
-          </button>
+                {isBuilding ? (
-        </div>
+                  // 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>
   );

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,

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={() => {