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,21 +1,21 @@
 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
-        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-        attribution='&copy; OpenStreetMap contributors'
-      />
-      <Marker position={position}>
-        <Popup>
-          A sample popup!
-        </Popup>
-      </Marker>
-    </MapContainer>
+      <MapContainer center={position} zoom={13} style={{ height: "100%", width: "100%" }}>
+        <TileLayer
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+          attribution='&copy; OpenStreetMap contributors'
+        />
+        <Marker position={position}>
+          <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>
   );
 }