changed buttin colors and modal background

src/frontend/src/components/chatComponent/buildTrigger/index.tsx

@@ -130,7 +130,7 @@ export default function BuildTrigger({
     >
       <div className={`fixed right-4` + (isBuilt ? " bottom-20" : " bottom-4")}>
         <div
-          className="border flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full bg-blue-600 dark:border-gray-600 cursor-pointer"
+          className="border flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full bg-amber-500 dark:border-gray-600 cursor-pointer"
           onClick={() => {
             handleBuild(flow);
           }}
@@ -139,9 +139,9 @@ export default function BuildTrigger({
             <div className="flex gap-3 items-center">
               {isBuilding ? (
                 // Render your loading animation here when isBuilding is true
-                <Loading style={{ color: "white" }} />
+                <Loading strokeWidth={1.5} style={{ color: "white" }} />
               ) : (
-                <Zap className="h-6 w-6" style={{ color: "white" }} />
+                <Zap className="h-6 w-6 text-amber-100 fill-amber-100" strokeWidth={1.5} style={{ color: "white" }} />
               )}
             </div>
           </button>

src/frontend/src/components/chatComponent/chatTrigger/index.tsx

@@ -1,13 +1,7 @@
 import { Transition } from "@headlessui/react";
-import {
-  Bars3CenterLeftIcon,
-  ChatBubbleBottomCenterTextIcon,
-} from "@heroicons/react/24/outline";
 import { MessagesSquare } from "lucide-react";
-import { nodeColors } from "../../../utils";
 import { alertContext } from "../../../contexts/alertContext";
 import { useContext } from "react";
-import ChatModal from "../../../modals/chatModal";
 
 export default function ChatTrigger({ open, setOpen, isBuilt }) {
   const { setErrorData } = useContext(alertContext);
@@ -36,14 +30,15 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) {
     >
       <div className="absolute bottom-4 right-3">
         <div
-          className="border flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full bg-amber-600 dark:border-gray-600 cursor-pointer"
+          className="border flex justify-center items-center py-1 px-3 w-12 h-12 rounded-full bg-blue-500 dark:border-gray-600 cursor-pointer"
           onClick={handleClick}
         >
           <button>
-            <div className="flex gap-3  items-center">
+            <div className="flex gap-3">
               <MessagesSquare
-                className="h-6 w-6 mt-1"
+                className="h-6 w-6  text-blue-100 fill-blue-100"
                 style={{ color: "white" }}
+                strokeWidth={1.5}
               />
             </div>
           </button>

src/frontend/src/components/ui/dialog.tsx

@@ -27,7 +27,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
+      "fixed inset-0 z-50 bg-primary/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
       className
     )}
     {...props}

src/frontend/src/index.css

@@ -81,7 +81,7 @@
   --card-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
   --border: 214.3 21.8% 91.4%; /* hsl(214 32% 91%) */
   --input: 214.3 21.8% 91.4%; /* hsl(214 32% 91%) */
-  --primary: 222.2 47.4% 18%; /* hsl(222 47% 18%) */
+  --primary: 222.2 27.0% 11.2%; /* hsl(222 27% 18%) */
   --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%) */