update: rounder borders for widget settings menu

wip: themes for checkboxes

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/CommCoorReport.jsx

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

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,31 @@ 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="widgetInnerBadgeBg" 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}>
+                          <Box w="100%" h="100%" key={index} >
-                            <Flex mb={2} justify="space-between">
+                            <Flex direction="row" w="100%">
-                              <Text pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md" fontSize="xs" color="text">{file?.name}</Text>
+                              <Text w="100%" p={1} fontWeight="semibold" bg="widgetInnerBadgeBg" borderLeftRadius="lg" fontSize="sm" color="text">File: </Text>
-                              <Box borderRadius="lg" bg="widgetBadgeBg" color="text" pl={1} pr={1} fontSize={13} asChild>
                               <a href={`${file?.url}#view=FitV&toolbar=0`} target="_blank" rel="noopener noreferrer">
-                                  Open
+                                <Text truncate w="100%" p={1} bg="widgetInnerBadgeBg" borderRightRadius="lg" fontSize="sm" color="text">
+                                  {file?.name}
+                                </Text>
                               </a>
-                              </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} mt={1} color="widgetTextMuted" bg="widgetInnerBadgeBg" borderRadius="lg">
-                                <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="widgetBadgeBg" borderRadius="md" p={1}>Download PDF Instead</Text>
                                 </a>
                               </Flex>
                             </object>

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

@@ -13,20 +13,22 @@ import {
   useFilter,
   useListCollection,
   Wrap,
-  Badge
+  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 }) {
+  // 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);
-
-  console.log("currentSettings:", currentSettings);
-
   const [selectedVolcanoes, setSelectedVolcanoes] = useState([]);
   const { startsWith } = useFilter({ sensitivity: "base" });
 
@@ -36,23 +38,21 @@ export default function AlertChangeSettings({ widgetId, currentSettings }) {
     limit: 10,
   });
 
+  // FUNCTIONS
   const handleValueChange = (details) => {
     setSelectedVolcanoes(details.value)
   }
 
   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">
+          <HStack>
-            <Flex direction="column">
+            <Text flexShrink="0" fontWeight="semibold">Date Range Selection</Text>
-              <Text w="100%" fontWeight="bold">
+            <Separator flex="1" size="sm"/> {/*line seperator*/}
-                Date Range Selection
+          </HStack>
-              </Text>
+          <Flex direction="column" w="100%" h="100%" justify="center" gap={2} pr={1}>
-              <hr /> {/*line seperator*/}
-            </Flex>
-
             {/* start date */}
             <Field.Root invalid={!!startError}>
               <Flex
@@ -62,14 +62,13 @@ 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%">
                   <Input
                     type="date"
