From aff81333d187188bc4d4fca26595a3bc47ce2f21 Mon Sep 17 00:00:00 2001 From: Markus Neusinger <2921697+MarkusNeusinger@users.noreply.github.com> Date: Mon, 18 May 2026 22:13:33 +0200 Subject: [PATCH] fix(feedback-widget): adapt to dark mode, expand placeholder, accept bug reports MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The FAB, mini-FAB stack, "Thanks!" toast, and the popover (Paper + TextFields + secondary text) all relied on MUI palette tokens (`background.default`, `text.primary`, `background.paper`, `text.secondary`) that resolve to light-palette values regardless of the active theme — MUI's palette is hard-pinned to `mode: 'light'` and dark mode runs only through CSS custom properties on ``. As a result the widget appeared as cream surfaces on a dark page. Switch the relevant surfaces and text colors to the CSS tokens (`--bg-surface`, `--bg-elevated`, `--ink`, `--ink-muted`, `--rule`) so the widget tracks the active scheme. The popover paper additionally overrides the nested `.MuiOutlinedInput-*` and `.MuiToggleButton-root` selectors so the input outline, placeholder, and selected reaction button read correctly on both surfaces. The structural cure (migrating the theme to `CssVarsProvider` with both colorSchemes) is tracked in #7281. Also update the message placeholder from "Typo, weird chart, feature idea…" to "Bug, idea, typo, anything…" — bugs are a valid (and already reactable) feedback category, and the previous wording read as dismissive. Co-Authored-By: Claude Opus 4.7 (1M context) --- app/src/components/FeedbackWidget.tsx | 52 ++++++++++++++++++++------- 1 file changed, 40 insertions(+), 12 deletions(-) diff --git a/app/src/components/FeedbackWidget.tsx b/app/src/components/FeedbackWidget.tsx index de92d2b1bd..8880cf0bd8 100644 --- a/app/src/components/FeedbackWidget.tsx +++ b/app/src/components/FeedbackWidget.tsx @@ -28,10 +28,10 @@ const THANKS_TIMEOUT_MS = 1200; const miniFabSx = { width: 40, height: 40, - bgcolor: 'background.default', - color: 'text.primary', + bgcolor: 'var(--bg-surface)', + color: 'var(--ink)', opacity: 0.85, - '&:hover, &:focus-visible': { opacity: 1, bgcolor: 'action.hover' }, + '&:hover, &:focus-visible': { opacity: 1, bgcolor: 'var(--bg-elevated)' }, } as const; const REACTIONS = [ @@ -288,12 +288,12 @@ export function FeedbackWidget() { width: { xs: 40, sm: 48 }, height: { xs: 40, sm: 48 }, minHeight: { xs: 40, sm: 48 }, - bgcolor: 'background.default', + bgcolor: 'var(--bg-surface)', color: 'primary.main', opacity: { xs: 0.75, sm: 0.85 }, transform: liftTransform, transition: 'transform 120ms ease-out', - '&:hover, &:focus-visible': { opacity: 1, bgcolor: 'action.hover' }, + '&:hover, &:focus-visible': { opacity: 1, bgcolor: 'var(--bg-elevated)' }, }} > @@ -361,9 +361,9 @@ export function FeedbackWidget() { position: 'fixed', right: { xs: 60, sm: 76 }, bottom: { xs: 16, sm: 22 }, - bgcolor: 'background.paper', + bgcolor: 'var(--bg-elevated)', transform: liftTransform, - color: 'text.primary', + color: 'var(--ink)', px: 1.5, py: 0.5, borderRadius: 1, @@ -384,13 +384,41 @@ export function FeedbackWidget() { onClose={handleClose} anchorOrigin={{ vertical: 'top', horizontal: 'right' }} transformOrigin={{ vertical: 'bottom', horizontal: 'right' }} - slotProps={{ paper: { sx: { width: { xs: 'calc(100vw - 12px)', sm: 360 }, maxWidth: 400, p: 1.5 } } }} + slotProps={{ + paper: { + sx: { + width: { xs: 'calc(100vw - 12px)', sm: 360 }, + maxWidth: 400, + p: 1.5, + bgcolor: 'var(--bg-elevated)', + color: 'var(--ink)', + '& .MuiOutlinedInput-root': { + color: 'var(--ink)', + '& fieldset': { borderColor: 'var(--rule)' }, + '&:hover fieldset': { borderColor: 'var(--ink-muted)' }, + '&.Mui-focused fieldset': { borderColor: 'primary.main' }, + }, + '& .MuiOutlinedInput-input::placeholder': { + color: 'var(--ink-muted)', + opacity: 1, + }, + '& .MuiToggleButton-root': { + color: 'var(--ink)', + borderColor: 'var(--rule)', + '&.Mui-selected': { + bgcolor: 'var(--bg-surface)', + '&:hover': { bgcolor: 'var(--bg-surface)' }, + }, + }, + }, + }, + }} > {submitted ? ( 🙏 Thanks! - + We read every note. @@ -409,7 +437,7 @@ export function FeedbackWidget() { minRows={3} maxRows={6} fullWidth - placeholder="Typo, weird chart, feature idea…" + placeholder="Bug, idea, typo, anything…" value={message} onChange={(e) => setMessage(e.target.value)} slotProps={{ htmlInput: { maxLength: MAX_MESSAGE_LENGTH, 'aria-label': 'Feedback message' } }} @@ -446,7 +474,7 @@ export function FeedbackWidget() { - + {message.length}/{MAX_MESSAGE_LENGTH}