map has dark mode

client/src/components/layout/Canvas/Canvas.jsx

@@ -12,7 +12,7 @@ import SettingsCanvas from "./views/SettingsCanvas"
 import { DashboardCanvas } from "./views/DashboardCanvas";
 import { DASHBOARD_VIEWS } from "@/constants/viewKeys";
 
-export default function Canvas({ view, setView, layout, setLayout, onLayoutChange }) {
+export default function Canvas({ view, setView, layout, setLayout, onLayoutChange, darkMode }) {
   const recipe = useRecipe({ key: "canvas" });
   const styles = recipe();
 

client/src/components/layout/Canvas/views/GlobalMapCanvas.jsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
 import 'leaflet/dist/leaflet.css';
-
-const position = [51.505, -0.09]; // [latitude, longitude]
+import 'src/css/leaflet-darkmode.css';
 
 export default function GlobalMapCanvas() {
+  const position = [45.61142478054226, -122.49630033167544]; // [latitude, longitude]
   return (
       <MapContainer center={position} zoom={13} style={{ height: "100%", width: "100%" }}>
         <TileLayer
@@ -13,7 +13,7 @@ export default function GlobalMapCanvas() {
         />
         <Marker position={position}>
           <Popup>
-          A sample popup!
+            CVO — Home of the volcanoligists
           </Popup>
         </Marker>
       </MapContainer>

client/src/components/layout/Dashboard.jsx

@@ -9,6 +9,7 @@ export default function Dashboard() {
   const recipe = useRecipe({ key: "dashboard" });
   const styles = recipe();
 
+  const [darkMode, setDarkMode] = useState(false);
   // Lifted State - defaults to widget dashboard
   const [view, setView] = useState("widget");
   const [layout, setLayout] = useState([
@@ -19,41 +20,17 @@ export default function Dashboard() {
 
   return (
     <>
-      <Global // change the background color of widget shadow when moving
-        styles={css`
-          .react-grid-placeholder {
-            background: #c0d2e3ff !important;
-            border-color: #a9b6c2ff !important;
-            box-shadow: 0 0 10px #c0d2e3ff !important;
-            opacity: 1 !important;
-            border-radius: 5px;
+    {/* <Global styles={css`
+      .leaflet-tile,
+      .leaflet-control-zoom-in,
+      .leaflet-control-zoom-out,
+      .leaflet-control-attribution {
+        filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
       }
 
-          .react-resizable-handle-se {
-            position: absolute;
-            bottom: 0;
-            z-index: 1;
-            border-radius: 5px;
-          }
-
-          * {
-            scrollbar-width: thin;              /* Firefox */
-            scrollbar-color: #a0aec0 transparent; /* Firefox */
-          }
-
-          /* Chrome, Edge, Safari */
-          ::-webkit-scrollbar {
-            width: 8px;
-          }
-          ::-webkit-scrollbar-thumb {
-            background-color: rgba(100, 100, 100, 0.4);
-            border-radius: 4px;
-          }
-          ::-webkit-scrollbar-track {
-            background: transparent;
-          }
-        `}
-      />
+      .leaflet-container {
+        background-color: #1e1e1e;
+       */}
       <Grid css={styles}
         templateRows="1fr 11fr"
         templateColumns="1fr 20fr"
@@ -68,12 +45,15 @@ export default function Dashboard() {
         </GridItem>
         <GridItem colSpan={1}>
           <Sidebar 
+            darkMode={ darkMode }
+            setDarkMode={ setDarkMode }
             view={ view }
             onChangeView={ setView }
           />
         </GridItem>
         <GridItem colSpan={1} width="100%" overflow="auto">
           <Canvas 
+            darkMode={ darkMode }
             view={ view }
             setView={ setView }
             layout={ layout }

client/src/components/layout/Sidebar/Sidebar.jsx

@@ -1,5 +1,5 @@
 import { useSlotRecipe, Box, Button, IconButton } from "@chakra-ui/react";
-import { ColorModeButton } from "@/components/ui/color-mode";
+import { ColorModeButton, useColorMode } from "@/components/ui/color-mode";
 // import { Tooltip } from "@/components/ui/tooltip";
 import Tooltip from "../Canvas/components/Tooltip.jsx";
 import { FaVolcano } from "react-icons/fa6";
@@ -12,11 +12,12 @@ import { useState, useEffect } from "react";
 import { Seismic } from "../Canvas/views/DashboardCanvasNav/Seismic";
 import { DASHBOARD_VIEWS } from "@/constants/viewKeys";
 
-export default function Sidebar({ view, onChangeView }) {
+export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) {
   const [isOpen, setIsOpen] = useState(true);
   const [activeButton, setActiveButton] = useState(0)
   const recipe = useSlotRecipe({ key: "sidebar" });
   const styles = recipe();
+  const { toggleColorMode } = useColorMode();
 
     // this list of btns will come from the db (not every usr will have access to admin)
   const buttons = [
@@ -99,7 +100,14 @@ export default function Sidebar({ view, onChangeView }) {
           </Tooltip>
         )
       })}
-      <ColorModeButton position="absolute" bottom="2"/>
+      <ColorModeButton 
+      onClick={
+        () => {
+          setDarkMode(!darkMode);
+          toggleColorMode();
+        }}
+      position="absolute" 
+      bottom="2"/>
     </Box>
   );
 }

client/src/css/header.css

@@ -1,42 +0,0 @@
-header {
-  /* display */
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-
-  /* color */
-  background-color: white;
-  color: #19332d;
-  
-  /* size */
-  height: 100%;
-  font-weight: bolder;
-  
-  /* border */
-  border-bottom: solid 1px black;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-}
-
-header .logo {
-  /* size */
-  font-size: xx-large;
-}
-
-header .logo:hover {
-  cursor: pointer;
-}
-
-header .user {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 1rem;
-  font-size: large;
-}
-
-header .user:hover {
-  cursor: pointer;
-}

client/src/css/leaflet-darkmode.css

@@ -0,0 +1,11 @@
+/* map dark mode */
+.dark-mode-leaflet .leaflet-tile,
+.dark-mode-leaflet .leaflet-control-zoom-in,
+.dark-mode-leaflet .leaflet-control-zoom-out,
+.dark-mode-leaflet .leaflet-control-attribution {
+  filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
+}
+
+.dark-mode-leaflet .leaflet-container {
+  background-color: #1e1e1e; /* dark background for seamless look */
+}

client/src/css/sidebar.css

@@ -1,45 +0,0 @@
-
-aside {
-  /* display */
-  display: flex;
-  flex-direction: column;
-  justify-content: start;
-  align-items: start;
-
-  /* size */
-  width: 100%;
-  height: 100%;
-  font-size: larger;
-  font-weight: 800;
-
-  /* padding */
-  padding: 4rem;
-
-  /* gap */
-  gap: 2.5rem;
-
-  /* test border */
-  border-right: solid 1px black;
-}
-
-.sidebar-items {
-  /* display */
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 1rem;
-
-  /* color */
-  color: #19332D;
-}
-
-.sidebar-items:hover {
-  color: #234a41;
-  filter: invert(25%) sepia(6%) saturate(3183%) hue-rotate(116deg) brightness(88%) contrast(89%);
-  cursor: pointer;
-}
-
-button img {
-  align-self: end;
-}

client/src/theme.js

@@ -95,6 +95,52 @@ const widgetRecipe = defineSlotRecipe({
 });
 
 const config = defineConfig({
+  globalCss: {
+    ".react-grid-placeholder": {
+    background: "#c0d2e3ff !important",
+    borderColor: "#a9b6c2ff !important",
+    boxShadow: "0 0 10px #c0d2e3ff !important",
+    opacity: "1 !important",
+    borderRadius: "5px",
+    },
+    ".react-resizable-handle-se": {
+      zIndex: "1",
+    },
+    "*": {
+      scrollbarWidth: "thin",
+      scrollbarColor: "#a0aec0 transparent",
+    },
+    "::-webkit-scrollbar": {
+      width: "8px",
+    },
+    "::-webkit-scrollbar-thumb": {
+      backgroundColor:" rgba(100, 100, 100, 0.4)",
+      borderRadius: "4px",
+    },
+    "::-webkit-scrollbar-track": {
+      background: "transparent",
+    },
+    '.leaflet-tile': {
+      _dark: {
+        filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
+      }
+    },
+    '.leaflet-control-zoom-in .leaflet-control-zoom-out .leaflet-control-attribution .leaflet-container': {
+      _dark: {
+        filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
+      }
+    },
+    '.leaflet-control-attribution': {
+      _dark: {
+        filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
+      }
+    },
+    '.leaflet-container': {
+      _dark: {
+        filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
+      }
+    },
+  },
   theme: {
     semanticTokens: {
       colors: {