gui: appearance settings menu (global font size) + n-mode recolor#71
Merged
Conversation
Introduce a header gear-icon popover as the single home for global appearance preferences, so the header stays uncluttered and future prefs are a one-row addition. It houses the existing light/dark toggle plus a new S/M/L/XL text-size control. Text size is a persisted `fontScale` (mirrors the theme pattern) applied as a `--font-scale` multiplier on <html>. The base font-size folds it in and the chrome font-sizes are em-relative, so one value rescales the app's typography; the tabs' inline `fontSize` values are tied to the same variable so their labels/controls scale too. Presets are evenly spaced from S (0.85) up to a boosted XL (1.6), default Medium (1.1). Addresses #59: "Larger GUI font size". Co-Authored-By: Claude Opus 4.8 <[email protected]>
Reverse the |n|≥1 hues of the shared discrete mode-number palette so the
lowest coherent modes read hottest: 1=red, 2=orange, 3=yellow, then
green/blue/purple. Same hexes as before, just reordered; 0=grey ("no
mode") is unchanged. Because the palette is shared, the rotating
spectrogram and any discrete n-map (modeColor / NodeView) stay
consistent. The QS tab uses its own palette and is unaffected.
Addresses #59: "Match modespec colors for n modes".
Co-Authored-By: Claude Opus 4.8 <[email protected]>
11 tasks
…ance-settings-menu # Conflicts: # gui/web/src/components/tabs/RotatingTab.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Two GUI/appearance improvements from #59.
1. Appearance settings menu + global font size
Adds a header gear-icon popover as the single home for global appearance preferences (keeps the header uncluttered; future prefs are a one-row add). It houses the existing light/dark toggle plus a new S / M / L / XL text-size control.
fontScale(mirrors the theme pattern) applied as a--font-scalemultiplier on<html>.em-relative, so one value rescales the app's typography. The tabs' inlinefontSizevalues are tied to the same variable so their labels/controls scale too.2. n-mode palette recolor (warm → cool)
Reverses the
|n|≥1hues of the shared discrete mode-number palette so the lowest coherent modes read hottest: 1=red, 2=orange, 3=yellow, then green/blue/purple. Same hexes, reordered;0=grey("no mode") unchanged. Shared palette → the rotating spectrogram and any discrete n-map (modeColor/NodeView) stay consistent. The QS tab uses its own palette and is unaffected.Addresses #59
Cross-team note
Self-contained, but touches other teams' lanes for review awareness:
fontSizeconversions inRotatingTab/QuasiStationaryTab/SensorsTab(Rapid Rotators / Slow Rollers) — purely mechanicalfontSize: N→calc(Npx * var(--font-scale)).lib/colormaps.tspalette reorder (affects Rapid Rotators' rotating spectrogram).Testing
tsc -b && vite buildclean.vitest— 34 passing (addsstore.test.ts+SettingsMenu.test.tsx, plus a preset-spacing check).🤖 Generated with Claude Code