From dfdad4bbed9aff0f202e2c08328bb754a5dd4d58 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Tue, 31 Mar 2026 21:07:58 +0100
Subject: [PATCH] [#681] Redesign nav bar wallet pill and mobile matched-height
 boxes

Desktop: Replace bordered box with pill-shaped link (rounded-full) using
same text-xs font-medium as nav links. Shows PFP + @username or truncated
address (0x4d...B6C8). Entire pill links to profile.

Mobile: Both PFP box and hamburger box now have matching border styling
(border-border rounded border px-2 py-1) for equal height alignment.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/ConnectWallet.tsx | 53 ++++++++++++++------------------
 src/components/NavBar.tsx        | 10 +++---
 2 files changed, 28 insertions(+), 35 deletions(-)

diff --git a/src/components/ConnectWallet.tsx b/src/components/ConnectWallet.tsx
index 50fac566..84312d96 100644
--- a/src/components/ConnectWallet.tsx
+++ b/src/components/ConnectWallet.tsx
@@ -45,15 +45,15 @@ export function ConnectWallet({ onNavigate, compact }: ConnectWalletProps = {})
 
   // Connected state
   if (isConnected && address) {
-    const shortAddr = address.slice(0, 6);
+    const displayAddr = truncateAddress(address);
 
-    // Compact mode: PFP + short identifier for mobile top nav
+    // Compact mode: bordered box for mobile top nav (matches hamburger box height)
     if (compact) {
       return (
         <Link
           href={`/profile/${address}`}
           onClick={onNavigate}
-          className="text-accent inline-flex items-center gap-1 text-xs font-medium hover:opacity-80 transition-opacity"
+          className="border-border text-accent inline-flex items-center gap-1.5 rounded border px-2 py-1 text-xs font-medium hover:opacity-80 transition-opacity"
         >
           {profile?.pfpUrl && (
             // eslint-disable-next-line @next/next/no-img-element
@@ -67,37 +67,30 @@ export function ConnectWallet({ onNavigate, compact }: ConnectWalletProps = {})
           )}
           {profile
             ? `@${profile.username.length > 10 ? profile.username.slice(0, 10) + "…" : profile.username}`
-            : shortAddr}
+            : displayAddr}
         </Link>
       );
     }
 
-    // Full mode: PFP + username + shortened address (no disconnect)
+    // Full mode: pill with PFP + @username or truncated address
     return (
-      <div className="border-border flex items-center gap-3 rounded border px-3 py-2 text-sm">
-        <Link
-          href={`/profile/${address}`}
-          onClick={onNavigate}
-          className="text-accent inline-flex items-center gap-1.5 font-medium hover:opacity-80 transition-opacity"
-        >
-          {profile?.pfpUrl && (
-            // eslint-disable-next-line @next/next/no-img-element
-            <img
-              src={profile.pfpUrl}
-              alt=""
-              width={16}
-              height={16}
-              className="rounded-full"
-            />
-          )}
-          {profile ? `@${profile.username}` : shortAddr}
-        </Link>
-        {profile && (
-          <span className="text-muted text-[10px] font-mono">
-            {shortAddr}
-          </span>
+      <Link
+        href={`/profile/${address}`}
+        onClick={onNavigate}
+        className="border-border text-accent inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium hover:opacity-80 transition-opacity"
+      >
+        {profile?.pfpUrl && (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={profile.pfpUrl}
+            alt=""
+            width={18}
+            height={18}
+            className="rounded-full"
+          />
         )}
-      </div>
+        {profile ? `@${profile.username}` : displayAddr}
+      </Link>
     );
   }
 
@@ -123,8 +116,8 @@ export function ConnectWallet({ onNavigate, compact }: ConnectWalletProps = {})
               type="button"
               className={
                 compact
-                  ? "border-accent text-accent hover:bg-accent hover:text-background rounded border px-2.5 py-1 text-xs transition-colors"
-                  : "border-accent text-accent hover:bg-accent hover:text-background rounded border px-4 py-2 text-sm transition-colors"
+                  ? "border-border text-accent hover:bg-accent hover:text-background rounded border px-2 py-1 text-xs font-medium transition-colors"
+                  : "border-border text-accent hover:bg-accent hover:text-background rounded-full border px-3 py-1 text-xs font-medium transition-colors"
               }
             >
               {compact ? "Connect" : "connect wallet"}
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 411839a6..ed2879ae 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -59,22 +59,22 @@ export function NavBar() {
         </div>
 
         {/* Right side: wallet + mobile toggle */}
-        <div className="flex items-center gap-2">
-          {/* Desktop: full ConnectWallet */}
+        <div className="flex items-center gap-1.5">
+          {/* Desktop: pill ConnectWallet */}
           <div className="hidden md:block">
             <ConnectWallet />
           </div>
-          {/* Mobile: compact Connect button / PFP in top nav */}
+          {/* Mobile: matched-height boxes — PFP box + hamburger box */}
           <div className="md:hidden">
             <ConnectWallet compact />
           </div>
           <button
             onClick={() => setMobileOpen(!mobileOpen)}
-            className="text-muted hover:text-foreground p-1 transition-colors md:hidden"
+            className="border-border text-muted hover:text-foreground flex items-center justify-center rounded border px-2 py-1 transition-colors md:hidden"
             aria-label="Toggle menu"
             aria-expanded={mobileOpen}
           >
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
               {mobileOpen ? (
                 <>
                   <line x1="18" y1="6" x2="6" y2="18" />