refactor: continueing to propogate changes made to widget setting popover in al changes to ivans widget

client/src/components/Widgets/AlertChanges.jsx

@@ -234,6 +234,13 @@ export default function AlertChanges({ settings, widgetID }) {
                         </Text>
                       </Flex>
                       <Flex w="100%" minW={0} justify="right" gap={2}>
+                        <Flex w="fit" color="iconColor">
+                          {volcano[1][0]?.change_type === "increase" ? (
+                            <TrendingUp />
+                          ) : (
+                            <TrendingDown />
+                          )}
+                        </Flex>
                         <Text
                           truncate
                           pl={2}
@@ -245,13 +252,6 @@ export default function AlertChanges({ settings, widgetID }) {
                         >
                           {volcano[1][0]?.alert_level_name}
                         </Text>
-                        <Flex w="fit">
-                          {volcano[1][0]?.change_type === "increase" ? (
-                            <TrendingUp />
-                          ) : (
-                            <TrendingDown />
-                          )}
-                        </Flex>
                       </Flex>
                     </Flex>
                   </Collapsible.Trigger>
@@ -270,18 +270,13 @@ export default function AlertChanges({ settings, widgetID }) {
                       <Timeline.Connector>
                         <Timeline.Indicator
                           outline="none"
-                          bg="widgetBadgeBg"
+                          bg="transparent"
                           color="iconColor"
                           size="lg"
                         >
-                          {object?.alert_scheme_domain ===
+                          {object?.alert_scheme_domain === "terrestrial" && <Footprints size={15} />}
-                            "terrestrial" && <Footprints size={15} />}
+                          {object?.alert_scheme_domain === "aviation" && <Plane size={15} />}
-                          {object?.alert_scheme_domain === "aviation" && (
+                          {object?.alert_scheme_domain === "maritime" && <Sailboat size={15} />}
-                            <Plane size={15} />
-                          )}
-                          {object?.alert_scheme_domain === "maritime" && (
-                            <Sailboat size={15} />
-                          )}
                         </Timeline.Indicator>
                         <Timeline.Indicator
                           h="50%"
@@ -313,8 +308,7 @@ export default function AlertChanges({ settings, widgetID }) {
                               w="100%"
                               h="100%"
                               color={
-                                alertColors[object?.alert_level_name] ||
+                                alertColors[object?.alert_level_name] || "text"
-                                "text"
                               }
                               fontSize="md"
                               fontWeight="semibold"
@@ -328,18 +322,16 @@ export default function AlertChanges({ settings, widgetID }) {
                               justify="left"
                               align="center"
                             >
-                              <Text color="widgetTextMuted">
+                              <Text color="widgetTextMuted" mr={1}>
-                                Alert Scale:{" "}
+                                Alert Scale:
                               </Text>
                               {Array.from(
                                 {
                                   length:
                                     Number(object?.alert_scheme_highest) -
-                                    Number(object?.alert_scheme_lowest) +
+                                    Number(object?.alert_scheme_lowest) + 1,
-                                    1,
                                 },
-                                (v, i) =>
+                                (v, i) => Number(object?.alert_scheme_lowest) + i
-                                  Number(object?.alert_scheme_lowest) + i,
                               ).map((num) => (
                                 <Center
                                   key={num}
@@ -347,14 +339,12 @@ export default function AlertChanges({ settings, widgetID }) {
                                   h="100%"
                                   color="text"
                                   bg={
-                                    num ===
+                                    num === Number(object?.alert_level_rank)
-                                    Number(object?.alert_level_rank)
+                                      ? "widgetInnerBadgeBg"
-                                      ? "widgetBadgeBg"
                                       : "transparent"
                                   }
                                   borderRadius={
-                                    num ===
+                                    num === Number(object?.alert_level_rank)
-                                    Number(object?.alert_level_rank)
                                       ? "xl"
                                       : "none"
                                   }

client/src/components/Widgets/IvansAlerts.jsx

@@ -1,4 +1,4 @@
-import {Button, Flex, Spinner, Text, Box, Collapsible} from "@chakra-ui/react";
+import {Button, Flex, Spinner, Text, Box, Collapsible, Highlight} from "@chakra-ui/react";
 import {useEffect, useMemo, useCallback } from 'react';
 import {useDashboardStore} from "@/store/useDashboardStore.jsx";
 import VdapApi from '../../hooks/useVdapApi.js';
@@ -100,7 +100,7 @@ export default function IvansAlerts({ settings, widgetID }) {
                       bg="widgetItemBg"
                     >
                       <Flex direction="column" w="100%" minW={0} textAlign="left" color="text">
-                        <Text truncate>{item.volcano_name}</Text>
+                        <Text truncate color="text" fontWeight="medium">{item.volcano_name}</Text>
                         <Text truncate fontSize="xs" color="widgetTextMuted">{item.send_time}</Text>
                       </Flex>
                       <Flex w="100%" minW={0} justify="right">
@@ -112,31 +112,33 @@ export default function IvansAlerts({ settings, widgetID }) {
                     {/* 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">
                       <Flex direction="column" gap={2} borderRadius="lg" p={2} align="start">
-                        <Text w="fit" fontSize="sm" color="text" pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md">Preparer: {item?.preparer}</Text>
+                        <Text w="fit" fontSize="sm" color="text" p={1} bg="widgetBadgeBg" borderRadius="md">Preparer: {item?.preparer}</Text>
                         <Text w="100%" h="100%" fontSize="sm" color="text" textAlign="left" whiteSpace="pre-line">{item?.summary}</Text>
                       </Flex>
                       {item?.files?.map((file, index) => {
                         return (
                           <Box w="100%" h="100%" key={index} p={1}>
-                            <Flex mb={2} justify="space-between">
+                            <Flex direction="row" mb={2} gap={1} justify="space-between">
-                              <Text pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md" fontSize="xs" color="text">{file?.name}</Text>
+                              <a href={`${file?.url}#view=FitV&toolbar=0`} target="_blank" rel="noopener noreferrer">
-                              <Box borderRadius="lg" bg="widgetBadgeBg" color="text" pl={1} pr={1} fontSize={13} asChild>
+                                <Text mr={1} truncate p={1} bg="widgetBadgeBg" borderRadius="lg" fontSize="sm" color="text">
-                                <a href={`${file?.url}#view=FitV&toolbar=0`} target="_blank" rel="noopener noreferrer">
+                                  File: {file?.name}
-                                  Open
+                                </Text>
-                                </a>
+                              </a>
-                              </Box>
+                              {/*<Box borderRadius="lg" bg="widgetBadgeBg" color="text" p={1} fontSize="sm" asChild>*/}
+                              {/*    Open*/}
+                              {/*</Box>*/}
                             </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 direction="column" w="100%" h="100%" align="center" p={4} color="widgetTextMuted" bg="widgetBadgeBg" borderRadius="md">
-                                <Text mb={2}>
+                                <Text mb={2} fontSize="xs" color="red.300">
                                   Your browser cannot display this PDF directly.
                                 </Text>
-                                <a href={file?.url} target="_blank">
+                                <a href={file?.url} target="_blank" bg="widgetBadgeBg" rel="noopener noreferrer">
-                                  Download PDF
+                                  <Text fontSize="xs" bg="widgetInnerBadgeBg" borderRadius="md" p={1}>Download PDF Instead</Text>
                                 </a>
                               </Flex>
                             </object>

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

@@ -41,11 +41,11 @@ export default function AlertChangeSettings({ widgetId, currentSettings }) {
   }
 
   return (
-    <Flex direction="column" gap={4} pb={2} overflowY="auto">
+    <Flex direction="column" pb={2} overflowY="auto">
       <Fieldset.Root>
         <Fieldset.Content>
           {/* SELECTING DATE RANGE */}
-          <Flex direction="column" w="100%" h="100%" justify="center" gap="2">
+          <Flex direction="column" w="100%" h="100%" justify="center" gap={2}>
             <Flex direction="column">
               <Text w="100%" fontWeight="bold">
                 Date Range Selection
@@ -62,7 +62,7 @@ export default function AlertChangeSettings({ widgetId, currentSettings }) {
                 align="center"
                 justify="center"
               >
-                <Text w="50%" align="center" justify="center" color="gray.700">
+                <Text w="50%" align="center" justify="center" color="text">
                   Start Date
                 </Text>
                 <Flex direction="column" w="100%">
@@ -103,7 +103,7 @@ export default function AlertChangeSettings({ widgetId, currentSettings }) {
                 align="center"
                 justify="center"
               >
-                <Text w="50%" align="center" justify="center" color="gray.700">
+                <Text w="50%" align="center" justify="center" color="text">
                   End Date
                 </Text>
                 <Flex direction="column" w="100%">

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

@@ -1,4 +1,4 @@
-import {Button, Field, Flex, Input, Switch, Text} from "@chakra-ui/react";
+import {Button, Field, Flex, Input, Switch, Text, Fieldset, CheckboxCard} from "@chakra-ui/react";
 import {useDashboardStore} from "../../../store/useDashboardStore.jsx";
 import {useState} from "react";
 
@@ -20,89 +20,177 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
   }
 
   return (
-    <Flex flexDirection="column" justifyContent="space-between" gap={2} overflowY="auto">
+    <Flex flexDirection="column" justifyContent="space-between" overflowY="auto">
-      {/* COPY TO CLIPBOARD */}
+      <Fieldset.Root>
-      <Button w="fit" size="xs" onClick={handleCopyToClipboard}>Copy All IVANS</Button>
+        <Fieldset.Content>
-
+          {/* SELECTING DATE RANGE */}
-      {/* SORTS */}
+          <Flex direction="column" w="100%" h="100%" justify="center" gap={2}>
-      <Switch.Root
+            <Flex direction="column">
-        checked={currentSettings?.activeSorts?.timeSort === "asc"}
+              <Text w="100%" fontWeight="bold">
-        onCheckedChange={handleTimeSort}
+                Date Range Selection
-        colorPalette="blue"
+              </Text>
-      >
+              <hr style={{borderColor: "red.700"}} /> {/*line seperator*/}
-        <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>
-
-      {/* 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%"
-                type="date"
-                value={currentSettings?.startDate || ""}
-                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>
+            {/* start date */}
-        <Field.Root invalid={!!endError}>
+            <Field.Root invalid={!!startError}>
-          <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+              <Flex
-            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
+                direction="row"
-              End Date
-            </Text>
-            <Flex direction="column" w="100%">
-              <Input
                 w="100%"
-                type="date"
+                h="100%"
-                value={currentSettings?.endDate || ""}
+                align="center"
-                onChange={(e) => {
+                justify="center"
-                  const value = e.target.value;
+              >
-                  updateSettings(widgetId, {...currentSettings, endDate: value});
+                <Text w="50%" align="center" justify="center" color="text">
+                  Start Date
+                </Text>
+                <Flex direction="column" w="100%">
+                  <Input
+                    type="date"
+                    w="100%"
+                    borderRadius="lg"
+                    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)) setEndError("Can't Choose a Future Date");
+                      if (value && dateSelected > today)
-                  else setEndError("");
+                        setStartError("Can't Choose a Future Date");
-                }}
+                      else setStartError("");
-              />
+                    }}
-              {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
+                  />
-            </Flex>
+                  {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"
+                    w="100%"
+                    borderRadius="lg"
+                    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>
+
-      </Flex>
+          {/* SORTS */}
+          <Flex direction="column">
+            <Text w="100%" fontWeight="bold">
+              Sorts
+            </Text>
+            <hr /> {/*line seperator*/}
+          </Flex>
+
+          {/* time sort */}
+          <Switch.Root
+            checked={currentSettings?.activeSorts?.timeSort === "asc"}
+            onCheckedChange={handleTimeSort}
+            colorPalette="blue"
+          >
+            <Switch.HiddenInput />
+            <Switch.Control>
+              <Switch.Thumb />
+            </Switch.Control>
+            <Switch.Label fontWeight={400}>Oldest to Newest</Switch.Label>
+          </Switch.Root>
+
+          {/* alphabetic sort */}
+          <Switch.Root
+            checked={currentSettings?.activeSorts?.volcanoSort}
+            onCheckedChange={handleVolcanoSort}
+            colorPalette="blue"
+          >
+            <Switch.HiddenInput />
+            <Switch.Control>
+              <Switch.Thumb />
+            </Switch.Control>
+            <Switch.Label fontWeight={400}>Alphabetically by Volcano</Switch.Label>
+          </Switch.Root>
+
+          <Flex direction="column">
+            <Text w="100%" fontWeight="bold">
+              Filters
+            </Text>
+            <hr /> {/*line seperator*/}
+          </Flex>
+
+          {/* elevated levels */}
+          <CheckboxCard.Root
+            size="sm"
+            variant="surface"
+            borderRadius="lg"
+            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 />
+            </CheckboxCard.Control>
+          </CheckboxCard.Root>
+
+          {/* COPY TO CLIPBOARD */}
+          <Flex direction="column">
+            <Text w="100%" fontWeight="bold">
+              Tools
+            </Text>
+            <hr /> {/*line seperator*/}
+            <Button mt={2} w="100%" size="xs" borderRadius="lg" variant="subtle" onClick={handleCopyToClipboard}>Copy All IVANS</Button>
+          </Flex>
+        </Fieldset.Content>
+      </Fieldset.Root>
     </Flex>
   )
-}
+}

client/src/constants/widgetRegistry.jsx

@@ -63,7 +63,6 @@ export const WIDGET_REGISTRY = {
         },
         allowedSizes: {
             small: { w: 3, h: 6 },
-            medium: { w: 3, h: 9 },
             large: { w: 3, h: 12 },
         }
     },
@@ -85,7 +84,6 @@ export const WIDGET_REGISTRY = {
         },
         allowedSizes: {
             small: { w: 3, h: 6 },
-            medium: { w: 3, h: 9 },
             large: { w: 3, h: 12 },
         }
     },
@@ -186,7 +184,7 @@ export const WIDGET_REGISTRY = {
             endDate: getEndDate(),
         },
         allowedSizes: {
-            medium: { w: 3, h: 12 },
+            large: { w: 3, h: 12 },
         }
     },
 

client/src/theme.js

@@ -2,7 +2,7 @@ import {defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineRecip
 
 // REUSABLE GLASS SURFACE
 const glassSurface = {
-  bg: {base: "rgba(255, 255, 255, 0.4)", _dark: "rgba(255, 255, 255, 0.04)"},
+  bg: {base: "rgb(253 253 253 / 0.4)", _dark: "rgb(37 38 46 / 0.8)"},
   backdropFilter: "blur(12px)",
   WebkitBackdropFilter: "blur(12px)",
   border: "1px solid",
@@ -353,7 +353,7 @@ const glassPopoverRecipe = defineSlotRecipe({
       borderRadius: "xl",
       p: 3,
       boxShadow: "lg",
-      bg: {base: "rgba(255, 255, 255, 0.95)", _dark: "rgba(20, 22, 25, 0.95)"},
+      bg: {base: "rgba(255, 255, 255, 0.95)", _dark: "#353742"},
       backdropFilter: "blur(15px)",
       WebkitBackdropFilter: "blur(15px)",
     },
@@ -381,7 +381,7 @@ const glassDialogRecipe = defineSlotRecipe({
       maxW: "60%",
       minH: "80%",
       overflow: "hidden",
-      bg: {base: "rgba(255, 255, 255, 0.75)", _dark: "rgba(20, 22, 25, 0.8)"},
+      bg: {base: "rgba(255, 255, 255, 0.75)", _dark: "rgb(22 23 28 / 0.9)"},
       backdropFilter: "blur(15px)",
       WebkitBackdropFilter: "blur(15px)",
     },
@@ -471,7 +471,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: "rgba(255, 255, 255, 0.03)"},
+    bg: {base: "rgba(255, 255, 255, 0.4)", _dark: "#1e2027"},
     backdropFilter: "blur(12px)",
     WebkitBackdropFilter: "blur(12px)",
     border: "1px solid",
@@ -485,7 +485,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: "rgba(255, 255, 255, 0.1)"},
+      bg: {base: "rgba(255, 255, 255, 0.8)", _dark: "#191a22"},
       borderColor: {base: "rgba(0, 0, 0, 0.1)", _dark: "rgba(255, 255, 255, 0.15)"},
       color: "fg",
       textDecoration: "none",
@@ -538,7 +538,7 @@ const config = defineConfig({
       opacity: "1 !important",
       borderRadius: "3xl",
       _dark: {
-        background: "#393c3fff !important",
+        background: "#3B3D49FF !important",
         borderColor: "#000000ff !important",
         boxShadow: "0 0 10px #16181bff !important",
         opacity: "1 !important",
@@ -581,19 +581,20 @@ const config = defineConfig({
   theme: {
     semanticTokens: {
       colors: {
-        text: { value: { base: "#000000", _dark: "#FFFFFF" } },
+        text: { value: { base: "#131315", _dark: "rgb(234 234 234 / 0.94)" } },
         textInverted: { value: { base: "#000000", _dark: "#FFFFFF" } }, // Fixed: Properly inverted
-        MainBackground: { value: { base: "#F9F9F9", _dark: "#141414" } },
+        MainBackground: { value: { base: "#f1f1f1", _dark: "#16171c" } },
-        titleColor: { value: { base: "colors.gray.800", _dark: "#FFFFFF" } },
+        titleColor: { value: { base: "colors.gray.800", _dark: "#e1e1e1" } },
-        iconColor: { value: { base: "colors.gray.600", _dark: "colors.gray.300" } }, // Fixed: Visible in dark mode
+        iconColor: { value: { base: "#191919", _dark: "rgb(255 255 255 / 0.82)" } }, // Fixed: Visible in dark mode
         glassSeperator: { value: { base: "#0000001A", _dark: "#FFFFFF3F" } },
-        gooeyButtonBackground: {value: {base: "rgba(255, 255, 255, 0.1)", _dark: "rgba(255, 255, 255, 0.1)"}},
+        gooeyButtonBackground: {value: {base: "rgba(255, 255, 255, 0.1)", _dark: "#333540"}},
 
         // WIDGET SPECIFIC VALUES
-        widgetItemBg: { value: { base: "rgba(0, 0, 0, 0.04)", _dark: "rgba(255, 255, 255, 0.05)" } },
+        widgetItemBg: { value: { base: "rgb(115 132 166 / 0.17)", _dark: "rgb(51 53 64)" } },
-        widgetItemExpandedBg: { value: { base: "rgba(0, 0, 0, 0.08)", _dark: "rgba(0, 0, 0, 0.3)" } },
+        widgetItemExpandedBg: { value: { base: "rgb(184 197 220 / 0.17)", _dark: "rgb(59 61 73)" } },
-        widgetBadgeBg: { value: { base: "rgba(255, 255, 255, 0.6)", _dark: "rgba(0, 0, 0, 0.5)" } },
+        widgetBadgeBg: { value: { base: "rgb(154 163 179 / 0.45)", _dark: "rgb(75 77 90)" } },
-        widgetTextMuted: { value: { base: "colors.gray.600", _dark: "colors.gray.400" } },
+        widgetInnerBadgeBg: { value: { base: "rgb(154 163 179 / 0.45)", _dark: "rgb(100 103 119)" } },
+        widgetTextMuted: { value: { base: "#262627", _dark: "rgb(236 236 236 / 0.9)" } },
 
         // ALERT COLORS
         alertRed: { value: { base: "colors.red.600", _dark: "colors.red.400" } },