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

Add: Added New Styling For AuthModel

Browse Source 
New Border effect that rolls around the border of the registration.
Use of CSS extension that goes with TailwindCdd
This commit is contained in:
EvanLin3141
2025-01-28 22:31:31 +00:00
parent 01d7be2d4b
commit 252ca7d1e6
7 changed files with 263 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,6 +3,8 @@ import { ToggleButton } from "../Layout/Button";
import { LogIn as LogInIcon, User as UserIcon } from "lucide-react";
import LoginForm from "./LoginForm";
import RegisterForm from "./RegisterForm";
import "../../assets/styles/auth.css";
interface AuthModalProps {
onClose: () => void;
@@ -13,34 +15,45 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
return (
<>
{/*Background Blur*/}
<div id="blurring-layer" className="fixed z-10 inset-0 w-screen h-screen backdrop-blur-sm group-has-[input:focus]:backdrop-blur-[5px]"></div>
{/*Container*/}
<div className="card-wrapper fixed inset-0 flex flex-col items-center justify-around z-50
h-[75vh] m-auto min-w-[45vw] w-fit py-[50px] rounded-[5rem]
transition-all" >
<div id="modal-container" className="fixed inset-0 bg-black/30 has-[input:focus]:bg-black/40 flex flex-col items-center justify-around z-50 h-[70vh] 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">
<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"
{/*Border Container*/}
<div
id="border-container"
className="card-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"
>
✕
</button>
<ToggleButton
toggled={selectedTab === "Login"}
extraClasses="flex flex-col items-center px-8"
onClick={() => setSelectedTab("Login")}
>
<LogInIcon className="h-[40px] w-[40px] mr-1" />
Login
</ToggleButton>
<ToggleButton
toggled={selectedTab === "Register"}
extraClasses="flex flex-col items-center px-8"
onClick={() => setSelectedTab("Register")}
>
<UserIcon className="h-[40px] w-[40px] mr-1" />
Register
</ToggleButton>
<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>
<ToggleButton
toggled={selectedTab === "Login"}
extraClasses="flex flex-col items-center px-8"
onClick={() => setSelectedTab("Login")}
>
<LogInIcon className="h-[40px] w-[40px] mr-1" />
Login
</ToggleButton>
<ToggleButton
toggled={selectedTab === "Register"}
extraClasses="flex flex-col items-center px-8"
onClick={() => setSelectedTab("Register")}
>
<UserIcon className="h-[40px] w-[40px] mr-1" />
Register
</ToggleButton>
</div>
{selectedTab === "Login" ? <LoginForm /> : <RegisterForm />}
</div>
{selectedTab === "Login" ? <LoginForm /> : <RegisterForm />}
</div>
</>
);