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/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: {