-Footer fix

Author: OzPol

components/Footer.tsx

@@ -13,6 +13,7 @@ const Footer: React.FC = () => {
     let shiftPressed = false;
 
     const handleKeyDown = (e: KeyboardEvent) => {
+      // Detect if Ctrl or Shift are pressed
       if (e.key === 'Control') {
         ctrlPressed = true;
       }
@@ -22,42 +23,47 @@ const Footer: React.FC = () => {
     };
 
     const handleKeyUp = (e: KeyboardEvent) => {
+      // When both Ctrl and Shift are released, start listening for "admin"
       if (ctrlPressed && shiftPressed) {
-        setListeningForAdmin(true);
-        setInputSequence('');
+        setListeningForAdmin(true); // Set flag to start listening for "admin"
+        setInputSequence(''); // Reset input sequence
         ctrlPressed = false;
         shiftPressed = false;
 
+        // Set a timer to stop listening if no input in 5 seconds
         if (timer) clearTimeout(timer);
         setTimer(
           setTimeout(() => {
-            setListeningForAdmin(false);
-            setInputSequence('');
+            setListeningForAdmin(false); // Stop listening after 5 seconds
+            setInputSequence(''); // Reset sequence
           }, 5000)
         );
       }
     };
 
     const handleKeyPress = (e: KeyboardEvent) => {
+      // Only proceed if we're in the input mode
       if (listeningForAdmin) {
         const newSequence = inputSequence + e.key.toLowerCase();
 
+        // Check if the input sequence matches "admin"
         if (newSequence === 'admin') {
           setShowLink(true);
-          setInputSequence('');
-          setListeningForAdmin(false);
+          setInputSequence(''); // Reset sequence after success
+          setListeningForAdmin(false); // Stop listening
 
+          // Set a timer to hide the link after 5 seconds
           if (timer) clearTimeout(timer);
           setTimer(
             setTimeout(() => {
-              setShowLink(false);
+              setShowLink(false); // Hide the link after 5 seconds
             }, 5000)
           );
         } else if ('admin'.startsWith(newSequence)) {
-          setInputSequence(newSequence);
+          setInputSequence(newSequence); // Update sequence
         } else {
-          setInputSequence('');
-          setListeningForAdmin(false);
+          setInputSequence(''); // Reset sequence on wrong input
+          setListeningForAdmin(false); // Stop listening if incorrect
         }
       }
     };
@@ -70,7 +76,7 @@ const Footer: React.FC = () => {
       window.removeEventListener('keydown', handleKeyDown);
       window.removeEventListener('keyup', handleKeyUp);
       window.removeEventListener('keypress', handleKeyPress);
-      if (timer) clearTimeout(timer);
+      if (timer) clearTimeout(timer); // Clean up timeout on unmount
     };
   }, [inputSequence, listeningForAdmin, timer]);
 
@@ -84,7 +90,7 @@ const Footer: React.FC = () => {
   };
 
   return (
-    <footer className="footer">
+    <footer>
       <div className="footer-content">
         <p>© 2024 ProBooker</p>
         {showLink && (
@@ -95,21 +101,13 @@ const Footer: React.FC = () => {
       </div>
       <AdminLoginModal show={showModal} onClose={closeModal} />
       <style jsx>{`
-        .footer {
-          width: 100%;
-          position: absolute;
-          bottom: 0;
-          background: #f8f9fa;
-          border-top: 1px solid #e9ecef;
-          padding: 20px;
-          text-align: center;
-        }
         .footer-content {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          max-width: 1200px;
-          margin: 0 auto;
+          padding: 20px;
+          background: #f8f9fa;
+          border-top: 1px solid #e9ecef;
         }
         a {
           color: #0070f3;
@@ -124,4 +122,4 @@ const Footer: React.FC = () => {
   );
 };
 
-export default Footer;
+export default Footer;

styles/globals.css

@@ -81,13 +81,6 @@ main {
   background-repeat: no-repeat;
 }
 
-.provider-background-login{
-  background-image: url('/assets/turqoXL.jpg');
-  background-size: cover;
-  background-position: right;
-  background-repeat: no-repeat;
-}
-
 /* Main content background */
 .content-background {
   position: relative;
@@ -134,16 +127,3 @@ main {
 .h-84{
   height: 21rem;
 }
-/*
-.content-background {
-  @apply bg-white bg-opacity-10;
-}
-*/
-
-/* Sticky footer style */
-footer {
-  @apply bg-gray-800 text-white py-4 mt-8;
-  text-align: center;
-  position: relative;
-  width: 100%;
-}