fix(ui): stop tour button overlapping status pill + add theme switcher#22
fix(ui): stop tour button overlapping status pill + add theme switcher#22psigho wants to merge 1 commit into
Conversation
psigho
force-pushed
the
fix/ui-theme-switcher
branch
from
ee893c1 to
f72976e
Compare
Two War Room UI fixes (docs/index.html): 1. The floating "guided tour" relaunch button (#t3mpTourRelaunch) was position:fixed pinned bottom-left, landing on top of the sidebar "Connected" status pill and hiding its first character. Moved it to bottom-right (the conventional help-FAB corner) so it collides with nothing. 2. Added a theme switcher in the sidebar footer with four themes: Storm (the existing teal/green default, visually unchanged), Ember (amber), Crimson (red), and Void (violet). The choice persists in localStorage and is applied before first paint to avoid a flash of the default theme. To make themes reskin the whole UI rather than only the ~87 var(--accent) sites, the dominant hardcoded brand colors (#00ff88 / #2fffd2 / #00d4ff and their rgba() forms) were converted to CSS variables -- but only inside <style> and inline style="..." attributes, where var() is valid. Bare JS string literals and SVG fill= attributes are left as-is; most are semantic status colors (green=ready, red=error) that should stay fixed. No JS logic changed; the page renders and all scripts run unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
psigho
force-pushed
the
fix/ui-theme-switcher
branch
from
f72976e to
c6253a9
Compare
|
Reviewed — sound. The tour-button fix ( Two cosmetic nits, non-blocking: a few |
|
Please rebase this branch onto current The UI change is not reviewable in the current branch because it also carries unrelated stale-base removals around Gemini/provider config and tests. Suggested agent repair path:
|
2 participants
What
Two small War Room UI fixes, both in
docs/index.html.1. Guided-tour button overlapping the status pill
The floating "guided tour" relaunch button (
#t3mpTourRelaunch) isposition: fixedpinned bottom-left (left: 18px), which lands directly on top of the sidebar's "Connected" status pill and hides its first character (it renders as a green "?" overonnected). Moved it to bottom-right — the conventional help-FAB corner, where it collides with nothing.2. Theme switcher
Added a THEME swatch row in the sidebar footer with four themes:
The choice persists in
localStorage(t3mp3st_theme) and is applied by a tiny<head>script before first paint, so there's no flash of the default theme on reload.How
The dominant "hacker green" (
#00ff88) was hardcoded ~300× and tied to no variable, so a naive theme only recolored the logo. To make themes reskin the whole UI, the brand colors (#00ff88/#2fffd2/#00d4ffand theirrgba()forms) were converted to CSS variables — only inside<style>and inlinestyle="..."attributes, wherevar()is valid.Deliberately left as literals:
el.style.color = '#00ff88', color maps,color === '#00ff88'comparisons) — many are semantic status colors (green = ready, red = error) that should stay fixed, and some feed color-comparison logic.fill=presentation attributes —var()is invalid there.Storm keeps its original two-tone green/teal identity via
:root; the alternates retint--brand/--accent/--cyan(plus-rgbtriplets for thergba()usages) from a singledata-themeattribute on<html>.Verification
docs/index.html).Known cosmetic leftovers (intentional)
#00aa66), so it's briefly two-tone.Both are safe to leave; happy to chase 100% coverage if wanted.