sneak/AutistMask
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

restyle add-wallet tabs: 'From' prefix, underline tab style

Browse Source 
- 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
This commit is contained in:
user
2026-02-28 12:44:48 -08:00
parent 4d120e5ea9
commit f75a258125
2 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/popup/index.html
View File

@@ -58,24 +58,27 @@
<h2 class="font-bold mb-2">Add Wallet</h2> <h2 class="font-bold mb-2">Add Wallet</h2>
<!-- Mode selector tabs --> <!-- Mode selector tabs -->
<div class="flex gap-1 mb-3"> <div
class="flex border-b border-border mb-3"
id="add-wallet-tabs"
>
<button <button
id="tab-mnemonic" 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>
<button <button
id="tab-privkey" 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>
<button <button
id="tab-xprv" 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> </button>
</div> </div>

7
src/popup/views/addWallet.js
View File

@@ -27,8 +27,11 @@ function switchMode(mode) {
currentMode = mode; currentMode = mode;
for (const m of MODES) { for (const m of MODES) {
$("add-wallet-section-" + m).classList.toggle("hidden", m !== mode); $("add-wallet-section-" + m).classList.toggle("hidden", m !== mode);
$("tab-" + m).classList.toggle("bg-fg", m === mode); const tab = $("tab-" + m);
$("tab-" + m).classList.toggle("text-bg", m === mode); 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]; $("add-wallet-password-hint").textContent = PASSWORD_HINTS[mode];
} }