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>

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

@@ -100,72 +100,69 @@ 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 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"
className="flex flex-col justify-evenly flex-grow" >
> {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]"> {errors.general}
{errors.general} </p>
</p> )}
)}
{errors.username && ( {errors.username && (
<p className="text-red-500 text-center text-[0.75em]"> <p className="text-red-500 text-center text-[0.75em]">
{errors.username} {errors.username}
</p> </p>
)} )}
<Input
name="username"
placeholder="Username"
value={formData.username}
onChange={handleInputChange}
extraClasses={`w-full focus:w-[120%] p-3 ${
errors.username ? "border-red-500" : ""
}`}
/>
{errors.password && (
<p className="text-red-500 text-center text-[0.75em]">
{errors.password}
</p>
)}
<div className="pb-4">
<Input <Input
name="username" name="password"
placeholder="Username" type="password"
value={formData.username} placeholder="Password"
value={formData.password}
onChange={handleInputChange} onChange={handleInputChange}
extraClasses={`w-full focus:w-[120%] p-3 ${ extraClasses={`w-full focus:w-[120%] p-3 ${
errors.username ? "border-red-500" : "" errors.password ? "border-red-500" : ""
}`} }`}
/> ></Input>
<div className="flex justify-end">
{errors.password && ( <button
<p className="text-red-500 text-center text-[0.75em]"> type="button"
{errors.password} className="flex items-center w-fit text-white font-semibold hover:scale-105 mt-2 transition-all ease-in"
</p> onClick={onForgotPassword}
)} >
<ForgotIcon size={16} className="flex flex-row mr-1" />
<div className="pb-4"> <span className="text-[calc((1.5vw+1vh)/2)]">
<Input Forgot Password
name="password" </span>
type="password" </button>
placeholder="Password"
value={formData.password}
onChange={handleInputChange}
extraClasses={`w-full focus:w-[120%] p-3 ${
errors.password ? "border-red-500" : ""
}`}
></Input>
<div className="flex justify-end">
<button
type="button"
className="flex items-center w-fit text-white font-semibold hover:scale-105 mt-2 transition-all ease-in"
onClick={onForgotPassword}
>
<ForgotIcon size={16} className="flex flex-row mr-1" />
<span className="text-[calc((1.5vw+1vh)/2)]">
Forgot Password
</span>
</button>
</div>
</div> </div>
<Button type="submit">Login</Button> </div>
</form> <Button type="submit">Login</Button>
<GoogleLogin /> <GoogleLogin />
</div> </form>
</div> </div>
</> </>
); );

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

@@ -108,97 +108,86 @@ 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> <form
<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]"> onSubmit={handleSubmit}
<form id="register-form"
onSubmit={handleSubmit} 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"
id="register-form" >
className="flex flex-col" {errors.general && (
> <p className="text-red-500 text-sm text-center text-[0.75em]">
<div className="relative w-full"> {errors.general}
{errors.general && ( </p>
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full"> )}
{errors.general}
</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>
)} )}
<Input <Input
name="username" name="username"
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="text-red-500 text-center text-[0.75em]">
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full"> {errors.email}
{errors.email} </p>
</p> )}
)} <Input
<Input name="email"
name="email" type="email"
type="email" placeholder="Email"
placeholder="Email" value={formData.email}
value={formData.email} onChange={handleInputChange}
onChange={handleInputChange} extraClasses={`w-full focus:w-[120%] p-3 ${
extraClasses={`w-full focus:w-[120%] mb-[1.5em] p-[0.5rem] ${ errors.email ? "border-red-500" : ""
errors.email ? "border-red-500" : "" }`}
}`} />
/>
</div>
<div className="relative w-full"> {errors.password && (
{errors.password && ( <p className="text-red-500 text-center text-[0.75em]">
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full"> {errors.password}
{errors.password} </p>
</p> )}
)} <Input
<Input name="password"
name="password" type="password"
type="password" placeholder="Password"
placeholder="Password" value={formData.password}
value={formData.password} onChange={handleInputChange}
onChange={handleInputChange} extraClasses={`w-full focus:w-[120%] p-3 ${
extraClasses={`w-full focus:w-[120%] mb-[1.5em] p-[0.5rem] ${ errors.password ? "border-red-500" : ""
errors.password ? "border-red-500" : "" }`}
}`} />
/>
</div>
<div className="relative w-full">
{errors.confirmPassword && (
<p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">
{errors.confirmPassword}
</p>
)}
<Input
name="confirmPassword"
type="password"
placeholder="Confirm Password"
value={formData.confirmPassword}
onChange={handleInputChange}
extraClasses={`w-full focus:w-[120%] mb-[1.5em] p-[0.5rem] ${
errors.confirmPassword ? "border-red-500" : ""
}`}
/>
</div>
<Button type="submit">Register</Button> {errors.confirmPassword && (
</form> <p className="text-red-500 text-center text-[0.75em]">
</div> {errors.confirmPassword}
</div> </p>
)}
<Input
name="confirmPassword"
type="password"
placeholder="Confirm Password"
value={formData.confirmPassword}
onChange={handleInputChange}
extraClasses={`w-full focus:w-[120%] p-3 ${
errors.confirmPassword ? "border-red-500" : ""
}`}
/>
<Button type="submit">Register</Button>
</form>
</div> </div>
</> </>
); );