From c027a30b3f6b9f12720a4169a08b3784f053009a Mon Sep 17 00:00:00 2001
From: Christopher Hight <chight@usgs.gov>
Date: Tue, 20 Oct 2026 14:05:52 -0700
Subject: [PATCH] Refactor widgets to use theme better. Alert change and 7day
 vaa

---
 .../src/components/Widgets/AlertChanges.jsx   | 75 +++++++++---------
 .../components/Widgets/VaaActivity7Day.jsx    | 79 ++++++++-----------
 client/src/theme.js                           | 12 +++
 3 files changed, 83 insertions(+), 83 deletions(-)

diff --git a/client/src/components/Widgets/AlertChanges.jsx b/client/src/components/Widgets/AlertChanges.jsx
index 9f6dbd2..42eea0d 100644
--- a/client/src/components/Widgets/AlertChanges.jsx
+++ b/client/src/components/Widgets/AlertChanges.jsx
@@ -60,38 +60,38 @@ export default function AlertChanges({ settings, widgetID}) {
     return sorted_entries;
   }, [apiData, thisWidget]);
 
-  // list of alert colors used for coloring text below
+  // Alert colors are now light/dark mode responsive
   const alertColors = {
-    Red: "red.400",
-    Orange: "orange.400",
-    Yellow: "yellow.400",
-    Green: "green.400",
+    Red: "alertRed",
+    Orange: "alertOrange",
+    Yellow: "alertYellow",
+    Green: "alertGreen",
   };
 
   if (isLoading) return (
-    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
+    <Flex w="100%" h="100%" align="center" justify="center" bg="transparent">
       <Spinner size="xl" color="blue.400" thickness="4px"/>
     </Flex>
   );
 
   if (error) return (
-    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
+    <Flex w="100%" h="100%" align="center" justify="center" bg="transparent">
       <Text color="red.400">{error}</Text>
     </Flex>
   );
 
   if (data.length === 0) return (
-    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
-      <Text textAlign="center" color="gray.400">No flight level data available for the selected dates.</Text>
+    <Flex w="100%" h="100%" align="center" justify="center" bg="transparent">
+      <Text textAlign="center" color="widgetTextMuted">No flight level data available for the selected dates.</Text>
     </Flex>
   );
 
   return (
-    <Box display="flex" flexDirection="column" gap={2} p={2} w="100%" h="100%" borderRadius="lg" bg="gray.800" overflowY="auto">
+    // bg="transparent" to let the glass panel show through
+    <Box display="flex" flexDirection="column" gap={2} p={2} w="100%" h="100%" bg="transparent" overflowY="auto">
       {data.map((volcano, index) => {
         if (thisWidget?.size === "large") return (
           <Collapsible.Root key={index} w="100%">
-            {/* Using context to dynamically change the border radii of the triggers */}
             <Collapsible.Context>
               {(collapsible) => (
                 <>
@@ -102,57 +102,58 @@ export default function AlertChanges({ settings, widgetID}) {
                           p={1} pl={3} pr={3}
                           borderTopRadius="lg"
                           borderBottomRadius={collapsible.open ? "0" : "lg"}
-                          bg="gray.600"
+                          bg="widgetItemBg"
                     >
-                      <Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
-                        <Text truncate >{volcano[0]}</Text> {/* volcano name */}
-                        <Text truncate fontSize="xs" color="gray.300/90">{volcano[1][0]?.alert_start_date_local}</Text>
+                      <Flex direction="column" w="100%" minW={0} textAlign="left">
+                        <Text truncate color="text" fontWeight="medium">{volcano[0]}</Text>
+                        <Text truncate fontSize="xs" color="widgetTextMuted">{volcano[1][0]?.alert_start_date_local}</Text>
                       </Flex>
                       <Flex w="100%" minW={0} justify="right">
-                        <Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontWeight="semibold">{volcano[1][0]?.alert_level_name}</Text>
+                        <Text truncate pl={2} pr={2} borderRadius="lg" bg="widgetBadgeBg" color="text" fontWeight="semibold">
+                          {volcano[1][0]?.alert_level_name}
+                        </Text>
                       </Flex>
                     </Flex>
                   </Collapsible.Trigger>
-                  <Collapsible.Content w="100%" p={3} borderBottomRadius="lg" bg="gray.700">
+
+                  <Collapsible.Content w="100%" p={3} borderBottomRadius="lg" bg="widgetItemExpandedBg">
                     <Timeline.Root size="md" variant="subtle">
                       {volcano[1]?.map((object, index) => (
                         <Timeline.Item key={index} w="100%" h="100%">
                           <Timeline.Connector >
-                            {/*<Timeline.Separator borderWidth="1px" borderColor="gray.600"/>*/}
-                            <Timeline.Indicator outline="none" bg="gray.200" color="gray.500" size="lg">
+                            <Timeline.Indicator outline="none" bg="widgetBadgeBg" color="iconColor" size="lg">
                               {object?.alert_scheme_domain === "terrestrial" && <Footprints size={15} />}
                               {object?.alert_scheme_domain === "aviation" && <Plane size={15} />}
                               {object?.alert_scheme_domain === "maritime" && <Sailboat size={15} />}
                             </Timeline.Indicator>
-                            <Timeline.Indicator h="50%" outline="none" bg="gray.700" color="gray.100" size="lg">
+                            <Timeline.Indicator h="50%" outline="none" bg="widgetBadgeBg" color="iconColor" size="lg">
                               {object?.change_type === "increase" ? <TrendingUp /> : <TrendingDown />}
                             </Timeline.Indicator>
                           </Timeline.Connector>
                           <Timeline.Content w="100%" h="100%">
-                            {/*<Timeline.Title>{object?.volcano}</Timeline.Title>*/}
                             <Timeline.Description w="100%" h="100%" gap={1}>
                               <Flex direction="column" gap={1}>
-                                <Text w="100%" h="100%" color="gray.200">{object?.alert_start_date_local}</Text>
+                                <Text w="100%" h="100%" color="widgetTextMuted">{object?.alert_start_date_local}</Text>
                                 <Text w="100%" h="100%"
-                                      color={alertColors[object?.alert_level_name] || "gray.200"}
+                                      color={alertColors[object?.alert_level_name] || "text"}
                                       fontSize="md"
                                       fontWeight="semibold"
                                 >
                                   {object?.alert_level_name}
                                 </Text>
                                 <Flex w="100%" h="20px" direction="row" justify="left" align="center">
-                                  <Text color="gray.300">Alert Scale: </Text>
+                                  <Text color="widgetTextMuted">Alert Scale: </Text>
                                   {(Array.from({ length: Number(object?.alert_scheme_highest) - Number(object?.alert_scheme_lowest) + 1}, (v, i) => Number(object?.alert_scheme_lowest) + i))
                                     .map((num) => (
                                       <Center
                                         key={num}
                                         w="20px" h="100%"
-                                        color="gray.300"
-                                        bg={num === Number(object?.alert_level_rank) ? "gray.300/20" : null} // alert level rank is a string for some reason
-                                        borderRadius={num === Number(object?.alert_level_rank) ? "xl" : null}
+                                        color="text"
+                                        bg={num === Number(object?.alert_level_rank) ? "widgetBadgeBg" : "transparent"}
+                                        borderRadius={num === Number(object?.alert_level_rank) ? "xl" : "none"}
                                         textAlign="center"
                                         fontSize="sm"
-                                        fontWeight="semibold"
+                                        fontWeight="bold"
                                       >
                                         {num}
                                       </Center>
@@ -181,30 +182,30 @@ export default function AlertChanges({ settings, widgetID}) {
               justify="space-between" align="center"
               p={1} pl={3} pr={3}
               borderRadius="lg"
-              bg="gray.600"
+              bg="widgetItemBg"
             >
-              <Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
+              <Flex direction="column" w="100%" minW={0} textAlign="left" color="text">
                 <Flex direction="row" w="100%" gap={2} align="center">
-                  <Flex color="gray.300">
+                  <Flex color="iconColor">
                     {domain[0] === "aviation" && <Plane size={15}/>}
                     {domain[0] === "terrestrial" && <Footprints size={15}/>}
                     {domain[0] === "maritime" && <Sailboat size={15}/>}
                   </Flex>
-                  <Text truncate>{volcano[0] || ""}</Text> {/* volcano name */}
+                  <Text truncate fontWeight="medium">{volcano[0] || ""}</Text>
                 </Flex>
-                <Text truncate w="100%" fontSize="xs" color="gray.300/90">{domain[1]?.[0]?.alert_start_date_local || ""}</Text>
+                <Text truncate w="100%" fontSize="xs" color="widgetTextMuted">{domain[1]?.[0]?.alert_start_date_local || ""}</Text>
               </Flex>
 
-              <Flex direction="row" w="100%" minW={0} justify="right" gap={2} color="gray.200">
-                <Flex w="25px" justify="right">
+              <Flex direction="row" w="100%" minW={0} justify="right" gap={2} color="text">
+                <Flex w="25px" justify="right" color="iconColor">
                   {domain[1]?.[0]?.change_type === "increase" ? <TrendingUp/> : <TrendingDown/>}
                 </Flex>
                 <Text
                   truncate
                   pl={2} pr={2}
                   borderRadius="lg"
-                  bg="gray.800/50"
-                  color={alertColors[domain[1]?.[0]?.alert_level_name] || "gray.100"}
+                  bg="widgetBadgeBg"
+                  color={alertColors[domain[1]?.[0]?.alert_level_name] || "text"}
                   fontWeight="semibold"
                 >
                   {domain[1]?.[0]?.alert_level_name}
diff --git a/client/src/components/Widgets/VaaActivity7Day.jsx b/client/src/components/Widgets/VaaActivity7Day.jsx
index a6bb48c..d33b667 100644
--- a/client/src/components/Widgets/VaaActivity7Day.jsx
+++ b/client/src/components/Widgets/VaaActivity7Day.jsx
@@ -23,7 +23,6 @@ export default function VaaActivity7Day({ settings, widgetID }) {
             'hexagon', 'octagon', 'cross', 'x'
         ];
 
-        // Sort data descending by flight level (matching Observable behavior)
         const sortedData = [...apiData].sort((a, b) => b.obs_fl - a.obs_fl);
 
         // Efficiently group into Plotly traces by volcano
@@ -44,102 +43,90 @@ export default function VaaActivity7Day({ settings, widgetID }) {
             mode: 'markers',
             marker: {
                 size: 7,
-                line: { width: .5, color: 'rgba(255, 255, 255, 0.7)' },
+                line: { width: 0.5, color: 'var(--chakra-colors-textInverted)' },
                 symbol: Symbolway[index % Symbolway.length],
             },
             // Replicating the clean Observable tooltip
             hovertemplate:
-                `<b>${volcanoName}</b><br>` +
-                'Date: %{x|%b %d %Y %H:%M}<br>' +
-                'Flight Level: %{y}<extra></extra>'
+              `<b>${volcanoName}</b><br>` +
+              'Date: %{x|%b %d %Y %H:%M}<br>' +
+              'Flight Level: %{y}<extra></extra>'
         }));
     }, [apiData]);
 
     // 2. Build the Layout (Styling and Grid)
     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: 'var(--chakra-colors-widgetTextMuted)' },
             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: 'var(--chakra-colors-text)', size: 12 }
                 },
                 type: 'date',
-                tickformat: '%b %d<br>%Y %H:%M', // Multiline ticks from Observable
-                gridcolor: '#4b5563',
-                zerolinecolor: '#4b5563',
+                tickformat: '%b %d<br>%Y %H:%M',
+                gridcolor: 'var(--chakra-colors-glassSeperator)',
+                zerolinecolor: 'var(--chakra-colors-glassSeperator)',
                 automargin: true,
             },
             yaxis: {
                 title: {
                     text: 'Flight Level',
-                    font: { color: 'white', size: 12 }
+                    font: { color: 'var(--chakra-colors-text)', size: 12 }
                 },
                 type: plotYAxisType,
-                gridcolor: '#4b5563',
-                zerolinecolor: '#ffffff',
+                gridcolor: 'var(--chakra-colors-glassSeperator)',
+                zerolinecolor: 'var(--chakra-colors-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: 'var(--chakra-colors-text)', width: 1 }
                 }
             ],
         };
     }, [apiData, plotYAxisType]);
 
     if (isLoading) return (
-        <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center">
-            <Spinner size="xl" color="blue.400" thickness="4px" />
-        </Flex>
+      <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}>
-            <Text color="red.400">{error}</Text>
-        </Flex>
+      <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 flight level data available.</Text>
-        </Flex>
+      <Flex height="100%" width="100%" align="center" justify="center" bg="transparent">
+          <Text color="widgetTextMuted">No flight level data available.</Text>
+      </Flex>
     );
 
     return (
-        <Box height="100%" width="100%" bg="gray.800" borderRadius="md" p={2} overflow="hidden">
-            <Plot
-                key={plotYAxisType}
-                data={plotTraces}
-                layout={layout}
-                useResizeHandler={true} // Essential for dashboard grid resizing!
-                style={{ width: '100%', height: '100%' }}
-                config={{ responsive: true, displayModeBar: true, displaylogo: false }}
-            />
-        </Box>
+      <Box height="100%" width="100%" bg="transparent" overflow="hidden">
+          <Plot
+            key={plotYAxisType}
+            data={plotTraces}
+            layout={layout}
+            useResizeHandler={true}
+            style={{ width: '100%', height: '100%' }}
+            config={{ responsive: true, displayModeBar: true, displaylogo: false }}
+          />
+      </Box>
     );
 }
\ No newline at end of file
diff --git a/client/src/theme.js b/client/src/theme.js
index 2865f1f..052037b 100644
--- a/client/src/theme.js
+++ b/client/src/theme.js
@@ -572,6 +572,18 @@ const config = defineConfig({
         iconColor: { value: { base: "gray.600", _dark: "gray.300" } }, // Fixed: Visible in dark mode
         glassSeperator: { value: { base: "#0000001A", _dark: "#FFFFFF3F" } },
         gooeyButtonBackground: {value: {base: "rgba(255, 255, 255, 0.1)", _dark: "rgba(255, 255, 255, 0.1)"}},
+
+        // WIDGET SPECIFIC VALUES
+        widgetItemBg: { value: { base: "rgba(0, 0, 0, 0.04)", _dark: "rgba(255, 255, 255, 0.05)" } },
+        widgetItemExpandedBg: { value: { base: "rgba(0, 0, 0, 0.08)", _dark: "rgba(0, 0, 0, 0.3)" } },
+        widgetBadgeBg: { value: { base: "rgba(255, 255, 255, 0.6)", _dark: "rgba(0, 0, 0, 0.5)" } },
+        widgetTextMuted: { value: { base: "gray.600", _dark: "gray.400" } },
+
+        // ALERT COLORS
+        alertRed: { value: { base: "red.600", _dark: "red.400" } },
+        alertOrange: { value: { base: "orange.600", _dark: "orange.400" } },
+        alertYellow: { value: { base: "yellow.600", _dark: "yellow.400" } },
+        alertGreen: { value: { base: "green.600", _dark: "green.400" } },
       },
     },
     tokens: {