Outsourced ModalForm to make it more reusable

client/src/components/UI/Forms/ModalForm/ModalForm.module.css

@@ -0,0 +1,20 @@
+.ModalForm {
+  background-color: var(--color-background);
+  color: var(--color-primary);
+  border-radius: 6px;
+  width: 60%;
+  position: relative;
+  /* height: 50vh; */
+  padding: 50px 50px;
+}
+
+.ModalFormIcon {
+  width: 40px;
+  position: absolute;
+  right: 5px;
+  top: 5px;
+}
+
+.ModalFormIcon:hover {
+  cursor: pointer;
+}

client/src/components/UI/Forms/ModalForm/ModalForm.tsx

@@ -0,0 +1,31 @@
+import { SyntheticEvent } from 'react';
+
+import classes from './ModalForm.module.css';
+import Icon from '../../Icons/Icon/Icon';
+
+interface ComponentProps {
+  children: JSX.Element | JSX.Element[];
+  modalHandler?: () => void;
+  formHandler: (e: SyntheticEvent<HTMLFormElement>) => void;
+}
+
+const ModalForm = (props: ComponentProps): JSX.Element => {
+  const _modalHandler = (): void => {
+    if (props.modalHandler) {
+      props.modalHandler();
+    }
+  }
+
+  return (
+    <div className={classes.ModalForm}>
+      <div className={classes.ModalFormIcon} onClick={_modalHandler}>
+        <Icon icon='mdiClose' />
+      </div>
+      <form onSubmit={(e) => props.formHandler(e)}>
+        {props.children}
+      </form>
+    </div>
+  )
+}
+
+export default ModalForm;