map has dark mode

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;
-}