From 52148fdd6d7bff36433483ffa6278e3556b9ca36 Mon Sep 17 00:00:00 2001
From: aleung30 <aleung30@student.ubc.ca>
Date: Mon, 17 Mar 2025 22:10:50 -0700
Subject: [PATCH] Updated exit button on recruitment overlay

---
 src/components/recruitment/SubteamOverlay.js | 9 ++++++++-
 src/pages/Recruitment.js                     | 8 ++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/recruitment/SubteamOverlay.js b/src/components/recruitment/SubteamOverlay.js
index 08f4aa0..b538fff 100644
--- a/src/components/recruitment/SubteamOverlay.js
+++ b/src/components/recruitment/SubteamOverlay.js
@@ -525,9 +525,16 @@ function SubteamOverlay({ setOverlayId, overlayId }) {
       id="outer-overlay"
       className="opacity-0 fixed top-0 left-0 h-screen w-screen bg-[#000000b4] z-50 overflow-y-auto transition-opacity duration-500 ease-in-out"
     >
-      <div className="box-content text-mobile-body w-[250px] lg:text-[28px] lg:w-[750px] bg-[#1E120A] text-white mx-auto my-12 rounded-[46px] p-5 lg:p-24 lg:px-32">
+      <div className="relative box-content text-mobile-body w-[250px] lg:text-[28px] lg:w-[750px] bg-[#1E120A] text-white mx-auto my-12 rounded-[46px] p-5 lg:p-24 lg:px-32">
+      <button
+      onClick={() => setOverlayId(null)}
+       className="absolute right-[25px] top-[10px] lg:right-[270px] lg:top-[60px] flex items-center justify-center text-[20px] lg:text-[40px] cursor-pointer"
+      >
+    &times;
+</button>
         <div className="text-[16px] lg:text-[20px]">
           <div className="flex items-center justify-center">
+
             <h1 className="font-medium mb-4 lg:mb-0 text-[26px] lg:text-[96px]">
               {content.title}
             </h1>
diff --git a/src/pages/Recruitment.js b/src/pages/Recruitment.js
index 9ccab7f..8403df4 100644
--- a/src/pages/Recruitment.js
+++ b/src/pages/Recruitment.js
@@ -10,6 +10,8 @@ function SubteamBox({
   bg,
   overlayId,
   setOverlayId,
+  
+
 }) {
   return (
     <div className="w-[300px] mb-4 lg:w-[312px] bg-[#2E1B0F] rounded-[46px] flex flex-col items-center py-[10px] text-white h-full">
@@ -24,13 +26,19 @@ function SubteamBox({
       <button
         onClick={() => setOverlayId(overlayId)}
         className="text-[20px] mt-8 my-4 p-2 px-6 font-semibold rounded-full bg-glass text-[#2E1B0F]"
+        
       >
         Learn more +
+
       </button>
+
     </div>
   )
 }
 
+
+
+
 function Recruitment() {
   useEffect(() => {
     window.scrollTo(0, 0)