-                    w="100%"
+                    css={popoverStyles.date}
-                    borderRadius="lg"
                     value={currentSettings?.startDate || ""}
                     onChange={(e) => {
                       const value = e.target.value;
@@ -103,14 +102,14 @@ 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%">
                   <Input
                     type="date"
-                    w="100%"
+                    css={popoverStyles.date}
-                    borderRadius="lg"
+
                     value={currentSettings?.endDate || ""}
                     onChange={(e) => {
                       const value = e.target.value;
@@ -137,18 +136,15 @@ export default function AlertChangeSettings({ widgetId, currentSettings }) {
           {/* FILTERS */}
           <CheckboxGroup w="100%">
             <Flex direction="column" w="100%" gap={2}>
-              <Flex direction="column" w="100%">
+              <HStack>
-                <Text w="fit" fontWeight="bold">
+                <Text flexShrink="0" fontWeight="semibold">Filters</Text>
-                  Filters
+                <Separator flex="1" size="sm"/> {/*line seperator*/}
-                </Text>
+              </HStack>
-                <hr /> {/*line seperator*/}
-              </Flex>
 
               {/* level increases */}
               <CheckboxCard.Root
-                size="sm"
+                css={popoverStyles.checkboxcard}
-                variant="surface"
+
-                borderRadius="lg"
                 defaultChecked={currentSettings?.filters?.levelIncreases}
                 onCheckedChange={(e) => {
                   updateSettings(widgetId, {
@@ -167,15 +163,14 @@ export default function AlertChangeSettings({ widgetId, currentSettings }) {
                       Level Increases
                     </CheckboxCard.Label>
                   </CheckboxCard.Content>
-                  <CheckboxCard.Indicator />
+                  <CheckboxCard.Indicator css={popoverStyles.checkbox} />
                 </CheckboxCard.Control>
               </CheckboxCard.Root>
 
               {/* level decreases */}
               <CheckboxCard.Root
-                size="sm"
+                css={popoverStyles.checkboxcard}
-                variant="surface"
+
-                borderRadius="lg"
                 defaultChecked={currentSettings?.filters?.levelDecreases}
                 onCheckedChange={(e) => {
                   updateSettings(widgetId, {
@@ -194,15 +189,14 @@ export default function AlertChangeSettings({ widgetId, currentSettings }) {
                       Level Decreases
                     </CheckboxCard.Label>
                   </CheckboxCard.Content>
-                  <CheckboxCard.Indicator />
+                  <CheckboxCard.Indicator css={popoverStyles.checkbox} />
                 </CheckboxCard.Control>
               </CheckboxCard.Root>
 
               {/* elevated levels */}
               <CheckboxCard.Root
-                size="sm"
+                css={popoverStyles.checkboxcard}
-                variant="surface"
+
-                borderRadius="lg"
                 defaultChecked={currentSettings?.filters?.elevatedLevels}
                 onCheckedChange={(e) => {
                   updateSettings(widgetId, {
@@ -221,7 +215,7 @@ export default function AlertChangeSettings({ widgetId, currentSettings }) {
                       Only Elevated Levels
                     </CheckboxCard.Label>
                   </CheckboxCard.Content>
-                  <CheckboxCard.Indicator />
+                  <CheckboxCard.Indicator css={popoverStyles.checkbox}/>
                 </CheckboxCard.Control>
               </CheckboxCard.Root>
             </Flex>

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

@@ -1,12 +1,18 @@
-import {Button, Field, Flex, Input, Switch, Text} from "@chakra-ui/react";
+import {Button, Field, Flex, Input, Switch, Text, Fieldset, Separator, HStack, useSlotRecipe} 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});
   }
@@ -17,22 +23,24 @@ export default function CommCoorReportSettings({ widgetId, currentSettings }) {
 
   return (
     <Flex flexDirection="column" justifyContent="space-between" gap={2} overflowY="auto">
-      {/* COPY TO CLIPBOARD */}
+      <Fieldset.Root>
-      <Button w="fit" size="xs" onClick={handleCopyToClipboard}>Copy Report</Button>
+        <Fieldset.Content>
-
-      {/* DOWNLOAD REPORT */}
-      <Button w="fit" size="xs" onClick={handleDownloadReport}>Download Report</Button>
-
           {/* SELECTING DATE RANGE */}
-      <Flex direction="column" w="100%" h="100%" align="center" justify="center" gap="2">
+          <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="gray.700">
+                <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) => {
@@ -51,14 +59,16 @@ export default function CommCoorReportSettings({ widgetId, currentSettings }) {
                 </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" mt={2} color="gray.700">
+                <Text w="50%" align="center" justify="center" mt={2} color="text">
                   End Date
                 </Text>
                 <Flex direction="column" w="100%">
                   <Input
                     w="100%"
+                    css={popoverStyles.date}
                     type="date"
                     value={currentSettings?.endDate || ""}
                     onChange={(e) => {
@@ -78,6 +88,19 @@ export default function CommCoorReportSettings({ widgetId, currentSettings }) {
               </Flex>
             </Field.Root>
           </Flex>
+
+          <HStack>
+            <Text flexShrink="0" fontWeight="semibold">Tools</Text>
+            <Separator flex="1" size="sm"/> {/*line seperator*/}
+          </HStack>
+          <Flex direction="column" w="100%" h="100%" justify="center" gap={2}>
+            {/* COPY TO CLIPBOARD */}
+            <Button css={popoverStyles.button} onClick={handleCopyToClipboard}>Copy Report</Button>
+            {/* DOWNLOAD REPORT */}
+            <Button css={popoverStyles.button} onClick={handleDownloadReport}>Download Report</Button>
+          </Flex>
+        </Fieldset.Content>
+      </Fieldset.Root>
     </Flex>
   )
 }

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

@@ -1,12 +1,30 @@
-import {Button, Field, Flex, Input, Switch, Text} from "@chakra-ui/react";
+import {
+  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});
   }
@@ -20,81 +38,89 @@ 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>
-
-      {/* SORTS */}
-      <Switch.Root
-        checked={currentSettings?.activeSorts?.timeSort === "asc"}
-        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>
-
           {/* SELECTING DATE RANGE */}
-      <Flex direction="column" w="100%" h="100%" align="center" justify="center" gap="2">
+          <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">
+              <Flex
-            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
+                direction="row"
+                w="100%"
+                h="100%"
+                align="center"
+                justify="center"
+              >
+                <Text w="50%" align="center" justify="center" color="text">
                   Start Date
                 </Text>
                 <Flex direction="column" w="100%">
                   <Input
-                w="100%"
                     type="date"
+                    w="100%"
+                    borderRadius="lg"
+                    css={popoverStyles.date}
                     value={currentSettings?.startDate || ""}
                     onChange={(e) => {
                       const value = e.target.value;
-                  updateSettings(widgetId, {...currentSettings, startDate: 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");
+                      if (value && dateSelected > today)
+                        setStartError("Can't Choose a Future Date");
                       else setStartError("");
                     }}
                   />
-              {startError && <Field.ErrorText>{startError}</Field.ErrorText>}
+                  {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">
+              <Flex
-            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
+                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
-                w="100%"
                     type="date"
+                    w="100%"
+                    borderRadius="lg"
+                    css={popoverStyles.date}
                     value={currentSettings?.endDate || ""}
                     onChange={(e) => {
                       const value = e.target.value;
-                  updateSettings(widgetId, {...currentSettings, endDate: 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");
+                      if (value && dateSelected > today)
+                        setEndError("Can't Choose a Future Date");
                       else setEndError("");
                     }}
                   />
@@ -103,6 +129,83 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
               </Flex>
             </Field.Root>
           </Flex>
+
+          {/* SORTS */}
+          <HStack>
+            <Text flexShrink="0" fontWeight="semibold">Sorts</Text>
+            <Separator flex="1" size="sm"/> {/*line seperator*/}
+          </HStack>
+
+          {/* time sort */}
+          <Switch.Root
+            checked={currentSettings?.activeSorts?.timeSort === "asc"}
+            onCheckedChange={handleTimeSort}
+          >
+            <Switch.HiddenInput />
+            <Switch.Control css={popoverStyles.switch}>
+              <Switch.Thumb bg="white"/>
+            </Switch.Control>
+            <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,12 +1,18 @@
-import {Button, Field, Flex, Input, Switch, Text} from "@chakra-ui/react";
+import {Button, Field, Flex, HStack, Input, Separator, Switch, Text, useSlotRecipe, Fieldset} 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});
   }
@@ -21,44 +27,25 @@ export default function RemoteSensingSettings({ widgetId, currentSettings }) {
 
   return (
     <Flex flexDirection="column" justifyContent="space-between" gap={2} overflowY="auto">
-      {/* COPYING TO CLIPBOARD */}
+      <Fieldset.Root>
-      <Button w="fit" size="xs" onClick={handleCopyToClipboard}>Copy All RS</Button>
+        <Fieldset.Content>
-
-      {/* SORTING */}
-      <Switch.Root
-        checked={currentSettings?.activeSorts?.timeSort === "asc"}
-        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>
-
           {/* SELECTING DATE RANGE */}
-      <Flex direction="column" w="100%" h="100%" align="center" justify="center" gap="2">
+            <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="gray.700">
+                <Text w="50%" align="center" justify="center" mt={2} color="text">
                   Start Date
                 </Text>
                 <Flex direction="column" w="100%">
                   <Input
-                w="100%"
                     type="date"
+                    css={popoverStyles.date}
+
                     value={currentSettings?.startDate || ""}
                     onChange={(e) => {
                       const value = e.target.value;
@@ -76,15 +63,18 @@ export default function RemoteSensingSettings({ widgetId, currentSettings }) {
                 </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" mt={2} color="gray.700">
+                <Text w="50%" align="center" justify="center" mt={2} color="text">
                   End Date
                 </Text>
                 <Flex direction="column" w="100%">
                   <Input
-                w="100%"
                     type="date"
+                    css={popoverStyles.date}
+
                     value={currentSettings?.endDate || ""}
                     onChange={(e) => {
                       const value = e.target.value;
@@ -103,6 +93,45 @@ export default function RemoteSensingSettings({ widgetId, currentSettings }) {
               </Flex>
             </Field.Root>
           </Flex>
+
+          {/* SORTING */}
+          <HStack>
+            <Text flexShrink="0" fontWeight="semibold">Sorting</Text>
+            <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
+            checked={currentSettings?.activeSorts?.volcanoSort}
+            onCheckedChange={handleVolcanoSort}
+            colorPalette="blue"
+          >
+            <Switch.HiddenInput />
+            <Switch.Control css={popoverStyles.switch}>
+              <Switch.Thumb bg="white"/>
+            </Switch.Control>
+            <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/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",
@@ -68,8 +68,8 @@ const sidebarRecipe = defineSlotRecipe({
     root: {
       // 1. Semi-transparent backgrounds
       bg: {
-        base: "linear-gradient(to bottom right, #97282880 20%, #EB7F3160 60%, #FCAD3840 100%)",
+        base: "linear-gradient(to bottom right, #B63B1F88 20%, #FF990060 70%, #FFBF0040 90%)",
-        _dark: "linear-gradient(to bottom right, #9900003C 20%, #FF66003C 60%, #FFC0003C 100%)"
+        _dark: "linear-gradient(to bottom right, #9900004C 20%, #FF66003C 60%, #FFAE003C 100%)"
       },
 
       // 2. The glass blur effect
@@ -346,17 +346,103 @@ const widgetRecipe = defineSlotRecipe({
 
 // 6. TRUE POPOVER: Compact floating card for 3-dots menus
 const glassPopoverRecipe = defineSlotRecipe({
-  slots: ["content", "arrow", "positioner"],
+  slots: ["content", "arrow", "positioner", "date", "checkboxcard", "checkbox", "switch", "button"],
   base: {
     content: {
       ...glassSurface,
-      borderRadius: "xl",
+      borderRadius: "1rem",
       p: 3,
       boxShadow: "lg",
-      bg: {base: "rgba(255, 255, 255, 0.95)", _dark: "rgba(20, 22, 25, 0.95)"},
+      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"
+        }
+      }
+    }
   },
 });
 
@@ -381,7 +467,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 +557,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 +571,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 +624,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 +667,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(224 226 232)", _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" } },