Outsourced ModalForm to make it more reusable

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

@@ -0,0 +1,28 @@
+.InputGroup {
+  margin-bottom: 15px;
+}
+
+.InputGroup label,
+.InputGroup span,
+.InputGroup input {
+  display: block;
+}
+
+.InputGroup input {
+  margin: 8px 0;
+  width: 100%;
+  border: none;
+  border-radius: 4px;
+  padding: 10px;
+  background-color: var(--color-primary);
+  color: var(--color-background);
+}
+
+.InputGroup span {
+  font-size: 12px;
+  color: var(--color-primary)
+}
+
+.InputGroup span a {
+  color: var(--color-accent);
+}

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

@@ -0,0 +1,15 @@
+import classes from './InputGroup.module.css';
+
+interface ComponentProps {
+  children: JSX.Element | JSX.Element[];
+}
+
+const InputGroup = (props: ComponentProps): JSX.Element => {
+  return (
+    <div className={classes.InputGroup}>
+      {props.children}
+    </div>
+  )
+}
+
+export default InputGroup;

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;