fix(feedback-widget): dark-mode adaptation + clearer placeholder#7282
Merged
Conversation
…bug reports 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 `<html>`. 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) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Updates FeedbackWidget styling to use the app’s CSS design tokens (so it follows the site’s light/dark mode implemented via <html data-theme="...">) and tweaks the feedback placeholder text to be clearer and more inclusive of bug reports.
Changes:
- Replaced MUI palette-based surface/text colors (
background.*,text.*,action.hover) with CSS variables (--bg-surface,--bg-elevated,--ink,--ink-muted,--rule) for the widget’s FABs, toast, and popover content. - Added targeted Popover
paperslot styling to ensureTextFieldoutline/placeholder andToggleButtonsurfaces/borders read correctly in dark mode. - Updated the message placeholder copy to “Bug, idea, typo, anything…”
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
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
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
--bg-surface,--bg-elevated,--ink,--ink-muted,--rule) instead of MUI palette tokens, so they track the active light/dark scheme.Context
MUI's palette is hard-pinned to
mode: 'light'inapp/src/main.tsx; dark mode runs only through CSS custom properties on<html>. Components using MUI tokens likebackground.default,text.primary,background.paper,text.secondary,action.hovertherefore stay cream-on-dark when the user enables dark mode. The FeedbackWidget was such a component.The structural cure (migrating the theme to
CssVarsProviderwith bothcolorSchemes) is tracked separately in #7281. This PR is the local fix for the widget so users on dark mode aren't blocked by the refactor.Verified
tsc --noEmit) green.MuiPopover-paper→rgb(36,36,32)textrgb(240,239,232)rgb(26,26,23)iconprimary.main--ink-muted--rule/--bg-surfaceTest plan
/in light mode → click feedback FAB → expand → all four reactions visible, placeholder reads "Bug, idea, typo, anything…"🤖 Generated with Claude Code