From 398aa130a0440b674804683c3a9cee292ddcca53 Mon Sep 17 00:00:00 2001
From: TheMaddax <chris@sigd.net>
Date: Wed, 16 Oct 2024 20:33:32 -0600
Subject: [PATCH] update donate button for mobile

---
 client/src/components/Header.tsx | 107 +++++++++++++++----------------
 1 file changed, 53 insertions(+), 54 deletions(-)

diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
index 6465e63..cce9fb9 100644
--- a/client/src/components/Header.tsx
+++ b/client/src/components/Header.tsx
@@ -5,6 +5,18 @@ import Modal from 'react-modal';
 
 const Header: React.FC = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isDonateModalOpen, setIsDonateModalOpen] = useState(false);
+
+  const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
+
+  const handleDonateClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsDonateModalOpen(true);
+  };
+
+  const closeDonateModal = () => {
+    setIsDonateModalOpen(false);
+  };
 
   return (
     <header className="bg-[#8C1D40] text-white shadow-md">
@@ -20,12 +32,12 @@ const Header: React.FC = () => {
               <li><AboutDropdown /></li>
               <li><NavItem href="/calendar">Calendar</NavItem></li>
               <li><NavItem href="/joinmcdi">Join MCDi</NavItem></li>
-              <li><DonateButton /></li>
+              <li><DonateButton onClick={handleDonateClick} /></li>
             </ul>
           </nav>
           <button 
             className="md:hidden text-white"
-            onClick={() => setIsMenuOpen(!isMenuOpen)}
+            onClick={toggleMenu}
           >
             <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16m-7 6h7" />
@@ -46,11 +58,36 @@ const Header: React.FC = () => {
               <li><NavItem href="/about" onClick={() => setIsMenuOpen(false)}>About MCDi</NavItem></li>
               <li><NavItem href="/calendar" onClick={() => setIsMenuOpen(false)}>Calendar</NavItem></li>
               <li><NavItem href="/joinmcdi" onClick={() => setIsMenuOpen(false)}>Join MCDi</NavItem></li>
-              <li><DonateButton onClick={() => setIsMenuOpen(false)} /></li>
+              <li><DonateButton onClick={handleDonateClick} /></li>
             </ul>
           </motion.div>
         )}
       </AnimatePresence>
+      <Modal
+        isOpen={isDonateModalOpen}
+        onRequestClose={closeDonateModal}
+        contentLabel="Donate to MCDi"
+        className="modal"
+        overlayClassName="overlay"
+      >
+        <div className="h-full flex flex-col">
+          <h2 className="text-2xl font-bold text-[#8C1D40] mb-4">Donate to MCDi</h2>
+          <div className="flex-grow overflow-y-auto">
+            <iframe
+              src="https://www.zeffy.com/embed/donation-form/1cbff18e-c057-4fa6-8276-a993037de0bb"
+              width="100%"
+              height="100%"
+              frameBorder="0"
+            ></iframe>
+          </div>
+          <button
+            onClick={closeDonateModal}
+            className="mt-4 bg-[#8C1D40] text-white font-bold py-2 px-4 rounded"
+          >
+            Close
+          </button>
+        </div>
+      </Modal>
     </header>
   );
 };
@@ -115,56 +152,18 @@ const DropdownItem: React.FC<NavItemProps> = ({ href, children }) => (
   </Link>
 );
 
-const DonateButton: React.FC<{ onClick?: () => void }> = ({ onClick }) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
-  const handleDonateClick = () => {
-    setIsModalOpen(true);
-    if (onClick) onClick();
-  };
-
-  const closeModal = () => {
-    setIsModalOpen(false);
-  };
-
-  return (
-    <motion.div
-      whileHover={{ scale: 1.05 }}
-      whileTap={{ scale: 0.95 }}
+const DonateButton: React.FC<{ onClick: (e: React.MouseEvent) => void }> = ({ onClick }) => (
+  <motion.div
+    whileHover={{ scale: 1.05 }}
+    whileTap={{ scale: 0.95 }}
+  >
+    <button
+      onClick={onClick}
+      className="inline-block bg-yellow-400 text-[#8C1D40] font-bold py-2 px-4 rounded-full hover:bg-yellow-300 transition-colors duration-200 shadow-md"
     >
-      <button
-        onClick={handleDonateClick}
-        className="inline-block bg-yellow-400 text-[#8C1D40] font-bold py-2 px-4 rounded-full hover:bg-yellow-300 transition-colors duration-200 shadow-md"
-      >
-        Donate
-      </button>
-      <Modal
-        isOpen={isModalOpen}
-        onRequestClose={closeModal}
-        contentLabel="Donate to MCDi"
-        className="modal"
-        overlayClassName="overlay"
-      >
-        <div className="h-full flex flex-col">
-          <h2 className="text-2xl font-bold text-[#8C1D40] mb-4">Donate to MCDi</h2>
-          <div className="flex-grow overflow-y-auto">
-            <iframe
-              src="https://www.zeffy.com/embed/donation-form/1cbff18e-c057-4fa6-8276-a993037de0bb"
-              width="100%"
-              height="100%"
-              frameBorder="0"
-            ></iframe>
-          </div>
-          <button
-            onClick={closeModal}
-            className="mt-4 bg-[#8C1D40] text-white font-bold py-2 px-4 rounded"
-          >
-            Close
-          </button>
-        </div>
-      </Modal>
-    </motion.div>
-  );
-};
+      Donate
+    </button>
+  </motion.div>
+);
 
-export default Header;
+export default Header;
\ No newline at end of file