update: display new data from llm quad plot view

client/src/components/Widgets/AlertChanges.jsx

@@ -1,51 +1,28 @@
-import { useDashboardStore } from "@/store/useDashboardStore.jsx";
+import {useDashboardStore} from "@/store/useDashboardStore.jsx";
 import VdapApi from "../../hooks/useVdapApi.js";
 import useBuildUrl from "../../hooks/useBuildUrl.js";
-import {
+import { Footprints, Plane, Sailboat, TrendingUp, TrendingDown } from 'lucide-react';
-  Footprints,
+import {Box, Collapsible, Flex, Spinner, Text, Timeline, Center} from "@chakra-ui/react";
-  Plane,
-  Sailboat,
-  TrendingUp,
-  TrendingDown,
-} from "lucide-react";
-import {
-  Box,
-  Collapsible,
-  Flex,
-  Spinner,
-  Text,
-  Timeline,
-  Center,
-} from "@chakra-ui/react";
 import { useMemo, useCallback } from "react";
 
-export default function AlertChanges({ settings, widgetID }) {
-  // 0) CREATE SELF AWARENESS, by finding this specific widgets object in the state-list of active/displayed widgets
-  const thisWidget = useDashboardStore(
-    useCallback(
-      (state) => state.widgets.find((widget) => widget.id === widgetID),
-      [widgetID],
-    ),
-  );
 
-  // 1) BUILD URL, default is 7 days past
+export default function AlertChanges({ settings, widgetID}) {
-  const url = useBuildUrl(
+  // Find this specific widgets object in the state list of active & displayed widgets
-    "/api/v2/alert_changes",
+  const thisWidget = useDashboardStore(useCallback((state) =>
-    settings?.startDate,
+    state.widgets.find((widget) => widget.id === widgetID), [widgetID]
-    settings?.endDate,
+  ));
-  );
 
-  // 2) CALL API hook to retrieve data
+  // build url, default is 7 days past
-  const { data: apiData, isLoading, error } = VdapApi(url);
+  const url = useBuildUrl('/api/v2/alert_changes', settings?.startDate, settings?.endDate);
 
-  // 3) SORT the data by grouping into volcanoes and sorting form newest to oldest
+  // call api hook to retrieve data
-  //    doing this 1st bc the filters might change w/ user input but the sorts (currently) wont and thus will
+  const {data: apiData, isLoading, error} = VdapApi(url);
-  //    only run when the api retrieves new data
+
-  const sortedData = useMemo(() => {
+  const data = useMemo(() => {
     if (apiData.length === 0) return [];
 
     // .reduce() is a built-in array method used to transform an entire array into a single value (like an object)
-    // here we sort the data by volcano, and return it as a single massive object w/ volcano names as keys
+    // here it returns a single massive object w/ volcano names as keys
     const grouped = apiData.reduce((accumulator, item) => {
       if (!accumulator[item.volcano]) accumulator[item.volcano] = [];
       accumulator[item.volcano].push(item);
@@ -56,384 +33,187 @@ export default function AlertChanges({ settings, widgetID }) {
     const group_arr = Object.entries(grouped);
 
     // sort data newest to oldest within each volcano
-    const sorted = group_arr.map((item) => [
+    const sorted = group_arr.map((item) =>
-      item[0], // volcano name
+      [
-      [...item[1]].sort( // item[1] is the array of al changes for a volcano
+        item[0], // volcano name
-        (a, b) =>
+        [...(item[1])].sort((a, b) =>
-          new Date(b.alert_start_date_local) -
+          new Date(b.alert_start_date_local) - new Date(a.alert_start_date_local))
-          new Date(a.alert_start_date_local),
+      ]
-      ),
-    ]);
-
-    // the volcanoes with the most recent issued alert level change appear at the top of the list (newest -> oldest)
-    const sorted_entries = [...sorted].sort(
-      (a, b) =>
-        new Date(b[1][0].alert_start_date_local) -
-        new Date(a[1][0].alert_start_date_local),
     );
 
-    // additionally, seperates out data into domains within a volcano for sm widgets,
+    // volcano with most recent alert level change appears at top of list
-    // to list all most recent al changes w/in a volcano w/in a domain
+    const sorted_entries = [...sorted].sort((a, b) => new Date(b[1][0].alert_start_date_local) - new Date(a[1][0].alert_start_date_local));
+
     if (thisWidget?.size === "small") {
-      return sorted_entries.map((volcano) => {
+      return (sorted_entries.map((volcano) => {
         const domain = volcano[1].reduce((acc, curr) => {
-          if (!acc[curr.alert_scheme_domain])
+          if (!acc[curr.alert_scheme_domain]) acc[curr.alert_scheme_domain] = [];
-            acc[curr.alert_scheme_domain] = [];
           acc[curr.alert_scheme_domain].push(curr);
           return acc;
         }, {});
 
         const domain_arr = Object.entries(domain);
-        console.log("sm data: ", [volcano[0], domain_arr]);
         return [volcano[0], domain_arr];
-      });
+      }));
     }
 
-    console.log("lg data: ", sorted_entries);
     return sorted_entries;
   }, [apiData, thisWidget]);
 
-  // 4) FILTER according to what is set in the widgets settings
+  // list of alert colors used for coloring text below
-  const filteredData = useMemo(() => {
-    if (sortedData.length === 0) return [];
-    let filtered_arr = [];
-
-    // must show at least one inc or dec alert levels, otherwise no data is displayed
-    if (
-      !settings?.filters?.levelIncreases &&
-      !settings?.filters?.levelDecreases
-    )
-      return [];
-
-    // return all data
-    if (
-      settings?.filters?.levelIncreases &&
-      settings?.filters?.levelDecreases &&
-      !settings?.filters.elevatedLevels
-    )
-      return sortedData;
-
-    // only elevated alert levels
-    filtered_arr = settings?.filters.elevatedLevels
-      ? sortedData.map((volcano) => [
-          volcano[0],
-          volcano[1].filter(
-            (item) =>
-              item.alert_scheme_highest - Number(item.alert_level_rank) <= 1,
-          ),
-        ])
-        .filter((volcano) => volcano[1].length > 0)
-      : sortedData;
-
-    // only decreases (rm inc)
-    filtered_arr = !settings?.filters.levelIncreases
-      ? filtered_arr.map((volcano) => [
-          volcano[0],
-          volcano[1].filter((item) => !(item.change_type === "increase")),
-        ])
-        .filter((volcano) => volcano[1].length > 0)
-      : filtered_arr;
-
-    // only increases (rm dec)
-    filtered_arr = !settings?.filters?.levelDecreases
-      ? filtered_arr.map((volcano) => [
-          volcano[0],
-          volcano[1].filter((item) => !(item.change_type === "decrease")),
-        ])
-        .filter((volcano) => volcano[1].length > 0)
-      : filtered_arr;
-
-    console.log("filtered_arr: ", filtered_arr);
-    return filtered_arr;
-  }, [sortedData, settings]);
-
-  // Alert colors are now light/dark mode responsive
   const alertColors = {
-    Red: "alertRed",
+    Red: "red.400",
-    Orange: "alertOrange",
+    Orange: "orange.400",
-    Yellow: "alertYellow",
+    Yellow: "yellow.400",
-    Green: "alertGreen",
+    Green: "green.400",
   };
 
-  const options = {
+  if (isLoading) return (
-    year: "numeric",
+    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
-    month: "short",
+      <Spinner size="xl" color="blue.400" thickness="4px"/>
-    day: "numeric",
+    </Flex>
-    hour: "numeric",
+  );
-    minute: "2-digit",
-    second: "2-digit",
-    timeZoneName: "short"
-  };
 
-  if (isLoading)
+  if (error) return (
-    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>
-        <Spinner size="xl" color="blue.400" thickness="4px" />
+    </Flex>
-      </Flex>
+  );
-    );
 
-  if (error)
+  if (data.length === 0) return (
-    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 textAlign="center" color="gray.400">No flight level data available for the selected dates.</Text>
-        <Text color="red.400">{error}</Text>
+    </Flex>
-      </Flex>
+  );
-    );
-
-  if (filteredData.length === 0)
-    return (
-      <Flex w="100%" h="100%" align="center" justify="center" bg="transparent">
-        <Text textAlign="center" color="widgetTextMuted">
-          No alert level data available for the selected dates.
-        </Text>
-      </Flex>
-    );
 
   return (
-    <Box
+    <Box display="flex" flexDirection="column" gap={2} p={2} w="100%" h="100%" borderRadius="lg" bg="gray.800" overflowY="auto">
-      display="flex"
+      {data.map((volcano, index) => {
-      flexDirection="column"
+        if (thisWidget?.size === "large") return (
-      gap={2}
+          <Collapsible.Root key={index} w="100%">
-      p={2}
+            {/* Using context to dynamically change the border radii of the triggers */}
-      w="100%"
+            <Collapsible.Context>
-      h="100%"
+              {(collapsible) => (
-      bg="transparent"
+                <>
-      overflowY="auto"
-    >
-      {filteredData.map((volcano, index) => {
-        if (thisWidget?.size === "large")
-          return (
-            <Collapsible.Root key={index} w="100%">
-              <Collapsible.Context>
-                {(collapsible) => (
                   <Collapsible.Trigger w="100%">
-                    <Flex
+                    <Flex direction="row"
-                      direction="row"
+                          w="100%"
-                      w="100%"
+                          justify="space-between" align="center"
-                      justify="space-between"
+                          p={1} pl={3} pr={3}
-                      align="center"
+                          borderTopRadius="lg"
-                      p={1}
+                          borderBottomRadius={collapsible.open ? "0" : "lg"}
-                      pl={3}
+                          bg="gray.600"
-                      pr={3}
-                      borderTopRadius="lg"
-                      borderBottomRadius={collapsible.open ? "0" : "lg"}
-                      bg="widgetItemBg"
                     >
-                      <Flex
+                      <Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
-                        direction="column"
+                        <Text truncate >{volcano[0]}</Text> {/* volcano name */}
-                        w="100%"
+                        <Text truncate fontSize="xs" color="gray.300/90">{volcano[1][0]?.alert_start_date_local}</Text>
-                        minW={0}
-                        textAlign="left"
-                      >
-                        <Text truncate color="text" fontWeight="medium">
-                          {volcano[0]}
-                        </Text>
-                        <Text truncate fontSize="xs" color="widgetTextMuted">
-                          {new Date(volcano[1][0]?.alert_start_date_local)
-                            .toLocaleString('en-US', options)
-                          }
-                        </Text>
                       </Flex>
-                      <Flex w="100%" minW={0} justify="right" gap={2}>
+                      <Flex w="100%" minW={0} justify="right">
-                        <Flex w="fit" color="iconColor">
+                        <Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontWeight="semibold">{volcano[1][0]?.alert_level_name}</Text>
-                          {volcano[1][0]?.change_type === "increase" ? (
-                            <TrendingUp />
-                          ) : (
-                            <TrendingDown />
-                          )}
-                        </Flex>
-                        <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.Context>
+                    <Timeline.Root size="md" variant="subtle">
-
+                      {volcano[1]?.map((object, index) => (
-              <Collapsible.Content
+                        <Timeline.Item key={index} w="100%" h="100%">
-                w="100%"
+                          <Timeline.Connector >
-                p={3}
+                            {/*<Timeline.Separator borderWidth="1px" borderColor="gray.600"/>*/}
-                borderBottomRadius="lg"
+                            <Timeline.Indicator outline="none" bg="gray.200" color="gray.500" size="lg">
-                bg="widgetItemExpandedBg"
+                              {object?.alert_scheme_domain === "terrestrial" && <Footprints size={15} />}
-              >
+                              {object?.alert_scheme_domain === "aviation" && <Plane size={15} />}
-                <Timeline.Root size="md" variant="subtle">
+                              {object?.alert_scheme_domain === "maritime" && <Sailboat size={15} />}
-                  {volcano[1]?.map((object, index) => (
+                            </Timeline.Indicator>
-                    <Timeline.Item key={index} w="100%" h="100%">
+                            <Timeline.Indicator h="50%" outline="none" bg="gray.700" color="gray.100" size="lg">
-                      <Timeline.Connector>
+                              {object?.change_type === "increase" ? <TrendingUp /> : <TrendingDown />}
-                        <Timeline.Indicator
+                            </Timeline.Indicator>
-                          outline="none"
+                          </Timeline.Connector>
-                          bg="transparent"
+                          <Timeline.Content w="100%" h="100%">
-                          color="iconColor"
+                            {/*<Timeline.Title>{object?.volcano}</Timeline.Title>*/}
-                          size="lg"
+                            <Timeline.Description w="100%" h="100%" gap={1}>
-                        >
+                              <Flex direction="column" gap={1}>
-                          {object?.alert_scheme_domain === "terrestrial" && <Footprints size={15} />}
+                                <Text w="100%" h="100%" color="gray.200">{object?.alert_start_date_local}</Text>
-                          {object?.alert_scheme_domain === "aviation" && <Plane size={15} />}
+                                <Text w="100%" h="100%"
-                          {object?.alert_scheme_domain === "maritime" && <Sailboat size={15} />}
+                                      color={alertColors[object?.alert_level_name] || "gray.200"}
-                        </Timeline.Indicator>
+                                      fontSize="md"
-                        <Timeline.Indicator
+                                      fontWeight="semibold"
-                          h="50%"
-                          outline="none"
-                          bg="transparent"
-                          color="iconColor"
-                          size="lg"
-                        >
-                          {object?.change_type === "increase" ? (
-                            <TrendingUp />
-                          ) : (
-                            <TrendingDown />
-                          )}
-                        </Timeline.Indicator>
-                      </Timeline.Connector>
-                      <Timeline.Content w="100%" h="100%">
-                        <Timeline.Description w="100%" h="100%" gap={1}>
-                          <Flex direction="column" gap={1}>
-                            <Text
-                              w="100%"
-                              h="100%"
-                              color="widgetTextMuted"
-                            >
-                              {new Date(object?.alert_start_date_local)
-                                .toLocaleString('en-US', {...options, timeZone: 'UTC'})
-                              }
-                            </Text>
-                            <Text
-                              w="100%"
-                              h="100%"
-                              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="widgetTextMuted" mr={1}>
-                                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="text"
-                                  bg={
-                                    num === Number(object?.alert_level_rank)
-                                      ? "widgetInnerBadgeBg"
-                                      : "transparent"
-                                  }
-                                  borderRadius={
-                                    num === Number(object?.alert_level_rank)
-                                      ? "xl"
-                                      : "none"
-                                  }
-                                  textAlign="center"
-                                  fontSize="sm"
-                                  fontWeight="bold"
                                 >
-                                  {num}
+                                  {object?.alert_level_name}
-                                </Center>
+                                </Text>
-                              ))}
+                                <Flex w="100%" h="20px" direction="row" justify="left" align="center">
-                            </Flex>
+                                  <Text color="gray.300">Alert Scale: </Text>
-                          </Flex>
+                                  {(Array.from({ length: Number(object?.alert_scheme_highest) - Number(object?.alert_scheme_lowest) + 1}, (v, i) => Number(object?.alert_scheme_lowest) + i))
-                        </Timeline.Description>
+                                    .map((num) => (
-                      </Timeline.Content>
+                                      <Center
-                    </Timeline.Item>
+                                        key={num}
-                  ))}
+                                        w="20px" h="100%"
-                </Timeline.Root>
+                                        color="gray.300"
-              </Collapsible.Content>
+                                        bg={num === Number(object?.alert_level_rank) ? "gray.300/20" : null} // alert level rank is a string for some reason
-            </Collapsible.Root>
+                                        borderRadius={num === Number(object?.alert_level_rank) ? "xl" : null}
-          );
+                                        textAlign="center"
-        else if (thisWidget?.size === "small")
+                                        fontSize="sm"
-          return volcano[1]?.map((domain, index) => (
+                                        fontWeight="semibold"
+                                      >
+                                        {num}
+                                      </Center>
+                                    ))
+                                  }
+                                </Flex>
+                              </Flex>
+                            </Timeline.Description>
+                          </Timeline.Content>
+                        </Timeline.Item>
+                      ))}
+                    </Timeline.Root>
+                  </Collapsible.Content>
+                </>
+              )}
+            </Collapsible.Context>
+          </Collapsible.Root>
+        )
+        else if (thisWidget?.size === "small") return (
+          volcano[1]?.map((domain, index) => (
             <Flex
               key={index}
               direction="row"
               w="100%"
               gap={2}
-              justify="space-between"
+              justify="space-between" align="center"
-              align="center"
+              p={1} pl={3} pr={3}
-              p={1}
-              pl={3}
-              pr={3}
               borderRadius="lg"
-              bg="widgetItemBg"
+              bg="gray.600"
             >
-              <Flex
+              <Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
-                direction="column"
-                w="100%"
-                minW={0}
-                textAlign="left"
-                color="text"
-              >
                 <Flex direction="row" w="100%" gap={2} align="center">
-                  <Flex color="iconColor">
+                  <Flex color="gray.300">
-                    {domain[0] === "aviation" && <Plane size={15} />}
+                    {domain[0] === "aviation" && <Plane size={15}/>}
-                    {domain[0] === "terrestrial" && <Footprints size={15} />}
+                    {domain[0] === "terrestrial" && <Footprints size={15}/>}
-                    {domain[0] === "maritime" && <Sailboat size={15} />}
+                    {domain[0] === "maritime" && <Sailboat size={15}/>}
                   </Flex>
-                  <Text truncate fontWeight="medium">
+                  <Text truncate>{volcano[0] || ""}</Text> {/* volcano name */}
-                    {volcano[0] || ""}
-                  </Text>
                 </Flex>
-                <Text truncate w="100%" fontSize="xs" color="widgetTextMuted">
+                <Text truncate w="100%" fontSize="xs" color="gray.300/90">{domain[1]?.[0]?.alert_start_date_local || ""}</Text>
-                  {domain[1]?.[0]?.alert_start_date_local || ""}
-                </Text>
               </Flex>
 
-              <Flex
+              <Flex direction="row" w="100%" minW={0} justify="right" gap={2} color="gray.200">
-                direction="row"
+                <Flex w="25px" justify="right">
-                w="100%"
+                  {domain[1]?.[0]?.change_type === "increase" ? <TrendingUp/> : <TrendingDown/>}
-                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}
+                  pl={2} pr={2}
-                  pr={2}
                   borderRadius="lg"
-                  bg="widgetBadgeBg"
+                  bg="gray.800/50"
-                  color={
+                  color={alertColors[domain[1]?.[0]?.alert_level_name] || "gray.100"}
-                    alertColors[domain[1]?.[0]?.alert_level_name] || "text"
-                  }
                   fontWeight="semibold"
                 >
                   {domain[1]?.[0]?.alert_level_name}
                 </Text>
               </Flex>
             </Flex>
-          ));
+          ))
+        );
       })}
     </Box>
-  );
+  )
-}
+}

client/src/components/Widgets/CommCoorReport.jsx

@@ -114,26 +114,23 @@ export default function CommCoorReport({ settings, widgetID }) {
     }
   }, [settings, widgetID, updateSettings, apiData]);
 
-  if (isLoading)
+  if (isLoading) return (
-    return (
+    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
-      <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="transparent">
+      <Spinner size="xl" color="blue.400" thickness="4px"/>
-        <Spinner size="xl" color="blue.400" thickness="4px"/>
+    </Flex>
-      </Flex>
+  );
-    );
 
-  if (error)
+  if (error) return (
-    return (
+    <Flex w="100%" h="100%" align="center" justify="center" textAlign="center" borderRadius="lg" bg="gray.800">
-      <Flex w="100%" h="100%" align="center" justify="center" textAlign="center" borderRadius="lg" bg="transparent">
+      <Text color="red.400">{error}</Text>
-        <Text color="red.400">{error}</Text>
+    </Flex>
-      </Flex>
+  );
-    );
 
-  if (!apiData)
+  if (!apiData) return (
-    return (
+    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
-      <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="transparent">
+      <Text textAlign="center" color="gray.400">No data</Text>
-        <Text textAlign="center" color="gray.400">No data</Text>
+    </Flex>
-      </Flex>
+  );
-    );
 
   return (
     <Flex direction="row" w="100%" h="100%" p={1} overflowY="auto">

client/src/components/Widgets/ExplosionEvents.jsx

@@ -5,17 +5,13 @@ import Plot from 'react-plotly.js';
 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 ExplosionEvents({ settings, widgetID }) {
     // Plotly expects 'linear' for normal axes
     const plotYAxisType = settings?.yAxisScale === 'log' ? 'log' : 'linear';
 
     // 🎨 Let's check color mode so we can make people happy with light and dark
     const { colorMode } = useColorMode();
-    // Assign the active palette based on the current mode
+    const isDark = colorMode === 'dark';
-    const plotColors = colorMode === 'dark' ? rawWidgetColors.dark : rawWidgetColors.light;
 
     // Generate url with input dates, default to 7 day range
     const url = useBuildUrl('/api/v2/explosion_events', settings?.startDate, settings?.endDate);
@@ -57,46 +53,58 @@ export default function ExplosionEvents({ settings, widgetID }) {
             mode: 'markers',
             marker: {
                 size: 7,
-                line: { width: .5, color: plotColors.text },
+                line: { width: .5, color: 'rgba(255, 255, 255, 0.7)' },
                 symbol: Symbolway[index % Symbolway.length],
             },
             // Replicating the clean D3/Observable tooltip
             hovertemplate:
-              `<b>${volcanoName}</b><br>` +
+                `<b>${volcanoName}</b><br>` +
-              'Date (UTC): %{x|%b %d %Y %H:%M}<br>' +
+                'Date (UTC): %{x|%b %d %Y %H:%M}<br>' +
-              'Number of Explosions: %{y}<extra></extra>'
+                'Number of Explosions: %{y}<extra></extra>'
         }));
-    }, [apiData, plotColors]);
+    }, [apiData]);
 
     // 2. Build the Layout (Styling and Grid)
     const layout = useMemo(() => {
+
         return {
             autosize: true,
-            paper_bgcolor: 'transparent',
+            paper_bgcolor: 'transparent', // Let Chakra UI background show through
             plot_bgcolor: 'transparent',
-            font: { color: plotColors.muted },
+            font: { color: '#d1d5db' }, // gray.300
             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: plotColors.text, size: 12 }
+                    font: { color: 'white', size: 12 }
                 },
                 type: 'date',
-                tickformat: '%b %d<br>%Y',
+                tickformat: '%b %d<br>%Y', // D3 requested %b %d \n %Y formatting
-                gridcolor: plotColors.grid,
+                gridcolor: '#4b5563',
-                zerolinecolor: plotColors.grid,
+                zerolinecolor: '#4b5563',
                 automargin: true,
             },
             yaxis: {
                 title: {
                     text: 'Number of Explosions',
-                    font: { color: plotColors.text, size: 12 }
+                    font: { color: 'white', size: 12 }
                 },
                 type: plotYAxisType,
-                gridcolor: plotColors.grid,
+                gridcolor: '#4b5563',
-                zerolinecolor: plotColors.text,
+                zerolinecolor: '#ffffff',
                 automargin: true,
             },
