From dd4bd2e565ae0e3b9ee48bfc6ed07aebf435cdb1 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Thu, 2 Oct 2025 10:51:32 +0200
Subject: [PATCH] feat: enhance login modal with animated border effects

- Add BorderBeam component import and implementation
- Create animated red and blue border effects
- Add relative overflow-hidden positioning
- Improve visual appeal and user engagement
---
 web/src/components/login-modal.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/web/src/components/login-modal.tsx b/web/src/components/login-modal.tsx
index 4706a5fc..cdb0080a 100644
--- a/web/src/components/login-modal.tsx
+++ b/web/src/components/login-modal.tsx
@@ -8,6 +8,7 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } f
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Separator } from "@/components/ui/separator"
+import { BorderBeam } from "@/components/ui/border-beam"
 import { pb } from "@/lib/pb"
 
 interface LoginModalProps {
@@ -86,7 +87,7 @@ export function LoginModal({ open, onOpenChange }: LoginModalProps) {
 
 	return (
 		<Dialog open={open} onOpenChange={onOpenChange}>
-			<DialogContent className="sm:max-w-md bg-background border shadow-2xl ">
+			<DialogContent className="sm:max-w-md bg-background border shadow-2xl relative overflow-hidden">
 				<DialogHeader className="space-y-3">
 					<DialogTitle className="text-2xl font-bold">{isRegister ? "Create account" : "Sign in"}</DialogTitle>
 					<DialogDescription className="text-base">
@@ -248,6 +249,18 @@ export function LoginModal({ open, onOpenChange }: LoginModalProps) {
 						</div>
 					</footer>
 				</form>
+				<BorderBeam
+					duration={6}
+					size={400}
+					className="from-transparent via-red-500 to-transparent"
+				/>
+				<BorderBeam
+					duration={6}
+					delay={3}
+					size={400}
+					borderWidth={2}
+					className="from-transparent via-blue-500 to-transparent"
+				/>
 			</DialogContent>
 		</Dialog>
 	)