From 6f52cd074c19dd76f9cdaf62888a3b07db2825e0 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Tue, 3 Mar 2026 08:08:04 -0500
Subject: [PATCH] feat: update TopBar with glassmorphism backdrop and cyan
 accent styling

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/layout/TopBar.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/layout/TopBar.tsx b/frontend/src/components/layout/TopBar.tsx
index b819a2e6..0f22c895 100644
--- a/frontend/src/components/layout/TopBar.tsx
+++ b/frontend/src/components/layout/TopBar.tsx
@@ -54,15 +54,21 @@ export function TopBar() {
 
   return (
     <>
-      <header className="topbar flex items-center gap-4 border-b border-border bg-background px-4">
+      <header
+        className="topbar flex items-center gap-4 border-b px-4"
+        style={{
+          background: 'rgba(16, 17, 20, 0.6)',
+          backdropFilter: 'var(--glass-blur-strong)',
+          WebkitBackdropFilter: 'var(--glass-blur-strong)',
+          borderColor: 'var(--glass-border)',
+        }}
+      >
         {/* Logo area */}
         <Link
           to="/"
           className="flex items-center gap-2.5 pr-4 transition-all duration-200"
         >
-          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gradient-brand">
-            <BrandLogo size="sm" className="h-4 w-4" />
-          </div>
+          <BrandLogo size="sm" className="h-7 w-7 shrink-0" />
           <span className="text-sm font-heading font-bold tracking-tight whitespace-nowrap">
             <span className="text-foreground">Resolution</span>
             <span className="text-gradient-brand">Flow</span>
@@ -105,7 +111,7 @@ export function TopBar() {
           <div className="relative ml-2" ref={menuRef}>
             <button
               onClick={() => setUserMenuOpen(!userMenuOpen)}
-              className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-brand text-xs font-heading font-bold text-white hover:opacity-90 transition-opacity"
+              className="flex h-8 w-8 items-center justify-center rounded-[10px] bg-gradient-brand text-xs font-heading font-bold text-primary-foreground hover:opacity-90 transition-opacity"
               title={user?.name || user?.email || 'User'}
             >
               {initials}