From 2283d156eac8c8f6784309329da021c5e3caf07b Mon Sep 17 00:00:00 2001
From: Christopher Hight <chight@usgs.gov>
Date: Fri, 24 Jul 2026 14:11:17 -0700
Subject: [PATCH] Refactoring some theme colors

---
 client/src/pages/home/tabs/MyDashboard.jsx |  7 +++----
 client/src/theme.js                        | 10 +++++-----
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/client/src/pages/home/tabs/MyDashboard.jsx b/client/src/pages/home/tabs/MyDashboard.jsx
index e56f765..e062b6c 100644
--- a/client/src/pages/home/tabs/MyDashboard.jsx
+++ b/client/src/pages/home/tabs/MyDashboard.jsx
@@ -15,9 +15,9 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
 
 export default function MyDashboard() {
     // 🌗 Let's adjust for our light and dark mode
-    const frameBg = useColorModeValue("gray.100", "#1E1E2B");
-    const titleColor = useColorModeValue("gray.800", "gray.100");
-    const iconColor = useColorModeValue("gray.600", "gray.400");
+    const frameBg = useColorModeValue("FFFFFF0A", "#FFFFFF0A");
+    const titleColor = useColorModeValue("gray.800", "#FFFFFF");
+    const iconColor = useColorModeValue("gray.600", "#FFFFFF");
     const iconHoverBg = useColorModeValue("gray.100", "gray.700");
 
     // ☁️ Database Connection
@@ -154,7 +154,6 @@ export default function MyDashboard() {
                 {widgets.map(widget => (
                     <Box
                         key={widget.id}
-                        bg="white"
                         borderRadius="md"
                         boxShadow={isEditing ? "outline" : "sm"} // Visual cue when editing
                         border={isEditing ? "2px dashed gray" : "1px solid"}
diff --git a/client/src/theme.js b/client/src/theme.js
index 58ac230..a3fb5a8 100644
--- a/client/src/theme.js
+++ b/client/src/theme.js
@@ -33,7 +33,7 @@ const sidebarRecipe = defineSlotRecipe({
   base: {
     root: {
       // 1. Semi-transparent backgrounds
-      bg: { base: "linear-gradient(to bottom right, #99000040 20%, #FF660040 60%, #EEEE0040 100%)", _dark: "rgba(20, 20, 20, 0.4)" },
+      bg: { base: "linear-gradient(to bottom right, #99000040 20%, #FF660040 60%, #EEEE0040 100%)", _dark: "linear-gradient(to bottom right, #9900003C 20%, #FF66003C 60%, #FFC0003C 100%)" },
 
       // 2. The glass blur effect
       backdropFilter: "blur(12px)",
@@ -258,10 +258,10 @@ const config = defineConfig({
         primaryLt: { value: {base: "#98cdffff", _dark: "#98cdffff"}},
         secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}},
         border: {value: {base: "#000000", _dark: "#cbcbcb84"}},
-        text: {value: {base: "#000000", _dark: "lightgrey"}},
-        textInverted: {value: "#000000"},
-        icon: {value: {base: "#000000", _dark: "lightgrey"}},
-        testBackground: { value: {base: "#F9F9F9", _dark: "#191613"} },
+        text: {value: {base: "#000000", _dark: "#FFFFFF"}},
+        textInverted: {value: {base: "#000000", _dark: "#FFFFFF"}},
+        icon: {value: {base: "#000000", _dark: "#FFFFFF"}},
+        testBackground: { value: {base: "#F9F9F9", _dark: "#141414"} },
         testSidebar: { value: {base: "#FBFBFB", _dark: "#272421"} },
         testButton: { value: {base: "#FFFFFF", _dark: "#C09754"} },