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

REFACTOR: AuthModal styling to better suit large screens

Browse Source
This commit is contained in:
Chris-1010
2025-02-28 15:32:28 +00:00
parent 1d55caff03
commit 077530b6e6
3 changed files with 138 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -48,9 +48,9 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
id="auth-modal" id="auth-modal"
className="fixed inset-0 flex items-start justify-center z-[9000] h-[95vh] m-auto pt-[15vh] rounded-[5rem] transition-all animate-floating" className="fixed inset-0 flex items-start justify-center z-[9000] h-[95vh] m-auto pt-[15vh] rounded-[5rem] transition-all animate-floating"
> >
<div className="relative w-[35vw] min-w-[300px]"> <div className="relative min-w-[30em]">
{/* Login/Register Buttons Container */} {/* Login/Register Buttons Container */}
<div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-20 w-[250px] flex justify-center gap-8 transition-transform overflow-visible"> <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-20 flex justify-center gap-8 transition-transform overflow-visible">
{/* Login Toggle */} {/* Login Toggle */}
<ToggleButton <ToggleButton
toggled={selectedTab === "Login"} toggled={selectedTab === "Login"}
@@ -75,13 +75,13 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
{/* Form Container */} {/* Form Container */}
<div <div
className="container flex flex-col items-center justify-around z-[9999] className="container flex flex-col items-center justify-around z-[9999]
h-[70vh] m-auto rounded-[5rem] transition-all" h-[70vh] m-auto w-full rounded-[5rem] transition-all"
style={{ "--spin-duration": spinDuration } as React.CSSProperties} style={{ "--spin-duration": spinDuration } as React.CSSProperties}
> >
{/*Border Container*/} {/*Border Container*/}
<div <div
id="border-container" id="border-container"
className="front-content bg-authForm flex flex-col justify-center className="front-content bg-authForm flex flex-col justify-center items-center
z-50 rounded-[5rem] transition-all" z-50 rounded-[5rem] transition-all"
> >
<button <button
@@ -92,7 +92,7 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
</button> </button>
<div <div
id="login-methods" id="login-methods"
className="flex flex-row items-center justify-evenly h-full py-[10%]" className="flex flex-row items-center w-[20em] justify-evenly h-full py-[10%]"
> >
{authSwitch()} {authSwitch()}
</div> </div>

9
frontend/src/components/Auth/LoginForm.tsx
View File

