🔧 fix(EditFlowSettingsComponent): add div wrapper around description label for proper styling

🔧 fix(EditNodeModal): remove unused imports and update component structure to use BaseModal

🔧 fix(baseModal): add Footer component to BaseModal and update component structure to use Header and Footer

🔧 fix(exportModal): remove unused imports and update component structure to use BaseModal

🔧 fix(flowSettingsModal): import BaseModal component and refactor modal structure for better readability and maintainability
🔧 fix(genericModal): adjust margin-top for prompt variables description to improve spacing

src/frontend/package-lock.json

@@ -147,9 +147,9 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.22.6",
+      "version": "7.22.9",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.6.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.9.tgz",
-      "integrity": "sha512-29tfsWTq2Ftu7MXmimyC0C5FDZv5DYxOZkh3XD3+QW4V/BYuv/LyEsjj3c0hqedEaDt6DBfDvexMKU8YevdqFg==",
+      "integrity": "sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -194,10 +194,18 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/core/node_modules/@nicolo-ribaudo/semver-v6": {
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/semver-v6/-/semver-v6-6.3.3.tgz",
+      "integrity": "sha512-3Yc1fUTs69MG/uZbJlLSI3JISMn2UV2rg+1D/vROUqZyh3l6iYHCs7GMp+M40ZD7yOdDbYjJcU1oTJhrc+dGKg==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/@babel/generator": {
-      "version": "7.22.7",
+      "version": "7.22.9",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.7.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.9.tgz",
-      "integrity": "sha512-p+jPjMG+SI8yvIaxGgeW24u7q9+5+TGpZh8/CuB7RhBKd7RCy8FayNEFNNKrNK/eUcY/4ExQqLmyrvBXKsIcwQ==",
+      "integrity": "sha512-KtLMbmicyuK2Ak/FTCJVbDnkN1SlT8/kceFTiuDiiRUUSMnHMidxSCdG4ndkTOHHpoomWe/4xkvHkEOncwjYIw==",
       "dependencies": {
         "@babel/types": "^7.22.5",
         "@jridgewell/gen-mapping": "^0.3.2",
@@ -209,15 +217,15 @@
       }
     },
     "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.22.6",
+      "version": "7.22.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.6.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.9.tgz",
-      "integrity": "sha512-534sYEqWD9VfUm3IPn2SLcH4Q3P86XL+QvqdC7ZsFrzyyPF3T4XGiVghF6PTYNdWg6pXuoqXxNQAhbYeEInTzA==",
+      "integrity": "sha512-7qYrNM6HjpnPHJbopxmb8hSPoZ0gsX8IvUS32JGVoy+pU9e5N0nLr1VjJoR6kA4d9dmGLxNYOjeB8sUDal2WMw==",
       "dependencies": {
-        "@babel/compat-data": "^7.22.6",
+        "@babel/compat-data": "^7.22.9",
         "@babel/helper-validator-option": "^7.22.5",
-        "@nicolo-ribaudo/semver-v6": "^6.3.3",
         "browserslist": "^4.21.9",
-        "lru-cache": "^5.1.1"
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -226,6 +234,14 @@
         "@babel/core": "^7.0.0"
       }
     },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/@babel/helper-environment-visitor": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
@@ -269,21 +285,21 @@
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.22.5",
+      "version": "7.22.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.9.tgz",
-      "integrity": "sha512-+hGKDt/Ze8GFExiVHno/2dvG5IdstpzCq0y4Qc9OJ25D4q3pKfiIP/4Vp3/JvhDkLKsDK2api3q3fpIgiIF5bw==",
+      "integrity": "sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==",
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.22.5",
         "@babel/helper-module-imports": "^7.22.5",
         "@babel/helper-simple-access": "^7.22.5",
