Pending-edits button color + Cap widget dark-mode theming#261
Open
HugoGresse wants to merge 1 commit into
Open
Pending-edits button color + Cap widget dark-mode theming#261HugoGresse wants to merge 1 commit into
HugoGresse wants to merge 1 commit into
Conversation
Two small UI tweaks asked for after the last self-edit pass: 1) Pending-edits button is no longer perpetually orange. When the pending queue is empty the button drops to variant="outlined" + color="primary" so the speaker self-edit accordion does not look alarmed by default. As soon as pendingCount > 0 it switches to variant="contained" + color="warning" so admins notice they have work to review. 2) Cap captcha widget now follows the host MUI theme. The upstream defaults are tuned for light surfaces and produce a near-white box on the dark theme, which clashes hard with Paper. CapWidget now reads useTheme() and writes the colour CSS custom properties (background, border, text, checkbox, spinner) on its container div. CSS variables cascade to the widget child, so the widget picks the overrides up without us reaching into its internals. Sizing / radius / padding stay on the widget defaults — only the colour tokens are themed. Light mode keeps the exact upstream values to avoid regressing existing deployments. Dark mode maps to MUI palette tokens (background.paper, text.primary, divider, action.hover, action.disabledBackground) so the widget tracks any theme customisation a deploy might apply. Frontend tsc clean; vite build succeeds. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR makes two focused UI adjustments for speaker self-editing: it tones down the pending-edits button when there is no review queue and themes the Cap captcha widget to match dark-mode surfaces.
Changes:
- Pending-edits button now uses outlined primary styling when the queue is empty, and contained warning styling when pending edits exist.
CapWidgetnow derives Cap CSS color variables from the active MUI theme, preserving light defaults and applying dark palette tokens.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
src/public/speakerEdit/CapWidget.tsx |
Adds MUI theme-based CSS custom properties for Cap widget colors. |
src/events/page/speakers/components/SpeakerSelfEditSettings.tsx |
Makes pending-edits button styling conditional on pendingCount. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Visit the preview URL for this PR (updated for commit dfde5e0):
(expires Mon, 01 Jun 2026 21:40:19 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: 0c15c45ea5a4c54095387eacf30c3755c9260f22 |
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
Two small UI tweaks on the speaker self-edit surface:
variant="contained" color="warning"tovariant="outlined" color="primary"when the pending queue is empty, so the speaker self-edit accordion does not look perpetually alarmed. As soon as the queue is non-empty it flips back to contained orange so admins notice the work to review.CapWidgetnow readsuseTheme()and writes the colour CSS custom properties on its container div. CSS variables cascade to the<cap-widget>child so the widget blends with the surrounding Paper instead of glowing white against the dark theme.background.paper,text.primary,divider,action.hover,action.disabledBackground) and follows whatever palette overrides a deploy applies.Test plan
🤖 Generated with Claude Code