update: rounder borders for widget settings menu

update: widget settings ui is now updated for RS, AL changes, Comm Coor, and IVANS widgets. it contains sections and a unified color scheme in the themes file in the popover recipe
update: comm coor widget settings ui
2026-11-10 08:54:58 -08:00 · 2026-11-10 08:31:12 -08:00 · 2026-11-09 08:00:02 -08:00 · 2026-11-06 10:53:49 -08:00 · 2026-11-06 10:52:58 -08:00
9 changed files with 554 additions and 327 deletions
@@ -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 ===
-                            "terrestrial" && <Footprints size={15} />}
-                          {object?.alert_scheme_domain === "aviation" && (
-                            <Plane size={15} />
-                          )}
-                          {object?.alert_scheme_domain === "maritime" && (
-                            <Sailboat size={15} />
-                          )}
+                          {object?.alert_scheme_domain === "terrestrial" && <Footprints size={15} />}
+                          {object?.alert_scheme_domain === "aviation" && <Plane size={15} />}
+                          {object?.alert_scheme_domain === "maritime" && <Sailboat size={15} />}
                        </Timeline.Indicator>
                        <Timeline.Indicator
                          h="50%"
@@ -313,8 +308,7 @@ export default function AlertChanges({ settings, widgetID }) {
                              w="100%"
                              h="100%"
                              color={
-                                alertColors[object?.alert_level_name] ||
-                                "text"
+                                alertColors[object?.alert_level_name] || "text"
                              }
                              fontSize="md"
                              fontWeight="semibold"
@@ -328,18 +322,16 @@ export default function AlertChanges({ settings, widgetID }) {
                              justify="left"
                              align="center"
                            >
-                              <Text color="widgetTextMuted">
-                                Alert Scale:{" "}
+                              <Text color="widgetTextMuted" mr={1}>
+                                Alert Scale:
                              </Text>
                              {Array.from(
                                {
                                  length:
                                    Number(object?.alert_scheme_highest) -
-                                    Number(object?.alert_scheme_lowest) +
-                                    1,
+                                    Number(object?.alert_scheme_lowest) + 1,
                                },
-                                (v, i) =>
-                                  Number(object?.alert_scheme_lowest) + i,
+                                (v, 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 ===
-                                    Number(object?.alert_level_rank)
-                                      ? "widgetBadgeBg"
+                                    num === Number(object?.alert_level_rank)
+                                      ? "widgetInnerBadgeBg"
                                      : "transparent"
                                  }
                                  borderRadius={
-                                    num ===
-                                    Number(object?.alert_level_rank)
+                                    num === Number(object?.alert_level_rank)
                                      ? "xl"
                                      : "none"
                                  }
@@ -114,23 +114,26 @@ export default function CommCoorReport({ settings, widgetID }) {
    }
  }, [settings, widgetID, updateSettings, apiData]);

-  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 (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 (
-    <Flex w="100%" h="100%" align="center" justify="center" textAlign="center" borderRadius="lg" bg="transparent">
-      <Text color="red.400">{error}</Text>
-    </Flex>
-  );
+  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 (
-    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="transparent">
-      <Text textAlign="center" color="gray.400">No data</Text>
-    </Flex>
-  );
+  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>
+    );

  return (
    <Flex direction="row" w="100%" h="100%" p={1} overflowY="auto">
@@ -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}>
-                            <Flex mb={2} justify="space-between">
-                              <Text pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md" fontSize="xs" color="text">{file?.name}</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
-                                </a>
-                              </Box>
+                          <Box w="100%" h="100%" key={index} >
+                            <Flex direction="row" w="100%">
+                              <Text w="100%" p={1} fontWeight="semibold" bg="widgetInnerBadgeBg" borderLeftRadius="lg" fontSize="sm" color="text">File: </Text>
+                              <a href={`${file?.url}#view=FitV&toolbar=0`} target="_blank" rel="noopener noreferrer">
+                                <Text truncate w="100%" p={1} bg="widgetInnerBadgeBg" borderRightRadius="lg" fontSize="sm" color="text">
+                                  {file?.name}
+                                </Text>
+                              </a>
                            </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">
-                                <Text mb={2}>
+                              <Flex direction="column" w="100%" h="100%" align="center" p={4} mt={1} color="widgetTextMuted" bg="widgetInnerBadgeBg" borderRadius="lg">
+                                <Text mb={2} fontSize="xs" color="red.300">
                                  Your browser cannot display this PDF directly.
                                </Text>
-                                <a href={file?.url} target="_blank">
-                                  Download PDF
+                                <a href={file?.url} target="_blank" bg="widgetBadgeBg" rel="noopener noreferrer">
+                                  <Text fontSize="xs" bg="widgetBadgeBg" borderRadius="md" p={1}>Download PDF Instead</Text>
                                </a>
                              </Flex>
                            </object>
@@ -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">
-            <Flex direction="column">
-              <Text w="100%" fontWeight="bold">
-                Date Range Selection
-              </Text>
-              <hr /> {/*line seperator*/}
-            </Flex>
-
+          <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
@@ -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%"
-                    borderRadius="lg"
+                    css={popoverStyles.date}
                    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%"
-                    borderRadius="lg"
+                    css={popoverStyles.date}
+
                    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%">
-                <Text w="fit" fontWeight="bold">
-                  Filters
-                </Text>
-                <hr /> {/*line seperator*/}
-              </Flex>
+              <HStack>
+                <Text flexShrink="0" fontWeight="semibold">Filters</Text>
+                <Separator flex="1" size="sm"/> {/*line seperator*/}
+              </HStack>

              {/* level increases */}
              <CheckboxCard.Root
-                size="sm"
-                variant="surface"
-                borderRadius="lg"
+                css={popoverStyles.checkboxcard}
+
                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"
-                variant="surface"
-                borderRadius="lg"
+                css={popoverStyles.checkboxcard}
+
                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"
-                variant="surface"
-                borderRadius="lg"
+                css={popoverStyles.checkboxcard}
+
                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>
@@ -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,67 +23,84 @@ export default function CommCoorReportSettings({ widgetId, currentSettings }) {

  return (
    <Flex flexDirection="column" justifyContent="space-between" gap={2} overflowY="auto">
-      {/* COPY TO CLIPBOARD */}
-      <Button w="fit" size="xs" onClick={handleCopyToClipboard}>Copy Report</Button>
+      <Fieldset.Root>
+        <Fieldset.Content>
+          {/* SELECTING DATE RANGE */}
+          <HStack>
+            <Text flexShrink="0" fontWeight="semibold">Date Range Selection</Text>
+            <Separator flex="1" size="sm"/> {/*line seperator*/}
+          </HStack>
+          <Flex direction="column" w="100%" h="100%" justify="center" gap={2} pr={1}>
+            {/* start date */}
+            <Field.Root invalid={!!startError}>
+              <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+                <Text w="50%" align="center" justify="center" mt={2} color="text">
+                  Start Date
+                </Text>
+                <Flex direction="column" w="100%">
+                  <Input
+                    w="100%"
+                    css={popoverStyles.date}
+                    type="date"
+                    value={currentSettings?.startDate || ""}
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      updateSettings(widgetId, {...currentSettings, startDate: value});

-      {/* DOWNLOAD REPORT */}
-      <Button w="fit" size="xs" onClick={handleDownloadReport}>Download Report</Button>
+                      const dateSelected = new Date(value);
+                      const today = new Date();
+                      today.setHours(0, 0, 0, 0);

-      {/* 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});
+                      if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
+                      else setStartError("");
+                    }}
+                  />
+                  {startError && <Field.ErrorText>{startError}</Field.ErrorText>}
+                </Flex>
+              </Flex>
+            </Field.Root>
+            {/* end date */}
+            <Field.Root invalid={!!endError}>
+              <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+                <Text w="50%" align="center" justify="center" 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) => {
+                      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);
+                      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>
+                      if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date");
+                      else setEndError("");
+                    }}
+                  />
+                  {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
+                </Flex>
+              </Flex>
+            </Field.Root>
          </Flex>
-        </Field.Root>
-        <Field.Root invalid={!!endError}>
-          <Flex direction="row" w="100%" h="100%" align="center" justify="center">
-            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
-              End Date
-            </Text>
-            <Flex direction="column" w="100%">
-              <Input
-                w="100%"
-                type="date"
-                value={currentSettings?.endDate || ""}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  updateSettings(widgetId, {...currentSettings, endDate: value});

-                  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>
+          <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>
-        </Field.Root>
-      </Flex>
+        </Fieldset.Content>
+      </Fieldset.Root>
    </Flex>
  )
 }
