fix: improve dark mode contrast for wells and balance display

- Change dark mode --color-well from #0a0a0a to #111111 for visible contrast against #000000 background - Add explicit text-fg class to balance display element to ensure white text in dark mode
feat: add theme setting (Light/Dark/System) with dark mode
2026-03-01 03:38:27 -08:00 · 2026-03-01 03:36:42 -08:00 · 2026-03-01 12:33:08 +01:00 · 2026-02-28 16:30:43 -08:00 · 2026-03-01 01:21:24 +01:00 · 2026-02-28 16:17:07 -08:00
17 changed files with 146 additions and 69 deletions
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -107,7 +107,8 @@
                    </div>
                    <div
                        id="add-wallet-phrase-warning"
-                        class="text-xs mb-2 border border-border border-dashed p-2 hidden"
+                        class="text-xs mb-2 border border-border border-dashed p-2"
+                        style="visibility: hidden"
                    >
                        Write these words down and keep them safe. Anyone with
                        them can take your funds; if you lose them, your wallet
@@ -184,7 +185,7 @@
                <!-- active address headline -->
                <div
                    id="total-value"
-                    class="text-2xl font-bold min-h-[2rem]"
+                    class="text-2xl font-bold min-h-[2rem] text-fg"
                ></div>
                <div
                    id="total-value-sub"
@@ -375,7 +376,8 @@
                </p>
                <div
                    id="export-privkey-flash"
-                    class="text-xs mb-2 hidden"
+                    class="text-xs mb-2 min-h-[1.25rem]"
+                    style="visibility: hidden"
                ></div>
                <div id="export-privkey-password-section" class="mb-2">
                    <label class="block mb-1">Password</label>
@@ -579,13 +581,17 @@
                    <div class="text-xs text-muted mb-1">Your balance</div>
                    <div id="confirm-balance" class="text-xs"></div>
                </div>
-                <div id="confirm-fee" class="mb-3 hidden">
+                <div id="confirm-fee" class="mb-3" style="visibility: hidden">
                    <div class="text-xs text-muted mb-1">
                        Estimated network fee
                    </div>
                    <div id="confirm-fee-amount" class="text-xs"></div>
                </div>
-                <div id="confirm-warnings" class="mb-2 hidden"></div>
+                <div
+                    id="confirm-warnings"
+                    class="mb-2"
+                    style="visibility: hidden"
+                ></div>
                <div
                    id="confirm-recipient-warning"
                    class="mb-2"
@@ -601,7 +607,8 @@
                </div>
                <div
                    id="confirm-errors"
-                    class="mb-2 border border-border border-dashed p-2 hidden"
+                    class="mb-2 border border-border border-dashed p-2"
+                    style="visibility: hidden; min-height: 1.25rem"
                ></div>
                <div class="mb-2">
                    <label class="block mb-1 text-xs">Password</label>
@@ -614,6 +621,7 @@
                <div
                    id="confirm-tx-password-error"
                    class="text-xs mb-2 min-h-[1.25rem]"
+                    style="visibility: hidden"
                ></div>
                <button
                    id="btn-confirm-send"
@@ -728,7 +736,8 @@
                </button>
                <div
                    id="receive-erc20-warning"
-                    class="text-xs border border-border border-dashed p-2 mt-3 hidden"
+                    class="text-xs border border-border border-dashed p-2 mt-3"
+                    style="visibility: hidden"
                ></div>
            </div>

@@ -756,7 +765,8 @@
                </div>
                <div
                    id="add-token-info"
-                    class="text-xs text-muted mb-2 hidden"
+                    class="text-xs text-muted mb-2 min-h-[1.25rem]"
+                    style="visibility: hidden"
                ></div>
                <div class="mb-2">
                    <label class="block mb-1 text-xs text-muted"
@@ -814,7 +824,7 @@
                <div class="bg-well p-3 mx-1 mb-3">
                    <h3 class="font-bold mb-1">Display</h3>
                    <label
-                        class="text-xs flex items-center gap-1 cursor-pointer"
+                        class="text-xs flex items-center gap-1 cursor-pointer mb-2"
                    >
                        <input
                            type="checkbox"
@@ -822,6 +832,17 @@
                        />
                        Show tracked tokens with zero balance
                    </label>
