From a43308bbdbaf64782ce19578289718bd92db4055 Mon Sep 17 00:00:00 2001
From: Kelly Zhou <zhoukelly61@gmail.com>
Date: Sat, 26 Oct 2024 21:44:48 -0500
Subject: [PATCH 1/4] added esc button and x button to exit

---
 client/src/components/Popup.tsx | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Popup.tsx b/client/src/components/Popup.tsx
index 6383ef3..cacb5d8 100644
--- a/client/src/components/Popup.tsx
+++ b/client/src/components/Popup.tsx
@@ -1,3 +1,4 @@
+import React, { useEffect } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 interface PopupProps {
@@ -19,6 +20,25 @@ interface PopupProps {
  * Clicking on the backdrop will close the popup.
  */
 const Popup = (props: PopupProps) => {
+    const { enabled, setEnabled, children, className } = props;
+
+    useEffect(() => {
+        // handle esc key press
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') {
+                setEnabled(false);
+            }
+        };
+
+        // Attach the event listener when the popup is enabled
+        if (enabled) {
+            window.addEventListener('keydown', handleKeyDown);
+        }
+
+        // Cleanup event listener on component unmount or when popup is disabled
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [enabled, setEnabled]);
+
     if (!props.enabled) {
         return null;
     }
@@ -27,7 +47,7 @@ const Popup = (props: PopupProps) => {
         <>
             <div
                 className="fixed left-0 top-0 z-20 w-screen h-screen bg-black/30"
-                onClick={() => props.setEnabled(false)}
+                onClick={() => setEnabled(false)}
             ></div>
             <div
                 className={twMerge(
@@ -35,6 +55,14 @@ const Popup = (props: PopupProps) => {
                     props.className
                 )}
             >
+                {/* x to close the popup */}
+                <button
+                    onClick={() => setEnabled(false)}
+                    className="absolute top-2 left-2 text-gray-500 hover:text-gray-700 text-2xl"
+                    aria-label="Close popup"
+                >
+                    &times;
+                </button>
                 {props.children}
             </div>
         </>

From d3177cdd0dd2baad682f454ec6aa8e3c4cc4d237 Mon Sep 17 00:00:00 2001
From: Kelly Zhou <zhoukelly61@gmail.com>
Date: Sat, 26 Oct 2024 21:47:24 -0500
Subject: [PATCH 2/4] oops

---
 client/src/components/Popup.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/client/src/components/Popup.tsx b/client/src/components/Popup.tsx
index cacb5d8..8a05a66 100644
--- a/client/src/components/Popup.tsx
+++ b/client/src/components/Popup.tsx
@@ -30,12 +30,10 @@ const Popup = (props: PopupProps) => {
             }
         };
 
-        // Attach the event listener when the popup is enabled
         if (enabled) {
             window.addEventListener('keydown', handleKeyDown);
         }
 
-        // Cleanup event listener on component unmount or when popup is disabled
         return () => window.removeEventListener('keydown', handleKeyDown);
     }, [enabled, setEnabled]);
 

From b7ba8ec15007ca511721bcba02676946f07ea0fa Mon Sep 17 00:00:00 2001
From: Kelly Zhou <zhoukelly61@gmail.com>
Date: Sun, 27 Oct 2024 01:57:20 -0500
Subject: [PATCH 3/4] fixed

---
 client/src/components/Popup.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Popup.tsx b/client/src/components/Popup.tsx
index 8a05a66..a18d3ad 100644
--- a/client/src/components/Popup.tsx
+++ b/client/src/components/Popup.tsx
@@ -20,22 +20,20 @@ interface PopupProps {
  * Clicking on the backdrop will close the popup.
  */
 const Popup = (props: PopupProps) => {
-    const { enabled, setEnabled, children, className } = props;
-
     useEffect(() => {
         // handle esc key press
         const handleKeyDown = (event: KeyboardEvent) => {
             if (event.key === 'Escape') {
-                setEnabled(false);
+                props.setEnabled(false);
             }
         };
 
-        if (enabled) {
+        if (props.enabled) {
             window.addEventListener('keydown', handleKeyDown);
         }
 
         return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [enabled, setEnabled]);
+    }, [props.enabled, props.setEnabled]);
 
     if (!props.enabled) {
         return null;
@@ -45,7 +43,7 @@ const Popup = (props: PopupProps) => {
         <>
             <div
                 className="fixed left-0 top-0 z-20 w-screen h-screen bg-black/30"
-                onClick={() => setEnabled(false)}
+                onClick={() => props.setEnabled(false)}
             ></div>
             <div
                 className={twMerge(
@@ -55,8 +53,8 @@ const Popup = (props: PopupProps) => {
             >
                 {/* x to close the popup */}
                 <button
-                    onClick={() => setEnabled(false)}
-                    className="absolute top-2 left-2 text-gray-500 hover:text-gray-700 text-2xl"
+                    onClick={() => props.setEnabled(false)}
+                    className="absolute top-1 left-3 text-lightest text-3xl text-lightest hover:text-black"
                     aria-label="Close popup"
                 >
                     &times;

From c62130f2899b0b991f9ba5a84a18315675b8e720 Mon Sep 17 00:00:00 2001
From: Michael Zhao <michaelzhao314@gmail.com>
Date: Sun, 27 Oct 2024 03:33:15 -0500
Subject: [PATCH 4/4] Minor css cleanup

---
 client/src/components/Popup.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Popup.tsx b/client/src/components/Popup.tsx
index a18d3ad..d2b1be4 100644
--- a/client/src/components/Popup.tsx
+++ b/client/src/components/Popup.tsx
@@ -54,7 +54,7 @@ const Popup = (props: PopupProps) => {
                 {/* x to close the popup */}
                 <button
                     onClick={() => props.setEnabled(false)}
-                    className="absolute top-1 left-3 text-lightest text-3xl text-lightest hover:text-black"
+                    className="absolute top-1 left-3 text-3xl text-lightest hover:text-black duration-150"
                     aria-label="Close popup"
                 >
                     &times;