dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

DESIGN: Login/Register now hides behind AuthModel.

Browse Source 
Pops up when hover, probs will make it follow cursor too
This commit is contained in:
EvanLin3141
2025-02-06 01:35:20 +00:00
parent 6ee1990542
commit 277a273ac0
1 changed files with 57 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/src/components/Auth/AuthModal.tsx
View File

@@ -28,12 +28,42 @@ 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>
<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
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"
h-[75vh] m-auto min-w-[45vw] w-fit py-[50px] rounded-[5rem]"
style={{ "--spin-duration": spinDuration } as React.CSSProperties}
>
{/*Border Container*/}
<div
id="border-container"
@@ -50,22 +80,7 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
>
✕
</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>
{selectedTab === "Login" ? (
<LoginForm onSubmit={handleSubmit} />
@@ -74,6 +89,8 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
)}
</div>
</div>
</div>
</div>
</>
);
};