@@ -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,89 +38,174 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
  }

  return (
-    <Flex flexDirection="column" justifyContent="space-between" gap={2} overflowY="auto">
-      {/* COPY TO CLIPBOARD */}
-      <Button w="fit" size="xs" onClick={handleCopyToClipboard}>Copy All IVANS</Button>
-
-      {/* 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">
-        <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
+    <Flex flexDirection="column" justifyContent="space-between" overflowY="auto">
+      <Fieldset.Root>
+        <Fieldset.Content>
+          {/* SELECTING DATE RANGE */}
+          <HStack>
+            <Text flexShrink="0" fontWeight="semibold">Date Range Selection</Text>
+            <Separator flex="1" size="sm"/> {/*line seperator*/}
+            </HStack>
+          <Flex direction="column" w="100%" h="100%" justify="center" gap={2} pr={1}>
+            {/* start date */}
+            <Field.Root invalid={!!startError}>
+              <Flex
+                direction="row"
                w="100%"
-                type="date"
-                value={currentSettings?.startDate || ""}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  updateSettings(widgetId, {...currentSettings, startDate: value});
+                h="100%"
+                align="center"
+                justify="center"
+              >
+                <Text w="50%" align="center" justify="center" color="text">
+                  Start Date
+                </Text>
+                <Flex direction="column" w="100%">
+                  <Input
+                    type="date"
+                    w="100%"
+                    borderRadius="lg"
+                    css={popoverStyles.date}
+                    value={currentSettings?.startDate || ""}
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      updateSettings(widgetId, {
+                        ...currentSettings,
+                        startDate: value,
+                      });

-                  const dateSelected = new Date(value);
-                  const today = new Date();
-                  today.setHours(0, 0, 0, 0);
+                      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>
-        <Field.Root invalid={!!endError}>
-          <Flex direction="row" w="100%" h="100%" align="center" justify="center">
-            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
-              End Date
-            </Text>
-            <Flex direction="column" w="100%">
-              <Input
+                      if (value && dateSelected > today)
+                        setStartError("Can't Choose a Future Date");
+                      else setStartError("");
+                    }}
+                  />
+                  {startError && (
+                    <Field.ErrorText>{startError}</Field.ErrorText>
+                  )}
+                </Flex>
+              </Flex>
+            </Field.Root>
+
+            {/* end date */}
+            <Field.Root invalid={!!endError}>
+              <Flex
+                direction="row"
                w="100%"
