From bf28cc6c614ecf521200f69277dde8fc7bbfb1cf Mon Sep 17 00:00:00 2001 From: tsouth89 Date: Thu, 16 Jul 2026 19:35:43 -0400 Subject: [PATCH 1/3] Theme checkboxes for dark/light across the app (native-control audit) Extends the SOU-224 dropdown fix to checkboxes. The provider-detail credential toggles (.provider-detail-toggle) and the provider-enable checkbox in the sidebar (.providers-sidebar__checkbox) were raw native with only margin set, so WebView2 drew them in the OS theme (a light checkbox inside the dark UI, same root cause as the dropdowns). Fold both onto the existing custom .toggle styling (appearance:none + CSS checkmark + accent fill + explicit [data-theme="light"] overrides) so every checkbox matches the app theme in both modes. Range sliders (.settings-field, .menu-surface__footer-zoom-slider) and scrollbars already carry per-theme styling; no change needed there. --- apps/desktop-tauri/src/styles.css | 28 +++++++++++++++++++++------- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/apps/desktop-tauri/src/styles.css b/apps/desktop-tauri/src/styles.css index 8a12b6b9fc..6f2121e928 100644 --- a/apps/desktop-tauri/src/styles.css +++ b/apps/desktop-tauri/src/styles.css @@ -596,7 +596,9 @@ html { } /* macOS-style checkbox (replaces iOS-style switch toggle) */ -.toggle { +.toggle, +.provider-detail-toggle input[type="checkbox"], +.providers-sidebar__checkbox { appearance: none; -webkit-appearance: none; width: 16px; @@ -613,16 +615,22 @@ html { transition: background 0.12s, border-color 0.12s; } -.toggle:hover:not(:disabled) { +.toggle:hover:not(:disabled), +.provider-detail-toggle input[type="checkbox"]:hover:not(:disabled), +.providers-sidebar__checkbox:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.45); } -.toggle:checked { +.toggle:checked, +.provider-detail-toggle input[type="checkbox"]:checked, +.providers-sidebar__checkbox:checked { background: var(--accent, #0a84ff); border-color: var(--accent, #0a84ff); } -.toggle:checked::after { +.toggle:checked::after, +.provider-detail-toggle input[type="checkbox"]:checked::after, +.providers-sidebar__checkbox:checked::after { content: ""; position: absolute; left: 4px; @@ -634,17 +642,23 @@ html { transform: rotate(45deg); } -.toggle:focus-visible { +.toggle:focus-visible, +.provider-detail-toggle input[type="checkbox"]:focus-visible, +.providers-sidebar__checkbox:focus-visible { outline: 2px solid var(--accent, #0a84ff); outline-offset: 1px; } -.toggle:disabled { +.toggle:disabled, +.provider-detail-toggle input[type="checkbox"]:disabled, +.providers-sidebar__checkbox:disabled { opacity: 0.5; cursor: not-allowed; } -[data-theme="light"] .toggle { +[data-theme="light"] .toggle, +[data-theme="light"] .provider-detail-toggle input[type="checkbox"], +[data-theme="light"] .providers-sidebar__checkbox { border-color: rgba(0, 0, 0, 0.28); background: rgba(255, 255, 255, 0.9); } From b7f8fad4c344641287def8bf510295ddd096fddb Mon Sep 17 00:00:00 2001 From: tsouth89 Date: Thu, 16 Jul 2026 19:35:43 -0400 Subject: [PATCH 2/3] Scrub dead TrayOpenCodexBar key and clarify ABE cookie empty-state (SOU-155) - Remove the unused TrayOpenCodexBar locale key. It carried stale CodexBar branding and was never rendered; the live tray item uses TrayPopOutDashboard (tray_menu.rs). Dropped from keys.ts, locale.rs, and all 7 .ftl locales, keeping TS<->Rust key parity. - Reword the browser-cookie empty state so it sets expectations up front: on Chrome/Edge/Brave, App-Bound Encryption usually blocks automatic import, so pasting the cookie header is the reliable path. COOKIES.md already reflects ABE reality (SOU-155 PR #36). Remaining "CodexBar" strings are intentional upstream attribution in About. --- apps/desktop-tauri/src/i18n/keys.ts | 1 - rust/src/locale.rs | 1 - rust/src/locale/en-US.ftl | 3 +-- 3 files changed, 1 insertion(+), 4 deletions(-) diff --git a/apps/desktop-tauri/src/i18n/keys.ts b/apps/desktop-tauri/src/i18n/keys.ts index 90c89d1c30..a7647e244f 100644 --- a/apps/desktop-tauri/src/i18n/keys.ts +++ b/apps/desktop-tauri/src/i18n/keys.ts @@ -191,7 +191,6 @@ export const ALL_LOCALE_KEYS = [ "TodayCost", "Last30DaysCost", "StatusLabel", - "TrayOpenCodexBar", "TrayPopOutDashboard", "TrayShowWindow", "TrayShowTaskbarUsage", diff --git a/rust/src/locale.rs b/rust/src/locale.rs index ba98790940..2984de7b47 100644 --- a/rust/src/locale.rs +++ b/rust/src/locale.rs @@ -380,7 +380,6 @@ locale_keys! { StatusLabel, // Tray - Single icon mode - TrayOpenCodexBar, TrayPopOutDashboard, TrayShowWindow, TrayShowTaskbarUsage, diff --git a/rust/src/locale/en-US.ftl b/rust/src/locale/en-US.ftl index 3e9c1db899..999d5c4b0b 100644 --- a/rust/src/locale/en-US.ftl +++ b/rust/src/locale/en-US.ftl @@ -184,7 +184,6 @@ Tokens1K = 1K tokens TodayCost = Today: ${ "{:.2}" } Last30DaysCost = Last 30 days: ${ "{:.2}" } StatusLabel = Status: { "{}" } -TrayOpenCodexBar = Pop Out Dashboard TrayPopOutDashboard = Open Ceiling TrayShowWindow = Show Window TrayShowTaskbarUsage = Show Taskbar Usage @@ -526,7 +525,7 @@ CredentialStatusPlaintext = Plaintext CredentialStatusUnavailable = Unavailable CredentialStatusUnreadable = Unreadable BrowserCookiesSectionTitle = Browser Cookies -BrowserCookieNoneSaved = No cookie saved. +BrowserCookieNoneSaved = No cookie saved yet. On Chrome, Edge, and Brave, automatic import is usually blocked by App-Bound Encryption, so pasting the cookie header below is the most reliable setup. BrowserCookieSavedBadge = Saved BrowserCookieRemove = Remove BrowserCookieImportSuccess = Cookies imported successfully. From 24c3ad42a5432ad0c431d5c8f21c22d91c2650ea Mon Sep 17 00:00:00 2001 From: tsouth89 Date: Thu, 16 Jul 2026 23:44:32 -0400 Subject: [PATCH 3/3] Keep checkbox accent fill in light theme (CodeRabbit) The light-theme base rule for checkboxes has equal specificity to :checked and comes later, so it was overriding the accent background for checked boxes in light mode. Restate the checked accent with higher specificity (light + :checked) so it wins. --- apps/desktop-tauri/src/styles.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/apps/desktop-tauri/src/styles.css b/apps/desktop-tauri/src/styles.css index 6f2121e928..83c7f4eef7 100644 --- a/apps/desktop-tauri/src/styles.css +++ b/apps/desktop-tauri/src/styles.css @@ -663,6 +663,15 @@ html { background: rgba(255, 255, 255, 0.9); } +/* Keep the accent fill on checked boxes in light theme (the light base rule + above has equal specificity to `:checked`, so restate it with higher). */ +[data-theme="light"] .toggle:checked, +[data-theme="light"] .provider-detail-toggle input[type="checkbox"]:checked, +[data-theme="light"] .providers-sidebar__checkbox:checked { + background: var(--accent, #0a84ff); + border-color: var(--accent, #0a84ff); +} + .toggle-label { display: inline-flex; align-items: center;