Added button as footer and a submit form

src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx

@@ -70,7 +70,12 @@ export default function AddNewVariableButton({ children }): JSX.Element {
       });
   }
   return (
-    <BaseModal open={open} setOpen={setOpen} size="x-small">
+    <BaseModal
+      open={open}
+      setOpen={setOpen}
+      size="x-small"
+      onSubmit={handleSaveVariable}
+    >
       <BaseModal.Header
         description={
           "This variable will be encrypted and will be available for you to use in any of your projects."
@@ -137,9 +142,7 @@ export default function AddNewVariableButton({ children }): JSX.Element {
           ></InputComponent>
         </div>
       </BaseModal.Content>
-      <BaseModal.Footer>
-        <Button onClick={handleSaveVariable}>Save Variable</Button>
-      </BaseModal.Footer>
+      <BaseModal.Footer submit={{ label: "Save Variable" }} />
     </BaseModal>
   );
 }

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

@@ -15,6 +15,7 @@ import {
   DialogContent as ModalContent,
 } from "../../components/ui/dialog-with-no-close";
 
+import { Button } from "../../components/ui/button";
 import { modalHeaderType } from "../../types/components";
 import { cn } from "../../utils/utils";
 
@@ -61,8 +62,23 @@ const Header: React.FC<{ children: ReactNode; description: string | null }> = ({
   );
 };
 
-const Footer: React.FC<{ children: ReactNode }> = ({ children }) => {
-  return <>{children}</>;
+const Footer: React.FC<{
+  children?: ReactNode;
+  submit?: { label: string; icon?: ReactNode };
+}> = ({ children, submit }) => {
+  return submit ? (
+    <div className="flex w-full items-center justify-between">
+      {children ?? <div />}
+      <div className="flex items-center">
+        <Button type="submit">
+          {submit.icon && submit.icon}
+          {submit.label}
+        </Button>
+      </div>
+    </div>
+  ) : (
+    <>{children && children}</>
+  );
 };
 interface BaseModalProps {
   children: [
@@ -91,6 +107,7 @@ interface BaseModalProps {
   disable?: boolean;
   onChangeOpenModal?: (open?: boolean) => void;
   type?: "modal" | "dialog";
+  onSubmit?: () => void;
 }
 function BaseModal({
   open,
@@ -99,6 +116,7 @@ function BaseModal({
   size = "large",
   onChangeOpenModal,
   type = "dialog",
+  onSubmit,
 }: BaseModalProps) {
   const headerChild = React.Children.toArray(children).find(
     (child) => (child as React.ReactElement).type === Header,
@@ -212,13 +230,34 @@ function BaseModal({
             <div className="truncate-doubleline word-break-break-word">
               {headerChild}
             </div>
-            <div
-              className={`flex flex-col ${height} w-full transition-all duration-300`}
-            >
-              {ContentChild}
-            </div>
-            {ContentFooter && (
-              <div className="flex flex-row-reverse">{ContentFooter}</div>
+            {onSubmit ? (
+              <form
+                onSubmit={(event) => {
+                  event.preventDefault();
+                  onSubmit();
+                }}
+                className="flex flex-col gap-4"
+              >
+                <div
+                  className={`flex flex-col ${height} w-full transition-all duration-300`}
+                >
+                  {ContentChild}
+                </div>
+                {ContentFooter && (
+                  <div className="flex flex-row-reverse">{ContentFooter}</div>
+                )}
+              </form>
+            ) : (
+              <>
+                <div
+                  className={`flex flex-col ${height} w-full transition-all duration-300`}
+                >
+                  {ContentChild}
+                </div>
+                {ContentFooter && (
+                  <div className="flex flex-row-reverse">{ContentFooter}</div>
+                )}
+              </>
             )}
           </DialogContent>
         </Dialog>