From 0f6daf3200053c43e3fe2e9298cf09f72df5d14c Mon Sep 17 00:00:00 2001
From: user <user@Mac.lan guest wan>
Date: Sat, 28 Feb 2026 12:56:56 -0800
Subject: [PATCH] restyle tabs as classic tab bar with connected active tab

---
 src/popup/index.html         | 14 +++++++-------
 src/popup/views/addWallet.js | 13 +++++++++----
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/popup/index.html b/src/popup/index.html
index 4eccfde..d16bdf3 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -58,25 +58,25 @@
                 <h2 class="font-bold mb-2">Add Wallet</h2>
 
                 <!-- Mode selector tabs -->
-                <div
-                    class="flex border-b border-border mb-3"
-                    id="add-wallet-tabs"
-                >
+                <div class="flex relative mb-3" id="add-wallet-tabs">
+                    <div
+                        class="absolute bottom-0 left-0 right-0 border-b border-border"
+                    ></div>
                     <button
                         id="tab-mnemonic"
-                        class="px-2 py-1 cursor-pointer text-xs border-b-2 border-fg font-bold"
+                        class="tab-active relative z-10 px-3 py-1.5 cursor-pointer text-xs font-bold border border-border border-b-bg bg-bg -mb-px"
                     >
                         From Recovery Phrase
                     </button>
                     <button
                         id="tab-privkey"
-                        class="px-2 py-1 cursor-pointer text-xs border-b-2 border-transparent text-muted hover:text-fg hover:border-fg"
+                        class="tab-inactive relative z-10 px-3 py-1.5 cursor-pointer text-xs text-muted border border-transparent -mb-px hover:text-fg"
                     >
                         From Private Key
                     </button>
                     <button
                         id="tab-xprv"
-                        class="px-2 py-1 cursor-pointer text-xs border-b-2 border-transparent text-muted hover:text-fg hover:border-fg"
+                        class="tab-inactive relative z-10 px-3 py-1.5 cursor-pointer text-xs text-muted border border-transparent -mb-px hover:text-fg"
                     >
                         From Extended Key
                     </button>
diff --git a/src/popup/views/addWallet.js b/src/popup/views/addWallet.js
index d3d49c6..eda32e1 100644
--- a/src/popup/views/addWallet.js
+++ b/src/popup/views/addWallet.js
@@ -28,10 +28,15 @@ function switchMode(mode) {
     for (const m of MODES) {
         $("add-wallet-section-" + m).classList.toggle("hidden", m !== mode);
         const tab = $("tab-" + m);
-        tab.classList.toggle("border-fg", m === mode);
-        tab.classList.toggle("font-bold", m === mode);
-        tab.classList.toggle("border-transparent", m !== mode);
-        tab.classList.toggle("text-muted", m !== mode);
+        const isActive = m === mode;
+        // Active tab: visible borders on top/left/right, bottom border matches bg to "connect" with content
+        tab.classList.toggle("border-border", isActive);
+        tab.classList.toggle("border-b-bg", isActive);
+        tab.classList.toggle("bg-bg", isActive);
+        tab.classList.toggle("font-bold", isActive);
+        tab.classList.toggle("text-muted", !isActive);
+        // Inactive tab: transparent borders
+        tab.classList.toggle("border-transparent", !isActive);
     }
     $("add-wallet-password-hint").textContent = PASSWORD_HINTS[mode];
 }