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 },
         }
     },