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

FIX: Padding Issue on Video Thumbnails, ViewPort Issues in AuthModal

Browse Source
This commit is contained in:
EvanLin3141
2025-02-16 21:46:20 +00:00
parent 4ddcb3e139
commit 19e702a13a
6 changed files with 61 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
import React, { useState } from "react";
import { ToggleButton } from "../Layout/Button";
import { LogIn as LogInIcon, User as UserIcon, CircleHelp as ForgotIcon} from "lucide-react";
import { LogIn as LogInIcon, User as UserIcon, CircleHelp as ForgotIcon } from "lucide-react";
import LoginForm from "./LoginForm";
import RegisterForm from "./RegisterForm";
import ForgotPasswordForm from "./ForgotPasswordForm";
@@ -23,11 +23,11 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
};
const authSwitch = () => {
const formMap: { [key: string]: JSX.Element} = {
Login: <LoginForm onSubmit={(handleSubmit)} onForgotPassword={() => setSelectedTab("Forgot")}/>,
Register: <RegisterForm onSubmit={(handleSubmit)}/>,
Forgot: <ForgotPasswordForm onSubmit={(handleSubmit)}/>
const formMap: { [key: string]: JSX.Element } = {
Login: <LoginForm onSubmit={(handleSubmit)} onForgotPassword={() => setSelectedTab("Forgot")} />,
Register: <RegisterForm onSubmit={(handleSubmit)} />,
Forgot: <ForgotPasswordForm onSubmit={(handleSubmit)} />
};
return formMap[selectedTab] || <div>Please select a valid option</div>;
{/*
@@ -57,30 +57,31 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
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 ">
<div className="fixed top-[1em] 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]"
extraClasses={`flex flex-col items-center px-8 "
}`}
onClick={() => setSelectedTab("Login")}
>
<LogInIcon className="h-[40px] w-[40px] mr-1" />
<LogInIcon className=" w-[3em] sm:w-[1em] 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]"
extraClasses="flex flex-col items-center px-8 z-[9001]"
onClick={() => setSelectedTab("Register")}
>
<UserIcon className="h-[40px] w-[40px] mr-1" />
<UserIcon className=" w-[3em] sm:w-[1em] mr-1" />
Register
</ToggleButton>
</div>
<div
className="container fixed inset-0 flex flex-col items-center justify-around z-[9999]
h-auto max-h-[75vh] m-auto max-w-[350px] min-w-[34vw] py-[50px] rounded-[5rem]"
@@ -104,17 +105,17 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
</button>
</div>
<>
{authSwitch()}
{authSwitch()}
</>
</div>
</div>
</div>
</>
);
};

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

@@ -101,10 +101,10 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
return (
<>
<div className="h-[100%] flex flex-col items-center p-10">
<div className=" flex flex-col items-center p-10">
<h1 className="flex flex-col text-white text-[2.5em] font-[800]"> Login </h1>
<div className="mt-10 bg-white/10 backdrop-blur-md p-6 md:p-16 rounded-xl shadow-lg w-full
md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] h-[27.5em] border border-white/10">
md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] border border-white/10">
<form
onSubmit={handleSubmit}

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

@@ -110,10 +110,10 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
return (
<>
<div className="mb-2">
<div className="h-[100%] flex flex-col items-center p-10">
<div className="flex flex-col items-center p-[2.5rem]">
<h1 className="flex flex-col text-white text-[2.5em] font-[800]"> Register </h1>
<div className="mt-5 bg-white/10 backdrop-blur-md p-10 md:px-16 rounded-xl shadow-lg w-full
md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] h-[31.5em] border border-white/10">
<div className="mt-5 bg-white/10 backdrop-blur-md p-[2.5rem] md:px-16 rounded-xl shadow-lg w-full
md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] border border-white/10">
<form
onSubmit={handleSubmit}
@@ -133,7 +133,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Username"
value={formData.username}
onChange={handleInputChange}
extraClasses={`w-full mb-[1.5em] p-3 ${errors.username ? "border-red-500" : ""}`}
extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${errors.username ? "border-red-500" : ""}`}
/>
</div>
@@ -147,7 +147,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Email"
value={formData.email}
onChange={handleInputChange}
extraClasses={`w-full mb-[1.5em] p-3 ${errors.email ? "border-red-500" : ""}`}
extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${errors.email ? "border-red-500" : ""}`}
/>
</div>
@@ -161,7 +161,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Password"
value={formData.password}
onChange={handleInputChange}
extraClasses={`w-full mb-[1.5em] p-3 ${errors.password ? "border-red-500" : ""}`}
extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${errors.password ? "border-red-500" : ""}`}
/>
</div>
<div className="relative w-full">
@@ -175,7 +175,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Confirm Password"
value={formData.confirmPassword}
onChange={handleInputChange}
extraClasses={`w-full mb-[1.5em] p-3 ${errors.confirmPassword ? "border-red-500" : ""}`}
extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${errors.confirmPassword ? "border-red-500" : ""}`}
/>
</div>