refactor(frontend): Adjust styling in chatComponent, buildTrigger, dropdownComponent, and other components

- Adjusted styling in chatComponent, buildTrigger, dropdownComponent, and other components to improve visual consistency and enhance user experience.
- Updated button styles, background colors, and text colors to create a more cohesive design across the application.
- Fixed incorrect color values and replaced them with appropriate color variables from the tailwind configuration.
- Removed redundant styles and optimized the code for better maintainability.

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

@@ -158,7 +158,7 @@ export default function BuildTrigger({
     >
       <div className={`fixed right-4` + (isBuilt ? " bottom-20" : " bottom-4")}>
         <div
-          className={`${eventClick} flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-[#0000002a] hover:shadow-[#00000032] bg-[#E2E7EE]  cursor-pointer`}
+          className={`${eventClick} flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-round-btn-shadow hover:shadow-round-btn-shadow bg-border cursor-pointer`}
           onClick={() => {
             handleBuild(flow);
           }}
@@ -170,7 +170,8 @@ export default function BuildTrigger({
               {isBuilding && progress < 1 ? (
                 // Render your loading animation here when isBuilding is true
                 <RadialProgressComponent
-                  color={"text-orange-400"}
+                // ! confirm below works
+                  color={"text-build-trigger"}
                   value={progress}
                 ></RadialProgressComponent>
               ) : isBuilding ? (

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

@@ -32,14 +32,14 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) {
     >
       <div className="absolute bottom-4 right-3">
         <div
-          className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-[#0000002a] hover:shadow-[#00000032]
+          className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-round-btn-shadow hover:shadow-round-btn-shadow
-          bg-[#E2E7EE]  cursor-pointer"
+          bg-border cursor-pointer"
           onClick={handleClick}
         >
           <button>
             <div className="flex gap-3">
               <MessagesSquare
-                className="pth-6 w-6 fill-[#5c8be1] stroke-1 stroke-[#5c8be1]"
+                className="pth-6 w-6 fill-chat-trigger stroke-1 stroke-chat-trigger"
                 style={{ color: "white" }}
                 strokeWidth={1.5}
               />

src/frontend/src/components/dropdownComponent/index.tsx

@@ -34,9 +34,9 @@ export default function Dropdown({
               <Listbox.Button
                 className={
                   editNode
-                    ? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input rounded-md shadow-sm sm:text-sm border-ring border-1 bg-transparent" +
+                    ? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input rounded-md shadow-sm sm:text-sm border-ring border-1" +
                       INPUT_STYLE
-                      : "ring-1 ring-ring placeholder:text-muted-foreground w-full py-2 pl-3 pr-10 text-left focus-visible:outline-none rounded-md border-ring shadow-sm sm:text-sm" +
+                      : "ring-1 ring-ring placeholder:text-muted-foreground w-full py-2 pl-3 pr-10 text-left focus-visible:outline-none rounded-md border-ring shadow-sm sm:text-sm bg-background" +
                       INPUT_STYLE
                 }
               >
@@ -47,7 +47,7 @@ export default function Dropdown({
                   }
                 >
                   <ChevronsUpDown
-                    className="h-5 w-5 text-border"
+                    className="h-5 w-5 text-muted-foreground"
                     aria-hidden="true"
                   />
                 </span>

src/frontend/src/index.css

@@ -2,6 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
+
+/* ! Confirm that all colors here are found in tailwind config */
+
 @layer base {
 
 :root {
@@ -27,68 +30,74 @@
   --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
 
   --round-btn-shadow: #00000063;
-  --hover-btn-background: #242f47;
 
-  --build-background: #E2E7EE;
+  --build-trigger: 	#dc735b;
-  --build-trigger: 	#dc735b; /* hsl(11, 65%, 61%) */
+  --chat-trigger: #5c8be1;
-  --chat-trigger: #dbeafe; /* tailwind blue 100 USED IN CHAT BACKGROUND */
 
-  --error-background: #fef2f2; /* tailwind red 50 USED IN START ERROR MESSAGE BG light-red */
+  --error-background: #fef2f2;
-  --error-foreground: #991b1b; /* tailwind red 800 USED IN START ERROR MESSAGE TEXT almost-dark-red */
+  --error-foreground: #991b1b;
 
-  --status-red: #ef4444; /* tailwind red 500 medium-red*/
+  --status-red: #ef4444;
-  --status-yellow: #eab308; /* tailwind yellow 500 medium-yellow*/
+  --status-yellow: #eab308;
-  --status-green: #4ade80; /* tailwind green 400 medium-green*/
+  --status-green: #4ade80;
 
-  --success-background: #f0fdf4; /* tailwind green 50 USED IN SUCCESS MSG light-green*/ 
+  --success-background: #f0fdf4;
-  --success-foreground: #14532d; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
+  --success-foreground: #14532d;
 
-  --high-indigo: #4338ca;  /*tailwind indigo 700*/ 
+  --high-indigo: #4338ca;
-  --medium-indigo: #6366f1;  /* tailwind indigo 500 */
+  --medium-indigo: #6366f1;
-  --medium-dark-blue:#1d4ed8; /* tailwind blue 700 Change in component (--ring)*/
+  --medium-dark-blue:#1d4ed8;
 }
 
 .dark {
-  --background: 224 71% 0%; /* hsl(224 71% 4%) */
+  --background: 224 71% 4%; /* hsl(224 71% 4%) */
-  --foreground: 213 31% 0%; /* hsl(213 31% 91%) */
+  --foreground: 213 31% 85%; /* hsl(213 31% 91%) */
-  --muted: 223 47% 0%; /* hsl(223 47% 11%) */
+
-  --muted-foreground: 215.4 16.3% 0%; /* hsl(215 16% 56%) */
+  --muted: 223 40% 11%; /* hsl(223 47% 11%) */
-  --popover: 224 71% 0%; /* hsl(224 71% 4%) */
+  --muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */
-  --popover-foreground: 215 20.2% 0%; /* hsl(215 20% 65%) */
+
-  --card: 224 71% 0%; /* hsl(224 71% 4%) */
+  --popover: 224 71% 4%; /* hsl(224 71% 4%) */
-  --card-foreground: 213 31% 0%; /* hsl(213 31% 91%) */
+  --popover-foreground: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
-  --border: 216 34% 0%; /* hsl(216 34% 17%) */
+
-  --input: 216 34% 0%; /* hsl(216 34% 17%) */
+  --card: 224 71% 7%; /* hsl(224 71% 4%) */
-  --primary: 210 40% 0%; /* hsl(210 40% 98%) */
+  --card-foreground: 213 31% 80%; /* hsl(213 31% 91%) */
-  --primary-foreground: 222.2 47.4% 0%; /* hsl(222 47% 1%) */
+
-  --secondary: 222.2 47.4% 0%; /* hsl(222 47% 11%) */
+  --border: 216 24% 17%; /* hsl(216 34% 17%) */
-  --secondary-foreground: 210 40% 0%; /* hsl(210 40% 98%) */
+  --input: 216 24% 17%; /* hsl(216 34% 17%) */
-  --accent: 216 34% 0%; /* hsl(216 34% 17%) */
+
-  --accent-foreground: 210 40% 0%; /* hsl(210 40% 98%) */
+  --primary: 210 40% 80%; /* hsl(210 40% 98%) */
-  --destructive: 0 63% 0%; /* hsl(0 63% 31%) */
+  --primary-foreground: 222.2 47.4% 1.2%; /* hsl(222 47% 1%) */
-  --destructive-foreground: 210 40% 0%; /* hsl(210 40% 98%) */
+
-  --ring: 216 34% 0%; /* hsl(216 34% 17%) */
+  --secondary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+  --secondary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+
+  --accent: 216 24% 17%; /* hsl(216 34% 17%) */
+  --accent-foreground: 210 30% 98%; /* hsl(210 40% 98%) */
+
+  --destructive: 0 63% 31%; /* hsl(0 63% 31%) */
+  --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+
+  --ring: 216 24% 30%; /* hsl(216 24% 30%) */
+
   --radius: 0.5rem;
 
-  --round-btn-shadow: #000000;
+  --round-btn-shadow: #00000063;
-  --hover-btn-background: #000000;
 
-  --build-background: #000000;
+  --build-trigger: 	#dc735b;
-  --build-trigger: 	#000000; /* hsl(11, 65%, 61%) */
+  --chat-trigger: #5c8be1;
-  --chat-trigger: #000000; /* tailwind blue 100 USED IN CHAT BACKGROUND */
 
-  --error-background: #000000; /* tailwind red 50 USED IN START ERROR MESSAGE BG light-red */
+  --error-foreground: #c2b7b7;
-  --error-foreground: #000000; /* tailwind red 800 USED IN START ERROR MESSAGE TEXT almost-dark-red */
+  --error-background: #671212;
 
-  --status-red: #000000; /* tailwind red 500 medium-red*/
+  --status-red: #ef4444;
-  --status-yellow: #000000; /* tailwind yellow 500 medium-yellow*/
+  --status-yellow: #eab308;
-  --status-green: #000000; /* tailwind green 400 medium-green*/
+  --status-green: #4ade80;
 
-  --success-background: #000000; /* tailwind green 50 USED IN SUCCESS MSG light-green*/ 
+  --success-background: #f0fdf4;
-  --success-foreground: #000000; /* tailwind green 900 USED IN SUCCESS MSG dark-green */
+  --success-foreground: #14532d;
-  --high-indigo: #000000;  /*tailwind indigo 700*/ 
+  --high-indigo: #4338ca;
-  --medium-indigo: #000000;  /* tailwind indigo 500 */
+  --medium-indigo: #6366f1;
-  --medium-dark-blue:#000000; /* tailwind blue 700 Change in component (--ring)*/
+  --medium-dark-blue:#1d4ed8;
 }}
 
 @layer base {

src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx

@@ -11,6 +11,7 @@ const ConnectionLineComponent = ({
     <g>
       <path
         fill="none"
+        // ! Replace hash # colors here
         stroke="#222"
         strokeWidth={1.5}
         className="animated "

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -133,7 +133,8 @@ export default function ExtraSidebar() {
           }}
         />
         <div className="absolute inset-y-0 right-0 flex py-1.5 pr-3 items-center">
-          <Search size={20} color="#000000" />
+        {/* ! replace hash color here */}
+          <Search size={20} className="text-primary" />
         </div>
       </div>
 

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -45,8 +45,8 @@ const NodeToolbarComponent = (props) => {
             <button
               className={classNames(
                 nodeLength > 0
-                  ? "text-foreground transition-all duration-500 ease-in-out  shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10"
+                  ? "text-foreground transition-all duration-500 ease-in-out shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10"
-                  : "text-foreground transition-all duration-500 ease-in-out  shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10 rounded-r-md"
+                  : "text-foreground transition-all duration-500 ease-in-out shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10 rounded-r-md"
               )}
               onClick={(event) => {
                 event.preventDefault();
@@ -72,7 +72,7 @@ const NodeToolbarComponent = (props) => {
           {nodeLength > 0 && (
             <ShadTooltip delayDuration={1000} content="Edit" side="top">
               <button
-                className="text-foreground transition-all duration-500 ease-in-out  shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2  ring-1 ring-inset ring-ring hover:bg-muted focus:z-10 rounded-r-md"
+                className="text-foreground transition-all duration-500 ease-in-out shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-ring hover:bg-muted focus:z-10 rounded-r-md"
                 onClick={(event) => {
                   event.preventDefault();
                   props.openPopUp(<EditNodeModal data={props.data} />);

src/frontend/tailwind.config.js

@@ -3,9 +3,11 @@ const { fontFamily } = require("tailwindcss/defaultTheme");
 
 import plugin from "tailwindcss/plugin";
 
+// ! Check if removing the other module.exports made sense
 module.exports = {
   darkMode: ["class"],
-  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
+  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", "./index.html", "./src/**/*.{js,ts,tsx,jsx}"],
+  important: true,
   theme: {
     container: {
       center: true,
@@ -16,42 +18,44 @@ module.exports = {
     },
     extend: {
       colors: {
-        white: "var(--white)",
+
-        'high-light-gray': "var(--high-light-gray)",
+        'almost-dark-gray': "var(--almost-dark-gray)",
         'almost-light-blue': "var(--almost-light-blue)",
-        'high-indigo': "var(--high-indigo)",
-        'medium-high-indigo': "var(--medium-high-indigo)",
-        'medium-emerald': "var(--medium-emerald)",
-        'status-yellow': "var(--status-yellow)",
-        'almost-medium-green': "var(--almost-medium-green)",
         'almost-medium-blue': "var(--almost-medium-blue)",
-        'medium-indigo': "var(--medium-indigo)",
+        'almost-medium-gray': "var(--almost-medium-gray)",
-        'light-slate': "var(--light-slate)",
+        'almost-medium-green': "var(--almost-medium-green)",
-        'success-background': "var(--success-background)",
-        'success-foreground': "var(--success-foreground)",
-        'status-green': "var(--status-green)",
-        'medium-dark-green': "var(--medium-dark-green)",
-        'light-blue': "var(--light-blue)",
-        'dark-blue': "var(--dark-blue)",
-        'medium-blue': "var(--medium-blue)",
-        'medium-dark-blue': "var(--medium-dark-blue)",
         'almost-medium-red': "var(--almost-medium-red)",
-        'medium-dark-red': "var(--medium-dark-red)",
+        'btn-shadow': "var(--round-btn-shadow)",
-        'error-foreground': "var(--error-foreground)",
+        'build-trigger': "var(--build-trigger)",
+        'chat-trigger': "var(--chat-trigger)",
+        'dark-blue': "var(--dark-blue)",
+        'dark-gray': "var(--dark-gray)",
         'dark-red': "var(--dark-red)",
         'error-background': "var(--error-background)",
-        'status-red': "var(--status-red)",
+        'error-foreground': "var(--error-foreground)",
-        'almost-medium-gray': "var(--almost-medium-gray)",
-        'almost-dark-gray': "var(--almost-dark-gray)",
-        'medium-dark-gray': "var(--medium-dark-gray)",
-        'medium-low-gray': "var(--medium-low-gray)",
-        'medium-gray': "var(--medium-gray)",
         'high-dark-gray': "var(--high-dark-gray)",
+        'high-indigo': "var(--high-indigo)",
+        'high-light-gray': "var(--high-light-gray)",
+        'light-blue': "var(--light-blue)",
         'light-gray': "var(--light-gray)",
-        'dark-gray': "var(--dark-gray)",
+        'light-slate': "var(--light-slate)",
-        'btn-shadow': "var(--round-btn-shadow)",
+        'medium-blue': "var(--medium-blue)",
-        buildBackground: "var(--build-background)",
+        'medium-dark-blue': "var(--medium-dark-blue)",
-        build: "var(--build-trigger)",
+        'medium-dark-gray': "var(--medium-dark-gray)",
+        'medium-dark-green': "var(--medium-dark-green)",
+        'medium-dark-red': "var(--medium-dark-red)",
+        'medium-emerald': "var(--medium-emerald)",
+        'medium-gray': "var(--medium-gray)",
+        'medium-high-indigo': "var(--medium-high-indigo)",
+        'medium-indigo': "var(--medium-indigo)",
+        'medium-low-gray': "var(--medium-low-gray)",
+        'status-green': "var(--status-green)",
+        'status-red': "var(--status-red)",
+        'status-yellow': "var(--status-yellow)",
+        'success-background': "var(--success-background)",
+        'success-foreground': "var(--success-foreground)",
+
+        white: "var(--white)",
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
@@ -110,134 +114,7 @@ module.exports = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
-};
 
-module.exports = {
-  content: ["./index.html", "./src/**/*.{js,ts,tsx,jsx}"],
-  darkMode: "class",
-  important: true,
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        white: "var(--white)",
-        'high-light-gray': "var(--high-light-gray)",
-        'almost-light-blue': "var(--almost-light-blue)",
-        'high-indigo': "var(--high-indigo)",
-        'medium-high-indigo': "var(--medium-high-indigo)",
-        'medium-emerald': "var(--medium-emerald)",
-        'status-yellow': "var(--status-yellow)",
-        'almost-medium-green': "var(--almost-medium-green)",
-        'almost-medium-blue': "var(--almost-medium-blue)",
-        'medium-indigo': "var(--medium-indigo)",
-        'light-slate': "var(--light-slate)",
-        'success-background': "var(--success-background)",
-        'dark-green': "var(--dark-green)",
-        'status-green': "var(--status-green)",
-        'medium-dark-green': "var(--medium-dark-green)",
-        'medium-light-blue': "var(--medium-light-blue)",
-        'almost-dark-blue': "var(--almost-dark-blue)",
-        'light-blue': "var(--light-blue)",
-        'dark-blue': "var(--dark-blue)",
-        'medium-blue': "var(--medium-blue)",
-        'medium-dark-blue': "var(--medium-dark-blue)",
-        'almost-medium-red': "var(--almost-medium-red)",
-        'medium-dark-red': "var(--medium-dark-red)",
-        'error-foreground': "var(--error-foreground)",
-        'dark-red': "var(--dark-red)",
-        'error-background': "var(--error-background)",
-        'status-red': "var(--status-red)",
-        'almost-medium-gray': "var(--almost-medium-gray)",
-        'almost-dark-gray': "var(--almost-dark-gray)",
-        'medium-dark-gray': "var(--medium-dark-gray)",
-        'medium-low-gray': "var(--medium-low-gray)",
-        'medium-gray': "var(--medium-gray)",
-        'high-dark-gray': "var(--high-dark-gray)",
-        'light-gray': "var(--light-gray)",
-        'dark-gray': "var(--dark-gray)",
-        'btn-hover-bg': "var(--hover-btn-background)",
-        'btn-shadow': "var(--round-btn-shadow)",
-        'build-background': "var(--build-background)",
-        'build-trigger': "var(--build-trigger)",
-        'border': "hsl(var(--border))",
-        'input': "hsl(var(--input))",
-        'ring': "hsl(var(--ring))",
-        'background': "hsl(var(--background))",
-        'foreground': "hsl(var(--foreground))",
-        'primary': {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: `var(--radius)`,
-        md: `calc(var(--radius) - 2px)`,
-        sm: "calc(var(--radius) - 4px)",
-      },
-      fontFamily: {
-        sans: ["var(--font-sans)", ...fontFamily.sans],
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
-        },
-        pulseGreen: {
-          "0%": { boxShadow: "0 0 0 0 rgba(72, 187, 120, 0.7)" },
-          "100%": { boxShadow: "0 0 0 10px rgba(72, 187, 120, 0)" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-        "pulse-green": "pulseGreen 1s linear",
-        "spin-once": "spin 1s linear 0.7",
-      },
-      borderColor: {
-        "red-outline": "rgba(255, 0, 0, 0.8)",
-        "green-outline": "rgba(72, 187, 120, 0.7)",
-      },
-      boxShadow: {
-        "red-outline": "0 0 5px rgba(255, 0, 0, 0.5)",
-        "green-outline": "0 0 5px rgba(72, 187, 120, 0.7)",
-      },
-    },
-  },
   plugins: [
     require("tailwindcss-animate"),
     require("@tailwindcss/forms")({