+                    <div class="text-xs flex items-center gap-1">
+                        <label for="settings-theme">Theme:</label>
+                        <select
+                            id="settings-theme"
+                            class="border border-border p-1 bg-bg text-fg text-xs cursor-pointer"
+                        >
+                            <option value="system">System</option>
+                            <option value="light">Light</option>
+                            <option value="dark">Dark</option>
+                        </select>
+                    </div>
                </div>

                <div class="bg-well p-3 mx-1 mb-3">
@@ -938,7 +959,8 @@
                </p>
                <div
                    id="delete-wallet-flash"
-                    class="text-xs text-red-500 mb-2 hidden"
+                    class="text-xs text-red-500 mb-2 min-h-[1.25rem]"
+                    style="visibility: hidden"
                ></div>
                <div class="mb-2">
                    <label class="block mb-1">Password</label>
@@ -1013,7 +1035,8 @@
                    />
                    <div
                        id="settings-addtoken-info"
-                        class="text-xs text-muted mt-1 hidden"
+                        class="text-xs text-muted mt-1 min-h-[1.25rem]"
+                        style="visibility: hidden"
                    ></div>
                    <button
                        id="btn-settings-addtoken-manual"
@@ -1139,7 +1162,8 @@
                </div>
                <div
                    id="approve-tx-error"
-                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem] hidden"
+                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem]"
+                    style="visibility: hidden"
                ></div>
                <div class="flex justify-between">
                    <button
@@ -1167,8 +1191,10 @@

                <div
                    id="approve-sign-danger-warning"
-                    class="hidden mb-3 p-2 text-xs font-bold"
+                    class="mb-3 p-2 text-xs font-bold"
                    style="
+                        visibility: hidden;
+                        min-height: 1.25rem;
                        background: #fee2e2;
                        color: #991b1b;
                        border: 2px solid #dc2626;
@@ -1205,7 +1231,8 @@
                </div>
                <div
                    id="approve-sign-error"
-                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem] hidden"
+                    class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem]"
+                    style="visibility: hidden"
                ></div>
                <div class="flex justify-between">
                    <button
--- a/src/popup/index.js
+++ b/src/popup/index.js
@@ -6,6 +6,7 @@ const { state, saveState, loadState } = require("../shared/state");
 const { refreshPrices } = require("../shared/prices");
 const { refreshBalances } = require("../shared/balances");
 const { $, showView } = require("./views/helpers");
+const { applyTheme } = require("./theme");

 const home = require("./views/home");
 const welcome = require("./views/welcome");
@@ -176,6 +177,7 @@ async function init() {
    }

    await loadState();
+    applyTheme(state.theme);

    // Auto-default active address
    if (
--- a/src/popup/styles/main.css
+++ b/src/popup/styles/main.css
@@ -15,6 +15,18 @@
    --color-section: #dddddd;
 }

