formatting branch

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -235,7 +235,6 @@ export default function ParameterComponent({
               onChange={handleOnNewValue}
             />
           </div>
-
         ) : left === true && type === "file" ? (
           <div className="mt-2 w-full">
             <InputFileComponent
@@ -267,7 +266,6 @@ export default function ParameterComponent({
               onChange={handleOnNewValue}
             />
           </div>
-
         ) : (
           <></>
         )}

src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx

@@ -29,10 +29,7 @@ export default function SingleAlert({
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
-            <XCircle
+            <XCircle className="h-5 w-5 text-status-red" aria-hidden="true" />
-              className="h-5 w-5 text-status-red"
-              aria-hidden="true"
-            />
           </div>
           <div className="ml-3">
             <h3 className="text-sm break-words font-medium text-error-foreground">
@@ -65,7 +62,10 @@ export default function SingleAlert({
                 className="inline-flex rounded-md p-1.5 text-status-red"
               >
                 <span className="sr-only">Dismiss</span>
-                <X className="h-4 w-4 text-error-foreground" aria-hidden="true" />
+                <X
+                  className="h-4 w-4 text-error-foreground"
+                  aria-hidden="true"
+                />
               </button>
             </div>
           </div>
@@ -76,10 +76,7 @@ export default function SingleAlert({
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
-            <Info
+            <Info className="h-5 w-5 text-status-blue " aria-hidden="true" />
-              className="h-5 w-5 text-status-blue "
-              aria-hidden="true"
-            />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
             <p className="text-sm text-info-foreground font-medium">
@@ -111,7 +108,10 @@ export default function SingleAlert({
                 className="inline-flex rounded-md p-1.5 text-info-foreground"
               >
                 <span className="sr-only">Dismiss</span>
-                <X className="h-4 w-4 text-info-foreground" aria-hidden="true" />
+                <X
+                  className="h-4 w-4 text-info-foreground"
+                  aria-hidden="true"
+                />
               </button>
             </div>
           </div>
@@ -145,7 +145,10 @@ export default function SingleAlert({
                 className="inline-flex rounded-md p-1.5 text-status-green"
               >
                 <span className="sr-only">Dismiss</span>
-                <X className="h-4 w-4 text-success-foreground" aria-hidden="true" />
+                <X
+                  className="h-4 w-4 text-success-foreground"
+                  aria-hidden="true"
+                />
               </button>
             </div>
           </div>

src/frontend/src/alerts/error/index.tsx

@@ -43,10 +43,7 @@ export default function ErrorAlert({
       >
         <div className="flex">
           <div className="flex-shrink-0">
-            <XCircle
+            <XCircle className="h-5 w-5 text-status-red" aria-hidden="true" />
-              className="h-5 w-5 text-status-red"
-              aria-hidden="true"
-            />
           </div>
           <div className="ml-3">
             <h3 className="text-sm font-medium text-error-foreground">

src/frontend/src/alerts/notice/index.tsx

@@ -40,10 +40,7 @@ export default function NoticeAlert({
       >
         <div className="flex">
           <div className="flex-shrink-0">
-            <Info
+            <Info className="h-5 w-5 text-status-blue " aria-hidden="true" />
-              className="h-5 w-5 text-status-blue "
-              aria-hidden="true"
-            />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
             <p className="text-sm text-info-foreground">{title}</p>

src/frontend/src/components/ExtraSidebarComponent/index.tsx

@@ -71,9 +71,7 @@ export default function ExtraSidebar() {
                               <span className="flex-1">{item.name}</span>
                               <svg
                                 className={classNames(
-                                  open
+                                  open ? "text-ring rotate-90" : "text-ring",
-                                    ? "text-ring rotate-90"
-                                    : "text-ring",
                                   "ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-ring"
                                 )}
                                 viewBox="0 0 20 20"

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

@@ -175,7 +175,7 @@ export default function BuildTrigger({
                   value={progress}
                 ></RadialProgressComponent>
               ) : isBuilding ? (
-                <Loading strokeWidth={1.5} className="stroke-build-trigger"/>
+                <Loading strokeWidth={1.5} className="stroke-build-trigger" />
               ) : (
                 <Zap className="sh-6 w-6 fill-build-trigger stroke-1 stroke-build-trigger" />
               )}

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

@@ -40,7 +40,9 @@ export default function Dropdown({
                       INPUT_STYLE
                 }
               >
-                <span className="block bg-background truncate w-full">{internalValue}</span>
+                <span className="block bg-background truncate w-full">
+                  {internalValue}
+                </span>
                 <span
                   className={
                     "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
@@ -72,9 +74,7 @@ export default function Dropdown({
                       key={id}
                       className={({ active }) =>
                         classNames(
-                          active
+                          active ? " bg-accent" : "",
-                            ? " bg-accent"
-                            : "",
                           editNode
                             ? "relative cursor-default select-none py-0.5 pl-3 pr-12"
                             : "relative cursor-default select-none py-2 pl-3 pr-9"

src/frontend/src/components/loadingComponent/index.tsx

@@ -22,7 +22,9 @@ export default function LoadingComponent({ remSize }: LoadingComponentProps) {
         />
       </svg>
       <br></br>
-      <span className="animate-pulse text-almost-medium-blue text-lg">Loading...</span>
+      <span className="animate-pulse text-almost-medium-blue text-lg">
+        Loading...
+      </span>
     </div>
   );
 }

src/frontend/src/components/promptComponent/index.tsx

@@ -73,9 +73,7 @@ export default function PromptAreaComponent({
             );
           }}
         >
-          {!editNode && (
+          {!editNode && <ExternalLink className="w-6 h-6 hover:text-ring " />}
-            <ExternalLink className="w-6 h-6 hover:text-ring " />
-          )}
         </button>
       </div>
     </div>

src/frontend/src/components/textAreaComponent/index.tsx

@@ -76,9 +76,7 @@ export default function TextAreaComponent({
             );
           }}
         >
-          {!editNode && (
+          {!editNode && <ExternalLink className="w-6 h-6 hover:text-ring " />}
-            <ExternalLink className="w-6 h-6 hover:text-ring " />
-          )}
         </button>
       </div>
     </div>

src/frontend/src/components/toggleComponent/index.tsx

@@ -30,9 +30,7 @@ export default function ToggleComponent({
           className={classNames(
             enabled ? "translate-x-5" : "translate-x-0",
             "pointer-events-none relative inline-block h-5 w-5 transform rounded-full  shadow ring-0 transition duration-200 ease-in-out",
-            disabled
+            disabled ? "bg-input " : "bg-background"
-              ? "bg-input "
-              : "bg-background"
           )}
         >
           <span

src/frontend/src/constants.tsx

@@ -150,8 +150,6 @@ export const EXPORT_CODE_DIALOG =
 export const INPUT_STYLE =
   "focus:tw-ring-none focus-visible:outline-none  focus:ring-ring bg-background focus:outline-none";
 
-
-
 /**
  * The base text for subtitle of code dialog
  * @constant
@@ -170,9 +168,8 @@ export const NAV_DISPLAY_STYLE =
  * The base text for subtitle of code dialog
  * @constant
  */
-export const BUTTON_DIV_STYLE =
+export const BUTTON_DIV_STYLE = " flex gap-2 ";
-  " flex gap-2 ";
+(" focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none ");
-  " focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none ";
 
 /**
  * Default description for the flow

src/frontend/src/contexts/tabsContext.tsx

@@ -192,26 +192,28 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   }
 
   function processFlowEdges(flow) {
-    if(!flow.data || !flow.data.edges) return;
+    if (!flow.data || !flow.data.edges) return;
     flow.data.edges.forEach((edge) => {
       edge.className = "";
       edge.style = { stroke: "#555555" };
     });
   }
-  function updateDisplay_name(node:NodeType,template:APIClassType) {
+  function updateDisplay_name(node: NodeType, template: APIClassType) {
-    node.data.node.display_name = template["display_name"]?template["display_name"]:node.data.type;
+    node.data.node.display_name = template["display_name"]
+      ? template["display_name"]
+      : node.data.type;
   }
 
   function processFlowNodes(flow) {
-    if(!flow.data || !flow.data.nodes) return;
+    if (!flow.data || !flow.data.nodes) return;
-    flow.data.nodes.forEach((node:NodeType) => {
+    flow.data.nodes.forEach((node: NodeType) => {
       const template = templates[node.data.type];
       if (!template) {
         setErrorData({ title: `Unknown node type: ${node.data.type}` });
         return;
       }
       if (Object.keys(template["template"]).length > 0) {
-        updateDisplay_name(node,template);
+        updateDisplay_name(node, template);
         updateNodeBaseClasses(node, template);
         updateNodeEdges(flow, node, template);
         updateNodeDescription(node, template);
@@ -220,11 +222,15 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     });
   }
 
-  function updateNodeBaseClasses(node:NodeType,template:APIClassType) {
+  function updateNodeBaseClasses(node: NodeType, template: APIClassType) {
     node.data.node.base_classes = template["base_classes"];
   }
 
-  function updateNodeEdges(flow:FlowType, node:NodeType,template:APIClassType) {
+  function updateNodeEdges(
+    flow: FlowType,
+    node: NodeType,
+    template: APIClassType
+  ) {
     flow.data.edges.forEach((edge) => {
       if (edge.source === node.id) {
         edge.sourceHandle = edge.sourceHandle
@@ -236,11 +242,11 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     });
   }
 
-  function updateNodeDescription(node:NodeType,template:APIClassType) {
+  function updateNodeDescription(node: NodeType, template: APIClassType) {
     node.data.node.description = template["description"];
   }
 
-  function updateNodeTemplate(node:NodeType,template:APIClassType) {
+  function updateNodeTemplate(node: NodeType, template: APIClassType) {
     node.data.node.template = updateTemplate(
       template["template"] as unknown as APITemplateType,
       node.data.node.template as APITemplateType

src/frontend/src/modals/ApiModal/index.tsx

@@ -87,10 +87,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Code</span>
-            <Code2
+            <Code2 className="h-6 w-6 text-primary pl-1 " aria-hidden="true" />
-              className="h-6 w-6 text-primary pl-1 "
-              aria-hidden="true"
-            />
           </DialogTitle>
           <DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription>
         </DialogHeader>
@@ -103,7 +100,9 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
           <div className="flex items-center justify-between px-2">
             <TabsList>
               {tabs.map((tab, index) => (
-                <TabsTrigger key={index} value={index.toString()}>{tab.name}</TabsTrigger>
+                <TabsTrigger key={index} value={index.toString()}>
+                  {tab.name}
+                </TabsTrigger>
               ))}
             </TabsList>
             <div className="float-right">

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -79,7 +79,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
   }
 
   return (
-    <Dialog open={true} onOpenChange={setModalOpen} >
+    <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger asChild></DialogTrigger>
       <DialogContent className="lg:max-w-[700px] ">
         <DialogHeader>

src/frontend/src/modals/chatModal/chatMessage/index.tsx

@@ -32,9 +32,7 @@ export default function ChatMessage({
     <div
       className={classNames(
         "w-full py-2 pl-2 flex",
-        chat.isSend
+        chat.isSend ? "bg-background " : "bg-input"
-          ? "bg-background "
-          : "bg-input"
       )}
     >
       <div
@@ -60,9 +58,7 @@ export default function ChatMessage({
             />
           </div>
         )}
-        {chat.isSend && (
+        {chat.isSend && <User2 className="w-6 h-6 -mb-1 text-primary " />}
-          <User2 className="w-6 h-6 -mb-1 text-primary " />
-        )}
       </div>
       {!chat.isSend ? (
         <div className="w-full text-start flex items-center">

src/frontend/src/modals/chatModal/fileComponent/index.tsx

@@ -39,10 +39,7 @@ export default function FileCard({ fileName, content, fileType }) {
           <div
             className={`absolute top-0 right-0 bg-muted text-foreground rounded-bl-lg px-1 text-sm font-bold `}
           >
-            <button
+            <button className="text-ring py-1 px-2 " onClick={handleDownload}>
-              className="text-ring py-1 px-2 "
-              onClick={handleDownload}
-            >
               <DownloadCloud className="hover:scale-110 w-5 h-5 text-current" />
             </button>
           </div>

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

@@ -402,8 +402,10 @@ export default function Page({ flow }: { flow: FlowType }) {
                   maxZoom={8}
                 >
                   <Background className="" />
-                  <Controls className="text-primary stroke-foreground [&>button]:border-b-border hover:[&>button]:bg-border
+                  <Controls
-                   fill-foreground bg-muted"></Controls>
+                    className="text-primary stroke-foreground [&>button]:border-b-border hover:[&>button]:bg-border
+                   fill-foreground bg-muted"
+                  ></Controls>
                 </ReactFlow>
                 <Chat flow={flow} reactFlowInstance={reactFlowInstance} />
               </div>

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

@@ -83,7 +83,6 @@ const NodeToolbarComponent = (props) => {
             </ShadTooltip>
           )}
 
-          
           {/* <Menu as="div" className="relative inline-block text-left z-100">
             <button className="text-gray-700 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-gray-300 hover:bg-muted focus:z-10 rounded-r-md">
               <div>

src/frontend/src/pages/MainPage/index.tsx

@@ -20,7 +20,7 @@ export default function HomePage() {
           <Home className="w-6" />
           {USER_PROJECTS_HEADER}
         </span>
-        <div className={`${ BUTTON_DIV_STYLE }`}>
+        <div className={`${BUTTON_DIV_STYLE}`}>
           <Button
             variant="primary"
             onClick={() => {

src/frontend/tailwind.config.js

@@ -6,7 +6,12 @@ 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}", "./index.html", "./src/**/*.{js,ts,tsx,jsx}"],
+  content: [
+    "app/**/*.{ts,tsx}",
+    "components/**/*.{ts,tsx}",
+    "./index.html",
+    "./src/**/*.{js,ts,tsx,jsx}",
+  ],
   important: true,
   theme: {
     container: {
@@ -18,45 +23,44 @@ module.exports = {
     },
     extend: {
       colors: {
-
+        "almost-dark-gray": "var(--almost-dark-gray)",
-        'almost-dark-gray': "var(--almost-dark-gray)",
+        "almost-light-blue": "var(--almost-light-blue)",
-        'almost-light-blue': "var(--almost-light-blue)",
+        "almost-medium-blue": "var(--almost-medium-blue)",
-        'almost-medium-blue': "var(--almost-medium-blue)",
+        "almost-medium-gray": "var(--almost-medium-gray)",
-        'almost-medium-gray': "var(--almost-medium-gray)",
+        "almost-medium-green": "var(--almost-medium-green)",
-        'almost-medium-green': "var(--almost-medium-green)",
+        "almost-medium-red": "var(--almost-medium-red)",
-        'almost-medium-red': "var(--almost-medium-red)",
+        "btn-shadow": "var(--round-btn-shadow)",
-        'btn-shadow': "var(--round-btn-shadow)",
+        "build-trigger": "var(--build-trigger)",
-        'build-trigger': "var(--build-trigger)",
+        "chat-trigger": "var(--chat-trigger)",
-        'chat-trigger': "var(--chat-trigger)",
+        "blur-shared": "var(--blur-shared)",
-        'blur-shared': "var(--blur-shared)",
+        "dark-blue": "var(--dark-blue)",
-        'dark-blue': "var(--dark-blue)",
+        "dark-gray": "var(--dark-gray)",
-        'dark-gray': "var(--dark-gray)",
+        "dark-red": "var(--dark-red)",
-        'dark-red': "var(--dark-red)",
+        "error-background": "var(--error-background)",
-        'error-background': "var(--error-background)",
+        "error-foreground": "var(--error-foreground)",
-        'error-foreground': "var(--error-foreground)",
+        "high-dark-gray": "var(--high-dark-gray)",
-        'high-dark-gray': "var(--high-dark-gray)",
+        "high-indigo": "var(--high-indigo)",
-        'high-indigo': "var(--high-indigo)",
+        "high-light-gray": "var(--high-light-gray)",
-        'high-light-gray': "var(--high-light-gray)",
+        "info-background": "var(--info-background)",
-        'info-background': "var(--info-background)",
+        "info-foreground": "var(--info-foreground)",
-        'info-foreground': "var(--info-foreground)",
+        "light-blue": "var(--light-blue)",
-        'light-blue': "var(--light-blue)",
+        "light-gray": "var(--light-gray)",
-        'light-gray': "var(--light-gray)",
+        "light-slate": "var(--light-slate)",
-        'light-slate': "var(--light-slate)",
+        "medium-blue": "var(--medium-blue)",
-        'medium-blue': "var(--medium-blue)",
+        "status-blue": "var(--status-blue)",
-        'status-blue': "var(--status-blue)",
+        "medium-dark-gray": "var(--medium-dark-gray)",
-        'medium-dark-gray': "var(--medium-dark-gray)",
+        "medium-dark-green": "var(--medium-dark-green)",
-        'medium-dark-green': "var(--medium-dark-green)",
+        "medium-dark-red": "var(--medium-dark-red)",
-        'medium-dark-red': "var(--medium-dark-red)",
+        "medium-emerald": "var(--medium-emerald)",
-        'medium-emerald': "var(--medium-emerald)",
+        "medium-gray": "var(--medium-gray)",
-        'medium-gray': "var(--medium-gray)",
+        "medium-high-indigo": "var(--medium-high-indigo)",
-        'medium-high-indigo': "var(--medium-high-indigo)",
+        "medium-indigo": "var(--medium-indigo)",
-        'medium-indigo': "var(--medium-indigo)",
+        "medium-low-gray": "var(--medium-low-gray)",
-        'medium-low-gray': "var(--medium-low-gray)",
+        "status-green": "var(--status-green)",
-        'status-green': "var(--status-green)",
+        "status-red": "var(--status-red)",
-        'status-red': "var(--status-red)",
+        "status-yellow": "var(--status-yellow)",
-        'status-yellow': "var(--status-yellow)",
+        "success-background": "var(--success-background)",
-        'success-background': "var(--success-background)",
+        "success-foreground": "var(--success-foreground)",
-        'success-foreground': "var(--success-foreground)",
 
         white: "var(--white)",
         border: "hsl(var(--border))",