fix(feedback-widget): dark-mode adaptation + clearer placeholder (#7282)

MarkusNeusinger · claude · web-flow · commit e10219b0a576 · 2026-05-18T22:17:16.000+02:00
## Summary - FeedbackWidget surfaces (main FAB, mini-FAB stack, "Thanks!" toast, popover Paper + TextFields + toggle buttons + secondary text) now use CSS theme tokens (`--bg-surface`, `--bg-elevated`, `--ink`, `--ink-muted`, `--rule`) instead of MUI palette tokens, so they track the active light/dark scheme. - Placeholder copy changed from "Typo, weird chart, feature idea…" to "Bug, idea, typo, anything…" — bugs are a reactable category (🪲 already in the toggles) and the new wording reads less dismissive. ## Context MUI's palette is hard-pinned to `mode: 'light'` in `app/src/main.tsx`; dark mode runs only through CSS custom properties on `<html>`. Components using MUI tokens like `background.default`, `text.primary`, `background.paper`, `text.secondary`, `action.hover` therefore stay cream-on-dark when the user enables dark mode. The FeedbackWidget was such a component. The structural cure (migrating the theme to `CssVarsProvider` with both `colorSchemes`) 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 - Typecheck (`tsc --noEmit`) green - Light mode: FAB + popover render unchanged from before - Dark mode (Playwright + computed-style probe): - `.MuiPopover-paper` → `rgb(36,36,32)` text `rgb(240,239,232)` - FAB → `rgb(26,26,23)` icon `primary.main` - Placeholder + secondary text use `--ink-muted` - Toggle button border and selected state use `--rule` / `--bg-surface` ## Test plan - [ ] Open `/` in light mode → click feedback FAB → expand → all four reactions visible, placeholder reads "Bug, idea, typo, anything…" - [ ] Switch to dark mode → FAB + quick stack appear as warm near-black on dark page (not cream) - [ ] Open detailed popover in dark → Paper, input border, placeholder, toggle buttons, "Page:" footer all read on dark surface - [ ] Submit a 👍 → "Thanks!" toast appears on the elevated surface (not white) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
diff --git 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)' },
         }}
       >
         <ForumIcon />
@@ -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 ? (
           <Box sx={{ py: 3, textAlign: 'center' }} role="status" aria-live="polite">
             <Box sx={{ fontSize: 28, mb: 1 }}>🙏</Box>
             <Box sx={{ fontWeight: 600 }}>Thanks!</Box>
-            <Box sx={{ fontSize: 13, color: 'text.secondary', mt: 0.5 }}>
+            <Box sx={{ fontSize: 13, color: 'var(--ink-muted)', mt: 0.5 }}>
               We read every note.
             </Box>
           </Box>
@@ -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() {
             <Box
               sx={{
                 fontSize: 11,
-                color: 'text.secondary',
+                color: 'var(--ink-muted)',
                 mb: 1.5,
                 whiteSpace: 'nowrap',
                 overflow: 'hidden',
@@ -476,7 +504,7 @@ export function FeedbackWidget() {
             )}
 
             <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-              <Box sx={{ fontSize: 12, color: 'text.secondary' }}>
+              <Box sx={{ fontSize: 12, color: 'var(--ink-muted)' }}>
                 {message.length}/{MAX_MESSAGE_LENGTH}
               </Box>
               <Button