-                type="date"
-                value={currentSettings?.endDate || ""}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  updateSettings(widgetId, {...currentSettings, endDate: value});
+                h="100%"
+                align="center"
+                justify="center"
+              >
+                <Text w="50%" align="center" justify="center" color="text">
+                  End Date
+                </Text>
+                <Flex direction="column" w="100%">
+                  <Input
+                    type="date"
+                    w="100%"
+                    borderRadius="lg"
+                    css={popoverStyles.date}
+                    value={currentSettings?.endDate || ""}
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      updateSettings(widgetId, {
+                        ...currentSettings,
+                        endDate: value,
+                      });

-                  const dateSelected = new Date(value);
-                  const today = new Date();
-                  today.setHours(0, 0, 0, 0);
+                      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>
+                      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 */}
+          <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>
  )
-}
+}
@@ -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,88 +27,111 @@ export default function RemoteSensingSettings({ widgetId, currentSettings }) {

  return (
    <Flex flexDirection="column" justifyContent="space-between" gap={2} overflowY="auto">
-      {/* COPYING TO CLIPBOARD */}
-      <Button w="fit" size="xs" onClick={handleCopyToClipboard}>Copy All RS</Button>
+      <Fieldset.Root>
+        <Fieldset.Content>
+          {/* SELECTING DATE RANGE */}
+            <HStack>
+              <Text flexShrink="0" fontWeight="semibold">Date Range Selection</Text>
+              <Separator flex="1" size="sm"/> {/*line seperator*/}
+            </HStack>
+          <Flex direction="column" w="100%" h="100%" justify="center" gap={2} pr={1}>
+            {/* start date */}
+            <Field.Root invalid={!!startError}>
+              <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+                <Text w="50%" align="center" justify="center" mt={2} color="text">
+                  Start Date
+                </Text>
+                <Flex direction="column" w="100%">
+                  <Input
+                    type="date"
+                    css={popoverStyles.date}

-      {/* 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>
+                    value={currentSettings?.startDate || ""}
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      updateSettings(widgetId, {...currentSettings, startDate: value});

-      {/* 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);

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

-                  if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
-                  else setStartError("");
-                }}
-              />
-              {startError && <Field.ErrorText>{startError}</Field.ErrorText>}
-            </Flex>
+            {/* 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="text">
+                  End Date
+                </Text>
+                <Flex direction="column" w="100%">
+                  <Input
+                    type="date"
+                    css={popoverStyles.date}
+
+                    value={currentSettings?.endDate || ""}
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      updateSettings(widgetId, {...currentSettings, endDate: value});
+
+                      const dateSelected = new Date(value);
+                      const today = new Date();
+                      today.setHours(0, 0, 0, 0);
+
+                      if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date");
+                      else setEndError("");
+                    }}
+                  />
+                  {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
+                </Flex>
+              </Flex>
+            </Field.Root>
          </Flex>
-        </Field.Root>
-        <Field.Root invalid={!!endError}>
-          <Flex direction="row" w="100%" h="100%" align="center" justify="center">
-            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
-              End Date
-            </Text>
-            <Flex direction="column" w="100%">
-              <Input
-                w="100%"
-                type="date"
-                value={currentSettings?.endDate || ""}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  updateSettings(widgetId, {...currentSettings, endDate: value});

-                  const dateSelected = new Date(value);
-                  const today = new Date();
-                  today.setHours(0, 0, 0, 0);
+          {/* 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>

-                  if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date");
-                  else setEndError("");
-                }}
-              />
-              {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
-            </Flex>
-          </Flex>
-        </Field.Root>
-      </Flex>
+          <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>
  )
 }
@@ -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 },
        }
    },

@@ -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%)",
-        _dark: "linear-gradient(to bottom right, #9900003C 20%, #FF66003C 60%, #FFC0003C 100%)"
+        base: "linear-gradient(to bottom right, #B63B1F88 20%, #FF990060 70%, #FFBF0040 90%)",
+        _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" } },
-        titleColor: { value: { base: "colors.gray.800", _dark: "#FFFFFF" } },
-        iconColor: { value: { base: "colors.gray.600", _dark: "colors.gray.300" } }, // Fixed: Visible in dark mode
+        MainBackground: { value: { base: "#f1f1f1", _dark: "#16171c" } },
+        titleColor: { value: { base: "colors.gray.800", _dark: "#e1e1e1" } },
+        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)" } },
-        widgetItemExpandedBg: { value: { base: "rgba(0, 0, 0, 0.08)", _dark: "rgba(0, 0, 0, 0.3)" } },
-        widgetBadgeBg: { value: { base: "rgba(255, 255, 255, 0.6)", _dark: "rgba(0, 0, 0, 0.5)" } },
-        widgetTextMuted: { value: { base: "colors.gray.600", _dark: "colors.gray.400" } },
+        widgetItemBg: { value: { base: "rgb(115 132 166 / 0.17)", _dark: "rgb(51 53 64)" } },
+        widgetItemExpandedBg: { value: { base: "rgb(184 197 220 / 0.17)", _dark: "rgb(59 61 73)" } },
+        widgetBadgeBg: { value: { base: "rgb(154 163 179 / 0.45)", _dark: "rgb(75 77 90)" } },
+        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" } },
Author	SHA1	Message	Date
vkuchenik	b73ce88185	update: rounder borders for widget settings menu	2026-11-10 08:54:58 -08:00
vkuchenik	b7a5ae2ae2	update: widget settings ui is now updated for RS, AL changes, Comm Coor, and IVANS widgets. it contains sections and a unified color scheme in the themes file in the popover recipe	2026-11-10 08:31:12 -08:00
vkuchenik	5798b90ab7	update: comm coor widget settings ui wip: themes for checkboxes	2026-11-09 08:00:02 -08:00
vkuchenik	7b3e7d3d0c	refactor: continueing to propogate changes made to widget setting popover in al changes to ivans widget	2026-11-06 10:53:49 -08:00
vkuchenik	58c6a40b06	refactor: adjusting colors in themes file for better visibility/distinction of entries in widgets like al changes, ivans, and rs in both lt and dark mode	2026-11-06 10:52:58 -08:00