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

@@ -62,10 +62,10 @@ export default function AlertChanges({ settings, widgetID}) {
 
   // Alert colors are now light/dark mode responsive
   const alertColors = {
-    Red: "Red",
+    Red: "alertRed",
-    Orange: "Orange",
+    Orange: "alertOrange",
-    Yellow: "Yellow",
+    Yellow: "alertYellow",
-    Green: "Green",
+    Green: "alertGreen",
   };
 
   if (isLoading) return (
@@ -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%"
+                                <Text w="100%" h="100%" color={alertColors[object?.alert_level_name] || "text"} fontSize="md" fontWeight="semibold">
-                                      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/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": {
+    // removes the animation of moving widgets, seems very harsh and jumpy w/o animation
-      transition: "none !important"
+    // ".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" } },
+        titleColor: { value: { base: "colors.gray.800", _dark: "#FFFFFF" } },
-        iconColor: { value: { base: "gray.600", _dark: "gray.300" } }, // Fixed: Visible in dark mode
+        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" } },
+        alertRed: { value: { base: "colors.red.600", _dark: "colors.red.400" } },
-        alertOrange: { value: { base: "orange.600", _dark: "orange.400" } },
+        alertOrange: { value: { base: "colors.orange.600", _dark: "colors.orange.400" } },
-        alertYellow: { value: { base: "yellow.600", _dark: "yellow.400" } },
+        alertYellow: { value: { base: "colors.yellow.600", _dark: "colors.yellow.400" } },
-        alertGreen: { value: { base: "green.600", _dark: "green.400" } },
+        alertGreen: { value: { base: "colors.green.600", _dark: "colors.green.400" } },
       },
     },
     tokens: {