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",
-    Orange: "Orange",
-    Yellow: "Yellow",
-    Green: "Green",
+    Red: "alertRed",
+    Orange: "alertOrange",
+    Yellow: "alertYellow",
+    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%"
-                                      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>
   );