From 005b97cdab601e86f963fd39408ccee3c96c9258 Mon Sep 17 00:00:00 2001
From: user <user@Mac.lan guest wan>
Date: Sat, 28 Feb 2026 12:44:48 -0800
Subject: [PATCH] restyle add-wallet tabs: 'From' prefix, underline tab style

- Tab labels: 'From Phrase', 'From Key', 'From xprv'
- Visual: bottom-border underline on active tab (not filled buttons)
- Inactive tabs: muted text with hover highlight
- Container: bottom border connects tabs to content area
---
 src/popup/index.html         | 17 ++++++++++-------
 src/popup/views/addWallet.js |  7 +++++--
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/popup/index.html b/src/popup/index.html
index dd3fbf4..733b7ce 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -58,24 +58,27 @@
                 <h2 class="font-bold mb-2">Add Wallet</h2>
 
                 <!-- Mode selector tabs -->
-                <div class="flex gap-1 mb-3">
+                <div
+                    class="flex border-b border-border mb-3"
+                    id="add-wallet-tabs"
+                >
                     <button
                         id="tab-mnemonic"
-                        class="border border-border px-2 py-1 cursor-pointer text-xs hover:bg-fg hover:text-bg bg-fg text-bg"
+                        class="px-2 py-1 cursor-pointer text-xs border-b-2 border-fg font-bold"
                     >
-                        Recovery Phrase
+                        From Phrase
                     </button>
                     <button
                         id="tab-privkey"
-                        class="border border-border px-2 py-1 cursor-pointer text-xs hover:bg-fg hover:text-bg"
+                        class="px-2 py-1 cursor-pointer text-xs border-b-2 border-transparent text-muted hover:text-fg"
                     >
-                        Private Key
+                        From Key
                     </button>
                     <button
                         id="tab-xprv"
-                        class="border border-border px-2 py-1 cursor-pointer text-xs hover:bg-fg hover:text-bg"
+                        class="px-2 py-1 cursor-pointer text-xs border-b-2 border-transparent text-muted hover:text-fg"
                     >
-                        Extended Key (xprv)
+                        From xprv
                     </button>
                 </div>
 
diff --git a/src/popup/views/addWallet.js b/src/popup/views/addWallet.js
index 635fbef..d3d49c6 100644
--- a/src/popup/views/addWallet.js
+++ b/src/popup/views/addWallet.js
@@ -27,8 +27,11 @@ function switchMode(mode) {
     currentMode = mode;
     for (const m of MODES) {
         $("add-wallet-section-" + m).classList.toggle("hidden", m !== mode);
-        $("tab-" + m).classList.toggle("bg-fg", m === mode);
-        $("tab-" + m).classList.toggle("text-bg", 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);
     }
     $("add-wallet-password-hint").textContent = PASSWORD_HINTS[mode];
 }