Fix settings UX contrast and unify header/icon behavior

Author: baboonzero

background/service-worker.js

@@ -45,6 +45,10 @@ function getDashboardUrl() {
   return chrome.runtime.getURL("ui/dashboard.html");
 }
 
+function getSettingsUrl() {
+  return chrome.runtime.getURL("ui/settings.html");
+}
+
 function isTrackableTab(tab) {
   if (!tab || typeof tab.id !== "number" || typeof tab.windowId !== "number") {
     return false;
@@ -549,6 +553,22 @@ chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
     return false;
   }
 
+  if (message?.type === "open-settings") {
+    if (message.surface === "full" && typeof _sender?.tab?.id === "number") {
+      chrome.tabs
+        .update(_sender.tab.id, { url: getSettingsUrl() })
+        .then(() => sendResponse({ ok: true, mode: "same_tab" }))
+        .catch((error) => sendResponse({ ok: false, error: String(error) }));
+      return true;
+    }
+
+    chrome.runtime
+      .openOptionsPage()
+      .then(() => sendResponse({ ok: true, mode: "options_page" }))
+      .catch((error) => sendResponse({ ok: false, error: String(error) }));
+    return true;
+  }
+
   if (message?.type === "open-side-panel") {
     openPanelForAllWindows()
       .then((opened) => {

project-history.md

@@ -167,6 +167,15 @@ Chronological execution log:
     - switched native side-panel behavior to `openPanelOnActionClick: true`
     - extended smoke assertions to require side-panel API availability and configured action-click behavior
 
+31. Fixed post-release UI consistency and settings workflow regressions:
+    - replaced synthetic hero badge with app icon asset on dashboard/panel/settings headers
+    - corrected dashboard tagline copy to present tense ("Surface what matters")
+    - fixed dark-mode settings dropdown contrast (readable select + option colors)
+    - changed full-dashboard Settings action to open settings in the same tab via runtime message routing
+    - extended automated coverage:
+      - e2e test for theme select contrast in dark/light
+      - smoke assertions for same-tab settings routing and cross-page theme sync
+
 ## 4. What Were The Decisions That We Took?
 
 ### Product/Architecture Decisions

scripts/extension-smoke-test.mjs

@@ -25,7 +25,6 @@ async function run() {
 
     const extensionId = new URL(serviceWorker.url()).host;
     const dashboardUrl = `chrome-extension://${extensionId}/ui/dashboard.html`;
-    const settingsUrl = `chrome-extension://${extensionId}/ui/settings.html`;
     const panelUrl = `chrome-extension://${extensionId}/ui/panel.html`;
 
     const dashboardPage = await context.newPage();
@@ -45,9 +44,51 @@ async function run() {
     await panelPage.goto(panelUrl, { waitUntil: "domcontentloaded" });
     const panelViewCount = await panelPage.locator('[data-view]').count();
 
-    const settingsPage = await context.newPage();
-    await settingsPage.goto(settingsUrl, { waitUntil: "domcontentloaded" });
-    const settingsHeading = await settingsPage.textContent("h1");
+    await dashboardPage.click("#theme-toggle");
+    await dashboardPage.waitForTimeout(250);
+    const dashboardThemeAfterToggle = await dashboardPage.getAttribute("body", "data-theme");
+
+    await dashboardPage.click("#open-settings");
+    await dashboardPage.waitForURL((url) => url.toString().endsWith("/ui/settings.html"), { timeout: 5_000 });
+    const settingsHeading = await dashboardPage.textContent("h1");
+    const settingsOpenedInCurrentTab = dashboardPage.url().endsWith("/ui/settings.html");
+    const settingsTheme = await dashboardPage.getAttribute("body", "data-theme");
+    const settingsThemeValue = await dashboardPage.inputValue("#theme");
+    const themeSelectContrast = await dashboardPage.evaluate(() => {
+      const select = document.querySelector("#theme");
+      if (!select) {
+        return 0;
+      }
+
+      const parseRgb = (value) => {
+        const matches = String(value).match(/\d+(\.\d+)?/g);
+        if (!matches || matches.length < 3) {
+          return [0, 0, 0];
+        }
+        return matches.slice(0, 3).map((part) => Number(part));
+      };
+
+      const luminance = ([r, g, b]) => {
+        const toLinear = (channel) => {
+          const value = channel / 255;
+          if (value <= 0.03928) {
+            return value / 12.92;
+          }
+          return ((value + 0.055) / 1.055) ** 2.4;
+        };
+
+        return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+      };
+
+      const styles = window.getComputedStyle(select);
+      const fg = parseRgb(styles.color);
+      const bg = parseRgb(styles.backgroundColor);
+      const l1 = luminance(fg);
+      const l2 = luminance(bg);
+      const lighter = Math.max(l1, l2);
+      const darker = Math.min(l1, l2);
+      return Number(((lighter + 0.05) / (darker + 0.05)).toFixed(2));
+    });
 
     const result = {
       extensionId,
@@ -61,7 +102,12 @@ async function run() {
       paused: status?.paused,
       sidePanelApiAvailable: status?.sidePanelApiAvailable,
       openPanelOnActionClick: status?.openPanelOnActionClick,
-      settingsHeading
+      settingsHeading,
+      settingsOpenedInCurrentTab,
+      dashboardThemeAfterToggle,
+      settingsTheme,
+      settingsThemeValue,
+      themeSelectContrast
     };
 
     console.log(JSON.stringify(result, null, 2));
@@ -76,6 +122,11 @@ async function run() {
       result.runtimeStatusOk !== true ||
       result.sidePanelApiAvailable !== true ||
       result.openPanelOnActionClick !== true ||
+      result.settingsOpenedInCurrentTab !== true ||
+      result.dashboardThemeAfterToggle !== "light" ||
+      result.settingsTheme !== "light" ||
+      result.settingsThemeValue !== "light" ||
+      Number(result.themeSelectContrast || 0) < 4.5 ||
       result.settingsHeading !== "Settings"
     ) {
       process.exitCode = 1;

tests/e2e/dashboard.spec.js

@@ -196,7 +196,7 @@ test("all tabs view includes never-focused and focuses existing tab", async ({ p
   expect(calls.some((item) => item.api === "tabs.update")).toBeTruthy();
 });
 
-test("most recent view handles navigation actions and settings", async ({ page }) => {
+test("most recent view handles navigation actions and routes settings through runtime", async ({ page }) => {
   const now = Date.now();
   const activities = [
     makeActivity({
@@ -227,6 +227,62 @@ test("most recent view handles navigation actions and settings", async ({ page }
   expect(
     calls.some((item) => item.api === "tabs.create" && item.options?.url === "https://example.com/closed")
   ).toBeTruthy();
-  expect(calls.some((item) => item.api === "runtime.openOptionsPage")).toBeTruthy();
+  expect(
+    calls.some(
+      (item) =>
+        item.api === "runtime.sendMessage" &&
+        item.message?.type === "open-settings" &&
+        item.message?.surface === "full"
+    )
+  ).toBeTruthy();
   expect(calls.some((item) => item.api === "runtime.sendMessage" && item.message?.type === "open-side-panel")).toBeTruthy();
 });
+
+test("settings theme select maintains readable contrast in dark and light modes", async ({ page }) => {
+  await page.goto("/ui/settings.html");
+
+  const contrastRatios = await page.evaluate(() => {
+    const parseRgb = (value) => {
+      const matches = String(value).match(/\d+(\.\d+)?/g);
+      if (!matches || matches.length < 3) {
+        return [0, 0, 0];
+      }
+      return matches.slice(0, 3).map((part) => Number(part));
+    };
+
+    const luminance = ([r, g, b]) => {
+      const toLinear = (channel) => {
+        const value = channel / 255;
+        if (value <= 0.03928) {
+          return value / 12.92;
+        }
+        return ((value + 0.055) / 1.055) ** 2.4;
+      };
+
+      return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+    };
+
+    const getRatio = () => {
+      const select = document.querySelector("#theme");
+      const styles = window.getComputedStyle(select);
+      const fg = parseRgb(styles.color);
+      const bg = parseRgb(styles.backgroundColor);
+      const l1 = luminance(fg);
+      const l2 = luminance(bg);
+      const lighter = Math.max(l1, l2);
+      const darker = Math.min(l1, l2);
+      return (lighter + 0.05) / (darker + 0.05);
+    };
+
+    const darkRatio = getRatio();
+    const themeSelect = document.querySelector("#theme");
+    themeSelect.value = "light";
+    themeSelect.dispatchEvent(new Event("change", { bubbles: true }));
+    const lightRatio = getRatio();
+
+    return { darkRatio, lightRatio };
+  });
+
+  expect(contrastRatios.darkRatio).toBeGreaterThanOrEqual(4.5);
+  expect(contrastRatios.lightRatio).toBeGreaterThanOrEqual(4.5);
+});

ui/activity.css

@@ -151,29 +151,16 @@ body[data-surface="panel"] .hero {
 .brand-mark {
   width: 42px;
   height: 42px;
-  position: relative;
   border-radius: 50%;
-  background: radial-gradient(circle at 35% 35%, var(--accent), var(--accent-strong));
-  box-shadow: 0 0 0 3px var(--accent-soft), 0 10px 20px rgba(0, 0, 0, 0.24);
-}
-
-.brand-mark .ring {
-  position: absolute;
-  inset: -5px;
-  border-radius: 50%;
-  border: 1px solid rgba(255, 255, 255, 0.35);
-}
-
-.brand-mark .ring-b {
-  inset: -10px;
-  opacity: 0.55;
+  display: grid;
+  place-items: center;
 }
 
-.brand-mark .pulse {
-  position: absolute;
-  inset: 14px;
-  border-radius: 50%;
-  background: rgba(2, 7, 23, 0.45);
+.brand-mark img {
+  width: 42px;
+  height: 42px;
+  display: block;
+  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
 }
 
 h1 {

ui/activity.js

@@ -283,7 +283,10 @@ function bindEvents() {
   });
 
   openSettingsButton?.addEventListener("click", () => {
-    chrome.runtime.openOptionsPage();
+    const surface = bodyElement.dataset.surface === "panel" ? "panel" : "full";
+    chrome.runtime.sendMessage({ type: "open-settings", surface }).catch((error) => {
+      console.error("Open settings failed", error);
+    });
   });
 
   expandDashboardButton?.addEventListener("click", async () => {

ui/dashboard.html

@@ -12,13 +12,11 @@
       <header class="hero">
         <div class="brand">
           <div class="brand-mark" aria-hidden="true">
-            <span class="ring ring-a"></span>
-            <span class="ring ring-b"></span>
-            <span class="pulse"></span>
+            <img src="../assets/icons/icon-48.png" alt="" />
           </div>
           <div>
             <h1>Chrome Activity Reader</h1>
-            <p class="subtitle">Track everything. Surface what mattered.</p>
+            <p class="subtitle">Track everything. Surface what matters.</p>
           </div>
         </div>
         <div class="hero-actions">

ui/panel.html

@@ -12,9 +12,7 @@
       <header class="hero">
         <div class="brand">
           <div class="brand-mark" aria-hidden="true">
-            <span class="ring ring-a"></span>
-            <span class="ring ring-b"></span>
-            <span class="pulse"></span>
+            <img src="../assets/icons/icon-48.png" alt="" />
           </div>
           <div>
             <h1>Activity Reader</h1>

ui/settings.html

@@ -39,15 +39,53 @@
         border: 1px solid var(--border);
         padding: 9px 12px;
         color: var(--ink);
-        background: rgba(0, 0, 0, 0.12);
         font: inherit;
       }
 
-      body[data-theme="light"] textarea,
-      body[data-theme="light"] select {
+      textarea {
+        background: rgba(0, 0, 0, 0.12);
+      }
+
+      select {
+        appearance: none;
+        padding-right: 34px;
+        background-repeat: no-repeat;
+        background-position:
+          calc(100% - 17px) calc(50% - 2px),
+          calc(100% - 12px) calc(50% - 2px);
+        background-size: 5px 5px, 5px 5px;
+      }
+
+      body[data-theme="dark"] select {
+        color: #ecf2ff;
+        background-color: #121f3f;
+        background-image:
+          linear-gradient(45deg, transparent 50%, #97a6cb 50%),
+          linear-gradient(135deg, #97a6cb 50%, transparent 50%);
+      }
+
+      body[data-theme="dark"] select option {
+        color: #ecf2ff;
+        background: #121f3f;
+      }
+
+      body[data-theme="light"] textarea {
         background: rgba(255, 255, 255, 0.86);
       }
 
+      body[data-theme="light"] select {
+        color: #0d1531;
+        background-color: #ffffff;
+        background-image:
+          linear-gradient(45deg, transparent 50%, #4f5a7f 50%),
+          linear-gradient(135deg, #4f5a7f 50%, transparent 50%);
+      }
+
+      body[data-theme="light"] select option {
+        color: #0d1531;
+        background: #ffffff;
+      }
+
       textarea {
         min-height: 140px;
         resize: vertical;
@@ -77,9 +115,7 @@
       <header class="hero">
         <div class="brand">
           <div class="brand-mark" aria-hidden="true">
-            <span class="ring ring-a"></span>
-            <span class="ring ring-b"></span>
-            <span class="pulse"></span>
+            <img src="../assets/icons/icon-48.png" alt="" />
           </div>
           <div>
             <h1>Settings</h1>