+            // legend: {
+            //     orientation: 'h',
+            //     y: -0.2,
+            //     x: 0.5,
+            //     xanchor: 'center'
+            // },
             hovermode: 'closest',
             shapes: [
                 {
@@ -107,40 +115,40 @@ export default function ExplosionEvents({ settings, widgetID }) {
                     y0: 0,
                     y1: 0,
                     yref: 'y',
-                    line: { color: plotColors.text, width: 1 }
+                    line: { color: 'white', width: 1 }
                 }
             ],
         };
-    }, [plotYAxisType, plotColors]);
+    }, [apiData, plotYAxisType]);
 
     if (isLoading) return (
-      <Flex w="100%" h="100%" bg="transparent" align="center" justify="center">
+        <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center">
-          <Spinner size="xl" color="blue.400" thickness="4px" />
+            <Spinner size="xl" color="blue.400" thickness="4px" />
-      </Flex>
+        </Flex>
     );
 
     if (error) return (
-      <Flex w="100%" h="100%" bg="transparent" align="center" justify="center" p={4}>
+        <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center" p={4}>
-          <Text color="red.400">{error}</Text>
+            <Text color="red.400">{error}</Text>
-      </Flex>
+        </Flex>
     );
 
     if (plotTraces.length === 0) return (
-      <Flex height="100%" width="100%" align="center" justify="center" bg="transparent">
+        <Flex height="100%" width="100%" align="center" justify="center" bg="gray.800" borderRadius="md">
-          <Text color="var(--chakra-colors-widgetTextMuted)">No data available for current filter.</Text>
+            <Text color="gray.400">No data available for current filter.</Text>
-      </Flex>
+        </Flex>
     );
 
     return (
-      <Box height="100%" width="100%" bg="transparent" overflow="hidden">
+        <Box height="100%" width="100%" bg="transparent" borderRadius="md" p={2} overflow="hidden">
-          <Plot
+            <Plot
-            key={`${plotYAxisType}-${colorMode}`}
+                key={plotYAxisType}
-            data={plotTraces}
+                data={plotTraces}
-            layout={layout}
+                layout={layout}
-            useResizeHandler={true}
+                useResizeHandler={true} // Essential for dashboard grid resizing!
-            style={{ width: '100%', height: '100%' }}
+                style={{ width: '100%', height: '100%' }}
-            config={{ responsive: true, displayModeBar: true, displaylogo: false }}
+                config={{ responsive: true, displayModeBar: true, displaylogo: false }}
-          />
+            />
-      </Box>
+        </Box>
     );
 }

client/src/components/Widgets/IvansAlerts.jsx

@@ -1,4 +1,4 @@
-import {Button, Flex, Spinner, Text, Box, Collapsible, Highlight} from "@chakra-ui/react";
+import {Button, Flex, Spinner, Text, Box, Collapsible} from "@chakra-ui/react";
 import {useEffect, useMemo, useCallback } from 'react';
 import {useDashboardStore} from "@/store/useDashboardStore.jsx";
 import VdapApi from '../../hooks/useVdapApi.js';
@@ -43,31 +43,30 @@ export default function IvansAlerts({ settings, widgetID }) {
       }).join('\n\n');
       navigator.clipboard.writeText(dataText)
         .then(() => {
-          alert('Copied to clipboard!');
+            alert('Copied to clipboard!');
         })
         .catch((err => {
-          console.error('Failed to copy: ', err);
+            console.error('Failed to copy: ', err);
         }));
       updateSettings(widgetID, {copyToClipboard: false});
     }
   }, [settings, some_data, widgetID, updateSettings]);
 
-  // Cleaned hardcoded grays for transparent so glass shell shows through
   if (isLoading) return (
-    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="transparent">
+    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
       <Spinner size="xl" color="blue.400" thickness="4px"/>
     </Flex>
   );
 
   if (error) return (
-    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="transparent">
+    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
       <Text color="red.400">{error}</Text>
     </Flex>
   );
 
   if (some_data.length === 0) return (
-    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="transparent">
+    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
-      <Text textAlign="center" color="widgetTextMuted">No flight level data available for the selected dates.</Text>
+      <Text textAlign="center" color="gray.400">No flight level data available for the selected dates.</Text>
     </Flex>
   );
 
