style(layout): sidebar stripe + topbar gradient + bell spring + search ring
Sidebar active items: 4px brand left-edge stripe (rounded-r-full) replacing the
border-l-2 + bg shift; section header smaller-caps + brand-200 colour; user-footer
avatar gets shadow-sm + ring-2 ring-white/30.
Topbar '+ New' uses bg-gradient-brand with shadow-sm + scale-1.02 hover. User
avatar trigger gets shadow-sm + ring-2 ring-white. Notification badge gets
gradient-brand fill + ring-2 ring-background + animate-badge-pop spring keyframe
(retriggers on count change via key={unreadCount}). Command search gets shadow-xs
inset + brand focus ring (ring-4 ring-brand/15).
Adds badge-pop keyframes to tailwind config.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -84,8 +84,10 @@ export function CommandSearch() {
|
||||
{/* ── Single persistent search bar ── */}
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center gap-2 rounded-md border bg-background px-2.5 transition-all duration-150',
|
||||
focused ? 'border-muted-foreground/40 w-64 lg:w-80' : 'w-44 lg:w-60',
|
||||
'flex items-center gap-2 rounded-md border bg-background px-2.5 shadow-xs transition-all duration-base ease-smooth',
|
||||
focused
|
||||
? 'border-brand/60 ring-4 ring-brand/15 w-64 lg:w-80'
|
||||
: 'border-input w-44 lg:w-60',
|
||||
)}
|
||||
>
|
||||
<Search className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
|
||||
Reference in New Issue
Block a user