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,6 +136,11 @@ export default function BuildTrigger({
       leaveTo="translate-y-96"
     >
       <div className={`fixed right-4` + (isBuilt ? " bottom-20" : " bottom-4")}>
+        <ShadTooltip
+          delayDuration={500}
+          content="Build Flow"
+          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"
@@ -146,13 +152,14 @@ 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: "white" }} />
+                  <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={() => {