@@ -100,15 +100,14 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
return ( return (
<> <>
<div className="flex flex-col items-center h-full"> <div className="flex flex-col items-center h-full overflow-hidden">
<h1 className="flex flex-col text-white text-[1.5em] font-[800] md:text-[1.75em] lg:text-[2em]"> <h1 className="flex flex-col text-white text-[1.5em] font-[800] md:text-[1.75em] lg:text-[2em]">
Login Login
</h1> </h1>
<div className="flex flex-col justify-evenly flex-grow mt-[4vh] bg-white/10 backdrop-blur-md p-6 rounded-xl shadow-lg w-full border border-white/10 sm:max-w-[16em] md:max-w-[18em] lg:max-w-[20em]">
<form <form
onSubmit={handleSubmit} onSubmit={handleSubmit}
id="login-form" id="login-form"
className="flex flex-col justify-evenly flex-grow" className="flex flex-col justify-evenly flex-grow mt-[4vh] bg-white/10 backdrop-blur-md p-6 rounded-xl shadow-lg w-full border border-white/10 sm:max-w-[16em] md:max-w-[18em] lg:max-w-[20em] overflow-auto"
> >
{errors.general && ( {errors.general && (
<p className="text-red-500 text-sm text-center text-[0.75em]"> <p className="text-red-500 text-sm text-center text-[0.75em]">
@@ -162,10 +161,8 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
</div> </div>
</div> </div>
<Button type="submit">Login</Button> <Button type="submit">Login</Button>
</form>
<GoogleLogin /> <GoogleLogin />
</div> </form>
</div> </div>
</> </>
); );

35
frontend/src/components/Auth/RegisterForm.tsx
View File

@@ -108,26 +108,23 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
return ( return (
<> <>
<div className="mb-2"> <div className="flex flex-col items-center h-full overflow-hidden">
<div className="flex flex-col items-center p-[2.5rem]">
<h1 className="flex flex-col text-white text-[1.5em] font-[800] md:text-[1.75em] lg:text-[2em]"> <h1 className="flex flex-col text-white text-[1.5em] font-[800] md:text-[1.75em] lg:text-[2em]">
Register Register
</h1> </h1>
<div className="mt-10 bg-white/10 backdrop-blur-md p-6 rounded-xl shadow-lg w-full max-w-[10em] min-w-[14em] border border-white/10 sm:max-w-[16em] md:max-w-[18em] lg:max-w-[20em]">
<form <form
onSubmit={handleSubmit} onSubmit={handleSubmit}
id="register-form" id="register-form"
className="flex flex-col" className="flex flex-col justify-evenly flex-grow mt-[4vh] bg-white/10 backdrop-blur-md p-6 rounded-xl shadow-lg w-full border border-white/10 sm:max-w-[16em] md:max-w-[18em] lg:max-w-[20em] overflow-auto"
> >
<div className="relative w-full">
{errors.general && ( {errors.general && (
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full"> <p className="text-red-500 text-sm text-center text-[0.75em]">
{errors.general} {errors.general}
</p> </p>
)} )}
{errors.username && ( {errors.username && (
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full"> <p className="text-red-500 text-center text-[0.75em]">
{errors.username} {errors.username}
</p> </p>
)} )}
@@ -136,15 +133,13 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Username" placeholder="Username"
value={formData.username} value={formData.username}
onChange={handleInputChange} onChange={handleInputChange}
extraClasses={`w-full focus:w-[120%] mb-[1.5em] p-[0.5rem] ${ extraClasses={`w-full focus:w-[120%] p-3 ${
errors.username ? "border-red-500" : "" errors.username ? "border-red-500" : ""
}`} }`}
/> />
</div>
<div className="relative w-full">
{errors.email && ( {errors.email && (
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full"> <p className="text-red-500 text-center text-[0.75em]">
{errors.email} {errors.email}
</p> </p>
)} )}
@@ -154,15 +149,13 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Email" placeholder="Email"
value={formData.email} value={formData.email}
onChange={handleInputChange} onChange={handleInputChange}
extraClasses={`w-full focus:w-[120%] mb-[1.5em] p-[0.5rem] ${ extraClasses={`w-full focus:w-[120%] p-3 ${
errors.email ? "border-red-500" : "" errors.email ? "border-red-500" : ""
}`} }`}
/> />
</div>
<div className="relative w-full">
{errors.password && ( {errors.password && (
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full"> <p className="text-red-500 text-center text-[0.75em]">
{errors.password} {errors.password}
</p> </p>
)} )}
@@ -172,14 +165,13 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Password" placeholder="Password"
value={formData.password} value={formData.password}
onChange={handleInputChange} onChange={handleInputChange}
extraClasses={`w-full focus:w-[120%] mb-[1.5em] p-[0.5rem] ${ extraClasses={`w-full focus:w-[120%] p-3 ${
errors.password ? "border-red-500" : "" errors.password ? "border-red-500" : ""
}`} }`}
/> />
</div>
<div className="relative w-full">
{errors.confirmPassword && ( {errors.confirmPassword && (
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full"> <p className="text-red-500 text-center text-[0.75em]">
{errors.confirmPassword} {errors.confirmPassword}
</p> </p>
)} )}
@@ -189,17 +181,14 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Confirm Password" placeholder="Confirm Password"
value={formData.confirmPassword} value={formData.confirmPassword}
onChange={handleInputChange} onChange={handleInputChange}
extraClasses={`w-full focus:w-[120%] mb-[1.5em] p-[0.5rem] ${ extraClasses={`w-full focus:w-[120%] p-3 ${
errors.confirmPassword ? "border-red-500" : "" errors.confirmPassword ? "border-red-500" : ""
}`} }`}
/> />
</div>
<Button type="submit">Register</Button> <Button type="submit">Register</Button>
</form> </form>
</div> </div>
</div>
</div>
</> </>
); );
}; };