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

restyle tabs as classic tab bar with connected active tab

Browse Source
This commit is contained in:
user
2026-02-28 12:56:56 -08:00
parent 435669b6b6
commit 0f6daf3200
2 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/popup/index.html
View File

@@ -58,25 +58,25 @@
<h2 class="font-bold mb-2">Add Wallet</h2>
<!-- Mode selector tabs -->
<div class="flex relative mb-3" id="add-wallet-tabs">
<div
class="flex border-b border-border mb-3"
id="add-wallet-tabs"
>
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>

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

@@ -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];
}