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

FEAT: Faster Border Animation on Submit

Browse Source 
When User Submit Registration, border animation rotates 360 degrees every 1 sec.

May seem weird when reset
This commit is contained in:
EvanLin3141
2025-01-29 20:12:46 +00:00
parent 4d9e819b39
commit 06234bcac2
4 changed files with 44 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,20 +12,31 @@ interface AuthModalProps {
const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
const [selectedTab, setSelectedTab] = useState<string>("Login");
const [spinDuration, setSpinDuration] = useState("7s")
const handleSubmit = () => {
setSpinDuration("1s");
setTimeout(() => {
setSpinDuration("7s");
}, 5000);
};
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
className="container 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"
style={{ "--spin-duration": spinDuration } as React.CSSProperties}
>
{/*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
className="front-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"
>
<div id="login-methods" className=" w-full flex flex-row items-center justify-evenly">
@@ -52,7 +63,7 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
Register
</ToggleButton>
</div>
{selectedTab === "Login" ? <LoginForm /> : <RegisterForm />}
{selectedTab === "Login" ? <LoginForm /> : <RegisterForm onSubmit={handleSubmit}/>}
</div>
</div>
</>