From 303ce2cbdcd4be16c021fadbf5e444478aaff129 Mon Sep 17 00:00:00 2001
From: Jared Schoeny <jared@schoeny.com>
Date: Fri, 10 Oct 2025 23:38:31 -1000
Subject: [PATCH] Add active styling for header avatar link

---
 src/components/Header.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 4cc5372..e562cde 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -89,11 +89,13 @@ export default function Header() {
           {isAuthenticated && (
             <Link
               href="/account"
-              className="ml-1 inline-flex items-center justify-center rounded-full ring-1 ring-[var(--border)] p-[2px] hover:bg-[var(--surface-2)]"
+              data-active={pathname === "/account" || undefined}
+              className="ml-1 relative group inline-flex items-center justify-center rounded-full ring-1 ring-[var(--border)] p-[2px] data-active:ring-2 data-active:ring-[var(--ring)]"
               aria-label="Open account"
               title="Account"
             >
-              <Avatar uid={userId} url={avatarUrl} size={28} />
+              <Avatar uid={userId} url={avatarUrl} size={36} />
+              <div className="absolute inset-0 rounded-full bg-transparent group-hover:bg-black/30 transition-colors m-[2px]" />
             </Link>
           )}
         </nav>