@@ -79,7 +78,7 @@ export default function IvansAlerts({ settings, widgetID }) {
           p={2} gap={2}
           overflow="auto"
           borderRadius="xl"
-          bg="transparent" // Let the global widgetRecipe glass shell show through
+          bg="gray.800"
     >
       {some_data.map((item, index) => {
         if (thisWidget?.size === "large") return (
@@ -97,46 +96,47 @@ export default function IvansAlerts({ settings, widgetID }) {
                       gap={2}
                       borderTopRadius="lg"
                       borderBottomRadius={collapsible.open ? "0" : "lg"}
-                      bg="widgetItemBg"
+                      bg="gray.600"
                     >
-                      <Flex direction="column" w="100%" minW={0} textAlign="left" color="text">
+                      <Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
-                        <Text truncate color="text" fontWeight="medium">{item.volcano_name}</Text>
+                        <Text truncate>{item.volcano_name}</Text>
-                        <Text truncate fontSize="xs" color="widgetTextMuted">{item.send_time}</Text>
+                        <Text truncate fontSize="xs" color="gray.300/90">{item.send_time}</Text>
                       </Flex>
                       <Flex w="100%" minW={0} justify="right">
-                        <Text truncate pl={2} pr={2} borderRadius="lg" bg="widgetBadgeBg" color="text" fontWeight="semibold">{item.report_num}</Text>
+                        <Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontWeight="semibold">{item.report_num}</Text>
                       </Flex>
                     </Flex>
                   </Collapsible.Trigger>
                   <Collapsible.Content w="100%" h="auto">
                     {/* This box needs to be at h="100%" for the pdf toolbar to appear */}
-                    <Box w="100%" h="100%" p={1} borderBottomRadius="lg" bg="widgetItemExpandedBg">
+                    <Box w="100%" h="100%" p={1} borderBottomRadius="lg" bg="gray.700/45">
-                      <Flex direction="column" gap={2} borderRadius="lg" p={2} align="start">
+                      <Flex direction="column" gap={2} bg="gray.800/75" borderRadius="lg" p={2} align="end">
-                        <Text w="fit" fontSize="sm" color="text" p={1} bg="widgetInnerBadgeBg" borderRadius="md">Preparer: {item?.preparer}</Text>
+                        <Text w="100%" h="100%" fontSize="sm" color="gray.100" textAlign="left" whiteSpace="pre-line">{item?.summary}</Text>
-                        <Text w="100%" h="100%" fontSize="sm" color="text" textAlign="left" whiteSpace="pre-line">{item?.summary}</Text>
+                        <Text w="fit" fontSize="sm" color="gray.200" pl={1} pr={1} bg="gray.700/50" borderRadius="md">Preparer: {item?.preparer}</Text>
                       </Flex>
                       {item?.files?.map((file, index) => {
                         return (
-                          <Box w="100%" h="100%" key={index} >
+                          <Box w="100%" h="100%" key={index} p={1}>
-                            <Flex direction="row" w="100%">
+                            <br />
-                              <Text w="100%" p={1} fontWeight="semibold" bg="widgetInnerBadgeBg" borderLeftRadius="lg" fontSize="sm" color="text">File: </Text>
+                            <Flex mb={2} justify="space-between">
-                              <a href={`${file?.url}#view=FitV&toolbar=0`} target="_blank" rel="noopener noreferrer">
+                              <Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text>
-                                <Text truncate w="100%" p={1} bg="widgetInnerBadgeBg" borderRightRadius="lg" fontSize="sm" color="text">
+                              <Box borderRadius="lg" bg="gray.700" color="gray.300" pl={1} pr={1} fontSize={13} asChild>
-                                  {file?.name}
+                                <a href={`${file?.url}#view=FitV&toolbar=1`} target="_blank" rel="noopener noreferrer">
-                                </Text>
+                                  Open
-                              </a>
+                                </a>
+                              </Box>
                             </Flex>
                             <object
                               data={`${file?.url}#view=FitH&toolbar=1`}
                               type="application/pdf"
                               style={{ width: '100%', height: '100%', display: 'block' }}
                             >
-                              <Flex direction="column" w="100%" h="100%" align="center" p={4} mt={1} color="widgetTextMuted" bg="widgetInnerBadgeBg" borderRadius="lg">
+                              <Flex w="100%" h="100%" p={4} color="gray.400">
-                                <Text mb={2} fontSize="xs" color="red.300">
+                                <Text mb={2} color="fg.muted">
                                   Your browser cannot display this PDF directly.
                                 </Text>
-                                <a href={file?.url} target="_blank" bg="widgetBadgeBg" rel="noopener noreferrer">
+                                <a href={file?.url} target="_blank">
-                                  <Text fontSize="xs" bg="widgetBadgeBg" borderRadius="md" p={1}>Download PDF Instead</Text>
+                                  Download PDF
                                 </a>
                               </Flex>
                             </object>
@@ -151,20 +151,19 @@ export default function IvansAlerts({ settings, widgetID }) {
         )
         else if (thisWidget?.size === "small") return (
           <Flex direction="row"
-                key={index} // Added missing map key
                 w="100%"
                 justify="space-between" align="center"
                 p={1} pl={3} pr={3}
                 gap={2}
                 borderRadius="lg"
-                bg="widgetItemBg"
+                bg="gray.600"
           >
-            <Flex direction="column" w="100%" minW={0} textAlign="left" color="text">
+            <Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
               <Text truncate>{item.volcano_name}</Text>
-              <Text truncate fontSize="xs" color="widgetTextMuted">{item.send_time}</Text>
+              <Text truncate fontSize="xs" color="gray.300/90">{item.send_time}</Text>
             </Flex>
             <Flex w="100%" minW={0} justify="right">
-              <Text truncate pl={2} pr={2} borderRadius="lg" bg="widgetBadgeBg" color="text" fontWeight="semibold">{item.report_num}</Text>
+              <Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontWeight="semibold">{item.report_num}</Text>
             </Flex>
           </Flex>
         )

client/src/components/Widgets/LlmAlChangesQuadPlot.jsx

@@ -8,6 +8,10 @@ export default function LlmAlChangesQuadPlot(props) {
     let tn_percent = 0;
     let fp_percent = 0;
     let fn_percent = 0;
+    let jf_percent = 0;
+    let error_count = 0;
+    let no_dvar_data_count = 0;
+
 
     // Clean, single-line data fetching
     const { data: apiData, isLoading, error } = VdapApi('/api/v2/llm_quadrant_plot');
@@ -32,32 +36,34 @@ export default function LlmAlChangesQuadPlot(props) {
 
     if (apiData) {
         console.log(apiData);
-        tp_percent = ((apiData[0]['tp_count']/apiData[0]['tot_count'])*100).toFixed(2);
+        tp_percent = ((apiData[0]['tp_count']/apiData[0]['vr_count'])*100).toFixed(2);
-        tn_percent = ((apiData[0]['tn_count']/apiData[0]['tot_count'])*100).toFixed(2);
+        tn_percent = ((apiData[0]['tn_count']/apiData[0]['vr_count'])*100).toFixed(2);
-        fp_percent = ((apiData[0]['fp_count']/apiData[0]['tot_count'])*100).toFixed(2);
+        fp_percent = ((apiData[0]['fp_count']/apiData[0]['vr_count'])*100).toFixed(2);
-        fn_percent = ((apiData[0]['fn_count']/apiData[0]['tot_count'])*100).toFixed(2);
+        fn_percent = ((apiData[0]['fn_count']/apiData[0]['vr_count'])*100).toFixed(2);
+        jf_percent = ((apiData[0]['jf_count']/apiData[0]['vr_count'])*100).toFixed(2);
+        error_count = apiData[0]['e_count'];
+        no_dvar_data_count = apiData[0]['ndd_count'];
     }
 
     return (
-        <Flex direction="column" w="100%" h="100%" borderRadius="lg">
+        <Flex direction="column" w="100%" h="100%" bg="gray.800" borderRadius="lg" gap={1} p={1}>
-            <Flex direction="row" w="100%" bg="gray.800" borderTopRadius="lg" justifyItems="center" alignItems="start" p={2} pb={0} pl={4} justifyContent="end">
+            <Flex direction="column" align="end" justify="center" color="white" gap={1}>
-                {/*<Text fontWeight="bold" fontSize="lg" color="white">Alert Level Changes Quad Plot</Text>*/}
+                <Text w="fit" bg="cyan.200/5" borderRadius="sm" p={1}>All Time</Text>
-                <Text bg="cyan.200/5" borderRadius="sm" padding="1" fontWeight="normal" fontSize="sm" color="white">All time</Text>
             </Flex>
-            <Flex direction="column" w="100%" h="100%" bg="gray.800" gap="2" padding="2" borderBottomRadius="lg">
+            <Flex direction="column" w="100%" h="100%" gap="2" borderBottomRadius="lg">
                 <Flex direction="row" w="100%" h="100%" gap="2">
                     <Center bg={`blue.200/${tp_percent % 50}`} w="100%" h="100%" borderRadius="lg" color="white" fontSize="sm" fontWeight="bold">
                         <Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
                             <Text>True Positive</Text>
                             <Text fontSize="lg"> {tp_percent}% </Text>
-                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['tp_count']}/{apiData[0]['tot_count']} </Text>
+                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['tp_count']}/{apiData[0]['vr_count']} </Text>
                         </Flex>
                     </Center>
                     <Center bg={`blue.200/${tn_percent % 50}`} w="100%" h="100%" borderRadius="lg" color="white" fontSize="sm" fontWeight="bold">
                         <Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
                             <Text>True Negative</Text>
                             <Text fontSize="lg"> {tn_percent}% </Text>
-                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['tn_count']}/{apiData[0]['tot_count']} </Text>
+                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['tn_count']}/{apiData[0]['vr_count']} </Text>
                         </Flex>
                     </Center>
                 </Flex>
@@ -66,17 +72,30 @@ export default function LlmAlChangesQuadPlot(props) {
                         <Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
                             <Text>False Positive</Text>
                             <Text fontSize="lg"> {fp_percent}% </Text>
-                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['fp_count']}/{apiData[0]['tot_count']} </Text>
+                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['fp_count']}/{apiData[0]['vr_count']} </Text>
                         </Flex>
                     </Center>
                     <Center bg={`blue.200/${fn_percent % 50}`} w="100%" h="100%" borderRadius="lg" color="white" fontSize="sm" fontWeight="bold">
                         <Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
                             <Text>False Negative</Text>
                             <Text fontSize="lg"> {fn_percent}% </Text>
-                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['fn_count']}/{apiData[0]['tot_count']} </Text>
+                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['fn_count']}/{apiData[0]['vr_count']} </Text>
                         </Flex>
                     </Center>
                 </Flex>
+                <Flex direction="row" w="100%" h="100%" gap="2">
+                    <Center bg={`blue.200/${jf_percent % 50}`} w="100%" h="100%" borderRadius="lg" color="white" fontSize="sm" fontWeight="bold">
+                        <Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
+                            <Text>Just False</Text>
+                            <Text fontSize="lg"> {jf_percent}% </Text>
+                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['jf_count']}/{apiData[0]['vr_count']} </Text>
+                        </Flex>
+                    </Center>
+                </Flex>
+            </Flex>
+            <Flex direction="row" w="100%" justify="space-between" gap={1} color="white">
+                <Text w="fit" bg="blue.200/5" borderRadius="sm" p={1}>Errors: {error_count}</Text>
+                <Text w="fit" bg="blue.200/5" borderRadius="sm" p={1}>No DVAR Data: {no_dvar_data_count}</Text>
             </Flex>
         </Flex>
     )

client/src/components/Widgets/PlumeEvents.jsx

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

client/src/components/Widgets/RemoteSensing.jsx

@@ -52,25 +52,25 @@ export default function RemoteSensing({ settings, widgetID }) {
   }, [settings, data, widgetID, updateSettings]);
 
   if (isLoading) return (
-    <Flex w="100%" h="100%" align="center" justify="center" bg="transparent">
+    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="md" bg="gray.800">
       <Spinner size="xl" color="blue.400" thickness="4px"/>
     </Flex>
   );
 
   if (error) return (
-    <Flex w="100%" h="100%" align="center" justify="center" p={4} bg="transparent">
+    <Flex w="100%" h="100%" align="center" justify="center" p={4} borderRadius="md" bg="gray.800">
       <Text color="red.400">{error}</Text>
     </Flex>
   );
 
   if (data.length === 0) return (
-    <Flex height="100%" width="100%" align="center" justify="center" bg="transparent">
+    <Flex height="100%" width="100%" align="center" justify="center" bg="gray.800" borderRadius="md">
-      <Text color="widgetTextMuted">No Remote Sensing data available this week.</Text>
+      <Text color="gray.400">No Remote Sensing data available this week.</Text>
     </Flex>
   );
 
   return (
-    <Flex direction="column" w="100%" h="100%" pos="relative" justify="top" align="center" p={2} gap={2} overflow="auto" bg="transparent">
+    <Flex direction="column" w="100%" h="100%" pos="relative" justify="top" align="center" p={2} gap={2} overflow="auto" borderRadius="xl" bg="gray.800">
       {data.map((item, index) => {
         if (thisWidget?.size === "large" || thisWidget?.size === "medium") return (
           <Collapsible.Root key={index} w="100%">
@@ -80,14 +80,14 @@ export default function RemoteSensing({ settings, widgetID }) {
                 <>
                   <Collapsible.Trigger w="100%" overflow="hidden">
                     <Flex direction="row" w="100%" h="100%" justify="space-between" align="center" gap={2} p={1} pl={3} pr={3}
-                          borderTopRadius="lg" borderBottomRadius={collapsible.open ? "0" : "lg"} bg="widgetItemBg"
+                          borderTopRadius="lg" borderBottomRadius={collapsible.open ? "0" : "lg"} bg="gray.600"
                     >
-                      <Flex direction="column" w="100%" minW={0} textAlign="left" color="text">
+                      <Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
                         <Text truncate>{item?.volcano_name}</Text>
-                        <Text truncate fontSize="xs" color="widgetTextMuted">{item?.country}</Text>
+                        <Text truncate fontSize="xs" color="gray.300/90">{item?.country}</Text>
                       </Flex>
                       <Flex w="100%" minW={0} justify="right">
-                        <Text truncate pl={2} pr={2} borderRadius="lg" bg="widgetBadgeBg" color="text" fontSize="sm" fontWeight="semibold">
+                        <Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontSize="sm" fontWeight="semibold">
                           {item?.report_time}
                         </Text>
                       </Flex>
@@ -95,10 +95,10 @@ export default function RemoteSensing({ settings, widgetID }) {
                   </Collapsible.Trigger>
                   <Collapsible.Content w="100%" h="auto">
                     {/* This box needs to be at h="100%" for the pdf toolbar to appear */}
-                    <Box w="100%" h="100%" p={1} borderBottomRadius="lg" bg="widgetItemExpandedBg">
+                    <Box w="100%" h="100%" p={1} borderBottomRadius="lg" bg="gray.700/45">
-                      <Flex direction="column" gap={2} borderRadius="lg" p={2} align="end">
+                      <Flex direction="column" gap={2} bg="gray.800/75" borderRadius="lg" p={2} align="end">
-                        <Text w="100%" h="100%" fontSize="sm" color="text" textAlign="left" whiteSpace="pre-line">{item?.summary}</Text>
+                        <Text w="100%" h="100%" fontSize="sm" color="gray.100" textAlign="left" whiteSpace="pre-line">{item?.summary}</Text>
-                        <Text w="fit" fontSize="sm" color="text" pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md">Source: {item?.sender}</Text>
+                        <Text w="fit" fontSize="sm" color="gray.200" pl={1} pr={1} bg="gray.700/50" borderRadius="md">Source: {item?.sender}</Text>
                       </Flex>
                       {item?.files?.map((file, index) => {
 
@@ -107,15 +107,15 @@ export default function RemoteSensing({ settings, widgetID }) {
                           <Box w="100%" h="100%" key={index} p={1}>
                             <br />
                             <Flex dir="row" justify="space-between" align="center" mb={2}>
-                              <Text pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md" fontSize="xs" color="text">{file?.name}</Text>
+                              <Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text>
-                              <Text pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md" fontSize="xs" color="widgetTextMuted">PDF</Text>
+                              <Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300/90">PDF</Text>
                             </Flex>
                             <object
                               data={`${file?.url}#view=FitH&toolbar=1`}
                               type="application/pdf"
                               style={{width: '100%', height: '100%', display: 'block'}}
                             >
-                              <Flex w="100%" h="100%" p={4} color="widgetTextMuted">
+                              <Flex w="100%" h="100%" p={4} color="gray.400">
                                 <Text mb={2} color="fg.muted">
                                   Your browser cannot display this PDF directly.
                                 </Text>
@@ -132,8 +132,8 @@ export default function RemoteSensing({ settings, widgetID }) {
                           <Box key={index} w="100%" h="100%" p={1}>
                             <br />
                             <Flex dir="row" justify="space-between" align="center" mb={2}>
-                              <Text pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md" fontSize="xs" color="text">{file?.name}</Text>
+                              <Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text>
-                              <Text pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md" fontSize="xs" color="widgetTextMuted">PNG</Text>
+                              <Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300/90">PNG</Text>
                             </Flex>
                             <a href={file?.url} target="_blank" rel="noopener noreferrer">
                               <img src={file?.url} alt={file?.name} />
@@ -146,7 +146,7 @@ export default function RemoteSensing({ settings, widgetID }) {
                           <>
                             <br />
                             <Flex key={index} dir="row" w="100%" h="100%" p={1} align="center" justify="space-between">
-                              <Text pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md" fontSize="xs" color="text">{file?.name}</Text>
+                              <Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text>
                               <Button asChild variant="surface" size="xxs" fontSize="xs" pl={2} pr={2}>
                                 <a href={file?.url} target="_blank" rel="noopener noreferrer">Download</a>
                               </Button>
@@ -162,17 +162,17 @@ export default function RemoteSensing({ settings, widgetID }) {
           </Collapsible.Root>
         )
         else if (thisWidget?.size === "small") return (
-          <Flex key={index} direction="row" w="100%" justify="space-between" align="center" gap={2} p={1} pl={3} pr={3} borderRadius="lg" bg="widgetItemBg">
+          <Flex key={index} direction="row" w="100%" justify="space-between" align="center" gap={2} p={1} pl={3} pr={3} borderRadius="lg" bg="gray.600">
-            <Flex direction="column" w="100%" minW={0} textAlign="left" color="text">
+            <Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
               <Text truncate>{item?.volcano_name}</Text>
-              <Text truncate fontSize="xs" color="widgetTextMuted">{item?.country}</Text>
+              <Text truncate fontSize="xs" color="gray.300/90">{item?.country}</Text>
             </Flex>
             <Flex w="100%" minW={0} justify="right">
               <Text
                 truncate
                 pl={2} pr={2}
                 borderRadius="lg"
-                bg="widgetBadgeBg" color="text"
+                bg="gray.800/50" color="gray.100"
                 fontSize="sm" fontWeight="semibold"
               >
                 {item?.report_time}
@@ -185,6 +185,7 @@ export default function RemoteSensing({ settings, widgetID }) {
   );
 }
 
+
 function ascTimeVolcanoSort(a, b) {
   if (a.volcano_name < b.volcano_name) return -1
   else if (a.volcano_name > b.volcano_name) return 1

client/src/components/Widgets/SeismicEvents.jsx

@@ -1,18 +1,10 @@
 import VdapApi from '../../hooks/useVdapApi.js';
 import { useMemo } from 'react';
 import Plot from 'react-plotly.js';
-import { Box, Flex, Spinner, Text } from "@chakra-ui/react";
+import {Box, Flex, Spinner, Text} from "@chakra-ui/react";
 import useBuildUrl from "@/hooks/useBuildUrl.js";
 
-// 1. Import Chakra color mode and your central color dictionary
-import { useColorMode } from "@/components/ui/color-mode.jsx";
-import { rawWidgetColors } from '../../theme.js';
-
 export default function SeismicEvents({ 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/seismic_events', settings?.startDate, settings?.endDate);
 
@@ -52,7 +44,7 @@ export default function SeismicEvents({ settings, widgetID}) {
       mode: 'markers',
       marker: {
         size: 7,
-        line: { width: .5, color: plotColors.text },
+        line: { width: .5, color: 'rgba(255, 255, 255, 0.7)' },
         symbol: Symbolway[index % Symbolway.length],
       },
       // Replicating the clean D3/Observable tooltip
@@ -61,36 +53,48 @@ export default function SeismicEvents({ settings, widgetID}) {
         'Date (UTC): %{x|%b %d %Y %H:%M}<br>' +
         'Number of Seismic Events: %{y}<extra></extra>'
     }));
-  }, [apiData, plotColors]);
+  }, [apiData]);
 
   const layout = useMemo(() => {
+
     return {
       autosize: true,
       paper_bgcolor: 'transparent', // Let Chakra UI background show through
       plot_bgcolor: 'transparent',
-      font: { color: plotColors.muted },
+      font: { color: '#d1d5db' }, // gray.300
       margin: { t: 40, r: 20, l: 20, b: 20 },
+      // title: {
+      //     text: '',
+      //     font: { size: 16, color: 'white' },
+      //     x: 0.05
+      // },
       xaxis: {
         title: {
           text: 'Date (UTC)',
-          font: { color: plotColors.text, size: 12 }
+          font: { color: 'white', size: 12 }
         },
         type: 'date',
         tickformat: '%b %d<br>%Y', // D3 requested %b %d \n %Y formatting
-        gridcolor: plotColors.grid,
+        gridcolor: '#4b5563',
-        zerolinecolor: plotColors.grid,
+        zerolinecolor: '#4b5563',
         automargin: true,
       },
       yaxis: {
         title: {
           text: 'Seismic Count',
-          font: { color: plotColors.text, size: 12 }
+          font: { color: 'white', size: 12 }
         },
         type: 'linear',
-        gridcolor: plotColors.grid,
+        gridcolor: '#4b5563',
-        zerolinecolor: plotColors.text,
+        zerolinecolor: '#ffffff',
         automargin: true,
       },
+      // legend: {
+      //     orientation: 'h',
+      //     y: -0.2,
+      //     x: 0.5,
+      //     xanchor: 'center'
+      // },
       hovermode: 'closest',
       shapes: [
         {
@@ -101,34 +105,33 @@ export default function SeismicEvents({ settings, widgetID}) {
           y0: 0,
           y1: 0,
           yref: 'y',
-          line: { color: plotColors.text, width: 1 }
+          line: { color: 'white', width: 1 }
         }
       ],
     };
-  }, [plotColors]);
+  }, []);
 
   if (isLoading) return (
-    <Flex w="100%" h="100%" bg="transparent" align="center" justify="center">
+    <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center">
       <Spinner size="xl" color="blue.400" thickness="4px" />
     </Flex>
   );
 
   if (error) return (
-    <Flex w="100%" h="100%" bg="transparent" align="center" justify="center" p={4}>
+    <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" 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="transparent">
+    <Flex height="100%" width="100%" align="center" justify="center" bg="gray.800" borderRadius="md">
-      <Text color="var(--chakra-colors-widgetTextMuted)">No data available for current filter.</Text>
+      <Text color="gray.400">No data available for current filter.</Text>
     </Flex>
   );
 
   return (
-    <Box height="100%" width="100%" bg="transparent" overflow="hidden">
+    <Box height="100%" width="100%" bg="transparent" borderRadius="md" p={2} overflow="hidden">
       <Plot
-        key={colorMode}
         data={plotTraces}
         layout={layout}
         useResizeHandler={true} // Essential for dashboard grid resizing!

client/src/components/Widgets/VaaActivity7Day.jsx

@@ -1,18 +1,11 @@
 import { useMemo } from 'react';
 import { Box, Flex, Spinner, Text } from '@chakra-ui/react';
 import Plot from 'react-plotly.js';
-import VdapApi from '../../hooks/useVdapApi.js';
+import VdapApi from '../../hooks/useVdapApi.js'; // Adjust path as needed
-import { useColorMode } from "@/components/ui/color-mode.jsx";
-
-// Import central color dictionary
-import { rawWidgetColors } from '../../theme.js'; // Adjust path if needed
 
 export default function VaaActivity7Day({ settings, widgetID }) {
-    const { colorMode } = useColorMode();
+    console.log("3. Chart received settings:", settings);
-
+    // Plotly expects 'linear' for normal axes
-    // 2. Assign the active palette based on the current mode
-    const plotColors = colorMode === 'dark' ? rawWidgetColors.dark : rawWidgetColors.light;
-
     const plotYAxisType = settings?.yAxisScale === 'symlog' ? 'symlog' : 'linear';
 
     // Clean, single-line data fetching
@@ -24,10 +17,13 @@ export default function VaaActivity7Day({ settings, widgetID }) {
 
         // Array of distinct Plotly shapes
         const Symbolway = [
-            'circle', 'square', 'diamond', 'triangle-up', 'triangle-down',
+            'circle', 'square', 'diamond',
-            'star', 'hexagram', 'pentagon', 'hexagon', 'octagon', 'cross', 'x'
+            'triangle-up', 'triangle-down',
+            'star', 'hexagram', 'pentagon',
+            '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
@@ -48,90 +44,102 @@ export default function VaaActivity7Day({ settings, widgetID }) {
             mode: 'markers',
             marker: {
                 size: 7,
-                line: { width: 0.5, color: plotColors.text },
+                line: { width: .5, color: 'rgba(255, 255, 255, 0.7)' },
                 symbol: Symbolway[index % Symbolway.length],
             },
             // Replicating the clean Observable tooltip
             hovertemplate:
-              `<b>${volcanoName}</b><br>` +
+                `<b>${volcanoName}</b><br>` +
-              'Date: %{x|%b %d %Y %H:%M}<br>' +
+                'Date: %{x|%b %d %Y %H:%M}<br>' +
-              'Flight Level: %{y}<extra></extra>'
+                'Flight Level: %{y}<extra></extra>'
         }));
-    }, [apiData, plotColors]);
+    }, [apiData]);
 
     // 2. Build the Layout (Styling and Grid)
     const layout = useMemo(() => {
+
         return {
             autosize: true,
-            paper_bgcolor: 'transparent',
+            paper_bgcolor: 'transparent', // Let Chakra UI background show through
             plot_bgcolor: 'transparent',
-            font: { color: plotColors.muted },
+            font: { color: '#d1d5db' }, // gray.300
             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: plotColors.text, size: 12 }
+                    font: { color: 'white', size: 12 }
                 },
                 type: 'date',
-                tickformat: '%b %d<br>%Y %H:%M',
+                tickformat: '%b %d<br>%Y %H:%M', // Multiline ticks from Observable
-                gridcolor: plotColors.grid, 
+                gridcolor: '#4b5563',
-                zerolinecolor: plotColors.grid,
+                zerolinecolor: '#4b5563',
                 automargin: true,
             },
             yaxis: {
                 title: {
                     text: 'Flight Level',
-                    font: { color: plotColors.text, size: 12 }
+                    font: { color: 'white', size: 12 }
                 },
                 type: plotYAxisType,
-                gridcolor: plotColors.grid,
+                gridcolor: '#4b5563',
-                zerolinecolor: plotColors.text,
+                zerolinecolor: '#ffffff',
                 automargin: true,
             },
+            // legend: {
+            //     orientation: 'h',
+            //     y: -0.2,
+            //     x: 0.5,
+            //     xanchor: 'center'
+            // },
             hovermode: 'closest',
             shapes: [
                 {
                     type: 'line',
                     x0: 0,
                     x1: 1,
-                    xref: 'paper',
+                    xref: 'paper', // Spans entire chart width
                     y0: 0,
                     y1: 0,
                     yref: 'y',
-                    line: { color: plotColors.text, width: 1 }
+                    line: { color: 'white', width: 1 }
                 }
             ],
         };
-    }, [plotYAxisType, plotColors]);
+    }, [apiData, plotYAxisType]);
 
     if (isLoading) return (
-      <Flex w="100%" h="100%" bg="transparent" align="center" justify="center">
+        <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center">
-          <Spinner size="xl" color="blue.400" thickness="4px" />
+            <Spinner size="xl" color="blue.400" thickness="4px" />
-      </Flex>
+        </Flex>
     );
 
     if (error) return (
-      <Flex w="100%" h="100%" bg="transparent" align="center" justify="center" p={4}>
+        <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center" p={4}>
-          <Text color="red.400">{error}</Text>
+            <Text color="red.400">{error}</Text>
-      </Flex>
+        </Flex>
     );
 
     if (plotTraces.length === 0) return (
-      <Flex height="100%" width="100%" align="center" justify="center" bg="transparent">
+        <Flex height="100%" width="100%" align="center" justify="center" bg="gray.800" borderRadius="md">
-          <Text color="widgetTextMuted">No flight level data available.</Text>
+            <Text color="gray.400">No flight level data available.</Text>
-      </Flex>
+        </Flex>
     );
 
     return (
-      <Box height="100%" width="100%" bg="transparent" overflow="hidden">
+        <Box height="100%" width="100%" bg="gray.800" borderRadius="md" p={2} overflow="hidden">
-          <Plot
+            <Plot
-            key={`${plotYAxisType}-${colorMode}`}
+                key={plotYAxisType}
-            data={plotTraces}
+                data={plotTraces}
-            layout={layout}
+                layout={layout}
-            useResizeHandler={true}
+                useResizeHandler={true} // Essential for dashboard grid resizing!
-            style={{ width: '100%', height: '100%' }}
+                style={{ width: '100%', height: '100%' }}
-            config={{ responsive: true, displayModeBar: true, displaylogo: false }}
+                config={{ responsive: true, displayModeBar: true, displaylogo: false }}
-          />
+            />
-      </Box>
+        </Box>
     );
 }

client/src/components/Widgets/settings/AlertChangeSettings.jsx

@@ -1,283 +1,36 @@
-import {
+import {Flex, Slider, Switch} from "@chakra-ui/react";
-  Flex,
+import {useDashboardStore} from "@/store/useDashboardStore.jsx";
-  Slider,
-  Switch,
-  Text,
-  Field,
-  Fieldset,
-  Input,
-  CheckboxCard,
-  CheckboxGroup,
-  Combobox,
-  Portal,
-  useFilter,
-  useListCollection,
-  Wrap,
-  Badge, Separator, HStack, useSlotRecipe
-} from "@chakra-ui/react";
-import { useDashboardStore } from "@/store/useDashboardStore.jsx";
-import { useState, useMemo } from "react";
 
-export default function AlertChangeSettings({ widgetId, currentSettings }) {
+export default function IvansAlertsSettings({ widgetId, currentSettings }) {
-  // STYLING
+  const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
-  const popoverRecipe = useSlotRecipe({ key: "glassPopover" });
-  const popoverStyles = popoverRecipe();
-
-  // STATE MANAGEMENT
-  const updateSettings = useDashboardStore(
-    (state) => state.updateWidgetSettings,
-  );
-  const [startError, setStartError] = useState(null);
-  const [endError, setEndError] = useState(null);
-  const [selectedVolcanoes, setSelectedVolcanoes] = useState([]);
-  const { startsWith } = useFilter({ sensitivity: "base" });
-
-  const { collection, filter, reset } = useListCollection({
-    initialItems: volcanoes,
-    filter: startsWith,
-    limit: 10,
-  });
-
-  // FUNCTIONS
-  const handleValueChange = (details) => {
-    setSelectedVolcanoes(details.value)
-  }
 
   return (
-    <Flex direction="column" pb={2} overflowY="auto">
+    <Flex flexDirection="column" justifyContent="space-between" gap={2} pb={2}>
-      <Fieldset.Root>
+      {/* SLIDER DATE RANGE SELECTION */}
-        <Fieldset.Content>
+      <Slider.Root
-          {/* SELECTING DATE RANGE */}
+        width="80%" h="100%"
-          <HStack>
+        min={1} max={14}
-            <Text flexShrink="0" fontWeight="semibold">Date Range Selection</Text>
+        defaultValue={[7]}
-            <Separator flex="1" size="sm"/> {/*line seperator*/}
+        step={1}
-          </HStack>
+        onValueChangeEnd={(e) => {
-          <Flex direction="column" w="100%" h="100%" justify="center" gap={2} pr={1}>
+          const day = new Date(Date.now() - (e.value[0])*86400000).toLocaleDateString('en-CA');
-            {/* start date */}
+          console.log("new start: ", day);
-            <Field.Root invalid={!!startError}>
+          updateSettings(widgetId, {...currentSettings, startDate: day});
-              <Flex
+        }}
-                direction="row"
+      >
-                w="100%"
+        <Slider.Label>{currentSettings?.endDate} to {currentSettings?.startDate}</Slider.Label>
-                h="100%"
+        <Slider.Control>
-                align="center"
+          <Slider.Track>
-                justify="center"
+            <Slider.Range />
-              >
+          </Slider.Track>
-                <Text w="50%" align="center" justify="center" color="text">
+          <Slider.Thumbs />
-                  Start Date
+          <Slider.MarkerGroup p={3}>
-                </Text>
+            <Slider.Marker value={1} whiteSpace="nowrap">today</Slider.Marker>
-                <Flex direction="column" w="100%">
+            <Slider.Marker value={7} whiteSpace="nowrap">1 week ago</Slider.Marker>
-                  <Input
+            <Slider.Marker value={14} whiteSpace="nowrap">2 weeks ago</Slider.Marker>
-                    type="date"
+          </Slider.MarkerGroup>
-                    css={popoverStyles.date}
+        </Slider.Control>
-                    value={currentSettings?.startDate || ""}
+      </Slider.Root>
-                    onChange={(e) => {
-                      const value = e.target.value;
-                      updateSettings(widgetId, {
-                        ...currentSettings,
-                        startDate: value,
-                      });
-
-                      const dateSelected = new Date(value);
-                      const today = new Date();
-                      today.setHours(0, 0, 0, 0);
-
-                      if (value && dateSelected > today)
-                        setStartError("Can't Choose a Future Date");
-                      else setStartError("");
-                    }}
-                  />
-                  {startError && (
-                    <Field.ErrorText>{startError}</Field.ErrorText>
-                  )}
-                </Flex>
-              </Flex>
-            </Field.Root>
-
-            {/* end date */}
-            <Field.Root invalid={!!endError}>
-              <Flex
-                direction="row"
-                w="100%"
-                h="100%"
-                align="center"
-                justify="center"
-              >
-                <Text w="50%" align="center" justify="center" color="text">
-                  End Date
-                </Text>
-                <Flex direction="column" w="100%">
-                  <Input
-                    type="date"
-                    css={popoverStyles.date}
-
-                    value={currentSettings?.endDate || ""}
-                    onChange={(e) => {
-                      const value = e.target.value;
-                      updateSettings(widgetId, {
-                        ...currentSettings,
-                        endDate: value,
-                      });
-
-                      const dateSelected = new Date(value);
-                      const today = new Date();
-                      today.setHours(0, 0, 0, 0);
-
-                      if (value && dateSelected > today)
-                        setEndError("Can't Choose a Future Date");
-                      else setEndError("");
-                    }}
-                  />
-                  {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
-                </Flex>
-              </Flex>
-            </Field.Root>
-          </Flex>
-
-          {/* FILTERS */}
-          <CheckboxGroup w="100%">
-            <Flex direction="column" w="100%" gap={2}>
-              <HStack>
-                <Text flexShrink="0" fontWeight="semibold">Filters</Text>
-                <Separator flex="1" size="sm"/> {/*line seperator*/}
-              </HStack>
-
-              {/* level increases */}
-              <CheckboxCard.Root
-                css={popoverStyles.checkboxcard}
-
-                defaultChecked={currentSettings?.filters?.levelIncreases}
-                onCheckedChange={(e) => {
-                  updateSettings(widgetId, {
-                    ...currentSettings,
-                    filters: {
-                      ...currentSettings.filters,
-                      levelIncreases: e.checked,
-                    },
-                  });
-                }}
-              >
-                <CheckboxCard.HiddenInput /> {/* when removed can't check/uncheck box */}
-                <CheckboxCard.Control>
-                  <CheckboxCard.Content>
-                    <CheckboxCard.Label fontWeight={400}>
-                      Level Increases
-                    </CheckboxCard.Label>
-                  </CheckboxCard.Content>
-                  <CheckboxCard.Indicator css={popoverStyles.checkbox} />
-                </CheckboxCard.Control>
-              </CheckboxCard.Root>
-
-              {/* level decreases */}
-              <CheckboxCard.Root
-                css={popoverStyles.checkboxcard}
-
-                defaultChecked={currentSettings?.filters?.levelDecreases}
-                onCheckedChange={(e) => {
-                  updateSettings(widgetId, {
-                    ...currentSettings,
-                    filters: {
-                      ...currentSettings.filters,
-                      levelDecreases: e.checked,
-                    },
-                  });
-                }}
-              >
-                <CheckboxCard.HiddenInput />
-                <CheckboxCard.Control>
-                  <CheckboxCard.Content>
-                    <CheckboxCard.Label fontWeight={400}>
-                      Level Decreases
-                    </CheckboxCard.Label>
-                  </CheckboxCard.Content>
-                  <CheckboxCard.Indicator css={popoverStyles.checkbox} />
-                </CheckboxCard.Control>
-              </CheckboxCard.Root>
-
-              {/* elevated levels */}
-              <CheckboxCard.Root
-                css={popoverStyles.checkboxcard}
-
-                defaultChecked={currentSettings?.filters?.elevatedLevels}
-                onCheckedChange={(e) => {
-                  updateSettings(widgetId, {
-                    ...currentSettings,
-                    filters: {
-                      ...currentSettings.filters,
-                      elevatedLevels: e.checked,
-                    },
-                  });
-                }}
-              >
-                <CheckboxCard.HiddenInput />
-                <CheckboxCard.Control>
-                  <CheckboxCard.Content>
-                    <CheckboxCard.Label fontWeight={400}>
-                      Only Elevated Levels
-                    </CheckboxCard.Label>
-                  </CheckboxCard.Content>
-                  <CheckboxCard.Indicator css={popoverStyles.checkbox}/>
-                </CheckboxCard.Control>
-              </CheckboxCard.Root>
-            </Flex>
-          </CheckboxGroup>
-
-          {/* select volcano to filter on */}
-          <Combobox.Root
-            mt={1}
-            variant="subtle"
-            multiple
-            openOnClick
-            collection={collection}
-            onValueChange={handleValueChange}
-            onInputValueChange={(e) => filter(e.inputValue)}
-          >
-
-            <Wrap gap="2">
-              {selectedVolcanoes.map((volcano) => (
-                <Badge key={volcano}>{volcano}</Badge>
-              ))}
-            </Wrap>
-
-            <Combobox.Label fontSize="xs" >Select Volcano (s)</Combobox.Label>
-
-            <Combobox.Control>
-              <Combobox.Input placeholder="Type to search" borderRadius="lg"/>
-              <Combobox.IndicatorGroup>
-                <Combobox.ClearTrigger />
-                <Combobox.Trigger onClick={reset} />
-              </Combobox.IndicatorGroup>
-            </Combobox.Control>
-            <Portal>
-              <Combobox.Positioner>
-                <Combobox.Content>
-                  {volcanoes.map((item) => (
-                    <Combobox.Item item={item} key={item.value}>
-                      {item.label}
-                      <Combobox.ItemIndicator />
-                    </Combobox.Item>
-                  ))}
-                  <Combobox.Empty>No items found</Combobox.Empty>
-                </Combobox.Content>
-              </Combobox.Positioner>
-            </Portal>
-          </Combobox.Root>
-        </Fieldset.Content>
-      </Fieldset.Root>
     </Flex>
-  );
+  )
-}
+}
-
-const volcanoes = [
-  { label: "Mt. St. Helens", value: "helens" },
-  { label: "Mt. Adams", value: "adams" },
-  { label: "Rainier", value: "rainier" },
-  { label: "The Three Sisters", value: "three sisters" },
-  { label: "Fuego", value: "fuego" },
-  { label: "Laki Laki", value: "lakilaki" },
-  { label: "Lewotobi", value: "lewotobi" },
-  { label: "Karangatang", value: "karangatang" },
-  { label: "Cotopaxi", value: "cotopaxi" },
-  { label: "Merapi", value: "merapi" },
-  { label: "Marapi", value: "marapi" },
-  { label: "Kick 'Em Jenny", value: "kick em jenny"}
-]

client/src/components/Widgets/settings/CommCoorReportSettings.jsx

@@ -1,18 +1,12 @@
-import {Button, Field, Flex, Input, Switch, Text, Fieldset, Separator, HStack, useSlotRecipe} from "@chakra-ui/react";
+import {Button, Field, Flex, Input, Switch, Text} from "@chakra-ui/react";
 import {useDashboardStore} from "@/store/useDashboardStore.jsx";
 import {useState} from "react";
 
 export default function CommCoorReportSettings({ widgetId, currentSettings }) {
-  // STYLING
-  const popoverRecipe = useSlotRecipe({ key: "glassPopover" });
-  const popoverStyles = popoverRecipe();
-
-  // STATE MANAGEMENT
   const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
   const [startError, setStartError] = useState(null);
   const [endError, setEndError] = useState(null);
 
-  // FUNCTIONS
   const handleCopyToClipboard = () => {
     updateSettings(widgetId, {copyToClipboard: true});
   }
@@ -23,84 +17,67 @@ export default function CommCoorReportSettings({ widgetId, currentSettings }) {
 
   return (
     <Flex flexDirection="column" justifyContent="space-between" gap={2} overflowY="auto">
-      <Fieldset.Root>
+      {/* COPY TO CLIPBOARD */}
-        <Fieldset.Content>
+      <Button w="fit" size="xs" onClick={handleCopyToClipboard}>Copy Report</Button>
-          {/* SELECTING DATE RANGE */}
-          <HStack>
-            <Text flexShrink="0" fontWeight="semibold">Date Range Selection</Text>
-            <Separator flex="1" size="sm"/> {/*line seperator*/}
-          </HStack>
-          <Flex direction="column" w="100%" h="100%" justify="center" gap={2} pr={1}>
-            {/* start date */}
-            <Field.Root invalid={!!startError}>
-              <Flex direction="row" w="100%" h="100%" align="center" justify="center">
-                <Text w="50%" align="center" justify="center" mt={2} color="text">
-                  Start Date
-                </Text>
-                <Flex direction="column" w="100%">
-                  <Input
-                    w="100%"
-                    css={popoverStyles.date}
-                    type="date"
-                    value={currentSettings?.startDate || ""}
-                    onChange={(e) => {
-                      const value = e.target.value;
-                      updateSettings(widgetId, {...currentSettings, startDate: value});
 
-                      const dateSelected = new Date(value);
+      {/* DOWNLOAD REPORT */}
-                      const today = new Date();
+      <Button w="fit" size="xs" onClick={handleDownloadReport}>Download Report</Button>
-                      today.setHours(0, 0, 0, 0);
 
-                      if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
+      {/* SELECTING DATE RANGE */}
-                      else setStartError("");
+      <Flex direction="column" w="100%" h="100%" align="center" justify="center" gap="2">
-                    }}
+        <Field.Root invalid={!!startError}>
-                  />
+          <Flex direction="row" w="100%" h="100%" align="center" justify="center">
-                  {startError && <Field.ErrorText>{startError}</Field.ErrorText>}
+            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
-                </Flex>
+              Start Date
-              </Flex>
+            </Text>
-            </Field.Root>
+            <Flex direction="column" w="100%">
-            {/* end date */}
+              <Input
-            <Field.Root invalid={!!endError}>
+                w="100%"
-              <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+                type="date"
-                <Text w="50%" align="center" justify="center" mt={2} color="text">
+                value={currentSettings?.startDate || ""}
-                  End Date
+                onChange={(e) => {
-                </Text>
+                  const value = e.target.value;
-                <Flex direction="column" w="100%">
+                  updateSettings(widgetId, {...currentSettings, startDate: value});
-                  <Input
-                    w="100%"
-                    css={popoverStyles.date}
-                    type="date"
-                    value={currentSettings?.endDate || ""}
-                    onChange={(e) => {
-                      const value = e.target.value;
-                      updateSettings(widgetId, {...currentSettings, endDate: value});
 
-                      const dateSelected = new Date(value);
+                  const dateSelected = new Date(value);
-                      const today = new Date();
+                  const today = new Date();
-                      today.setHours(0, 0, 0, 0);
+                  today.setHours(0, 0, 0, 0);
 
-                      if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date");
+                  if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
-                      else setEndError("");
+                  else setStartError("");
-                    }}
+                }}
-                  />
+              />
-                  {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
+              {startError && <Field.ErrorText>{startError}</Field.ErrorText>}
-                </Flex>
+            </Flex>
-              </Flex>
-            </Field.Root>
           </Flex>
+        </Field.Root>
+        <Field.Root invalid={!!endError}>
+          <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
+              End Date
+            </Text>
+            <Flex direction="column" w="100%">
+              <Input
+                w="100%"
+                type="date"
+                value={currentSettings?.endDate || ""}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  updateSettings(widgetId, {...currentSettings, endDate: value});
 
-          <HStack>
+                  const dateSelected = new Date(value);
-            <Text flexShrink="0" fontWeight="semibold">Tools</Text>
+                  const today = new Date();
-            <Separator flex="1" size="sm"/> {/*line seperator*/}
+                  today.setHours(0, 0, 0, 0);
-          </HStack>
+
-          <Flex direction="column" w="100%" h="100%" justify="center" gap={2}>
+                  if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date");
-            {/* COPY TO CLIPBOARD */}
+                  else setEndError("");
-            <Button css={popoverStyles.button} onClick={handleCopyToClipboard}>Copy Report</Button>
+                }}
-            {/* DOWNLOAD REPORT */}
+              />
-            <Button css={popoverStyles.button} onClick={handleDownloadReport}>Download Report</Button>
+              {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
+            </Flex>
           </Flex>
-        </Fieldset.Content>
+        </Field.Root>
-      </Fieldset.Root>
+      </Flex>
     </Flex>
   )
 }

client/src/components/Widgets/settings/IvansAlertsSettings.jsx

@@ -1,30 +1,12 @@
-import {
+import {Button, Field, Flex, Input, Switch, Text} from "@chakra-ui/react";
-  Button,
-  Field,
-  Flex,
-  Input,
-  Switch,
-  Text,
-  Fieldset,
-  CheckboxCard,
-  Separator,
-  HStack,
-  useSlotRecipe
-} from "@chakra-ui/react";
 import {useDashboardStore} from "../../../store/useDashboardStore.jsx";
 import {useState} from "react";
 
 export default function IvansAlertsSettings({ widgetId, currentSettings }) {
-  // STYLING
-  const popoverRecipe = useSlotRecipe({ key: "glassPopover" });
-  const popoverStyles = popoverRecipe();
-
-  // STATE MANAGEMENT
   const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
   const [startError, setStartError] = useState(null);
   const [endError, setEndError] = useState(null);
 
-  // FUNCTIONS
   const handleCopyToClipboard = () => {
     updateSettings(widgetId, {copyToClipboard: true});
   }
@@ -38,174 +20,89 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
   }
 
   return (
-    <Flex flexDirection="column" justifyContent="space-between" overflowY="auto">
+    <Flex flexDirection="column" justifyContent="space-between" gap={2} overflowY="auto">
-      <Fieldset.Root>
+      {/* COPY TO CLIPBOARD */}
-        <Fieldset.Content>
+      <Button w="fit" size="xs" onClick={handleCopyToClipboard}>Copy All IVANS</Button>
-          {/* SELECTING DATE RANGE */}
+
-          <HStack>
+      {/* SORTS */}
-            <Text flexShrink="0" fontWeight="semibold">Date Range Selection</Text>
+      <Switch.Root
-            <Separator flex="1" size="sm"/> {/*line seperator*/}
+        checked={currentSettings?.activeSorts?.timeSort === "asc"}
-            </HStack>
+        onCheckedChange={handleTimeSort}
-          <Flex direction="column" w="100%" h="100%" justify="center" gap={2} pr={1}>
+        colorPalette="blue"
-            {/* start date */}
+      >
-            <Field.Root invalid={!!startError}>
+        <Switch.HiddenInput />
-              <Flex
+        <Switch.Control>
-                direction="row"
+          <Switch.Thumb />
+        </Switch.Control>
+        <Switch.Label>Sort Oldest to Newest</Switch.Label>
+      </Switch.Root>
+      <Switch.Root
+        checked={currentSettings?.activeSorts?.volcanoSort}
+        onCheckedChange={handleVolcanoSort}
+        colorPalette="blue"
+      >
+        <Switch.HiddenInput />
+        <Switch.Control>
+          <Switch.Thumb />
+        </Switch.Control>
+        <Switch.Label>Sort by Volcano</Switch.Label>
+      </Switch.Root>
+
+      {/* SELECTING DATE RANGE */}
+      <Flex direction="column" w="100%" h="100%" align="center" justify="center" gap="2">
+        <Field.Root invalid={!!startError}>
+          <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
+              Start Date
+            </Text>
+            <Flex direction="column" w="100%">
+              <Input
                 w="100%"
-                h="100%"
+                type="date"
-                align="center"
+                value={currentSettings?.startDate || ""}
-                justify="center"
+                onChange={(e) => {
-              >
+                  const value = e.target.value;
-                <Text w="50%" align="center" justify="center" color="text">
+                  updateSettings(widgetId, {...currentSettings, startDate: value});
-                  Start Date
-                </Text>
-                <Flex direction="column" w="100%">
-                  <Input
-                    type="date"
-                    w="100%"
-                    borderRadius="lg"
-                    css={popoverStyles.date}
-                    value={currentSettings?.startDate || ""}
-                    onChange={(e) => {
-                      const value = e.target.value;
-                      updateSettings(widgetId, {
-                        ...currentSettings,
-                        startDate: value,
-                      });
 
-                      const dateSelected = new Date(value);
+                  const dateSelected = new Date(value);
-                      const today = new Date();
+                  const today = new Date();
-                      today.setHours(0, 0, 0, 0);
+                  today.setHours(0, 0, 0, 0);
 
-                      if (value && dateSelected > today)
+                  if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
-                        setStartError("Can't Choose a Future Date");
+                  else setStartError("");
-                      else setStartError("");
+                }}
-                    }}
+              />
-                  />
+              {startError && <Field.ErrorText>{startError}</Field.ErrorText>}
-                  {startError && (
+            </Flex>
-                    <Field.ErrorText>{startError}</Field.ErrorText>
-                  )}
-                </Flex>
-              </Flex>
-            </Field.Root>
-
-            {/* end date */}
-            <Field.Root invalid={!!endError}>
-              <Flex
-                direction="row"
-                w="100%"
-                h="100%"
-                align="center"
-                justify="center"
-              >
-                <Text w="50%" align="center" justify="center" color="text">
-                  End Date
-                </Text>
-                <Flex direction="column" w="100%">
-                  <Input
-                    type="date"
-                    w="100%"
-                    borderRadius="lg"
-                    css={popoverStyles.date}
-                    value={currentSettings?.endDate || ""}
-                    onChange={(e) => {
-                      const value = e.target.value;
-                      updateSettings(widgetId, {
-                        ...currentSettings,
-                        endDate: value,
-                      });
-
-                      const dateSelected = new Date(value);
-                      const today = new Date();
-                      today.setHours(0, 0, 0, 0);
-
-                      if (value && dateSelected > today)
-                        setEndError("Can't Choose a Future Date");
-                      else setEndError("");
-                    }}
-                  />
-                  {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
-                </Flex>
-              </Flex>
-            </Field.Root>
           </Flex>
+        </Field.Root>
+        <Field.Root invalid={!!endError}>
+          <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
+              End Date
+            </Text>
+            <Flex direction="column" w="100%">
+              <Input
+                w="100%"
+                type="date"
+                value={currentSettings?.endDate || ""}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  updateSettings(widgetId, {...currentSettings, endDate: value});
 
-          {/* SORTS */}
+                  const dateSelected = new Date(value);
-          <HStack>
+                  const today = new Date();
-            <Text flexShrink="0" fontWeight="semibold">Sorts</Text>
+                  today.setHours(0, 0, 0, 0);
-            <Separator flex="1" size="sm"/> {/*line seperator*/}
-          </HStack>
 
-          {/* time sort */}
+                  if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date");
-          <Switch.Root
+                  else setEndError("");
-            checked={currentSettings?.activeSorts?.timeSort === "asc"}
+                }}
-            onCheckedChange={handleTimeSort}
+              />
-          >
+              {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
-            <Switch.HiddenInput />
+            </Flex>
-            <Switch.Control css={popoverStyles.switch}>
+          </Flex>
-              <Switch.Thumb bg="white"/>
+        </Field.Root>
-            </Switch.Control>
+      </Flex>
-            <Switch.Label fontWeight={400}>Oldest to Newest</Switch.Label>
-          </Switch.Root>
-
-          {/* alphabetic sort */}
-          <Switch.Root
-            checked={currentSettings?.activeSorts?.volcanoSort}
-            onCheckedChange={handleVolcanoSort}
-          >
-            <Switch.HiddenInput />
-            <Switch.Control css={popoverStyles.switch}>
-              <Switch.Thumb bg="white" />
-            </Switch.Control>
-            <Switch.Label fontWeight={400}>Alphabetically by Volcano</Switch.Label>
-          </Switch.Root>
-
-          <HStack>
-            <Text flexShrink="0" fontWeight="semibold">Filters</Text>
-            <Separator flex="1" size="sm"/> {/*line seperator*/}
-          </HStack>
-
-          {/* elevated levels */}
-          <CheckboxCard.Root
-            // size="sm"
-            // variant="surface"
-            css={popoverStyles.checkboxcard}
-
-            defaultChecked={currentSettings?.filters?.elevatedLevels}
-            onCheckedChange={(e) => {
-              updateSettings(widgetId, {
-                ...currentSettings,
-                filters: {
-                  ...currentSettings.filters,
-                  elevatedLevels: e.checked,
-                },
-              });
-            }}
-          >
-            <CheckboxCard.HiddenInput />
-            <CheckboxCard.Control>
-              <CheckboxCard.Content>
-                <CheckboxCard.Label fontWeight={400}>
-                  Only Elevated Levels
-                </CheckboxCard.Label>
-              </CheckboxCard.Content>
-              <CheckboxCard.Indicator css={popoverStyles.checkbox} />
-            </CheckboxCard.Control>
-          </CheckboxCard.Root>
-
-          {/* COPY TO CLIPBOARD */}
-          <HStack>
-            <Text flexShrink="0" fontWeight="semibold">Tools</Text>
-            <Separator flex="1" size="sm"/> {/*line seperator*/}
-          </HStack>
-          <Button mt={-2} w="100%" size="xs" borderRadius="lg" variant="subtle"
-                  css={popoverStyles.button}
-                  onClick={handleCopyToClipboard}
-          >
-            Copy All IVANS
-          </Button>
-        </Fieldset.Content>
-      </Fieldset.Root>
     </Flex>
   )
-}
+}

client/src/components/Widgets/settings/RemoteSensingSettings.jsx

@@ -1,18 +1,12 @@
-import {Button, Field, Flex, HStack, Input, Separator, Switch, Text, useSlotRecipe, Fieldset} from "@chakra-ui/react";
+import {Button, Field, Flex, Input, Switch, Text} from "@chakra-ui/react";
 import {useDashboardStore} from "@/store/useDashboardStore.jsx";
 import {useState} from "react";
 
 export default function RemoteSensingSettings({ widgetId, currentSettings }) {
-  // STYLING
-  const popoverRecipe = useSlotRecipe({ key: "glassPopover" });
-  const popoverStyles = popoverRecipe();
-
-  // STATE MANAGEMENT
   const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
   const [startError, setStartError] = useState(null);
   const [endError, setEndError] = useState(null);
 
-  // FUNCTIONS
   const handleCopyToClipboard = () => {
     updateSettings(widgetId, {copyToClipboard: true});
   }
@@ -27,111 +21,88 @@ export default function RemoteSensingSettings({ widgetId, currentSettings }) {
 
   return (
     <Flex flexDirection="column" justifyContent="space-between" gap={2} overflowY="auto">
-      <Fieldset.Root>
+      {/* COPYING TO CLIPBOARD */}
-        <Fieldset.Content>
+      <Button w="fit" size="xs" onClick={handleCopyToClipboard}>Copy All RS</Button>
-          {/* SELECTING DATE RANGE */}
-            <HStack>
-              <Text flexShrink="0" fontWeight="semibold">Date Range Selection</Text>
-              <Separator flex="1" size="sm"/> {/*line seperator*/}
-            </HStack>
-          <Flex direction="column" w="100%" h="100%" justify="center" gap={2} pr={1}>
-            {/* start date */}
-            <Field.Root invalid={!!startError}>
-              <Flex direction="row" w="100%" h="100%" align="center" justify="center">
-                <Text w="50%" align="center" justify="center" mt={2} color="text">
-                  Start Date
-                </Text>
-                <Flex direction="column" w="100%">
-                  <Input
-                    type="date"
-                    css={popoverStyles.date}
 
-                    value={currentSettings?.startDate || ""}
+      {/* SORTING */}
-                    onChange={(e) => {
+      <Switch.Root
-                      const value = e.target.value;
+        checked={currentSettings?.activeSorts?.timeSort === "asc"}
-                      updateSettings(widgetId, {...currentSettings, startDate: value});
+        onCheckedChange={handleTimeSort}
+        colorPalette="blue"
+      >
+        <Switch.HiddenInput />
+        <Switch.Control>
+          <Switch.Thumb />
+        </Switch.Control>
+        <Switch.Label>Sort Oldest to Newest</Switch.Label>
+      </Switch.Root>
+      <Switch.Root
+        checked={currentSettings?.activeSorts?.volcanoSort}
+        onCheckedChange={handleVolcanoSort}
+        colorPalette="blue"
+      >
+        <Switch.HiddenInput />
+        <Switch.Control>
+          <Switch.Thumb />
+        </Switch.Control>
+        <Switch.Label>Sort by Volcano</Switch.Label>
+      </Switch.Root>
 
-                      const dateSelected = new Date(value);
+      {/* SELECTING DATE RANGE */}
-                      const today = new Date();
+      <Flex direction="column" w="100%" h="100%" align="center" justify="center" gap="2">
-                      today.setHours(0, 0, 0, 0);
+        <Field.Root invalid={!!startError}>
+          <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
+              Start Date
+            </Text>
+            <Flex direction="column" w="100%">
+              <Input
+                w="100%"
+                type="date"
+                value={currentSettings?.startDate || ""}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  updateSettings(widgetId, {...currentSettings, startDate: value});
 
-                      if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
+                  const dateSelected = new Date(value);
-                      else setStartError("");
+                  const today = new Date();
-                    }}
+                  today.setHours(0, 0, 0, 0);
-                  />
-                  {startError && <Field.ErrorText>{startError}</Field.ErrorText>}
-                </Flex>
-              </Flex>
-            </Field.Root>
 
-            {/* end date */}
+                  if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
-            <Field.Root invalid={!!endError}>
+                  else setStartError("");
-              <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+                }}
-                <Text w="50%" align="center" justify="center" mt={2} color="text">
+              />
-                  End Date
+              {startError && <Field.ErrorText>{startError}</Field.ErrorText>}
-                </Text>
+            </Flex>
-                <Flex direction="column" w="100%">
-                  <Input
-                    type="date"
-                    css={popoverStyles.date}
-
-                    value={currentSettings?.endDate || ""}
-                    onChange={(e) => {
-                      const value = e.target.value;
-                      updateSettings(widgetId, {...currentSettings, endDate: value});
-
-                      const dateSelected = new Date(value);
-                      const today = new Date();
-                      today.setHours(0, 0, 0, 0);
-
-                      if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date");
-                      else setEndError("");
-                    }}
-                  />
-                  {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
-                </Flex>
-              </Flex>
-            </Field.Root>
           </Flex>
+        </Field.Root>
+        <Field.Root invalid={!!endError}>
+          <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
+              End Date
+            </Text>
+            <Flex direction="column" w="100%">
+              <Input
+                w="100%"
+                type="date"
+                value={currentSettings?.endDate || ""}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  updateSettings(widgetId, {...currentSettings, endDate: value});
 
-          {/* SORTING */}
+                  const dateSelected = new Date(value);
-          <HStack>
+                  const today = new Date();
-            <Text flexShrink="0" fontWeight="semibold">Sorting</Text>
+                  today.setHours(0, 0, 0, 0);
-            <Separator flex="1" size="sm"/> {/*line seperator*/}
-          </HStack>
-          <Switch.Root
-            checked={currentSettings?.activeSorts?.timeSort === "asc"}
-            onCheckedChange={handleTimeSort}
-          >
-            <Switch.HiddenInput />
-            <Switch.Control css={popoverStyles.switch}>
-              <Switch.Thumb bg="white" />
-            </Switch.Control>
-            <Switch.Label>Oldest to Newest</Switch.Label>
-          </Switch.Root>
 
-          <Switch.Root
+                  if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date");
-            checked={currentSettings?.activeSorts?.volcanoSort}
+                  else setEndError("");
-            onCheckedChange={handleVolcanoSort}
+                }}
-            colorPalette="blue"
+              />
-          >
+              {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
-            <Switch.HiddenInput />
+            </Flex>
-            <Switch.Control css={popoverStyles.switch}>
+          </Flex>
-              <Switch.Thumb bg="white"/>
+        </Field.Root>
-            </Switch.Control>
+      </Flex>
-            <Switch.Label>By Volcano</Switch.Label>
-          </Switch.Root>
-
-          {/* COPYING TO CLIPBOARD */}
-          <HStack>
-            <Text flexShrink="0" fontWeight="semibold">Tools</Text>
-            <Separator flex="1" size="sm"/> {/*line seperator*/}
-          </HStack>
-          <Button css={popoverStyles.button} onClick={handleCopyToClipboard}>
-            Copy All RS
-          </Button>
-        </Fieldset.Content>
-      </Fieldset.Root>
     </Flex>
   )
 }

client/src/components/dashboard/SettingsButton.jsx

@@ -38,11 +38,9 @@ export function SettingsButton() {
   const [canScrollRight, setCanScrollRight] = useState(false);
 
   // Pull the glass container styles for the dropdown and modal
-  const popoverRecipe = useSlotRecipe({ key: "glassPopover" });
+  const panelRecipe = useSlotRecipe({key: "glassPanel"});
-  const popoverStyles = popoverRecipe();
+  const panelStyles = panelRecipe({layout: "dropdown"});
-
+  const modalStyles = panelRecipe({layout: "popover"});
-  const dialogRecipe = useSlotRecipe({ key: "glassDialog" });
-  const dialogStyles = dialogRecipe();
 
   const [isLibraryOpen, setIsLibraryOpen] = useState(false);
 
@@ -132,7 +130,7 @@ export function SettingsButton() {
           </Menu.Trigger>
 
           <Menu.Positioner>
-            <Menu.Content css={popoverStyles.content} zIndex="dropdown" minW="200px">
+            <Menu.Content css={panelStyles.root} zIndex="dropdown" minW="200px">
               <Menu.Item
                 onClick={enterEditMode}
                 cursor="pointer"
@@ -170,13 +168,12 @@ export function SettingsButton() {
         {/* Soft blur can be added to the background behind the modal */}
         {/*<Dialog.Backdrop bg="blackAlpha.100" backdropFilter="blur(2px)"/>*/}
         <Dialog.Positioner>
-          <Dialog.Content css={dialogStyles.content}>
+          <Dialog.Content css={modalStyles.root}>
-
+            <Dialog.Header>
-            <Dialog.Header css={dialogStyles.header}>
               <Dialog.Title>Widgets Shop</Dialog.Title>
             </Dialog.Header>
 
-            <Dialog.Body css={dialogStyles.body}>
+            <Dialog.Body>
               <Tabs.Root defaultValue={categories[0]} variant="unstyled">
                 {/* HORIZONTAL SCROLLABLE MENU OF WIDGET CATEGORIES */}
                 <Box>
@@ -249,6 +246,7 @@ export function SettingsButton() {
                                     h="24px"
                                     flexShrink={0}
                                     borderRadius="full"
+                                    // bg={{base: "blue.50", _dark: "whiteAlpha.200"}}
                                     fontWeight="black"
                                     fontSize="xs"
                                     bg='transparent'

client/src/constants/widgetRegistry.jsx

@@ -50,8 +50,8 @@ export const WIDGET_REGISTRY = {
         name: "IVANS",
         category: "Communications",
         description: "Feed of recent IVANS reports and reviewer statuses.",
-        component: lazy(() => import('../components/Widgets/IvansAlerts.jsx')),
+        component: lazy(() => import('../components/widgets/IvansAlerts.jsx')),
-        settingsComponent: lazy(() => import('../components/Widgets/settings/IvansAlertsSettings.jsx')),
+        settingsComponent: lazy(() => import('../components/widgets/settings/IvansAlertsSettings.jsx')),
         defaultSettings: {
             startDate: getStartDate(),
             endDate: getEndDate(),
@@ -63,6 +63,7 @@ export const WIDGET_REGISTRY = {
         },
         allowedSizes: {
             small: { w: 3, h: 6 },
+            medium: { w: 3, h: 9 },
             large: { w: 3, h: 12 },
         }
     },
@@ -71,8 +72,8 @@ export const WIDGET_REGISTRY = {
         name: "Remote Sensing",
         category: "Remote Sensing",
         description: "Feed of recent remote sensing reports.",
-        component: lazy(() => import('../components/Widgets/RemoteSensing.jsx')),
+        component: lazy(() => import('../components/widgets/RemoteSensing.jsx')),
-        settingsComponent: lazy(() => import('../components/Widgets/Settings/RemoteSensingSettings.jsx')),
+        settingsComponent: lazy(() => import('../components/widgets/settings/RemoteSensingSettings.jsx')),
         defaultSettings: {
             startDate: getStartDate(),
             endDate: getEndDate(),
@@ -84,6 +85,7 @@ export const WIDGET_REGISTRY = {
         },
         allowedSizes: {
             small: { w: 3, h: 6 },
+            medium: { w: 3, h: 9 },
             large: { w: 3, h: 12 },
         }
     },
@@ -92,17 +94,11 @@ export const WIDGET_REGISTRY = {
         name: "Alert Level Changes",
         category: "Daily Alerts",
         description: "List of 7-day alert level changes with trend arrows.",
-        component: lazy(() => import('../components/Widgets/AlertChanges.jsx')),
+        component: lazy(() => import('../components/widgets/AlertChanges.jsx')),
-        settingsComponent: lazy(() => import('../components/Widgets/settings/AlertChangeSettings.jsx')),
+        settingsComponent: lazy(() => import('../components/widgets/settings/AlertChangeSettings.jsx')),
         defaultSettings: {
             startDate: getStartDate(),
             endDate: getEndDate(),
-            filters: {
-                levelIncreases: true,
-                levelDecreases: true,
-                elevatedLevels: false,    // will filter to show only volcanoes in their top 2 highest alert levels
-                volcanoes: 'all', // filter on what volcanoes to display, defaults to 'all' instead of listing every volc
-            },
         },
         allowedSizes: {
             small: { w: 3, h: 6 },
@@ -115,7 +111,7 @@ export const WIDGET_REGISTRY = {
         category: "Daily Volcanic Activity",
         description: "List of explosion events over a specified time period.",
 
-        component: lazy(() => import('../components/Widgets/ExplosionEvents.jsx')),
+        component: lazy(() => import('../components/widgets/ExplosionEvents.jsx')),
 
         // The specific settings UI for this widget
         settingsComponent: lazy(() => import('../components/widgets/settings/ExplosionEventsSettings.jsx')),
@@ -135,8 +131,8 @@ export const WIDGET_REGISTRY = {
         name: "Plume Events",
         category: "Daily Volcanic Activity",
         description: "Plot of explosion heights over a weeks time.",
-        component: lazy(() => import('../components/Widgets/PlumeEvents.jsx')),
+        component: lazy(() => import('../components/widgets/PlumeEvents.jsx')),
-        settingsComponent: lazy(() => import('../components/Widgets/settings/PlumeEventsSettings.jsx')),
+        settingsComponent: lazy(() => import('../components/widgets/settings/PlumeEventsSettings.jsx')),
         defaultSettings: {
             startDate: getStartDate(),
             endDate: getEndDate(),
@@ -150,8 +146,8 @@ export const WIDGET_REGISTRY = {
         name: "Seismic Events",
         category: "Daily Volcanic Activity",
         description: "Plot of number of seismic events over a weeks time.",
-        component: lazy(() => import('../components/Widgets/SeismicEvents.jsx')),
+        component: lazy(() => import('../components/widgets/SeismicEvents.jsx')),
-        settingsComponent: lazy(() => import('../components/Widgets/settings/SeismicEventsSettings.jsx')),
+        settingsComponent: lazy(() => import('../components/widgets/settings/SeismicEventsSettings.jsx')),
         defaultSettings: {
             startDate: getStartDate(),
             endDate: getEndDate(),
@@ -165,7 +161,7 @@ export const WIDGET_REGISTRY = {
         name: "Alert Level Changes Quad Plot",
         category: "Computer Science",
         description: "Percentage of TP, TN, FP, and FN changes in viable alert levels.",
-        component: lazy(() => import('../components/Widgets/LlmAlChangesQuadPlot.jsx')),
+        component: lazy(() => import('../components/widgets/LlmAlChangesQuadPlot.jsx')),
         allowedSizes: {
             medium: { w: 3, h: 12 }
         }
@@ -175,8 +171,8 @@ export const WIDGET_REGISTRY = {
         name: "Communication Coordinator Report",
         category: "Daily Volcanic Activity",
         description: "Generated Report",
-        component: lazy(() => import('../components/Widgets/CommCoorReport.jsx')),
+        component: lazy(() => import('../components/widgets/CommCoorReport.jsx')),
-        settingsComponent: lazy(() => import('../components/Widgets/settings/CommCoorReportSettings.jsx')),
+        settingsComponent: lazy(() => import('../components/widgets/settings/CommCoorReportSettings.jsx')),
         defaultSettings: {
             copyToClipboard: false,
             downloadReport: false,
@@ -184,7 +180,7 @@ export const WIDGET_REGISTRY = {
             endDate: getEndDate(),
         },
         allowedSizes: {
-            large: { w: 3, h: 12 },
+            medium: { w: 3, h: 12 },
         }
     },
 
@@ -192,8 +188,8 @@ export const WIDGET_REGISTRY = {
         name: "VAA Polygon Projections Map",
         category: "Maps",
         description: "By selecting a volcano, the map will take you to it and show a polygon of the ash in 8, 12, and 18 hours",
-        component: lazy(() => import('../components/Widgets/VaaMap.jsx')),
+        component: lazy(() => import('../components/widgets/VaaMap.jsx')),
-        settingsComponent: lazy(() => import('../components/Widgets/settings/VaaMapSettings.jsx')),
+        settingsComponent: lazy(() => import('../components/widgets/settings/VaaMapSettings.jsx')),
         defaultSettings: {
             position: [45.61142, -122.49630], // CVO's coordinates
             startDate: getToday(),
@@ -213,7 +209,7 @@ export const WIDGET_REGISTRY = {
         name: "Travel Gantt Chart",
         category: "Communications",
         description: "View upcoming travels in a gantt chart",
-        component: lazy(() => import('../components/Widgets/TravelGanttChart.jsx')),
+        component: lazy(() => import('../components/widgets/TravelGanttChart.jsx')),
         allowedSizes: {
             medium: { w: 6, h: 12 }
         }

client/src/pages/auth/Login.jsx

@@ -65,7 +65,7 @@ const Login = () => {
 
   return (
       <Flex p={8} bg="gray.50" _dark={{ bg: "gray.900" }} flex="1" minH="100vh" align="center" justify="center">
-        <Box w="full" maxW="450px" bg="white" borderColor="gray.200" _dark={{ bg: "gray.800", borderColor: "gray.700" }} p={8} borderRadius="2xl" boxShadow="sm" borderWidth="1px">
+        <Box w="full" maxW="450px" bg="white" _dark={{ bg: "gray.800", borderColor: "gray.700" }} p={8} borderRadius="2xl" boxShadow="sm" borderWidth="1px" borderColor="gray.200">
           <Stack gap={6} align="stretch" as="form" onSubmit={handleSubmit}>
 
             <Stack gap={2} textAlign="center">
@@ -88,7 +88,6 @@ const Login = () => {
                   onChange={(e) => setUsername(e.target.value)}
                   placeholder="jdoe"
                   {...fieldStyles}
-                  color="gray.800"
               />
             </Field.Root>
 
@@ -103,9 +102,8 @@ const Login = () => {
                   type="password"
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
-                  // placeholder="••••••••" // not a necessary placeholder
+                  placeholder="••••••••"
                   {...fieldStyles}
-                  color="gray.800"
               />
             </Field.Root>
 

client/src/pages/home/tabs/MyDashboard.jsx

@@ -29,14 +29,11 @@ export default function MyDashboard() {
   const hasHydrated = useRef(false);
 
   // 1. Pull the global slot recipes
-  const widgetRecipe = useSlotRecipe({ key: "widget" });
+  const recipe = useSlotRecipe({key: "glassPanel"});
-  const popoverRecipe = useSlotRecipe({ key: "glassPopover" });
+  const styles = recipe({ layout: "widget" });
+  const popoverStyles = recipe({ layout: "popover" });
 
-  // 2. Pass the editing state directly into the widget recipe!
+  // 2. Populate widgets
-  const widgetStyles = widgetRecipe({ mode: isEditing ? "editing" : undefined });
-  const popoverStyles = popoverRecipe();
-
-  // 3. Populate widgets
   useEffect(() => {
     if (user?.preferences?.dashboard_layout && !hasHydrated.current) {
       const savedLayout = user.preferences.dashboard_layout;
@@ -58,7 +55,7 @@ export default function MyDashboard() {
     isResizable: false // The magic lock! No resizing allowed globally.
   }));
 
-  // 4. The component mapper
+  // 3. The component mapper
   const renderWidget = (widget) => {
     const registryEntry = WIDGET_REGISTRY[widget.type];
 
@@ -70,7 +67,7 @@ export default function MyDashboard() {
 
       return (
         <>
-          <Box css={widgetStyles.header}>
+          <Box css={styles.header}>
             <Text>
               {registryEntry.name}
             </Text>
@@ -86,7 +83,7 @@ export default function MyDashboard() {
 
                 {/* NEW: The Positioner lifts the content out of the Flexbox flow */}
                 <Popover.Positioner zIndex={1}>
-                  <Popover.Content css={popoverStyles.content}>
+                  <Popover.Content css={popoverStyles.root}>
                     <Suspense fallback={<Spinner size="sm"/>}>
                       <SettingsUI
                         widgetId={widget.id}
@@ -99,7 +96,7 @@ export default function MyDashboard() {
             )}
           </Box>
 
-          <Box css={widgetStyles.body}>
+          <Box css={styles.body}>
             <Component settings={widget.settings || {}} widgetID={widget.id || {}}/>
           </Box>
         </>
@@ -108,7 +105,7 @@ export default function MyDashboard() {
 
     // Fallback if someone asks for a widget that doesn't exist
     return (
-      <Flex css={widgetStyles.body} align="center" justify="center" direction="column">
+      <Flex css={styles.body} align="center" justify="center" direction="column">
         <Text fontWeight="bold" color="red.400">Error</Text>
         <Text fontSize="sm" color="gray.400">Widget '{widget.type}' not found.</Text>
       </Flex>
@@ -132,7 +129,13 @@ export default function MyDashboard() {
         {widgets.map(widget => (
           <Box
             key={widget.id}
-            css={widgetStyles.root}
+            css={styles.root}
+            // Grid-specific state overrides remain inline
+            boxShadow={isEditing ? "outline" : styles.root.boxShadow}
+            borderStyle={isEditing ? "dashed" : "solid"}
+            borderWidth={isEditing ? "2px" : "1px"}
+            borderColor={isEditing ? "orange.300" : styles.root.borderColor}
+            cursor={isEditing ? "grab" : "default"}
             position="relative" // REQUIRED so the absolute button stays inside this box
           >
             {/* THE DELETE BUTTON */}
@@ -160,7 +163,7 @@ export default function MyDashboard() {
 
             {/* SUSPENSE BOUNDARY wrapping the render function */}
             <Suspense fallback={
-              <Flex css={widgetStyles.body} align="center" justify="center">
+              <Flex css={styles.body} align="center" justify="center">
                 <Spinner size="md" color="blue.400" thickness="3px"/>
               </Flex>
             }>

client/src/store/authStore.js

@@ -46,6 +46,11 @@ const useAuthStore = create((set) => ({
             // Hit the new lightweight endpoint
             const res = await api.get('session/');
 
+            // 🔨 Security Fix a broken API call, Verify we actually got a user object back, not HTML fallback text
+            if (typeof res.data === 'string' || !res.data.username) {
+                throw new Error("Received invalid data format instead of user session");
+            }
+
             // Rehydrate the store with the user's info!
             set({
                 isAuthenticated: true,

client/src/theme.js

@@ -1,25 +1,11 @@
 import {defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineRecipe} from "@chakra-ui/react";
 
-// REUSABLE GLASS SURFACE
+// CONSOLIDATED ✔
-const glassSurface = {
-  bg: {base: "rgb(253 253 253 / 0.4)", _dark: "rgb(37 38 46 / 0.8)"},
-  backdropFilter: "blur(12px)",
-  WebkitBackdropFilter: "blur(12px)",
-  border: "1px solid",
-  borderColor: {base: "gray.200", _dark: "whiteAlpha.200"},
-  boxShadow: "sm",
-};
-
-/* ==========================================================================
-   RECIPES
-   ========================================================================== */
-
-// 1. Header
 const headerRecipe = defineSlotRecipe({
   slots: ["root", "search_bar", "user_info"],
   base: {
     root: {
-      bg: "transparent",
+      bg: "{transparent}",
       color: "text",
       width: "100%",
       height: "100%",
@@ -34,7 +20,7 @@ const headerRecipe = defineSlotRecipe({
       // input element in search bar component
       "& input": {
         width: "410px",
-      },
+      }
     },
     user_info: {
       flexDirection: "row",
@@ -46,30 +32,22 @@ const headerRecipe = defineSlotRecipe({
       // The Text component
       "& p": {
         fontWeight: "600",
-        fontSize: "md",
+        fontSize: "md"     // equivalent to 16px
-      },
+      }
-    },
+    }
   },
 });
 
-// 2. Sidebar
+// CONSOLIDATED ✔
 const sidebarRecipe = defineSlotRecipe({
-  slots: [
+  slots: ["root", "logo", "logo_text", "footer", "button_text", "buttons", "collapse_button", "color_mode_button"],
-    "root",
-    "logo",
-    "logo_text",
-    "footer",
-    "button_text",
-    "buttons",
-    "collapse_button",
-    "color_mode_button",
-  ],
   base: {
     root: {
       // 1. Semi-transparent backgrounds
       bg: {
-        base: "linear-gradient(to bottom right, #B63B1F88 20%, #FF990060 70%, #FFBF0040 90%)",
+        // base: "linear-gradient(to bottom right, #99000040 20%, #FF660040 60%, #EEEE0040 100%)", // this is too pale for light mode imo
-        _dark: "linear-gradient(to bottom right, #9900004C 20%, #FF66003C 60%, #FFAE003C 100%)"
+        base: "linear-gradient(to bottom right, #97282880 20%, #EB7F3160 60%, #FCAD3840 100%)",    // colors from: https://colorhunt.co/palette/972828e45742eb7f31fcad38
+        _dark: "linear-gradient(to bottom right, #9900003C 20%, #FF66003C 60%, #FFC0003C 100%)"
       },
 
       // 2. The glass blur effect
@@ -84,6 +62,8 @@ const sidebarRecipe = defineSlotRecipe({
       borderRight: "none",
 
       borderRadius: "2xl",
+      // boxShadow: "0 4px 30px rgba(0, 0, 0, 0.1)",
+      // boxShadow: "-10px 4px 30px rgba(0, 0, 0, 0.1)",
       width: "100%",
       height: "calc(100% - 16px)",
       margin: "8px",
@@ -112,18 +92,18 @@ const sidebarRecipe = defineSlotRecipe({
 
       "& svg": {
         transition: "stroke-width 0.4s ease",
-        flexShrink: "0",
+        flexShrink: "0"
       },
 
       _hover: {
         bg: "rgba(255, 255, 255, 0.2)",
         color: "{text}",
         "& svg": {
-          strokeWidth: "3",
+          strokeWidth: "3"
         },
         "& span": {
           fontWeight: "700",
-        },
+        }
       },
 
       fontSize: "l",
@@ -142,8 +122,12 @@ const sidebarRecipe = defineSlotRecipe({
         _hover: {
           bg: "{MainBackground}",
           color: "{textInverted}",
-          "& svg": { strokeWidth: "2" },
+          "& svg": {
-          "& span": { fontWeight: "500" },
+            strokeWidth: "2" // Keeps the active icon at normal thickness on hover
+          },
+          "& span": {
+            fontWeight: "500",
+          }
         },
 
         // The Top Inverted Curve
@@ -172,7 +156,7 @@ const sidebarRecipe = defineSlotRecipe({
           WebkitMaskImage: "radial-gradient(circle at bottom left, transparent 25px, black 25.5px)",
           maskImage: "radial-gradient(circle at bottom left, transparent 25px, black 25.5px)",
           pointerEvents: "none",
-        },
+        }
       },
     },
     logo: {
@@ -213,8 +197,30 @@ const sidebarRecipe = defineSlotRecipe({
         _hover: {
           bg: "transparent",
         },
-      },
+      }
-    },
+    }
+    // opened_theme_button: {
+    //   width: "100%",
+    //   align: "center",
+    //   justifyContent: "right",
+    //   mr: 6,
+    //   // "& button": {
+    //   //   alignSelf: "center",
+    //   //   transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
+    //   //   _hover: {
+    //   //     bg: "transparent",
+    //   //   }
+    //   // }
+    // },
+    // closed_theme_button: {
+    //   // ml: 0.9,
+    //   // "& button": {
+    //   //   transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
+    //   //   _hover: {
+    //   //     bg: "transparent",
+    //   //   }
+    //   // }
+    // },
   },
   variants: {
     state: {
@@ -244,7 +250,7 @@ const sidebarRecipe = defineSlotRecipe({
   }
 });
 
-// 3. Dashboard Shell
+// CONSOLIDATED ✔
 const dashboardRecipe = defineRecipe({
   base: {
     height: "100vh",
@@ -259,7 +265,7 @@ const dashboardRecipe = defineRecipe({
   }
 });
 
-// 4. Home Page Tabs
+// CONSOLIDATED ✔
 const homeRecipe = defineSlotRecipe({
   slots: ["root", "header", "body"],
   base: {
@@ -284,52 +290,305 @@ const homeRecipe = defineSlotRecipe({
       "& > div": {
         alignItems: "center",
         gap: 2,
-      },
+
+        // icon in each tab button
+        "& svg": {
+          // TODO: bring over svg styling
+        }
+      }
     },
     body: {
       flex: 1,
       overflow: "auto",
-    },
+    }
   },
-});
+})
 
-// 5. Dashboard Widget Card
+// const canvasRecipe = defineRecipe({
-const widgetRecipe = defineSlotRecipe({
+//   base: {
+//     bg: "{transparent}",
+//     zIndex: "-1",
+//     color: "{text}"
+//   }
+// });
+
+// const widgetRecipe = defineSlotRecipe({
+//   slots: ["root", "header", "canvas"],
+//   base: {
+//     root: {
+//       flexDirection: "column",
+//       gap: "1",
+//       position: "relative",
+//       bg: "base100",
+//       borderRadius: "md",
+//       p: "1",
+//       paddingBottom: "2",
+//       border: "1px solid",
+//       borderColor: "{base300}",
+//       textAlign: "center",
+//       height: "100%",
+//       // position: "fixed"
+//     },
+//     header: {
+//       flexShrink: "0",
+//       bg: "{base300}",
+//       color: "{text}",
+//       cursor: "move",
+//       borderRadius: "sm",
+//       whiteSpace: "nowrap",
+//       textAlign: "left",
+//       pl: "2"
+//     },
+//     canvas: {
+//       flex: "1 1 auto",
+//       bg: "transparent",
+//       color: "{text}",
+//       cursor: "default",
+//       borderRadius: "md",
+//       overflow: "auto",
+//     }
+//   }
+// });
+
+// USED IN COMPONENTS:
+// * Settings Button
+// * My Dashboard
+const glassPanelRecipe = defineSlotRecipe({
   slots: ["root", "header", "body"],
+
+  // 🧊 THE GLASS MATH (Applies to everything)
   base: {
     root: {
       display: "flex",
       flexDirection: "column",
       position: "relative",
-      ...glassSurface,
-      width: "100%",
-      height: "100%",
-      borderRadius: "3xl",
       overflow: "hidden",
-    },
+      bg: {base: "rgba(255, 255, 255, 0.4)", _dark: "rgba(255, 255, 255, 0.04)"},
-    header: {
+      backdropFilter: "blur(12px)",
-      display: "flex",
+      WebkitBackdropFilter: "blur(12px)",
-      justifyContent: "space-between",
+      border: "1px solid",
-      alignItems: "center",
+      borderColor: {base: "gray.200", _dark: "whiteAlpha.200"},
-      px: 3,
+      boxShadow: "sm",
-      pt: 2,
+    }
-      pb: 0,
-      "& > p": {
-        color: "titleColor",
-        fontWeight: "500",
-        fontSize: "16px",
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        textOverflow: "clip",
-      },
-      "& > button": {
-        borderRadius: "xl",
-        _hover: {color: "white", bg: "gray.500"},
-      },
-    },
-    body: {flex: "1", overflow: "hidden", position: "relative", px: 1, pb: 1, pt: 0},
   },
+
+  // 📏 THE LAYOUTS (Applies selectively)
   variants: {
+    layout: {
+      widget: {
+        root: {
+          width: "100%",
+          height: "100%",
+          borderRadius: "3xl",
+        },
+        header: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          px: 3,
+          pt: 2,
+          pb: 0,
+
+          "& > p": {
+            color: "titleColor",
+            fontWeight: "500",
+            fontSize: "16px",
+
+            // the following three specifications are equivalent to Chakra's 'truncate' prop
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "clip",
+          },
+
+          "& > button": {
+            borderRadius: "xl",
+
+            _hover: {
+              color: "white",
+              bg: "gray.500",
+            },
+          }
+        },
+        body: {
+          flex: "1",
+          overflow: "hidden",
+          position: "relative",
+          px: 1,
+          pb: 1,
+          pt: 0
+        }
+      },
+      dropdown: {
+        root: {
+          borderRadius: "xl",
+          p: 1
+        }
+        // (Header and body slots are ignored here because dropdowns don't use them)
+      },
+      popover: {
+        root: {
+          borderRadius: "2xl",
+          p: 0,
+          boxShadow: "xl",
+          minW: "240px",
+          maxW: "60%",
+          minH: "80%",
+          overflow: "hidden",
+          // OVERRIDES: Make the background 85-90% opaque instead of 40%
+          bg: {
+            base: "rgba(255, 255, 255, 0.75)",
+            _dark: "rgba(20, 22, 25, 0.8)"
+          },
+
+          // OVERRIDES: Increase the blur just to smooth out any stubborn gridlines
+          backdropFilter: "blur(15px)",
+          WebkitBackdropFilter: "blur(15px)",
+
+
+          // IMPORTANT: everything below is specific to the widget menu found in the settingsButton component
+          // dialog header
+          "& > div.chakra-dialog__header": {
+            bg: "transparent",
+            color: {
+              base: "gray.800",
+              _dark: "white"
+            },
+            py: 4,
+            borderColor: {
+              base: "gray.200",
+              _dark: "whiteAlpha.200"
+            },
+
+            // title
+            "& h2": {
+              fontSize: "xl",
+              fontWeight: "bold"
+            },
+          },
+
+          // dialog body
+          "& > div.chakra-dialog__body": {
+            p: 0,
+
+            // box container of the widget category menu
+            "& div.chakra-tabs__root > div:first-child": {
+              position: "relative",
+              display: "flex",
+              maxW: "100%",
+              mx: 5,
+              mt: 4,
+              mb: 6
+            },
+
+            // the horizontal widget categories menu
+            "& div.chakra-tabs__list": {
+              bg: {
+                base: "rgba(0, 0, 0, 0.04)",
+                _dark: "rgba(255, 255, 255, 0.05)"
+              },
+              p: 1,
+              borderRadius: "full",
+              display: "flex",
+              flexWrap: "nowrap",
+              overflowX: "auto",
+              maxW: "100%",
+              border: "1px solid",
+              borderColor: {
+                base: "blackAlpha.50",
+                _dark: "whiteAlpha.100"
+              },
+              scrollbarWidth: "none",
+              "&::-webkit-scrollbar": {display: "none"},
+
+              // the pill shaped menu options
+              "& button.chakra-tabs__trigger": {
+                px: 5,
+                py: 2,
+                borderRadius: "full",
+                whiteSpace: "nowrap",
+                flexShrink: 0,
+                color: {
+                  base: "gray.500",
+                  _dark: "gray.400"
+                },
+                fontWeight: "medium",
+                transition: "background-color 0.2s, color 0.2s, box-shadow 0.2s",
+                _hover: {
+                  color: {
+                    base: "gray.800",
+                    _dark: "gray.200"
+                  },
+                },
+                _selected: {
+                  bg: {
+                    base: "white",
+                    _dark: "rgba(255, 255, 255, 0.12)"
+                  },
+                  color: {
+                    base: "blue.600",
+                    _dark: "blue.200"
+                  },
+                  boxShadow: "sm",
+                  fontWeight: "bold",
+                }
+              }
+            },
+
+            // base styling applied to both chevron navigators
+            "& div.chakra-tabs__root > div:first-child div:has(svg)": {
+              position: "absolute",
+              top: "0",
+              bottom: "0",
+              w: "50px",
+              alignItems: "center",
+              justifyContent: "center",
+              zIndex: 2,
+              cursor: "pointer",
+              bg: {
+                base: "rgba(255, 255, 255, 0.7)",
+                _dark: "rgba(30, 30, 30, 0.8)"
+              },
+              color: {
+                base: "gray.600",
+                _dark: "gray.300"
+              },
+              backdropFilter: "blur(1px)",
+              transition: "background-color 0.2s",
+
+              _hover: {
+                color: {
+                  base: "blue.500",
+                  _dark: "blue.300"
+                },
+                bg: {
+                  base: "rgba(255, 255, 255, 0.9)",
+                  _dark: "rgba(40, 40, 40, 0.95)"
+                },
+              },
+
+              "&:has(.lucide-chevron-left)": {
+                left: 0,
+                borderTopLeftRadius: "full",
+                borderBottomLeftRadius: "full",
+                // Bites a transparent circle out of the flat right side!
+                WebkitMaskImage: "radial-gradient(circle at 100% 50%, transparent 30px, black 19px)",
+                maskImage: "radial-gradient(circle at 100% 50%, transparent 30px, black 35px)",
+              },
+
+              "&:has(.lucide-chevron-right)": {
+                right: 0,
+                borderTopRightRadius: "full",
+                borderBottomRightRadius: "full",
+                // THE MAGIC: Bites a transparent circle out of the flat left side!
+                WebkitMaskImage: "radial-gradient(circle at 0% 50%, transparent 30px, black 19px)",
+                maskImage: "radial-gradient(circle at 0% 50%, transparent 30px, black 35px)",
+              }
+            }
+
+          }
+        }
+      }
+    },
     mode: {
       editing: {
         root: {
@@ -338,202 +597,16 @@ const widgetRecipe = defineSlotRecipe({
           borderWidth: "2px",
           borderColor: "orange.300",
           cursor: "grab",
-        },
-      },
-    },
-  },
-});
-
-// 6. TRUE POPOVER: Compact floating card for 3-dots menus
-const glassPopoverRecipe = defineSlotRecipe({
-  slots: ["content", "arrow", "positioner", "date", "checkboxcard", "checkbox", "switch", "button"],
-  base: {
-    content: {
-      ...glassSurface,
-      borderRadius: "1rem",
-      p: 3,
-      boxShadow: "lg",
-      bg: {base: "rgb(246 246 246 / 0.95)", _dark: "#353742"},
-      backdropFilter: "blur(15px)",
-      WebkitBackdropFilter: "blur(15px)",
-    },
-    date: {
-      color: "text",
-      bg: "widgetBadgeBg",
-      borderRadius: "lg",
-      h: "2rem",
-      _focus: {
-        borderStyle: "none",
-      }
-    },
-    checkboxcard: {
-      // applies to both dark & lt modes
-      w: "100%",
-      borderRadius: "lg",
-      color: "text",
-
-      "& div[data-part='control']": {
-        alignItems: "center",
-        padding: "6px",
-      },
-
-      bg: "widgetItemBg",
-      _checked: {
-        boxShadow: "none",
-        bg: "rgb(182 59 31 / 0.2)",
-        borderColor: "#B63B1F"
-      },
-
-      _dark: {
-        bg: "widgetBadgeBg",
-        _checked: {
-          boxShadow: "none",
-          color: "text",
-          bg: "#503D40",
-          borderColor: "#B55038"
-        }
-      }
-    },
-    checkbox: {
-      bg: "widgetInnerBadgeBg",
-      _checked: {
-        bg: "#B63B1F",
-        borderColor: "#B63B1F"
-      },
-
-      _dark: {
-        bg: "widgetBadgeBg",
-        _checked: {
-          color: "text",
-          bg: "#B55038",
-          borderColor: "#B55038"
-        }
-      }
-    },
-    switch: {
-      color: "text",
-      bg: "widgetBadgeBg",
-
-      _checked: {
-        bg: "#B63B1F",
-
-        _dark: {
-          bg: "#b55038"
-        }
-      },
-    },
-    button: {
-      w: "100%",
-      fontSize: "xs",
-      h: "2rem",
-      borderRadius: "lg",
-
-      color: "white",
-      bg: "#B63B1F",
-      _hover: {
-        color: "text",
-        bg: "#B63B1F32"
-      },
-
-      _dark: {
-        bg: "#b55038",
-        color: "text",
-        _hover: {
-          bg: "#503D40"
         }
       }
     }
   },
+
+  defaultVariants: {
+    layout: "widget"
+  }
 });
 
-// 7. MODAL DIALOG: Large view for the Widget Shop
-const glassDialogRecipe = defineSlotRecipe({
-  slots: ["content", "header", "body", "backdrop"],
-  base: {
-    backdrop: {
-      bg: "rgba(0, 0, 0, 0.4)",
-      backdropFilter: "blur(4px)",
-      WebkitBackdropFilter: "blur(4px)",
-    },
-    content: {
-      display: "flex",
-      flexDirection: "column",
-      position: "relative",
-      ...glassSurface,
-      borderRadius: "2xl",
-      p: 2,
-      boxShadow: "xl",
-      minW: "240px",
-      maxW: "60%",
-      minH: "80%",
-      overflow: "hidden",
-      bg: {base: "rgba(255, 255, 255, 0.75)", _dark: "rgb(22 23 28 / 0.9)"},
-      backdropFilter: "blur(15px)",
-      WebkitBackdropFilter: "blur(15px)",
-    },
-    header: {
-      bg: "transparent",
-      color: {base: "gray.800", _dark: "white"},
-      py: 4,
-      borderColor: {base: "gray.200", _dark: "whiteAlpha.200"},
-      "& h2": {fontSize: "xl", fontWeight: "bold"},
-    },
-    body: {
-      p: 0,
-      "& div.chakra-tabs__root > div:first-child": {
-        position: "relative",
-        display: "flex",
-        maxW: "100%",
-        mx: 5,
-        mt: 4,
-        mb: 6
-      },
-      "& div.chakra-tabs__list": {
-        bg: {base: "rgba(0, 0, 0, 0.04)", _dark: "rgba(255, 255, 255, 0.05)"},
-        p: 1, borderRadius: "full", display: "flex", flexWrap: "nowrap", overflowX: "auto", maxW: "100%",
-        border: "1px solid", borderColor: {base: "blackAlpha.50", _dark: "whiteAlpha.100"},
-        scrollbarWidth: "none", "&::-webkit-scrollbar": {display: "none"},
-        "& button.chakra-tabs__trigger": {
-          px: 5, py: 2, borderRadius: "full", whiteSpace: "nowrap", flexShrink: 0,
-          color: {base: "gray.500", _dark: "gray.400"},
-          fontWeight: "medium", transition: "background-color 0.2s, color 0.2s, box-shadow 0.2s",
-          _hover: {color: {base: "gray.800", _dark: "gray.200"}},
-          _selected: {
-            bg: {base: "white", _dark: "rgba(255, 255, 255, 0.12)"},
-            color: {base: "blue.600", _dark: "blue.200"},
-            boxShadow: "sm",
-            fontWeight: "bold"
-          }
-        }
-      },
-      "& div.chakra-tabs__root > div:first-child div:has(svg)": {
-        position: "absolute", top: "0", bottom: "0", w: "50px", alignItems: "center", justifyContent: "center",
-        zIndex: 2, cursor: "pointer", bg: {base: "rgba(255, 255, 255, 0.7)", _dark: "rgba(30, 30, 30, 0.8)"},
-        color: {base: "gray.600", _dark: "gray.300"}, backdropFilter: "blur(1px)", transition: "background-color 0.2s",
-        _hover: {
-          color: {base: "blue.500", _dark: "blue.300"},
-          bg: {base: "rgba(255, 255, 255, 0.9)", _dark: "rgba(40, 40, 40, 0.95)"}
-        },
-        "&:has(.lucide-chevron-left)": {
-          left: 0,
-          borderTopLeftRadius: "full",
-          borderBottomLeftRadius: "full",
-          WebkitMaskImage: "radial-gradient(circle at 100% 50%, transparent 30px, black 19px)",
-          maskImage: "radial-gradient(circle at 100% 50%, transparent 30px, black 35px)"
-        },
-        "&:has(.lucide-chevron-right)": {
-          right: 0,
-          borderTopRightRadius: "full",
-          borderBottomRightRadius: "full",
-          WebkitMaskImage: "radial-gradient(circle at 0% 50%, transparent 30px, black 19px)",
-          maskImage: "radial-gradient(circle at 0% 50%, transparent 30px, black 35px)"
-        },
-      },
-    },
-  },
-});
-
-// 6. Pill/Glass Expanding Tab Button
 const glassTabRecipe = defineRecipe({
   base: {
     display: "flex",
@@ -557,7 +630,7 @@ const glassTabRecipe = defineRecipe({
 
     // --- THE GLASS EFFECT (Inactive) ---
     // Uses a highly transparent white/black depending on mode
-    bg: {base: "rgba(255, 255, 255, 0.4)", _dark: "#1e2027"},
+    bg: {base: "rgba(255, 255, 255, 0.4)", _dark: "rgba(255, 255, 255, 0.03)"},
     backdropFilter: "blur(12px)",
     WebkitBackdropFilter: "blur(12px)",
     border: "1px solid",
@@ -571,7 +644,7 @@ const glassTabRecipe = defineRecipe({
       pr: "16px",
       // --- THE GLASS EFFECT (Hover) ---
       // Becomes slightly more opaque when you mouse over
-      bg: {base: "rgba(255, 255, 255, 0.8)", _dark: "#191a22"},
+      bg: {base: "rgba(255, 255, 255, 0.8)", _dark: "rgba(255, 255, 255, 0.1)"},
       borderColor: {base: "rgba(0, 0, 0, 0.1)", _dark: "rgba(255, 255, 255, 0.15)"},
       color: "fg",
       textDecoration: "none",
@@ -590,46 +663,29 @@ const glassTabRecipe = defineRecipe({
         bg: "{gooeyButtonBackground}",
         cursor: "default",
         textDecoration: "none",
-      },
+      }
-    },
+    }
-  },
+  }
 });
 
-/* ==========================================================================
-   RAW WIDGET COLORS (For Canvas/Plotly libraries that reject CSS variables)
-   ========================================================================== */
-export const rawWidgetColors = {
-  light: {
-    text: "#000000",
-    muted: "#4A5568", // gray.600
-    grid: "rgba(0, 0, 0, 0.1)",
-  },
-  dark: {
-    text: "#FFFFFF",
-    muted: "#A0AEC0", // gray.400
-    grid: "rgba(255, 255, 255, 0.15)",
-  }
-};
-
-/* ==========================================================================
-   CONFIG & SYSTEM
-   ========================================================================== */
 const config = defineConfig({
   globalCss: {
-    // the shadow box behind widgets when editing layout
     ".react-grid-placeholder": {
       background: "#c0d2e3ff !important",
       borderColor: "#a9b6c2ff !important",
       boxShadow: "0 0 10px #c0d2e3ff !important",
       opacity: "1 !important",
-      borderRadius: "3xl",
+      borderRadius: "5px",
       _dark: {
-        background: "#3B3D49FF !important",
+        background: "#393c3fff !important",
         borderColor: "#000000ff !important",
         boxShadow: "0 0 10px #16181bff !important",
         opacity: "1 !important",
       },
     },
+    ".react-resizable-handle-se": {
+      zIndex: "1",
+    },
     "*": {
       scrollbarWidth: "thin",
       scrollbarColor: "#a0aec0 transparent",
@@ -650,43 +706,59 @@ const config = defineConfig({
     "::-webkit-scrollbar-track": {
       background: "transparent",
     },
-    // this is what changes the maps colors to 'dark mode'
+    // '.leaflet-tile': {
-    ".leaflet-control-zoom-in, .leaflet-control-zoom-out, .leaflet-control-attribution, .leaflet-container": {
+    //   _dark: {
+    //     filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
+    //   }
+    // },
+    '.leaflet-control-zoom-in, .leaflet-control-zoom-out, .leaflet-control-attribution, .leaflet-container': {
       _dark: {
         filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
-      },
+      }
     },
-    ".leaflet-container": {
+    '.leaflet-control-attribution': {
+      _dark: {
+        filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
+      }
+    },
+    '.leaflet-container': {
       fontFamily: "system-ui, sans-serif !important",
+      _dark: {
+        filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
+      }
     },
-    // removes the animation of moving widgets, seems very harsh and jumpy w/o animation
+    // ".leaflet-popup-content": {
-    // ".react-grid-item": {
+    //   fontFamily: "georgia, system-ui, sans-serif !important"
-    //   transition: "none !important"
     // },
+    // ".leaflet-control a": {
+    //   fontFamily: "georgia, system-ui, sans-serif !important"
+    // },
+    // ".leaflet-tooltip": {
+    //   fontFamily: "georgia, system-ui, sans-serif !important"
+    // },
+    ".react-grid-item": {
+      transition: "none !important"
+    },
   },
   theme: {
     semanticTokens: {
       colors: {
-        text: { value: { base: "#131315", _dark: "rgb(234 234 234 / 0.94)" } },
+        // base100: {value: {base: "#f6f9faff", _dark: "#1617199e"}},
-        textInverted: { value: { base: "#000000", _dark: "#FFFFFF" } }, // Fixed: Properly inverted
+        // base200: {value: {base: "#e6ecf1ff", _dark: "#242424"}},
-        MainBackground: { value: { base: "#f1f1f1", _dark: "#16171c" } },
+        // base300: {value: {base: "#d3dae4ff", _dark: "#0a0b0bff"}},
-        titleColor: { value: { base: "colors.gray.800", _dark: "#e1e1e1" } },
+        // primary: {value: {base: "#2B98F8", _dark: "#2B98F8"}},
-        iconColor: { value: { base: "#191919", _dark: "rgb(255 255 255 / 0.82)" } }, // Fixed: Visible in dark mode
+        // primaryLt: {value: {base: "#98cdffff", _dark: "#98cdffff"}},
-        glassSeperator: { value: { base: "#0000001A", _dark: "#FFFFFF3F" } },
+        // secondaryBG: {value: {base: "#EDF1F1", _dark: "#121212"}},
-        gooeyButtonBackground: {value: {base: "rgba(255, 255, 255, 0.1)", _dark: "#333540"}},
+        // border: {value: {base: "#000000", _dark: "#cbcbcb84"}},
+        text: {value: {base: "#000000", _dark: "#FFFFFF"}},
+        textInverted: {value: {base: "#000000", _dark: "#FFFFFF"}},
+        // icon: {value: {base: "#000000", _dark: "#FFFFFF"}},
 
-        // WIDGET SPECIFIC VALUES
+        gooeyButtonBackground: {value: {base: "rgba(255, 255, 255, 0.1)", _dark: "rgba(255, 255, 255, 0.1)"}},
-        widgetItemBg: { value: { base: "rgb(115 132 166 / 0.17)", _dark: "rgb(51 53 64)" } },
+        MainBackground: {value: {base: "#F9F9F9", _dark: "#141414"}},
-        widgetItemExpandedBg: { value: { base: "rgb(184 197 220 / 0.17)", _dark: "rgb(59 61 73)" } },
+        titleColor: {value: {base: "gray.800", _dark: "#FFFFFF"}},
-        widgetBadgeBg: { value: { base: "rgb(154 163 179 / 0.45)", _dark: "rgb(75 77 90)" } },
+        iconColor: {value: {base: "gray.600", _dark: "#000000"}},
-        widgetInnerBadgeBg: { value: { base: "rgb(224 226 232)", _dark: "rgb(100 103 119)" } },
+        glassSeperator: {value: {base: "#0000001A", _dark: "#FFFFFF3F"}},
-        widgetTextMuted: { value: { base: "#262627", _dark: "rgb(236 236 236 / 0.9)" } },
-
-        // ALERT COLORS
-        alertRed: { value: { base: "colors.red.600", _dark: "colors.red.400" } },
-        alertOrange: { value: { base: "colors.orange.600", _dark: "colors.orange.400" } },
-        alertYellow: { value: { base: "colors.yellow.600", _dark: "colors.yellow.400" } },
-        alertGreen: { value: { base: "colors.green.600", _dark: "colors.green.400" } },
       },
     },
     tokens: {
@@ -696,17 +768,19 @@ const config = defineConfig({
     },
     recipes: {
       dashboard: dashboardRecipe,
-      glassTab: glassTabRecipe,
+      // canvas: canvasRecipe,
+      glassTab: glassTabRecipe
     },
     slotRecipes: {
       header: headerRecipe,
       sidebar: sidebarRecipe,
+      // widget: widgetRecipe,
+      glassPanel: glassPanelRecipe,
       home: homeRecipe,
-      widget: widgetRecipe,
-      glassPopover: glassPopoverRecipe,
-      glassDialog: glassDialogRecipe,
     },
   },
 });
 
+
+// Define semantic tokens and export recipes
 export const system = createSystem(defaultConfig, config);