From d4fb170e1486965888df9c27cba507d62b8679d9 Mon Sep 17 00:00:00 2001 From: vkuchenik Date: Tue, 3 Nov 2026 13:27:47 -0800 Subject: [PATCH] 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 --- .../src/components/Widgets/AlertChanges.jsx | 14 ++++------ .../src/components/Widgets/CommCoorReport.jsx | 6 ++-- client/src/pages/auth/Login.jsx | 6 ++-- client/src/theme.js | 28 +++++++++---------- 4 files changed, 26 insertions(+), 28 deletions(-) diff --git a/client/src/components/Widgets/AlertChanges.jsx b/client/src/components/Widgets/AlertChanges.jsx index 7c808d8..d448b46 100644 --- a/client/src/components/Widgets/AlertChanges.jsx +++ b/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}) { {object?.alert_start_date_local} - + {object?.alert_level_name} diff --git a/client/src/components/Widgets/CommCoorReport.jsx b/client/src/components/Widgets/CommCoorReport.jsx index f156d2f..9012ed8 100644 --- a/client/src/components/Widgets/CommCoorReport.jsx +++ b/client/src/components/Widgets/CommCoorReport.jsx @@ -115,19 +115,19 @@ export default function CommCoorReport({ settings, widgetID }) { }, [settings, widgetID, updateSettings, apiData]); if (isLoading) return ( - + ); if (error) return ( - + {error} ); if (!apiData) return ( - + No data ); diff --git a/client/src/pages/auth/Login.jsx b/client/src/pages/auth/Login.jsx index b76b172..97e50c6 100644 --- a/client/src/pages/auth/Login.jsx +++ b/client/src/pages/auth/Login.jsx @@ -65,7 +65,7 @@ const Login = () => { return ( - + @@ -88,6 +88,7 @@ const Login = () => { onChange={(e) => setUsername(e.target.value)} placeholder="jdoe" {...fieldStyles} + color="gray.800" /> @@ -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" /> diff --git a/client/src/theme.js b/client/src/theme.js index 517333b..2c50ce3 100644 --- a/client/src/theme.js +++ b/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: {