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
This commit is contained in:
Anso
2026-04-23 10:17:14 -04:00
committed by GitHub
parent 866732f9ba
commit d47f6b40e4
3 changed files with 15 additions and 3 deletions
+1 -1
View File
@@ -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'
+7 -2
View File
@@ -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>
+7
View File
@@ -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; }