added close button

cornell-dti · May 5, 2024 · 59949ca · 59949ca
1 parent 84a6ed8
commit 59949ca
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/client/src/modules/Admin/Components/ManageAdminModal.tsx b/client/src/modules/Admin/Components/ManageAdminModal.tsx
@@ -4,6 +4,7 @@ import styles from '../Styles/ManageAdminModal.module.css'
 
 import { Student } from 'common'
 import AdminUser from './AdminUser'
+import closeIcon from '../../../assets/icons/X.svg'
 
 type Props = {
     open: boolean
@@ -55,7 +56,12 @@ const ManageAdminModal = ({token, open, setOpen}: Props) => {
         <div className={styles.modalbg}>
             <div className={styles.modal}>
                 <h2>Administrators</h2>
-
+                <img
+                    className={styles.closeButton}
+                    onClick={closeModal}
+                    src={closeIcon}
+                    alt="close-modal"
+                />
                 {admins.map((admin) => {
                     return (
                         <AdminUser
@@ -65,11 +71,6 @@ const ManageAdminModal = ({token, open, setOpen}: Props) => {
                         />
                     )
                 })}
-                <button 
-                  onClick={closeModal}
-                >
-                  Close
-                </button>
             </div>
         </div>
     )

diff --git a/client/src/modules/Admin/Styles/AdminUser.module.css b/client/src/modules/Admin/Styles/AdminUser.module.css
@@ -11,6 +11,6 @@
     font-size: var(--font-small-size);
     border-radius: 5px;
     margin-left: auto;
-    padding: 1px 3px;
+    padding: 5px 3px;
     cursor: pointer;
 }
diff --git a/client/src/modules/Admin/Styles/ManageAdminModal.module.css b/client/src/modules/Admin/Styles/ManageAdminModal.module.css
@@ -35,4 +35,12 @@
 
     position: relative;
     top: 0;
+    overflow-y: auto;
+}
+
+.closeButton {
+    cursor: pointer;
+    position: absolute;
+    top: 32px;
+    right: 32px;
 }