diff --git a/src/components/LoginScreen.tsx b/src/components/LoginScreen.tsx index 3559c3d..cd3b910 100644 --- a/src/components/LoginScreen.tsx +++ b/src/components/LoginScreen.tsx @@ -354,7 +354,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) { disabled={!canLogin} onMouseEnter={() => setButtonHovered(true)} onMouseLeave={() => setButtonHovered(false)} - className="focus-visible:ring-2 focus-visible:ring-[#0D6E6E]/40 focus-visible:ring-offset-2 focus:outline-none" + className={`focus-visible:ring-2 focus-visible:ring-[#0D6E6E]/40 focus-visible:ring-offset-2 focus:outline-none${canLogin && !buttonPressed ? ' login-pulse-active' : ''}`} style={{ width: '100%', padding: '10px 16px', diff --git a/src/index.css b/src/index.css index f809533..84fa03e 100644 --- a/src/index.css +++ b/src/index.css @@ -235,6 +235,20 @@ html { animation: login-spin 0.8s linear infinite; } +/* Login button pulse — draws attention when button becomes clickable */ +@keyframes login-pulse { + 0%, 60%, 100% { transform: scale(1); } + 30% { transform: scale(1.03); } +} + +.login-pulse-active { + animation: login-pulse 3s ease-in-out infinite; +} + +.login-pulse-active:hover { + animation: none; +} + /* Custom scrollbar for sidebar */ .pmr-scrollbar { scrollbar-width: thin; @@ -412,6 +426,11 @@ textarea:focus-visible { border-top-color: #0D6E6E; } + /* No pulse animation */ + .login-pulse-active { + animation: none; + } + /* Instant SubNav transitions */ .subnav-scroll button { transition: none !important;