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
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
@@ -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];
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user