fix:

- alert level changes now display accurate color.
- comm coor report no longer has dark loading screen in lt mode. login input text no longer white in dark mode

client/src/components/Widgets/AlertChanges.jsx

@@ -126,7 +126,7 @@ export default function AlertChanges({ settings, widgetID}) {
                               {object?.alert_scheme_domain === "aviation" && <Plane size={15} />}
                               {object?.alert_scheme_domain === "maritime" && <Sailboat size={15} />}
                             </Timeline.Indicator>
-                            <Timeline.Indicator h="50%" outline="none" bg="widgetBadgeBg" color="iconColor" size="lg">
+                            <Timeline.Indicator h="50%" outline="none" bg="transparent" color="iconColor" size="lg">
                               {object?.change_type === "increase" ? <TrendingUp /> : <TrendingDown />}
                             </Timeline.Indicator>
                           </Timeline.Connector>
@@ -134,11 +134,7 @@ export default function AlertChanges({ settings, widgetID}) {
                             <Timeline.Description w="100%" h="100%" gap={1}>
                               <Flex direction="column" gap={1}>
                                 <Text w="100%" h="100%" color="widgetTextMuted">{object?.alert_start_date_local}</Text>
-                                <Text w="100%" h="100%"
-                                      color={alertColors[object?.alert_level_name] || "text"}
-                                      fontSize="md"
-                                      fontWeight="semibold"
-                                >
+                                <Text w="100%" h="100%" color={alertColors[object?.alert_level_name] || "text"} fontSize="md" fontWeight="semibold">
                                   {object?.alert_level_name}
                                 </Text>
                                 <Flex w="100%" h="20px" direction="row" justify="left" align="center">

client/src/components/Widgets/CommCoorReport.jsx

@@ -115,19 +115,19 @@ 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="gray.800">
+    <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="gray.800">
+    <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="gray.800">
+    <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

@@ -111,18 +111,17 @@ export default function IvansAlerts({ settings, widgetID }) {
                   <Collapsible.Content w="100%" h="auto">
                     {/* 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} bg="widgetItemBg" borderRadius="lg" p={2} align="end">
-                        <Text w="100%" h="100%" fontSize="sm" color="text" textAlign="left" whiteSpace="pre-line">{item?.summary}</Text>
+                      <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="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}>
-                            <br />
                             <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=1`} target="_blank" rel="noopener noreferrer">
+                                <a href={`${file?.url}#view=FitV&toolbar=0`} target="_blank" rel="noopener noreferrer">
                                   Open
                                 </a>
                               </Box>

client/src/components/Widgets/RemoteSensing.jsx

@@ -96,7 +96,7 @@ export default function RemoteSensing({ settings, widgetID }) {
                   <Collapsible.Content w="100%" h="auto">
                     {/* 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} bg="widgetItemBg" borderRadius="lg" p={2} align="end">
+                      <Flex direction="column" gap={2} borderRadius="lg" p={2} align="end">
                         <Text w="100%" h="100%" fontSize="sm" color="text" textAlign="left" whiteSpace="pre-line">{item?.summary}</Text>
                         <Text w="fit" fontSize="sm" color="text" pl={1} pr={1} bg="widgetBadgeBg" borderRadius="md">Source: {item?.sender}</Text>
                       </Flex>

client/src/pages/auth/Login.jsx

@@ -65,7 +65,7 @@ const Login = () => {
 
   return (
       <Flex p={8} bg="gray.50" _dark={{ bg: "gray.900" }} flex="1" minH="100vh" align="center" justify="center">
-        <Box w="full" maxW="450px" bg="white" _dark={{ bg: "gray.800", borderColor: "gray.700" }} p={8} borderRadius="2xl" boxShadow="sm" borderWidth="1px" borderColor="gray.200">
+        <Box w="full" maxW="450px" bg="white" borderColor="gray.200" _dark={{ bg: "gray.800", borderColor: "gray.700" }} p={8} borderRadius="2xl" boxShadow="sm" borderWidth="1px">
           <Stack gap={6} align="stretch" as="form" onSubmit={handleSubmit}>
 
             <Stack gap={2} textAlign="center">
@@ -88,6 +88,7 @@ const Login = () => {
                   onChange={(e) => setUsername(e.target.value)}
                   placeholder="jdoe"
                   {...fieldStyles}
+                  color="gray.800"
               />
             </Field.Root>
 
@@ -102,8 +103,9 @@ const Login = () => {
                   type="password"
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
-                  placeholder="••••••••"
+                  // placeholder="••••••••" // not a necessary placeholder
                   {...fieldStyles}
+                  color="gray.800"
               />
             </Field.Root>
 

client/src/theme.js

@@ -530,12 +530,13 @@ export const rawWidgetColors = {
    ========================================================================== */
 const config = defineConfig({
   globalCss: {
+    // the shadow box behind widgets when editing layout
     ".react-grid-placeholder": {
       background: "#c0d2e3ff !important",
       borderColor: "#a9b6c2ff !important",
       boxShadow: "0 0 10px #c0d2e3ff !important",
       opacity: "1 !important",
-      borderRadius: "5px",
+      borderRadius: "3xl",
       _dark: {
         background: "#393c3fff !important",
         borderColor: "#000000ff !important",
@@ -543,9 +544,6 @@ const config = defineConfig({
         opacity: "1 !important",
       },
     },
-    ".react-resizable-handle-se": {
-      zIndex: "1",
-    },
     "*": {
       scrollbarWidth: "thin",
       scrollbarColor: "#a0aec0 transparent",
@@ -566,6 +564,7 @@ const config = defineConfig({
     "::-webkit-scrollbar-track": {
       background: "transparent",
     },
+    // this is what changes the maps colors to 'dark mode'
     ".leaflet-control-zoom-in, .leaflet-control-zoom-out, .leaflet-control-attribution, .leaflet-container": {
       _dark: {
         filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
@@ -574,9 +573,10 @@ const config = defineConfig({
     ".leaflet-container": {
       fontFamily: "system-ui, sans-serif !important",
     },
-    ".react-grid-item": {
-      transition: "none !important"
-    },
+    // removes the animation of moving widgets, seems very harsh and jumpy w/o animation
+    // ".react-grid-item": {
+    //   transition: "none !important"
+    // },
   },
   theme: {
     semanticTokens: {
@@ -584,8 +584,8 @@ const config = defineConfig({
         text: { value: { base: "#000000", _dark: "#FFFFFF" } },
         textInverted: { value: { base: "#000000", _dark: "#FFFFFF" } }, // Fixed: Properly inverted
         MainBackground: { value: { base: "#F9F9F9", _dark: "#141414" } },
-        titleColor: { value: { base: "gray.800", _dark: "#FFFFFF" } },
-        iconColor: { value: { base: "gray.600", _dark: "gray.300" } }, // Fixed: Visible in dark mode
+        titleColor: { value: { base: "colors.gray.800", _dark: "#FFFFFF" } },
+        iconColor: { value: { base: "colors.gray.600", _dark: "colors.gray.300" } }, // 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)"}},
 
@@ -593,13 +593,13 @@ const config = defineConfig({
         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: "gray.600", _dark: "gray.400" } },
+        widgetTextMuted: { value: { base: "colors.gray.600", _dark: "colors.gray.400" } },
 
         // ALERT COLORS
-        alertRed: { value: { base: "red.600", _dark: "red.400" } },
-        alertOrange: { value: { base: "orange.600", _dark: "orange.400" } },
-        alertYellow: { value: { base: "yellow.600", _dark: "yellow.400" } },
-        alertGreen: { value: { base: "green.600", _dark: "green.400" } },
+        alertRed: { value: { base: "colors.red.600", _dark: "colors.red.400" } },
+        alertOrange: { value: { base: "colors.orange.600", _dark: "colors.orange.400" } },
+        alertYellow: { value: { base: "colors.yellow.600", _dark: "colors.yellow.400" } },
+        alertGreen: { value: { base: "colors.green.600", _dark: "colors.green.400" } },
       },
     },
     tokens: {