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

wip: themes for checkboxes

client/src/components/Widgets/CommCoorReport.jsx

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

client/src/components/Widgets/IvansAlerts.jsx

@@ -112,33 +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" p={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 direction="row" mb={2} gap={1} justify="space-between">
+                            <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 mr={1} truncate p={1} bg="widgetBadgeBg" borderRadius="lg" fontSize="sm" color="text">
+                                <Text truncate w="100%" p={1} bg="widgetInnerBadgeBg" borderRightRadius="lg" fontSize="sm" color="text">
-                                  File: {file?.name}
+                                  {file?.name}
                                 </Text>
                               </a>
-                              {/*<Box borderRadius="lg" bg="widgetBadgeBg" color="text" p={1} fontSize="sm" asChild>*/}
-                              {/*    Open*/}
-                              {/*</Box>*/}
                             </Flex>
                             <object
                               data={`${file?.url}#view=FitH&toolbar=1`}
                               type="application/pdf"
                               style={{ width: '100%', height: '100%', display: 'block' }}
                             >
-                              <Flex direction="column" w="100%" h="100%" align="center" p={4} color="widgetTextMuted" bg="widgetBadgeBg" borderRadius="md">
+                              <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" bg="widgetBadgeBg" rel="noopener noreferrer">
-                                  <Text fontSize="xs" bg="widgetInnerBadgeBg" borderRadius="md" p={1}>Download PDF Instead</Text>
+                                  <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,6 +38,7 @@ export default function AlertChangeSettings({ widgetId, currentSettings }) {
     limit: 10,
   });
 
+  // FUNCTIONS
   const handleValueChange = (details) => {
     setSelectedVolcanoes(details.value)
   }
@@ -45,14 +48,11 @@ export default function AlertChangeSettings({ widgetId, currentSettings }) {
       <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
@@ -68,8 +68,7 @@ export default function AlertChangeSettings({ widgetId, currentSettings }) {
                 <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;
@@ -109,8 +108,8 @@ export default function AlertChangeSettings({ widgetId, currentSettings }) {
                 <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,67 +23,84 @@ 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>
+          {/* 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 */}
+                      const dateSelected = new Date(value);
-      <Button w="fit" size="xs" onClick={handleDownloadReport}>Download Report</Button>
+                      const today = new Date();
+                      today.setHours(0, 0, 0, 0);
 
-      {/* SELECTING DATE RANGE */}
+                      if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
-      <Flex direction="column" w="100%" h="100%" align="center" justify="center" gap="2">
+                      else setStartError("");
-        <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">
+                  {startError && <Field.ErrorText>{startError}</Field.ErrorText>}
-              Start Date
+                </Flex>
-            </Text>
+              </Flex>
-            <Flex direction="column" w="100%">
+            </Field.Root>
-              <Input
+            {/* end date */}
-                w="100%"
+            <Field.Root invalid={!!endError}>
-                type="date"
+              <Flex direction="row" w="100%" h="100%" align="center" justify="center">
-                value={currentSettings?.startDate || ""}
+                <Text w="50%" align="center" justify="center" mt={2} color="text">
-                onChange={(e) => {
+                  End Date
-                  const value = e.target.value;
+                </Text>
-                  updateSettings(widgetId, {...currentSettings, startDate: value});
+                <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 dateSelected = new Date(value);
-                  const today = new Date();
+                      const today = new Date();
-                  today.setHours(0, 0, 0, 0);
+                      today.setHours(0, 0, 0, 0);
 
-                  if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
+                      if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date");
-                  else setStartError("");
+                      else setEndError("");
-                }}
+                    }}
-              />
+                  />
-              {startError && <Field.ErrorText>{startError}</Field.ErrorText>}
+                  {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
-            </Flex>
+                </Flex>
+              </Flex>
+            </Field.Root>
           </Flex>
-        </Field.Root>
-        <Field.Root invalid={!!endError}>
-          <Flex direction="row" w="100%" h="100%" align="center" justify="center">
-            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
-              End Date
-            </Text>
-            <Flex direction="column" w="100%">
-              <Input
-                w="100%"
-                type="date"
-                value={currentSettings?.endDate || ""}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  updateSettings(widgetId, {...currentSettings, endDate: value});
 
-                  const dateSelected = new Date(value);
+          <HStack>
-                  const today = new Date();
+            <Text flexShrink="0" fontWeight="semibold">Tools</Text>
-                  today.setHours(0, 0, 0, 0);
+            <Separator flex="1" size="sm"/> {/*line seperator*/}
-
+          </HStack>
-                  if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date");
+          <Flex direction="column" w="100%" h="100%" justify="center" gap={2}>
-                  else setEndError("");
+            {/* COPY TO CLIPBOARD */}
-                }}
+            <Button css={popoverStyles.button} onClick={handleCopyToClipboard}>Copy Report</Button>
-              />
+            {/* DOWNLOAD REPORT */}
-              {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
+            <Button css={popoverStyles.button} onClick={handleDownloadReport}>Download Report</Button>
-            </Flex>
           </Flex>
-        </Field.Root>
+        </Fieldset.Content>
-      </Flex>
+      </Fieldset.Root>
     </Flex>
   )
 }

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

