Merge pull request #70 from icssc/61-bug-change-black-marker-to-white…

…-in-dark-mode

Changed color of marker to match dark/light mode

packages/web/src/components/Map/Map.jsx

@@ -14,7 +14,7 @@ import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 import Fuse from "fuse.js";
 
-import { othersDrag, flyImg, iconsMap } from "./MapIcons";
+import { othersDragBlack, othersDragWhite, flyImg, iconsMap } from "./MapIcons";
 import {
   MapContainer,
   TileLayer,
@@ -324,7 +324,8 @@ export default function Map({
         eventHandlers={eventHandlers}
         position={position}
         ref={markerRef}
-        icon={othersDrag}
+        icon={colorMode == "dark" ? othersDragWhite : othersDragBlack}
+
       >
         <Popup minWidth={90} closeButton={false}>
           <span className="popup" onClick={() => toggleDraggable()}>

packages/web/src/components/Map/MapIcons.js

@@ -15,6 +15,7 @@ import resolved from "../../assets/logos/resolved.png";
 import others_lost from "../../assets/logos/Others_lost.png";
 import others_found from "../../assets/logos/Others_found.png";
 import others_black from "../../assets/logos/others_black.svg";
+import others_white from "../../assets/logos/others_white.svg"
 
 import fly_img from "../../assets/images/fly_img.png";
 
@@ -84,12 +85,18 @@ const othersFound = L.icon({
   iconAnchor: [25, 40],
 });
 
-export const othersDrag = L.icon({
+export const othersDragBlack = L.icon({
   iconUrl: others_black,
   iconSize: [40, 40],
   iconAnchor: [25, 25],
 });
 
+export const othersDragWhite = L.icon({
+  iconUrl: others_white,
+  iconSize: [40, 40],
+  iconAnchor: [25, 25],
+});
+
 export const flyImg = L.icon({
   iconUrl: fly_img,
   iconSize: [0.01, 0.01],