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

FEAT: Added more info & functionality to UserPage & Added ability to follow streamers on both UserPage and VideoPage;

Browse Source 
Added shortcut to toggle chat;
This commit is contained in:
Chris-1010
2025-02-07 02:11:22 +00:00
parent 1499e042cb
commit 16dc8f1ea2
16 changed files with 438 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,66 +28,61 @@ 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]"
style={{ "--spin-duration": spinDuration } as React.CSSProperties}
{/*Container*/}
<div id="auth-modal"
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>
{/*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
{/* 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]"
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
id="login-methods"
className=" w-full flex flex-row items-center justify-evenly"
>
<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
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} />
)}
✕
</button>
</div>
{selectedTab === "Login" ? (
<LoginForm onSubmit={handleSubmit} />
) : (
<RegisterForm onSubmit={handleSubmit} />
)}
</div>
</div>
</div>