From e713d47319bac1d4012a9694d07ed88dc8140884 Mon Sep 17 00:00:00 2001 From: Jared Vititoe Date: Fri, 19 Jun 2026 18:22:25 -0400 Subject: [PATCH] fix(ui): forward-dialog header, notification presets, syntax-highlight tokens - N14 ForwardMessageDialog: add folds
with title + close IconButton (was closeable only by clicking outside) - N20 Notification presets: bare ` (spinner while loading) replacing the passive text | `RoomActivityLog.tsx:425` and `MessageSearch.tsx:129` both render a folds `` to fetch the next page | | N66 | DateRangeButton — Native `` | `SearchFilters.tsx` | 558–589 | "From" and "To" date fields are raw `` with inline style overrides including `fontSize: '0.82rem'` — **FIXED**: replaced both with folds ``; removed now-unused `color` import | `SelectRoomButton` (same file, line 224) and `SelectSenderButton` (line 424) both use folds ``; the date inputs are the only native browser inputs in the search filter row | | N67 | SeasonalEffect / NightLight Z-Index Order | `SeasonalEffect.tsx` / `App.tsx` | 759 / 62–77 | `SeasonalEffect` mounts at `zIndex: 9999`; `NightLightOverlay` at `zIndex: 9998`. Seasonal particles render **above** Night Light so they are never tinted. `SeasonalEffect` also shares `z-index: 9999` with the skip-to-content link in `ClientLayout.tsx` — **FIXED**: lowered `SeasonalEffect` overlay to `zIndex: 9997` (below Night Light at 9998 and modals at 9999), so Night Light now tints the particles and dialogs are never obscured | Expected UX: Night Light tints all visible content including effects; requires either a higher Night Light z-index or a lower SeasonalEffect z-index | -| N68 | Syntax Highlighting — `--lt-accent-*` Vars in Non-TDS Themes | `syntaxHighlight.ts` | 313–323 | `tokenStyle()` returns `var(--lt-accent-cyan/green/orange/purple, hardcoded-fallback)` — `--lt-*` vars only exist in TDS mode; fallbacks are Monokai dark colors that have poor contrast on light themes and no relationship to the existing `--prism-*` variables in `ReactPrism.css` | `ReactPrism.css` uses `--prism-keyword`, `--prism-selector` etc. which switch correctly between light and dark palettes; syntax highlighting should use the same variable family | +| N68 | Syntax Highlighting — `--lt-accent-*` Vars in Non-TDS Themes | `syntaxHighlight.ts` | 313–323 | `tokenStyle()` returns `var(--lt-accent-cyan/green/orange/purple, hardcoded-fallback)` — `--lt-*` vars only exist in TDS mode; fallbacks are Monokai dark colors that have poor contrast on light themes and no relationship to the existing `--prism-*` variables in `ReactPrism.css` — **FIXED**: `tokenStyle()` now maps to the `--prism-*` family (keyword/selector/boolean/atrule/comment) which has proper light/dark/TDS palettes; comment uses `--prism-comment` instead of an opacity hack | `ReactPrism.css` uses `--prism-keyword`, `--prism-selector` etc. which switch correctly between light and dark palettes; syntax highlighting should use the same variable family | | N69 | Mention Highlight — `` Instead of `HexColorPickerPopOut` | `General.tsx` | 644–675 | Raw `` with hardcoded pixel dimensions; OS-native color picker chrome renders completely differently from the rest of settings UI | `PowersEditor.tsx:125–143` establishes `}>` as the codebase's color-picking pattern; Reset button should be `
+ {!sentTo && ( + ) => setQuery(e.target.value)} /> - )} - + + )} {sentTo ? ( {PRESETS.map((preset) => ( - + + {preset.emoji} + + {preset.label} + + + {preset.description} + + + ))} diff --git a/src/app/utils/syntaxHighlight.ts b/src/app/utils/syntaxHighlight.ts index ee7d82e9e..b983ca61a 100644 --- a/src/app/utils/syntaxHighlight.ts +++ b/src/app/utils/syntaxHighlight.ts @@ -306,19 +306,26 @@ export function tokenize(code: string, lang: string): SyntaxToken[] { // ── Inline style helpers ──────────────────────────────────────────────────── -/** Returns the React inline-style object for a given SyntaxToken type. */ +/** + * Returns the React inline-style object for a given SyntaxToken type. + * + * Uses the `--prism-*` variable family (defined in `ReactPrism.css`), which has + * proper light / dark / TDS palettes — unlike the raw `--lt-accent-*` vars, + * which only exist in TDS mode and otherwise fall back to dark-only Monokai + * colors with poor contrast on light themes. + */ export function tokenStyle(type: SyntaxToken['type']): CSSProperties { switch (type) { case 'kw': - return { color: 'var(--lt-accent-cyan, #66d9ef)' }; + return { color: 'var(--prism-keyword)' }; case 'str': - return { color: 'var(--lt-accent-green, #a6e22e)' }; + return { color: 'var(--prism-selector)' }; case 'num': - return { color: 'var(--lt-accent-orange, #fd971f)' }; + return { color: 'var(--prism-boolean)' }; case 'cmt': - return { opacity: 0.5, fontStyle: 'italic' as const }; + return { color: 'var(--prism-comment)', fontStyle: 'italic' as const }; case 'fn': - return { color: 'var(--lt-accent-purple, #ae81ff)' }; + return { color: 'var(--prism-atrule)' }; default: return {}; }