Refactor changed widgets to match themes.

client/src/components/Widgets/PlumeEvents.jsx

@@ -1,10 +1,18 @@
-import VdapApi from '../../hooks/useVdapApi.js';
 import { useMemo } from 'react';
+import { Box, Flex, Spinner, Text } from "@chakra-ui/react";
+import { useColorMode } from "@/components/ui/color-mode.jsx";
 import Plot from 'react-plotly.js';
-import {Box, Flex, Spinner, Text} from "@chakra-ui/react";
+import VdapApi from '../../hooks/useVdapApi.js';
 import useBuildUrl from "@/hooks/useBuildUrl.js";
 
+// 1. Import your central color dictionary
+import { rawWidgetColors } from '../../theme.js';
+
 export default function PlumeEvents({ settings, widgetID}) {
+  const { colorMode } = useColorMode();
+  // 2. Assign the active palette based on the current mode
+  const plotColors = colorMode === 'dark' ? rawWidgetColors.dark : rawWidgetColors.light;
+
   // Build url, defaults to 7 days past
   const url = useBuildUrl('/api/v2/plume_events', settings?.startDate, settings?.endDate);
 
@@ -44,7 +52,7 @@ export default function PlumeEvents({ settings, widgetID}) {
       mode: 'markers',
       marker: {
         size: 7,
-        line: { width: .5, color: 'rgba(255, 255, 255, 0.7)' },
+        line: { width: .5, color: plotColors.text },
         symbol: Symbolway[index % Symbolway.length],
       },
       // Replicating the clean D3/Observable tooltip
@@ -53,88 +61,77 @@ export default function PlumeEvents({ settings, widgetID}) {
         'Date (UTC): %{x|%b %d %Y %H:%M}<br>' +
         'Plume Height (m): %{y}<extra></extra>'
     }));
-  }, [apiData]);
+  }, [apiData, plotColors]);
 
   const layout = useMemo(() => {
-
     return {
       autosize: true,
       paper_bgcolor: 'transparent', // Let Chakra UI background show through
       plot_bgcolor: 'transparent',
-      font: { color: '#d1d5db' }, // gray.300
+      font: { color: plotColors.muted },
       margin: { t: 40, r: 20, l: 20, b: 20 },
-      // title: {
-      //     text: '7 Day Consolidated Flight Levels',
-      //     font: { size: 16, color: 'white' },
-      //     x: 0.05
-      // },
       xaxis: {
         title: {
           text: 'Date (UTC)',
-          font: { color: 'white', size: 12 }
+          font: { color: plotColors.text, size: 12 }
         },
         type: 'date',
-        tickformat: '%b %d<br>%Y', // D3 requested %b %d \n %Y formatting
-        gridcolor: '#4b5563',
-        zerolinecolor: '#4b5563',
+        tickformat: '%b %d<br>%Y',
+        gridcolor: plotColors.grid,
+        zerolinecolor: plotColors.grid,
         automargin: true,
       },
       yaxis: {
         title: {
           text: 'Plume Height',
-          font: { color: 'white', size: 12 }
+          font: { color: plotColors.text, size: 12 }
         },
         type: 'linear',
-        gridcolor: '#4b5563',
-        zerolinecolor: '#ffffff',
+        gridcolor: plotColors.grid,
+        zerolinecolor: plotColors.text,
         automargin: true,
       },
-      // legend: {
-      //     orientation: 'h',
-      //     y: -0.2,
-      //     x: 0.5,
-      //     xanchor: 'center'
-      // },
       hovermode: 'closest',
       shapes: [
         {
           type: 'line',
           x0: 0,
           x1: 1,
-          xref: 'paper', // Spans entire chart width
+          xref: 'paper',
           y0: 0,
           y1: 0,
           yref: 'y',
-          line: { color: 'white', width: 1 }
+          line: { color: plotColors.text, width: 1 }
         }
       ],
     };
-  }, []);
+  }, [plotColors]);
 
   if (isLoading) return (
-    <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center">
+    <Flex w="100%" h="100%" bg="transparent" align="center" justify="center">
       <Spinner size="xl" color="blue.400" thickness="4px" />
     </Flex>
   );
 
   if (error) return (
-    <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center" p={4}>
+    <Flex w="100%" h="100%" bg="transparent" align="center" justify="center" p={4}>
       <Text color="red.400">{error}</Text>
     </Flex>
   );
 
   if (plotTraces.length === 0) return (
-    <Flex height="100%" width="100%" align="center" justify="center" bg="gray.800" borderRadius="md">
-      <Text color="gray.400">No data available for current filter.</Text>
+    <Flex height="100%" width="100%" align="center" justify="center" bg="transparent">
+      <Text color="widgetTextMuted">No data available for current filter.</Text>
     </Flex>
   );
 
   return (
-    <Box height="100%" width="100%" bg="transparent" borderRadius="md" p={2} overflow="hidden">
+    <Box height="100%" width="100%" bg="transparent" overflow="hidden">
       <Plot
+        key={colorMode}
         data={plotTraces}
         layout={layout}
-        useResizeHandler={true} // Essential for dashboard grid resizing!
+        useResizeHandler={true}
         style={{ width: '100%', height: '100%' }}
         config={{ responsive: true, displayModeBar: true, displaylogo: false }}
       />