diff --git a/src/popup/styles/main.css b/src/popup/styles/main.css index f0b3a24..30532d5 100644 --- a/src/popup/styles/main.css +++ b/src/popup/styles/main.css @@ -10,7 +10,7 @@ --color-border: #000000; --color-border-light: #cccccc; --color-hover: #eeeeee; - --color-well: #f5f5f5; + --color-well: #e8e8e8; --color-danger-well: #fef2f2; --color-section: #dddddd; } diff --git a/src/popup/views/settings.js b/src/popup/views/settings.js index 6d5c48e..fe5cb02 100644 --- a/src/popup/views/settings.js +++ b/src/popup/views/settings.js @@ -1,4 +1,10 @@ -const { $, showView, showFlash, escapeHtml } = require("./helpers"); +const { + $, + showView, + showFlash, + escapeHtml, + flashCopyFeedback, +} = require("./helpers"); const { applyTheme } = require("../theme"); const { state, saveState, currentNetwork } = require("../../shared/state"); const { NETWORKS, SUPPORTED_CHAIN_IDS } = require("../../shared/networks"); @@ -314,7 +320,18 @@ function init(ctx) { ctx.showSettingsAddTokenView, ); - // Easter egg: click version 10 times to reveal the debug well + // Bright saturated colors for easter egg flashes (clicks 6–10) + const easterEggColors = [ + "#ff0055", // hot pink + "#00cc44", // vivid green + "#3366ff", // electric blue + "#ff9900", // bright orange + "#aa00ff", // vivid purple + ]; + + // Easter egg: click version 10 times to reveal the debug well. + // Each click does a copy-flash animation. After 5 clicks, each + // additional click flashes a different bright saturated color. $("about-version").addEventListener("click", () => { versionClickCount++; clearTimeout(versionClickTimer); @@ -322,6 +339,29 @@ function init(ctx) { versionClickTimer = setTimeout(() => { versionClickCount = 0; }, 3000); + + const el = $("about-version"); + + if (versionClickCount > 5) { + // Colored flash for clicks 6–10 + const colorIdx = versionClickCount - 6; + const color = easterEggColors[colorIdx % easterEggColors.length]; + el.classList.remove("copy-flash-fade"); + el.style.backgroundColor = color; + el.style.color = "#ffffff"; + setTimeout(() => { + el.style.backgroundColor = ""; + el.style.color = ""; + el.classList.add("copy-flash-fade"); + setTimeout(() => { + el.classList.remove("copy-flash-fade"); + }, 275); + }, 75); + } else { + // Standard copy-flash for clicks 1–5 + flashCopyFeedback(el); + } + if (versionClickCount >= 10) { versionClickCount = 0; clearTimeout(versionClickTimer);