+html.dark {
+    --color-bg: #000000;
+    --color-fg: #ffffff;
+    --color-muted: #999999;
+    --color-border: #ffffff;
+    --color-border-light: #333333;
+    --color-hover: #111111;
+    --color-well: #111111;
+    --color-danger-well: #1a0000;
+    --color-section: #222222;
+}
+
 body {
    width: 396px;
    overflow-x: hidden;
@@ -29,6 +41,6 @@ body {

 .copy-flash-fade {
    transition:
-        background-color 300ms ease-out,
-        color 300ms ease-out;
+        background-color 225ms ease-out,
+        color 225ms ease-out;
 }
--- a/src/popup/theme.js
+++ b/src/popup/theme.js
@@ -0,0 +1,33 @@
+// Theme management: applies light/dark class to <html> based on preference.
+
+let mediaQuery = null;
+let mediaHandler = null;
+
+function applyTheme(theme) {
+    // Clean up previous system listener
+    if (mediaQuery && mediaHandler) {
+        mediaQuery.removeEventListener("change", mediaHandler);
+        mediaHandler = null;
+    }
+
+    if (theme === "dark") {
+        document.documentElement.classList.add("dark");
+    } else if (theme === "light") {
+        document.documentElement.classList.remove("dark");
+    } else {
+        // system
+        mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        const update = () => {
+            if (mediaQuery.matches) {
+                document.documentElement.classList.add("dark");
+            } else {
+                document.documentElement.classList.remove("dark");
+            }
+        };
+        mediaHandler = update;
+        mediaQuery.addEventListener("change", update);
+        update();
+    }
+}
+
+module.exports = { applyTheme };
--- a/src/popup/views/addToken.js
+++ b/src/popup/views/addToken.js
@@ -7,7 +7,8 @@ const { log } = require("../../shared/log");

 function show() {
    $("add-token-address").value = "";
-    $("add-token-info").classList.add("hidden");
+    $("add-token-info").textContent = "";
+    $("add-token-info").style.visibility = "hidden";
    const list = $("common-token-list");
    list.innerHTML = getTopTokens(25)
        .map(
@@ -45,7 +46,7 @@ function init(ctx) {
        }
        const infoEl = $("add-token-info");
        infoEl.textContent = "Looking up token...";
-        infoEl.classList.remove("hidden");
+        infoEl.style.visibility = "visible";
        log.debugf("Looking up token contract", contractAddr);
        try {
            const info = await lookupTokenInfo(contractAddr, state.rpcUrl);
@@ -63,7 +64,8 @@ function init(ctx) {
            const detail = e.shortMessage || e.message || String(e);
            log.errorf("Token lookup failed for", contractAddr, detail);
            showFlash(detail);
-            infoEl.classList.add("hidden");
+            infoEl.textContent = "";
+            infoEl.style.visibility = "hidden";
        }
    });

--- a/src/popup/views/addWallet.js
+++ b/src/popup/views/addWallet.js
@@ -71,7 +71,7 @@ function show() {
    $("import-xprv-key").value = "";
    $("add-wallet-password").value = "";
    $("add-wallet-password-confirm").value = "";
-    $("add-wallet-phrase-warning").classList.add("hidden");
+    $("add-wallet-phrase-warning").style.visibility = "hidden";
    switchMode("mnemonic");
    showView("add-wallet");
 }
@@ -281,7 +281,7 @@ function init(ctx) {
    // Generate mnemonic
    $("btn-generate-phrase").addEventListener("click", () => {
        $("wallet-mnemonic").value = generateMnemonic();
-        $("add-wallet-phrase-warning").classList.remove("hidden");
+        $("add-wallet-phrase-warning").style.visibility = "visible";
    });

    // Import / confirm
--- a/src/popup/views/addressDetail.js
+++ b/src/popup/views/addressDetail.js
@@ -95,10 +95,6 @@ function show() {
 function isoDate(timestamp) {
    const d = new Date(timestamp * 1000);
    const pad = (n) => String(n).padStart(2, "0");
-    const off = -d.getTimezoneOffset();
-    const sign = off >= 0 ? "+" : "-";
-    const absOff = Math.abs(off);
-    const tz = sign + pad(Math.floor(absOff / 60)) + ":" + pad(absOff % 60);
    return (
        d.getFullYear() +
        "-" +
@@ -110,8 +106,7 @@ function isoDate(timestamp) {
        ":" +
        pad(d.getMinutes()) +
        ":" +
-        pad(d.getSeconds()) +
-        tz
+        pad(d.getSeconds())
    );
 }

@@ -317,8 +312,8 @@ function init(_ctx) {
        $("export-privkey-address").textContent = addr.address;
        $("export-privkey-address").dataset.full = addr.address;
        $("export-privkey-password").value = "";
-        $("export-privkey-flash").classList.add("hidden");
        $("export-privkey-flash").textContent = "";
+        $("export-privkey-flash").style.visibility = "hidden";
        $("export-privkey-password-section").classList.remove("hidden");
        $("export-privkey-result").classList.add("hidden");
        $("export-privkey-value").textContent = "";
@@ -329,7 +324,7 @@ function init(_ctx) {
        const password = $("export-privkey-password").value;
        if (!password) {
            $("export-privkey-flash").textContent = "Password is required.";
-            $("export-privkey-flash").classList.remove("hidden");
+            $("export-privkey-flash").style.visibility = "visible";
            return;
        }
        const btn = $("btn-export-privkey-confirm");
@@ -350,10 +345,10 @@ function init(_ctx) {
            $("export-privkey-password-section").classList.add("hidden");
            $("export-privkey-value").textContent = privateKey;
            $("export-privkey-result").classList.remove("hidden");
-            $("export-privkey-flash").classList.add("hidden");
+            $("export-privkey-flash").style.visibility = "hidden";
        } catch {
            $("export-privkey-flash").textContent = "Wrong password.";
-            $("export-privkey-flash").classList.remove("hidden");
+            $("export-privkey-flash").style.visibility = "visible";
        } finally {
            btn.disabled = false;
            btn.classList.remove("text-muted");
--- a/src/popup/views/addressToken.js
+++ b/src/popup/views/addressToken.js
@@ -48,10 +48,6 @@ function etherscanAddressLink(address) {
 function isoDate(timestamp) {
    const d = new Date(timestamp * 1000);
    const pad = (n) => String(n).padStart(2, "0");
-    const off = -d.getTimezoneOffset();
-    const sign = off >= 0 ? "+" : "-";
-    const absOff = Math.abs(off);
-    const tz = sign + pad(Math.floor(absOff / 60)) + ":" + pad(absOff % 60);
    return (
        d.getFullYear() +
        "-" +
@@ -63,8 +59,7 @@ function isoDate(timestamp) {
        ":" +
        pad(d.getMinutes()) +
        ":" +
-        pad(d.getSeconds()) +
-        tz
+        pad(d.getSeconds())
    );
 }

--- a/src/popup/views/approval.js
+++ b/src/popup/views/approval.js
@@ -269,7 +269,7 @@ function showTxApproval(details) {
    }

    $("approve-tx-password").value = "";
-    $("approve-tx-error").classList.add("hidden");
+    hideError("approve-tx-error");

    showView("approve-tx");
 }
@@ -351,10 +351,10 @@ function showSignApproval(details) {
    if (warningEl) {
        if (sp.dangerWarning) {
            warningEl.textContent = sp.dangerWarning;
-            warningEl.classList.remove("hidden");
+            warningEl.style.visibility = "visible";
        } else {
            warningEl.textContent = "";
-            warningEl.classList.add("hidden");
+            warningEl.style.visibility = "hidden";
        }
    }

--- a/src/popup/views/confirmTx.js
+++ b/src/popup/views/confirmTx.js
@@ -186,9 +186,10 @@ function show(txInfo) {
                    `<div class="border border-border border-dashed p-2 mb-1 text-xs font-bold">WARNING: ${w}</div>`,
            )
            .join("");
-        warningsEl.classList.remove("hidden");
+        warningsEl.style.visibility = "visible";
    } else {
-        warningsEl.classList.add("hidden");
+        warningsEl.innerHTML = "";
+        warningsEl.style.visibility = "hidden";
    }

    // Check for errors
@@ -226,11 +227,12 @@ function show(txInfo) {
        errorsEl.innerHTML = errors
            .map((e) => `<div class="text-xs">${e}</div>`)
            .join("");
-        errorsEl.classList.remove("hidden");
+        errorsEl.style.visibility = "visible";
        sendBtn.disabled = true;
        sendBtn.classList.add("text-muted");
    } else {
-        errorsEl.classList.add("hidden");
+        errorsEl.innerHTML = "";
+        errorsEl.style.visibility = "hidden";
        sendBtn.disabled = false;
        sendBtn.classList.remove("text-muted");
    }
@@ -240,7 +242,7 @@ function show(txInfo) {
    hideError("confirm-tx-password-error");

    // Gas estimate — show placeholder then fetch async
-    $("confirm-fee").classList.remove("hidden");
+    $("confirm-fee").style.visibility = "visible";
    $("confirm-fee-amount").textContent = "Estimating...";
    state.viewData = { pendingTx: txInfo };
    showView("confirm-tx");
--- a/src/popup/views/deleteWallet.js
+++ b/src/popup/views/deleteWallet.js
@@ -12,7 +12,7 @@ function show(walletIdx) {
        wallet.name || "Wallet " + (walletIdx + 1);
    $("delete-wallet-password").value = "";
    $("delete-wallet-flash").textContent = "";
-    $("delete-wallet-flash").classList.add("hidden");
+    $("delete-wallet-flash").style.visibility = "hidden";
    showView("delete-wallet-confirm");
 }

@@ -29,14 +29,14 @@ function init(_ctx) {
        if (!pw) {
            $("delete-wallet-flash").textContent =
                "Please enter your password.";
-            $("delete-wallet-flash").classList.remove("hidden");
+            $("delete-wallet-flash").style.visibility = "visible";
            return;
        }

        if (deleteWalletIndex === null) {
            $("delete-wallet-flash").textContent =
                "No wallet selected for deletion.";
-            $("delete-wallet-flash").classList.remove("hidden");
+            $("delete-wallet-flash").style.visibility = "visible";
            return;
        }

@@ -52,7 +52,7 @@ function init(_ctx) {
            await decryptWithPassword(wallet.encryptedSecret, pw);
        } catch (_e) {
            $("delete-wallet-flash").textContent = "Wrong password.";
-            $("delete-wallet-flash").classList.remove("hidden");
+            $("delete-wallet-flash").style.visibility = "visible";
            btn.disabled = false;
            btn.classList.remove("text-muted");
            return;
--- a/src/popup/views/helpers.js
+++ b/src/popup/views/helpers.js
@@ -40,11 +40,13 @@ function $(id) {
 function showError(id, msg) {
    const el = $(id);
    el.textContent = msg;
-    el.classList.remove("hidden");
+    el.style.visibility = "visible";
 }

 function hideError(id) {
-    $(id).classList.add("hidden");
+    const el = $(id);
+    el.textContent = "";
+    el.style.visibility = "hidden";
 }

 function showView(name) {
@@ -226,10 +228,6 @@ function formatAddressHtml(address, ensName, maxLen, title) {
 function isoDate(timestamp) {
    const d = new Date(timestamp * 1000);
    const pad = (n) => String(n).padStart(2, "0");
-    const off = -d.getTimezoneOffset();
-    const sign = off >= 0 ? "+" : "-";
-    const absOff = Math.abs(off);
-    const tz = sign + pad(Math.floor(absOff / 60)) + ":" + pad(absOff % 60);
    return (
        d.getFullYear() +
        "-" +
@@ -241,8 +239,7 @@ function isoDate(timestamp) {
        ":" +
        pad(d.getMinutes()) +
        ":" +
-        pad(d.getSeconds()) +
-        tz
+        pad(d.getSeconds())
    );
 }

@@ -272,8 +269,8 @@ function flashCopyFeedback(el) {
        el.classList.add("copy-flash-fade");
        setTimeout(() => {
            el.classList.remove("copy-flash-fade");
-        }, 350);
-    }, 100);
+        }, 275);
+    }, 75);
 }

 module.exports = {
--- a/src/popup/views/receive.js
+++ b/src/popup/views/receive.js
@@ -53,9 +53,10 @@ function show() {
            "This is an ERC-20 token. Only send " +
            symbol +
            " on the Ethereum network to this address. Sending tokens on other networks will result in permanent loss.";
-        warningEl.classList.remove("hidden");
+        warningEl.style.visibility = "visible";
    } else {
-        warningEl.classList.add("hidden");
+        warningEl.textContent = "";
+        warningEl.style.visibility = "hidden";
    }
    showView("receive");
 }
--- a/src/popup/views/settings.js
+++ b/src/popup/views/settings.js
@@ -1,4 +1,5 @@
 const { $, showView, showFlash, escapeHtml } = require("./helpers");
+const { applyTheme } = require("../theme");
 const { state, saveState } = require("../../shared/state");
 const { ETHEREUM_MAINNET_CHAIN_ID } = require("../../shared/constants");
 const { log, debugFetch } = require("../../shared/log");
@@ -214,6 +215,13 @@ function init(ctx) {
        await saveState();
    });

+    $("settings-theme").value = state.theme;
+    $("settings-theme").addEventListener("change", async () => {
+        state.theme = $("settings-theme").value;
+        await saveState();
+        applyTheme(state.theme);
+    });
+
    $("settings-hide-low-holders").checked = state.hideLowHolderTokens;
    $("settings-hide-low-holders").addEventListener("change", async () => {
        state.hideLowHolderTokens = $("settings-hide-low-holders").checked;
--- a/src/popup/views/settingsAddToken.js
+++ b/src/popup/views/settingsAddToken.js
@@ -73,7 +73,8 @@ function renderDropdown() {

 function show() {
    $("settings-addtoken-address").value = "";
-    $("settings-addtoken-info").classList.add("hidden");
+    $("settings-addtoken-info").textContent = "";
+    $("settings-addtoken-info").style.visibility = "hidden";
    renderTop10();
    renderDropdown();
    showView("settings-addtoken");
@@ -129,7 +130,7 @@ function init(_ctx) {
        }
        const infoEl = $("settings-addtoken-info");
        infoEl.textContent = "Looking up token...";
-        infoEl.classList.remove("hidden");
+        infoEl.style.visibility = "visible";
        log.debugf("Looking up token contract", addr);
        try {
            const info = await lookupTokenInfo(addr, state.rpcUrl);
@@ -143,7 +144,8 @@ function init(_ctx) {
            await saveState();
            showFlash("Added " + info.symbol);
            $("settings-addtoken-address").value = "";
-            infoEl.classList.add("hidden");
+            infoEl.textContent = "";
+            infoEl.style.visibility = "hidden";
            renderTop10();
            renderDropdown();
            ctx.doRefreshAndRender();
@@ -151,7 +153,8 @@ function init(_ctx) {
            const detail = e.shortMessage || e.message || String(e);
            log.errorf("Token lookup failed for", addr, detail);
            showFlash(detail);
-            infoEl.classList.add("hidden");
+            infoEl.textContent = "";
+            infoEl.style.visibility = "hidden";
        }
    });
 }
--- a/src/shared/state.js
+++ b/src/shared/state.js
@@ -25,6 +25,7 @@ const DEFAULT_STATE = {
    dustThresholdGwei: 100000,
    fraudContracts: [],
    tokenHolderCache: {},
+    theme: "system",
 };

 const state = {
@@ -55,6 +56,7 @@ async function saveState() {
        dustThresholdGwei: state.dustThresholdGwei,
        fraudContracts: state.fraudContracts,
        tokenHolderCache: state.tokenHolderCache,
+        theme: state.theme,
        currentView: state.currentView,
        selectedWallet: state.selectedWallet,
        selectedAddress: state.selectedAddress,
@@ -110,6 +112,7 @@ async function loadState() {
                : 100000;
        state.fraudContracts = saved.fraudContracts || [];
        state.tokenHolderCache = saved.tokenHolderCache || {};
+        state.theme = saved.theme || "system";
        state.currentView = saved.currentView || null;
        state.selectedWallet =
            saved.selectedWallet !== undefined ? saved.selectedWallet : null;
--- a/src/shared/uniswap.js
+++ b/src/shared/uniswap.js
@@ -487,10 +487,7 @@ function decode(data, toAddress) {
        const deadlineDate = new Date(Number(deadline) * 1000);
        details.push({
            label: "Deadline",
-            value: deadlineDate
-                .toISOString()
-                .replace("T", " ")
-                .replace(".000Z", "Z"),
+            value: deadlineDate.toISOString().replace("T", " ").slice(0, 19),
        });

        return {
Author	SHA1	Message	Date
user	be06bd8f0c	fix: improve dark mode contrast for wells and balance display All checks were successful check / check (push) Successful in 10s Details - Change dark mode --color-well from #0a0a0a to #111111 for visible contrast against #000000 background - Add explicit text-fg class to balance display element to ensure white text in dark mode	2026-03-01 03:38:27 -08:00
user	2bdb547995	feat: add theme setting (Light/Dark/System) with dark mode Add theme preference (light/dark/system) stored in extension state. System mode follows prefers-color-scheme and listens for changes. Dark mode inverts the monochrome palette (white-on-black). Theme selector added to Display section in settings. Closes #125	2026-03-01 03:36:42 -08:00
Jeffrey Paul	834228b572	Merge pull request 'fix: reserve space for all error/status messages — closes #123 ' (#124 ) from fix/issue-123-layout-shift-audit into main All checks were successful check / check (push) Successful in 8s Details Reviewed-on: #124	2026-03-01 12:33:08 +01:00
clawbot	813993f17c	fix: reserve space for all error/status messages — closes #123 All checks were successful check / check (push) Successful in 22s Details Replace display:none (hidden class) with visibility:hidden/visible for all error, warning, and status message elements across the extension UI. This prevents layout shift when messages appear or disappear. Changes: - helpers.js: showError/hideError now use visibility instead of hidden class - index.html: all error/status divs use visibility:hidden + min-height - confirmTx.js: warnings, errors, fee section use visibility - approval.js: tx-error, sign-error, danger-warning use visibility - addressDetail.js: export-privkey-flash uses visibility - deleteWallet.js: delete-wallet-flash uses visibility - addWallet.js: phrase-warning uses visibility - receive.js: erc20-warning uses visibility - addToken.js: add-token-info uses visibility - settingsAddToken.js: settings-addtoken-info uses visibility	2026-02-28 16:30:43 -08:00
Jeffrey Paul	5f01d9f111	Merge pull request 'feat: speed up copy-flash timing by ~25% — follow-up to #113 ' (#121 ) from fix/issue-100-faster-copy-flash into main All checks were successful check / check (push) Successful in 11s Details Reviewed-on: #121	2026-03-01 01:21:24 +01:00
user	d78af3ec80	feat: speed up copy-flash timing by ~25% All checks were successful check / check (push) Successful in 20s Details Reduce active phase from 100ms to 75ms, fade transition from 300ms to 225ms, and cleanup delay from 350ms to 275ms for snappier feedback. Refs #100	2026-02-28 16:17:07 -08:00