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"
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 */}
<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 */}
<ToggleButton
toggled={selectedTab === "Login"}
@@ -75,13 +75,13 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
{/* Form Container */}
<div
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}
>
{/*Border Container*/}
<div
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"
>
<button
@@ -92,7 +92,7 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
</button>
<div
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()}
</div>

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

@@ -100,15 +100,14 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
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]">
Login
</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
onSubmit={handleSubmit}
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 && (
<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>
<Button type="submit">Login</Button>
</form>
<GoogleLogin />
</div>
</form>
</div>
</>
);

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

@@ -108,26 +108,23 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
return (
<>
<div className="mb-2">
<div className="flex flex-col items-center p-[2.5rem]">
<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]">
Register
</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
onSubmit={handleSubmit}
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 && (
<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}
</p>
)}
{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}
</p>
)}
@@ -136,15 +133,13 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Username"
value={formData.username}
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" : ""
}`}
/>
</div>
<div className="relative w-full">
{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}
</p>
)}
@@ -154,15 +149,13 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Email"
value={formData.email}
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" : ""
}`}
/>
</div>
<div className="relative w-full">
{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}
</p>
)}
@@ -172,14 +165,13 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Password"
value={formData.password}
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" : ""
}`}
/>
</div>
<div className="relative w-full">
{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}
</p>
)}
@@ -189,17 +181,14 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Confirm Password"
value={formData.confirmPassword}
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" : ""
}`}
/>
</div>
<Button type="submit">Register</Button>
</form>
</div>
</div>
</div>
</>
);
};