From 06efea1bb3e0281b1fee50e9246efd475d9a6a27 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 27 Jul 2026 18:21:55 -0700
Subject: [PATCH] [eric] theme: single-color wash paints the canvas +
 ui_font_scale applies live

---
 .../src/app/pages/Dashboard/canvas/DashboardCanvas.tsx   | 8 +++++---
 frontend/src/app/pages/Settings/Settings.tsx             | 9 +++++++++
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
index db1feba6..e6765ad8 100644
--- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
+++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx
@@ -164,8 +164,10 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
   onTidy,
   onSearchPaletteClose,
 }) => {
-  const { gradient } = useThemeAccent();
+  const { accent, gradient } = useThemeAccent();
   const { washOpacity, grain } = useThemeWash();
+  // A single picked color stores gradient=null, so fall back to the accent (mirrors BeatShell).
+  const washStops = gradient ?? (accent ? [accent] : null);
   const dotSize = Math.max(1, 1.5 * canvas.zoom);
   const dotSpacing = 24 * canvas.zoom;
 
@@ -333,13 +335,13 @@ const DashboardCanvas: React.FC<DashboardCanvasProps> = ({
         }}
       >
         {/* Gradient wash: the user's theme-pad stops tint the canvas, Arc-window style; intensity + grain come from the theme device; sits under the dot grid. */}
-        {gradient && gradient.length > 1 && (
+        {washStops && washStops.length > 0 && (
           <Box
             sx={{
               position: 'absolute',
               inset: 0,
               pointerEvents: 'none',
-              background: `linear-gradient(115deg, ${gradient.map((hex, i) => `${hex}${Math.round(washOpacity * 255).toString(16).padStart(2, '0')} ${(i / (gradient.length - 1)) * 100}%`).join(', ')})`,
+              background: `linear-gradient(115deg, ${washStops.map((hex, i) => `${hex}${Math.round(washOpacity * 255).toString(16).padStart(2, '0')} ${washStops.length > 1 ? (i / (washStops.length - 1)) * 100 : 100}%`).join(', ')})`,
             }}
           />
         )}
diff --git a/frontend/src/app/pages/Settings/Settings.tsx b/frontend/src/app/pages/Settings/Settings.tsx
index 1516fe7e..36ac5827 100644
--- a/frontend/src/app/pages/Settings/Settings.tsx
+++ b/frontend/src/app/pages/Settings/Settings.tsx
@@ -178,6 +178,15 @@ const Settings: React.FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [form.accent_color, form.accent_gradient]);
 
+  // Text size applies live too; AppShell re-applies the persisted value on every boot.
+  useEffect(() => {
+    if (open && loaded) {
+      const scale = Math.min(1.4, Math.max(0.8, form.ui_font_scale ?? 1));
+      document.documentElement.style.fontSize = `${scale * 100}%`;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [form.ui_font_scale]);
+
   useEffect(() => {
     if (!open || !loaded) return;
     if (!buildSubmit()) return;