From b4a17448a6e14ed1833e4aa02b557143b9de99ff Mon Sep 17 00:00:00 2001
From: CollinWoo <collinwu01@gmail.com>
Date: Tue, 28 Nov 2023 19:58:38 -0500
Subject: [PATCH 1/2] modal closes when clicking outside

---
 frontend/src/components/Modal/Modal.tsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Modal/Modal.tsx b/frontend/src/components/Modal/Modal.tsx
index 61c4ffe52..84ff2dd91 100644
--- a/frontend/src/components/Modal/Modal.tsx
+++ b/frontend/src/components/Modal/Modal.tsx
@@ -62,13 +62,14 @@ const Modal = ({
     <>
       {isOpen &&
         createPortal(
-          <FocusTrap
-            focusTrapOptions={{
-              onDeactivate: onClose,
-              returnFocusOnDeactivate: true,
-            }}
-          >
-            <div className={styles.background}>
+          <div className={styles.background}>
+            <FocusTrap
+              focusTrapOptions={{
+                onDeactivate: onClose,
+                returnFocusOnDeactivate: true,
+                clickOutsideDeactivates: true,
+              }}
+            >
               <div className={styles.modal}>
                 <div className={styles.topContainer}>
                   {isRider ? (
@@ -88,8 +89,8 @@ const Modal = ({
                 </div>
                 <div className={styles.page}>{pages[currentPage]}</div>
               </div>
-            </div>
-          </FocusTrap>,
+            </FocusTrap>
+          </div>,
           document.body
         )}
     </>

From 981a2c8f245d85c4c9b09f132c8ca6c5246f1071 Mon Sep 17 00:00:00 2001
From: CollinWoo <collinwu01@gmail.com>
Date: Sun, 3 Dec 2023 22:38:00 -0500
Subject: [PATCH 2/2] add documentation to formatAvail function

---
 frontend/src/components/EmployeeCards/EmployeeCards.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/frontend/src/components/EmployeeCards/EmployeeCards.tsx b/frontend/src/components/EmployeeCards/EmployeeCards.tsx
index feca52cc7..05c2c7e90 100644
--- a/frontend/src/components/EmployeeCards/EmployeeCards.tsx
+++ b/frontend/src/components/EmployeeCards/EmployeeCards.tsx
@@ -77,6 +77,14 @@ const EmployeeCard = ({
   const netId = email.split('@')[0];
   const fmtPhone = formatPhone(phoneNumber);
 
+  /**
+   * Formats availability, represented by an object that maps available days to
+   * start and end times, into a printable string with availabilities formatted as '[day]: [start] - [end]'.
+   * Ignores malformed availabilities, e.g. missing start or end times, from being printed.
+   *
+   * @param availability the driver's availability, represented as an object map of days to start and end times
+   * @returns a string representation of a driver's availibility
+   */
   const formatAvail = (availability: {
     [key: string]: { startTime: string; endTime: string };
   }) => {