@@ -1,12 +1,30 @@
-import {Button, Field, Flex, Input, Switch, Text, Fieldset, CheckboxCard} 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});
   }
@@ -24,14 +42,11 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
       <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 style={{borderColor: "red.700"}} /> {/*line seperator*/}
-            </Flex>
-
             {/* start date */}
             <Field.Root invalid={!!startError}>
               <Flex
@@ -49,6 +64,7 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
                     type="date"
                     w="100%"
                     borderRadius="lg"
+                    css={popoverStyles.date}
                     value={currentSettings?.startDate || ""}
                     onChange={(e) => {
                       const value = e.target.value;
@@ -90,6 +106,7 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
                     type="date"
                     w="100%"
                     borderRadius="lg"
+                    css={popoverStyles.date}
                     value={currentSettings?.endDate || ""}
                     onChange={(e) => {
                       const value = e.target.value;
@@ -114,22 +131,19 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
           </Flex>
 
           {/* SORTS */}
-          <Flex direction="column">
+          <HStack>
-            <Text w="100%" fontWeight="bold">
+            <Text flexShrink="0" fontWeight="semibold">Sorts</Text>
-              Sorts
+            <Separator flex="1" size="sm"/> {/*line seperator*/}
-            </Text>
+          </HStack>
-            <hr /> {/*line seperator*/}
-          </Flex>
 
           {/* time sort */}
           <Switch.Root
             checked={currentSettings?.activeSorts?.timeSort === "asc"}
             onCheckedChange={handleTimeSort}
-            colorPalette="blue"
           >
             <Switch.HiddenInput />
-            <Switch.Control>
+            <Switch.Control css={popoverStyles.switch}>
-              <Switch.Thumb />
+              <Switch.Thumb bg="white"/>
             </Switch.Control>
             <Switch.Label fontWeight={400}>Oldest to Newest</Switch.Label>
           </Switch.Root>
@@ -138,27 +152,25 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
           <Switch.Root
             checked={currentSettings?.activeSorts?.volcanoSort}
             onCheckedChange={handleVolcanoSort}
-            colorPalette="blue"
           >
             <Switch.HiddenInput />
-            <Switch.Control>
+            <Switch.Control css={popoverStyles.switch}>
-              <Switch.Thumb />
+              <Switch.Thumb bg="white" />
             </Switch.Control>
             <Switch.Label fontWeight={400}>Alphabetically by Volcano</Switch.Label>
           </Switch.Root>
 
-          <Flex direction="column">
+          <HStack>
-            <Text w="100%" fontWeight="bold">
+            <Text flexShrink="0" fontWeight="semibold">Filters</Text>
-              Filters
+            <Separator flex="1" size="sm"/> {/*line seperator*/}
-            </Text>
+          </HStack>
-            <hr /> {/*line seperator*/}
-          </Flex>
 
           {/* elevated levels */}
           <CheckboxCard.Root
-            size="sm"
+            // size="sm"
-            variant="surface"
+            // variant="surface"
-            borderRadius="lg"
+            css={popoverStyles.checkboxcard}
+
             defaultChecked={currentSettings?.filters?.elevatedLevels}
             onCheckedChange={(e) => {
               updateSettings(widgetId, {
@@ -177,18 +189,21 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
                   Only Elevated Levels
                 </CheckboxCard.Label>
               </CheckboxCard.Content>
-              <CheckboxCard.Indicator />
+              <CheckboxCard.Indicator css={popoverStyles.checkbox} />
             </CheckboxCard.Control>
           </CheckboxCard.Root>
 
           {/* COPY TO CLIPBOARD */}
-          <Flex direction="column">
+          <HStack>
-            <Text w="100%" fontWeight="bold">
+            <Text flexShrink="0" fontWeight="semibold">Tools</Text>
-              Tools
+            <Separator flex="1" size="sm"/> {/*line seperator*/}
-            </Text>
+          </HStack>
-            <hr /> {/*line seperator*/}
+          <Button mt={-2} w="100%" size="xs" borderRadius="lg" variant="subtle"
-            <Button mt={2} w="100%" size="xs" borderRadius="lg" variant="subtle" onClick={handleCopyToClipboard}>Copy All IVANS</Button>
+                  css={popoverStyles.button}
-          </Flex>
+                  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,88 +27,111 @@ 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>
+          {/* 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 */}
+                    value={currentSettings?.startDate || ""}
-      <Switch.Root
+                    onChange={(e) => {
-        checked={currentSettings?.activeSorts?.timeSort === "asc"}
+                      const value = e.target.value;
-        onCheckedChange={handleTimeSort}
+                      updateSettings(widgetId, {...currentSettings, startDate: value});
-        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 */}
+                      const dateSelected = new Date(value);
-      <Flex direction="column" w="100%" h="100%" align="center" justify="center" gap="2">
+                      const today = new Date();
-        <Field.Root invalid={!!startError}>
+                      today.setHours(0, 0, 0, 0);
-          <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);
+                      if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
-                  const today = new Date();
+                      else setStartError("");
-                  today.setHours(0, 0, 0, 0);
+                    }}
+                  />
+                  {startError && <Field.ErrorText>{startError}</Field.ErrorText>}
+                </Flex>
+              </Flex>
+            </Field.Root>
 
-                  if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
+            {/* end date */}
-                  else setStartError("");
+            <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">
-              {startError && <Field.ErrorText>{startError}</Field.ErrorText>}
+                  End Date
-            </Flex>
+                </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);
+          {/* SORTING */}
-                  const today = new Date();
+          <HStack>
-                  today.setHours(0, 0, 0, 0);
+            <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");
+          <Switch.Root
-                  else setEndError("");
+            checked={currentSettings?.activeSorts?.volcanoSort}
-                }}
+            onCheckedChange={handleVolcanoSort}
-              />
+            colorPalette="blue"
-              {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
+          >
-            </Flex>
+            <Switch.HiddenInput />
-          </Flex>
+            <Switch.Control css={popoverStyles.switch}>
-        </Field.Root>
+              <Switch.Thumb bg="white"/>
-      </Flex>
+            </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/theme.js

@@ -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,7 +346,7 @@ 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,
@@ -357,6 +357,92 @@ const glassPopoverRecipe = defineSlotRecipe({
       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"
+        }
+      }
+    }
   },
 });
 
@@ -593,7 +679,7 @@ const config = defineConfig({
         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(154 163 179 / 0.45)", _dark: "rgb(100 103 119)" } },
+        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