From 277a273ac016903020e8ecbd2cc5bc995f3289a8 Mon Sep 17 00:00:00 2001
From: EvanLin3141 <Evan.lin.3141@gmail.com>
Date: Thu, 6 Feb 2025 01:35:20 +0000
Subject: [PATCH] DESIGN: Login/Register now hides behind AuthModel.

Pops up when hover, probs will make it follow cursor too
---
 frontend/src/components/Auth/AuthModal.tsx | 97 +++++++++++++---------
 1 file changed, 57 insertions(+), 40 deletions(-)

diff --git a/frontend/src/components/Auth/AuthModal.tsx b/frontend/src/components/Auth/AuthModal.tsx
index 7fa8c9e..a4f50e7 100644
--- a/frontend/src/components/Auth/AuthModal.tsx
+++ b/frontend/src/components/Auth/AuthModal.tsx
@@ -28,50 +28,67 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
         id="blurring-layer"
         className="fixed z-50 inset-0 w-screen h-screen backdrop-blur-sm group-has-[input:focus]:backdrop-blur-[5px]"
       ></div>
-      {/*Container*/}
-      <div
-        className="container fixed inset-0 flex flex-col items-center justify-around z-[9999] 
-        h-[75vh] m-auto min-w-[45vw] w-fit py-[50px] rounded-[5rem] transition-all animate-floating"
-        style={{ "--spin-duration": spinDuration } as React.CSSProperties}
-      >
-        {/*Border Container*/}
-        <div
-          id="border-container"
-          className="front-content fixed inset-0 bg-gradient-to-br from-blue-950 via-purple-500 to-violet-800 flex flex-col justify-center
-          z-50 h-[70vh] mr-0.5 mb-0.5 m-auto min-w-[40vw] w-fit py-[50px] rounded-[2rem] transition-all"
-        >
+      <div>
+        {/*Container*/}
+
+        <div className="fixed inset-0 flex flex-col items-center justify-around z-[9000] 
+        h-[95vh] m-auto min-w-[65vw] w-fit py-[80px] rounded-[5rem]  transition-all animate-floating">
+          
+            {/* Login/Register Buttons Container */}
+            <div
+              className="absolute top-[60px] left-1/2 transform -translate-x-1/2 w-[300px] flex justify-center gap-8 transition-transform overflow-visible "
+            >
+              {/* Login Toggle */}
+              <ToggleButton
+                toggled={selectedTab === "Login"}
+                extraClasses="flex flex-col items-center px-8 duration-250 transition-transform hover:translate-y-[-50px] z-[9001]"
+                onClick={() => setSelectedTab("Login")}
+              >
+                <LogInIcon className="h-[40px] w-[40px] mr-1" />
+                Login
+              </ToggleButton>
+
+              {/* Register Toggle */}
+              <ToggleButton
+                toggled={selectedTab === "Register"}
+                extraClasses="flex flex-col items-center px-8 duration-250 transition-transform hover:translate-y-[-50px] z-[9001]"
+                onClick={() => setSelectedTab("Register")}
+              >
+                <UserIcon className="h-[40px] w-[40px] mr-1" />
+                Register
+              </ToggleButton>
+            </div>
           <div
-            id="login-methods"
-            className=" w-full flex flex-row items-center justify-evenly"
+            className="container fixed inset-0 flex flex-col items-center justify-around z-[9999] 
+        h-[75vh] m-auto min-w-[45vw] w-fit py-[50px] rounded-[5rem]"
+            style={{ "--spin-duration": spinDuration } as React.CSSProperties}
           >
-            <button
-              onClick={onClose}
-              className="absolute top-[1rem] right-[2rem] text-[2rem] text-white hover:text-red-500 font-black hover:text-[2.5rem] transition-all"
+
+            {/*Border Container*/}
+            <div
+              id="border-container"
+              className="front-content fixed inset-0 bg-gradient-to-br from-blue-950 via-purple-500 to-violet-800 flex flex-col justify-center
+          z-50 h-[70vh] mr-0.5 mb-0.5 m-auto min-w-[40vw] w-fit py-[50px] rounded-[2rem] transition-all"
             >
-              ✕
-            </button>
-            <ToggleButton
-              toggled={selectedTab === "Login"}
-              extraClasses="flex flex-col items-center px-8"
-              onClick={() => setSelectedTab("Login")}
-            >
-              <LogInIcon className="h-[40px] w-[40px] mr-1" />
-              Login
-            </ToggleButton>
-            <ToggleButton
-              toggled={selectedTab === "Register"}
-              extraClasses="flex flex-col items-center px-8"
-              onClick={() => setSelectedTab("Register")}
-            >
-              <UserIcon className="h-[40px] w-[40px] mr-1" />
-              Register
-            </ToggleButton>
+              <div
+                id="login-methods"
+                className=" w-full flex flex-row items-center justify-evenly"
+              >
+                <button
+                  onClick={onClose}
+                  className="absolute top-[1rem] right-[2rem] text-[2rem] text-white hover:text-red-500 font-black hover:text-[2.5rem] transition-all"
+                >
+                  ✕
+                </button>
+
+              </div>
+              {selectedTab === "Login" ? (
+                <LoginForm onSubmit={handleSubmit} />
+              ) : (
+                <RegisterForm onSubmit={handleSubmit} />
+              )}
+            </div>
           </div>
-          {selectedTab === "Login" ? (
-            <LoginForm onSubmit={handleSubmit} />
-          ) : (
-            <RegisterForm onSubmit={handleSubmit} />
-          )}
         </div>
       </div>
     </>