From 53014aca39b411b2670285e6feb3b7bd9b635571 Mon Sep 17 00:00:00 2001
From: Sophia <sophialin@gatech.edu>
Date: Sun, 3 Nov 2024 10:42:11 -0500
Subject: [PATCH] account edit modal

---
 src/app/(management-portal)/layout.tsx             |  1 +
 .../AccountEditModal/AccountEditModal.module.css   | 10 ++++++++++
 .../AccountEditModal/AccountEditModal.tsx          | 14 +++++++++++++-
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/app/(management-portal)/layout.tsx b/src/app/(management-portal)/layout.tsx
index 4ae767b1..f2f1549c 100644
--- a/src/app/(management-portal)/layout.tsx
+++ b/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}
           />
diff --git a/src/components/AccountEditModal/AccountEditModal.module.css b/src/components/AccountEditModal/AccountEditModal.module.css
index e7523590..a9bbe608 100644
--- a/src/components/AccountEditModal/AccountEditModal.module.css
+++ b/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;
+}
diff --git a/src/components/AccountEditModal/AccountEditModal.tsx b/src/components/AccountEditModal/AccountEditModal.tsx
index 09fd20fe..0a76aa34 100644
--- a/src/components/AccountEditModal/AccountEditModal.tsx
+++ b/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>
   );
 };