From dfde5e041516eeb9a9e06a138e5bc88fcc826d57 Mon Sep 17 00:00:00 2001
From: Hugo Gresse <hugo.gresse@gmail.com>
Date: Mon, 25 May 2026 23:38:54 +0200
Subject: [PATCH] Polish self-edit admin button + theme the Cap widget
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../components/SpeakerSelfEditSettings.tsx    |  8 ++-
 src/public/speakerEdit/CapWidget.tsx          | 54 ++++++++++++++++++-
 2 files changed, 58 insertions(+), 4 deletions(-)

diff --git a/src/events/page/speakers/components/SpeakerSelfEditSettings.tsx b/src/events/page/speakers/components/SpeakerSelfEditSettings.tsx
index 6464bd2..173c6be 100644
--- a/src/events/page/speakers/components/SpeakerSelfEditSettings.tsx
+++ b/src/events/page/speakers/components/SpeakerSelfEditSettings.tsx
@@ -117,10 +117,14 @@ export const SpeakerSelfEditSettings = ({ event }: SpeakerSelfEditSettingsProps)
     // dialog from the summary does NOT toggle the accordion.
     const renderPendingEditsButton = (placement: 'summary' | 'details') => {
         if (!event.speakerSelfEdit?.enabled) return null
+        // Only highlight in warning orange when there is actually a queue
+        // to review. Empty queue stays on the default theme colour so the
+        // accordion summary does not look perpetually alarmed.
+        const hasPending = pendingCount > 0
         return (
             <Button
-                variant="contained"
-                color="warning"
+                variant={hasPending ? 'contained' : 'outlined'}
+                color={hasPending ? 'warning' : 'primary'}
                 size="small"
                 onClick={(e) => {
                     e.stopPropagation()
diff --git a/src/public/speakerEdit/CapWidget.tsx b/src/public/speakerEdit/CapWidget.tsx
index 8784651..d9f7b6d 100644
--- a/src/public/speakerEdit/CapWidget.tsx
+++ b/src/public/speakerEdit/CapWidget.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react'
-import { useEffect, useRef } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 // Side-effect import: registers the <cap-widget> custom element on
 // `window.customElements`. The widget is now bundled from the
 // `@cap.js/widget` npm package (pinned in package.json) so the script
 // is served from our own deploy instead of a third-party CDN — closes
 // the supply-chain vector that the previous jsdelivr <script> opened.
 import '@cap.js/widget'
+import { useTheme } from '@mui/material/styles'
 import { CAP_API_ENDPOINT } from '../../env'
 
 declare global {
@@ -24,8 +25,54 @@ export type CapWidgetProps = {
     onReset?: () => void
 }
 
+// CSS custom properties exposed by @cap.js/widget. The defaults shipped
+// by the widget are tuned for light backgrounds; on a dark MUI theme
+// they produce a near-white box that stands out aggressively against
+// the surrounding surface. Override the colour vars (and ONLY the
+// colour vars — sizing/radius stays on the widget defaults) based on
+// the active MUI palette so the widget blends with the host page.
+type CapColourVars = {
+    '--cap-background': string
+    '--cap-border-color': string
+    '--cap-color': string
+    '--cap-checkbox-background': string
+    '--cap-checkbox-border': string
+    '--cap-spinner-color': string
+    '--cap-spinner-background-color': string
+}
+
 export const CapWidget = ({ onSolve, onReset }: CapWidgetProps) => {
     const containerRef = useRef<HTMLDivElement | null>(null)
+    const theme = useTheme()
+    const isDark = theme.palette.mode === 'dark'
+
+    // Compute the CSS-var overrides once per theme flip rather than on
+    // every render. Light values mirror the upstream widget defaults so
+    // existing deployments keep their look; dark values pull from the
+    // MUI palette so the widget tracks any user theme customisation.
+    const colourVars = useMemo<CapColourVars>(
+        () =>
+            isDark
+                ? {
+                      '--cap-background': theme.palette.background.paper,
+                      '--cap-border-color': theme.palette.divider,
+                      '--cap-color': theme.palette.text.primary,
+                      '--cap-checkbox-background': theme.palette.action.hover,
+                      '--cap-checkbox-border': `1px solid ${theme.palette.divider}`,
+                      '--cap-spinner-color': theme.palette.text.primary,
+                      '--cap-spinner-background-color': theme.palette.action.disabledBackground,
+                  }
+                : {
+                      '--cap-background': '#fdfdfd',
+                      '--cap-border-color': '#dddddd8f',
+                      '--cap-color': '#212121',
+                      '--cap-checkbox-background': '#fafafa91',
+                      '--cap-checkbox-border': '1px solid #aaaaaad1',
+                      '--cap-spinner-color': '#000',
+                      '--cap-spinner-background-color': '#eee',
+                  },
+        [isDark, theme.palette]
+    )
 
     useEffect(() => {
         if (!containerRef.current) return
@@ -49,5 +96,8 @@ export const CapWidget = ({ onSolve, onReset }: CapWidgetProps) => {
         }
     }, [])
 
-    return <div ref={containerRef} />
+    // CSS custom properties cascade from this container down to the
+    // shadow-DOM-less <cap-widget> child, so the widget picks the
+    // overrides up automatically without us reaching into its internals.
+    return <div ref={containerRef} style={colourVars as React.CSSProperties} />
 }