add x to account edit modal

src/app/(management-portal)/layout.tsx

@@ -53,6 +53,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <div className={styles["rest-of-page"]}>
         <Modal showModal={showModal} setShowModal={setShowModal}>
           <AccountEditModal
+            setShowModal={setShowModal}
             className={styles.accountEditModalContent}
             setShowSuccessModal={setShowSuccessModal}
           />

src/components/AccountEditModal/AccountEditModal.module.css

@@ -204,3 +204,13 @@
   justify-content: flex-end;
   gap: 15px;
 }
+
+.close {
+  width: fit-content;
+}
+
+.closeButton {
+  cursor: pointer;
+  height: fit-content;
+  width: fit-content;
+}

src/components/AccountEditModal/AccountEditModal.tsx

@@ -3,6 +3,7 @@ import { CSSProperties, useState } from "react";
 import { classes } from "@src/utils/utils";
 
 import useAuth from "@src/hooks/useAuth";
+import XIcon from "@/src/app/icons/XIcon";
 import styles from "./AccountEditModal.module.css";
 import Profile from "./Profile";
 import Password from "./Password";
@@ -13,12 +14,18 @@ const enum Page {
 }
 
 interface Props {
+  setShowModal: (args: boolean) => void;
   className?: string;
   style?: CSSProperties;
   setShowSuccessModal: (args: boolean) => void;
 }
 
-const Modal = ({ className, style, setShowSuccessModal }: Props) => {
+const Modal = ({
+  setShowModal,
+  className,
+  style,
+  setShowSuccessModal,
+}: Props) => {
   const [page, setPage] = useState<Page>(Page.PROFILE);
   const { logout } = useAuth();
   const router = useRouter();
@@ -58,6 +65,11 @@ const Modal = ({ className, style, setShowSuccessModal }: Props) => {
           <Password setShowSuccessModal={setShowSuccessModal} />
         )}
       </div>
+      <div className={styles.close}>
+        <div className={styles.closeButton} onClick={() => setShowModal(false)}>
+          <XIcon />
+        </div>
+      </div>
     </div>
   );
 };