-        "@babel/helper-split-export-declaration": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/helper-validator-identifier": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.22.5"
-        "@babel/template": "^7.22.5",
-        "@babel/traverse": "^7.22.5",
-        "@babel/types": "^7.22.5"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
       }
     },
     "node_modules/@babel/helper-simple-access": {
@@ -1149,12 +1165,12 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
     "node_modules/@mui/private-theming": {
-      "version": "5.13.1",
+      "version": "5.13.7",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.13.1.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.13.7.tgz",
-      "integrity": "sha512-HW4npLUD9BAkVppOUZHeO1FOKUJWAwbpy0VQoGe3McUYTlck1HezGHQCfBQ5S/Nszi7EViqiimECVl9xi+/WjQ==",
+      "integrity": "sha512-qbSr+udcij5F9dKhGX7fEdx2drXchq7htLNr2Qg2Ma+WJ6q0ERlEqGSBiPiVDJkptcjeVL4DGmcf1wl5+vD4EA==",
       "dependencies": {
-        "@babel/runtime": "^7.21.0",
+        "@babel/runtime": "^7.22.5",
-        "@mui/utils": "^5.13.1",
+        "@mui/utils": "^5.13.7",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -1175,9 +1191,9 @@
       }
     },
     "node_modules/@mui/private-theming/node_modules/@babel/runtime": {
-      "version": "7.22.5",
+      "version": "7.22.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
-      "integrity": "sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==",
+      "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
       "dependencies": {
         "regenerator-runtime": "^0.13.11"
       },
@@ -1185,6 +1201,33 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@mui/private-theming/node_modules/@mui/utils": {
+      "version": "5.13.7",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.13.7.tgz",
+      "integrity": "sha512-/3BLptG/q0u36eYED7Nhf4fKXmcKb6LjjT7ZMwhZIZSdSxVqDqSTmATW3a56n3KEPQUXCU9TpxAfCBQhs6brVA==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.5",
+        "@types/prop-types": "^15.7.5",
+        "@types/react-is": "^18.2.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@mui/private-theming/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
     "node_modules/@mui/styled-engine": {
       "version": "5.13.2",
       "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.13.2.tgz",
@@ -1217,9 +1260,9 @@
       }
     },
     "node_modules/@mui/styled-engine/node_modules/@babel/runtime": {
-      "version": "7.22.5",
+      "version": "7.22.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
-      "integrity": "sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==",
+      "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
       "dependencies": {
         "regenerator-runtime": "^0.13.11"
       },
@@ -1272,9 +1315,9 @@
       }
     },
     "node_modules/@mui/system/node_modules/@babel/runtime": {
-      "version": "7.22.5",
+      "version": "7.22.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
-      "integrity": "sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==",
+      "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
       "dependencies": {
         "regenerator-runtime": "^0.13.11"
       },
@@ -1323,9 +1366,9 @@
       }
     },
     "node_modules/@mui/utils/node_modules/@babel/runtime": {
-      "version": "7.22.5",
+      "version": "7.22.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
-      "integrity": "sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==",
+      "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
       "dependencies": {
         "regenerator-runtime": "^0.13.11"
       },
@@ -1338,14 +1381,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
-    "node_modules/@nicolo-ribaudo/semver-v6": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/semver-v6/-/semver-v6-6.3.3.tgz",
-      "integrity": "sha512-3Yc1fUTs69MG/uZbJlLSI3JISMn2UV2rg+1D/vROUqZyh3l6iYHCs7GMp+M40ZD7yOdDbYjJcU1oTJhrc+dGKg==",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -5094,9 +5129,9 @@
       "integrity": "sha512-ae0mA+Qiqp6C29pqZX3fQgK+F91+F7wobM/v8DRzDqJdZJELXiFUx4PP4pK/mzUS0xkiSEx3Ncd9gr69jg3YsQ=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.440",
+      "version": "1.4.457",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.440.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.457.tgz",
-      "integrity": "sha512-r6dCgNpRhPwiWlxbHzZQ/d9swfPaEJGi8ekqRBwQYaR3WmA5VkqQfBWSDDjuJU1ntO+W9tHx8OHV/96Q8e0dVw=="
+      "integrity": "sha512-/g3UyNDmDd6ebeWapmAoiyy+Sy2HyJ+/X8KyvNeHfKRFfHaA2W8oF5fxD5F3tjBDcjpwo0iek6YNgxNXDBoEtA=="
     },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
