From d47f6b40e4b2f01fac3b9151318b1ada3e74d6fc Mon Sep 17 00:00:00 2001
From: Anso <dev@saelix.com>
Date: Thu, 23 Apr 2026 10:17:14 -0400
Subject: [PATCH] fix(login): remove branding duplication, add shimmer and ping
 dot (#727)

- Remove redundant SENCHO prefix from kicker (already shown in card header)
- Animate the left accent bar with a slow back-and-forth shimmer sweep
- Replace static status dot with animated ping pulse
---
 frontend/src/components/Login.tsx           | 2 +-
 frontend/src/components/auth/AuthCanvas.tsx | 9 +++++++--
 frontend/src/index.css                      | 7 +++++++
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Login.tsx b/frontend/src/components/Login.tsx
index b0eb6741..2e9ddc1f 100644
--- a/frontend/src/components/Login.tsx
+++ b/frontend/src/components/Login.tsx
@@ -107,7 +107,7 @@ export function Login({ className, ...props }: React.ComponentPropsWithoutRef<'d
         <div className="flex flex-col gap-7">
           <div className="flex items-start justify-between gap-4">
             <AuthStepHeader
-              kicker="SENCHO · AUTHENTICATE"
+              kicker="AUTHENTICATE"
               hero="Sign in"
               caption={
                 loginMode === 'ldap'
diff --git a/frontend/src/components/auth/AuthCanvas.tsx b/frontend/src/components/auth/AuthCanvas.tsx
index 1d580a24..1a85cc52 100644
--- a/frontend/src/components/auth/AuthCanvas.tsx
+++ b/frontend/src/components/auth/AuthCanvas.tsx
@@ -24,13 +24,18 @@ export function AuthCanvas({ children, className, footer, ...props }: AuthCanvas
         className="relative w-full max-w-[440px] animate-scale-in overflow-hidden rounded-lg border border-card-border border-t-card-border-top bg-card text-card-foreground shadow-card-bevel"
         style={{ animationDuration: 'var(--duration-base)', animationTimingFunction: 'var(--ease-out-expo)' }}
       >
-        <span aria-hidden className="absolute inset-y-0 left-0 w-[3px] bg-brand/70" />
+        <div aria-hidden className="absolute inset-y-0 left-0 w-[3px] overflow-hidden bg-brand/70">
+          <div className="animate-shimmer absolute inset-x-0 h-1/3 bg-gradient-to-b from-transparent via-white/60 to-transparent" />
+        </div>
 
         <div className="flex items-center justify-between border-b border-card-border/60 px-7 pt-6 pb-4">
           <span className="font-mono text-[10px] uppercase tracking-[0.22em] text-stat-subtitle">
             SENCHO
           </span>
-          <span className="h-1.5 w-1.5 rounded-full bg-brand shadow-[0_0_8px_0_oklch(0.78_0.11_195_/_0.6)]" />
+          <span className="relative flex h-1.5 w-1.5">
+            <span aria-hidden className="absolute inline-flex h-full w-full animate-ping rounded-full bg-brand opacity-60" />
+            <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-brand shadow-[0_0_8px_0_oklch(0.78_0.11_195_/_0.6)]" />
+          </span>
         </div>
 
         <div className="px-7 pb-7 pt-6">{children}</div>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index c0526aab..4d674069 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -562,6 +562,10 @@ body {
   from { opacity: 0; transform: scale(0.95); }
   to   { opacity: 1; transform: scale(1); }
 }
+@keyframes shimmer {
+  0%   { transform: translateY(-100%); }
+  100% { transform: translateY(200%); }
+}
 
 /* ─────────────────────────────────────────────────────────────
    ANIMATION UTILITIES
@@ -581,6 +585,9 @@ body {
 .animate-scale-in {
   animation: scale-in var(--duration-fast) var(--ease-spring) both;
 }
+.animate-shimmer {
+  animation: shimmer 4.5s ease-in-out infinite alternate;
+}
 
 /* Stagger delay helpers */
 .animate-delay-50  { animation-delay: 50ms; }