@@ -8025,9 +8060,9 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "2.0.12",
+      "version": "2.0.13",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.12.tgz",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
-      "integrity": "sha512-QzsYKWhXTWx8h1kIvqfnC++o0pEmpRQA/aenALsL2F4pqNVr7YzcdMlDij5WBnwftRbJCNJL/O7zdKaxKPHqgQ=="
+      "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ=="
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",

src/frontend/src/components/EditFlowSettingsComponent/index.tsx

@@ -62,7 +62,10 @@ export const EditFlowSettings: React.FC<InputProps> = ({
         />
       </Label>
       <Label>
-        <span className="font-medium">Description (optional)</span>
+        <div className="edit-flow-arrangement mt-3">
+          <span className="font-medium ">Description (optional)</span>
+        </div>
+
         <Textarea
           name="description"
           id="description"

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

@@ -12,15 +12,7 @@ import TextAreaComponent from "../../components/textAreaComponent";
 import ToggleShadComponent from "../../components/toggleShadComponent";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
-import {
+import { DialogTitle } from "../../components/ui/dialog";
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../../components/ui/dialog";
 import {
   Table,
   TableBody,
@@ -34,6 +26,7 @@ import { TabsContext } from "../../contexts/tabsContext";
 import { typesContext } from "../../contexts/typesContext";
 import { NodeDataType } from "../../types/flow";
 import { classNames, limitScrollFieldsModal } from "../../utils";
+import BaseModal from "../baseModal";
 
 export default function EditNodeModal({ data }: { data: NodeDataType }) {
   const [open, setOpen] = useState(true);
@@ -97,24 +90,18 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
   };
 
   return (
-    <Dialog open={true} onOpenChange={setModalOpen}>
+    <BaseModal open={true} setOpen={setModalOpen} size="large-h-full">
-      <DialogTrigger asChild></DialogTrigger>
+      <BaseModal.Header description={data.node?.description}>
-      <DialogContent className="sm:max-w-[600px] lg:max-w-[700px]">
-        <DialogHeader>
         <DialogTitle className="flex items-center">
           <span className="pr-2">{data.type}</span>
           <Badge variant="secondary">ID: {data.id}</Badge>
         </DialogTitle>
-          <DialogDescription asChild>
+      </BaseModal.Header>
-            <div>
+      <BaseModal.Content>
-              {data.node?.description}
+        <div className="flex pb-2">
-              <div className="flex pt-3">
           <Variable className="edit-node-modal-variable "></Variable>
           <span className="edit-node-modal-span">Parameters</span>
         </div>
-            </div>
-          </DialogDescription>
-        </DialogHeader>
 
         <div className="edit-node-modal-arrangement">
           <div
@@ -316,8 +303,9 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
             )}
           </div>
         </div>
+      </BaseModal.Content>
 
-        <DialogFooter>
+      <BaseModal.Footer>
         <Button
           className="mt-3"
           onClick={() => {
@@ -327,8 +315,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
         >
           Save Changes
         </Button>
-        </DialogFooter>
+      </BaseModal.Footer>
-      </DialogContent>
+    </BaseModal>
-    </Dialog>
   );
 }

src/frontend/src/modals/baseModal/index.tsx

@@ -13,6 +13,7 @@ import { PopUpContext } from "../../contexts/popUpContext";
 
 type ContentProps = { children: ReactNode };
 type HeaderProps = { children: ReactNode; description: string };
+type FooterProps = { children: ReactNode };
 
 const Content: React.FC<ContentProps> = ({ children }) => {
   return <div className="h-full w-full">{children}</div>;
@@ -29,11 +30,19 @@ const Header: React.FC<{ children: ReactNode; description: string }> = ({
     </DialogHeader>
   );
 };
+
+const Footer: React.FC<{ children: ReactNode }> = ({ children }) => {
+  return <>{children}</>;
+};
 interface BaseModalProps {
-  children: [React.ReactElement<ContentProps>, React.ReactElement<HeaderProps>];
+  children: [
+    React.ReactElement<ContentProps>,
+    React.ReactElement<HeaderProps>,
+    React.ReactElement<FooterProps>?
+  ];
   open: boolean;
   setOpen: (open: boolean) => void;
-  size?: "small" | "medium" | "large";
+  size?: "smaller" | "small" | "medium" | "large" | "large-h-full";
 }
 function BaseModal({
   open,
@@ -58,11 +67,18 @@ function BaseModal({
   const ContentChild = React.Children.toArray(children).find(
     (child) => (child as React.ReactElement).type === Content
   );
+  const ContentFooter = React.Children.toArray(children).find(
+    (child) => (child as React.ReactElement).type === Footer
+  );
 
   let minWidth: string;
   let height: string;
 
   switch (size) {
+    case "smaller":
+      minWidth = "min-w-[40vw]";
+      height = "h-[25vh]";
+      break;
     case "small":
       minWidth = "min-w-[40vw]";
       height = "h-[40vh]";
@@ -75,6 +91,9 @@ function BaseModal({
       minWidth = "min-w-[80vw]";
       height = "h-[80vh]";
       break;
+    case "large-h-full":
+      minWidth = "min-w-[80vw]";
+      break;
     default:
       minWidth = "min-w-[80vw]";
       height = "h-[80vh]";
@@ -88,6 +107,8 @@ function BaseModal({
       <DialogContent className={minWidth}>
         {headerChild}
         <div className={`mt-2 flex ${height} w-full `}>{ContentChild}</div>
+
+        <div className="flex flex-row-reverse">{ContentFooter}</div>
       </DialogContent>
     </Dialog>
   );
@@ -95,4 +116,5 @@ function BaseModal({
 
 BaseModal.Content = Content;
 BaseModal.Header = Header;
+BaseModal.Footer = Footer;
 export default BaseModal;

src/frontend/src/modals/exportModal/index.tsx

@@ -3,20 +3,13 @@ import { useContext, useRef, useState } from "react";
 import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 import { Button } from "../../components/ui/button";
 import { Checkbox } from "../../components/ui/checkbox";
-import {
+import { DialogTitle } from "../../components/ui/dialog";
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../../components/ui/dialog";
 import { EXPORT_DIALOG_SUBTITLE } from "../../constants";
 import { alertContext } from "../../contexts/alertContext";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { removeApiKeys } from "../../utils";
+import BaseModal from "../baseModal";
 
 export default function ExportModal() {
   const [open, setOpen] = useState(true);
@@ -40,21 +33,18 @@ export default function ExportModal() {
     flows.find((f) => f.id === tabId).description
   );
   return (
-    <Dialog open={true} onOpenChange={setModalOpen}>
+    <BaseModal open={true} setOpen={setModalOpen} size="smaller">
-      <DialogTrigger asChild></DialogTrigger>
+      <BaseModal.Header description={EXPORT_DIALOG_SUBTITLE}>
-      <DialogContent className="h-[420px] lg:max-w-[600px] ">
-        <DialogHeader>
         <DialogTitle className="flex items-center">
           <span className="pr-2">Export</span>
           <Download
             strokeWidth={1.5}
-              className="h-6 w-6 pl-1 text-foreground"
+            className="h-6 w-6 pl-1 text-primary "
             aria-hidden="true"
           />
         </DialogTitle>
-          <DialogDescription>{EXPORT_DIALOG_SUBTITLE}</DialogDescription>
+      </BaseModal.Header>
-        </DialogHeader>
+      <BaseModal.Content>
-
         <EditFlowSettings
           name={name}
           description={description}
@@ -64,19 +54,20 @@ export default function ExportModal() {
           setDescription={setDescription}
           updateFlow={updateFlow}
         />
-        <div className="flex items-center space-x-2">
+        <div className="mt-3 flex items-center space-x-2">
           <Checkbox
             id="terms"
             onCheckedChange={(event: boolean) => {
               setChecked(event);
             }}
           />
-          <label htmlFor="terms" className="export-modal-save-api text-sm">
+          <label htmlFor="terms" className="export-modal-save-api text-sm ">
             Save with my API keys
           </label>
         </div>
+      </BaseModal.Content>
 
-        <DialogFooter>
+      <BaseModal.Footer>
         <Button
           onClick={() => {
             if (checked)
@@ -98,8 +89,7 @@ export default function ExportModal() {
         >
           Download Flow
         </Button>
-        </DialogFooter>
+      </BaseModal.Footer>
-      </DialogContent>
+    </BaseModal>
-    </Dialog>
   );
 }

src/frontend/src/modals/flowSettingsModal/index.tsx

@@ -2,19 +2,12 @@ import { Settings2 } from "lucide-react";
 import { useContext, useRef, useState } from "react";
 import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 import { Button } from "../../components/ui/button";
-import {
+import { DialogTitle } from "../../components/ui/dialog";
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../../components/ui/dialog";
 import { SETTINGS_DIALOG_SUBTITLE } from "../../constants";
 import { alertContext } from "../../contexts/alertContext";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { TabsContext } from "../../contexts/tabsContext";
+import BaseModal from "../baseModal";
 
 export default function FlowSettingsModal() {
   const [open, setOpen] = useState(true);
@@ -45,17 +38,18 @@ export default function FlowSettingsModal() {
     closePopUp();
   }
   return (
-    <Dialog open={true} onOpenChange={setModalOpen}>
+    <BaseModal open={true} setOpen={setModalOpen} size="smaller">
-      <DialogTrigger asChild></DialogTrigger>
+      <BaseModal.Header description={SETTINGS_DIALOG_SUBTITLE}>
-      <DialogContent className="h-[390px] lg:max-w-[600px]">
-        <DialogHeader>
         <DialogTitle className="flex items-center">
-            <span className="pr-2">Settings </span>
+          <span className="pr-2">Settings</span>
-            <Settings2 className="mr-2 h-4 w-4 " />
+          <Settings2
+            strokeWidth={1.5}
+            className="h-6 w-6 pl-1 text-primary "
+            aria-hidden="true"
+          />
         </DialogTitle>
-          <DialogDescription>{SETTINGS_DIALOG_SUBTITLE}</DialogDescription>
+      </BaseModal.Header>
-        </DialogHeader>
+      <BaseModal.Content>
-
         <EditFlowSettings
           name={name}
           description={description}
@@ -65,13 +59,13 @@ export default function FlowSettingsModal() {
           setDescription={setDescription}
           updateFlow={updateFlow}
         />
+      </BaseModal.Content>
 
-        <DialogFooter>
+      <BaseModal.Footer>
         <Button onClick={handleClick} type="submit">
           Save
         </Button>
-        </DialogFooter>
+      </BaseModal.Footer>
-      </DialogContent>
+    </BaseModal>
-    </Dialog>
   );
 }

src/frontend/src/modals/genericModal/index.tsx

@@ -255,7 +255,7 @@ export default function GenericModal({
                       ))}
                     </div>
                   </div>
-                  <span className="mt-1 text-xs text-muted-foreground">
+                  <span className="mt-2 text-xs text-muted-foreground">
                     Prompt variables can be created with any chosen name inside
                     curly brackets, e.g. {"{variable_name}"}
                   </span>