fix relative import/url issue in css background image

Author: basilleaf

src/App.scss

@@ -61,7 +61,6 @@ body {
 }
 
 // customize zoom button styles
-$background-size: 64px;
 $border-radius: 6px;
 
 .leaflet-bottom .leaflet-control {
@@ -75,20 +74,20 @@ $border-radius: 6px;
   border-bottom: none;
   background-color: unset;
 }
+
+.leaflet-touch .leaflet-bar a {
+  background-size: 64px;
+}
 .leaflet-touch .leaflet-bar a:first-child {
   border-top-left-radius: $border-radius;
   border-top-right-radius: $border-radius;
 
-  background-image: url(http://localhost:3000//LUTI_Zoom_Icon.svg);
-  background-size: $background-size;
   background-position: top -10px left -15px;
 }
 .leaflet-touch .leaflet-bar a:last-child {
   border-bottom-left-radius: $border-radius;
   border-bottom-right-radius: $border-radius;
 
-  background-image: url(http://localhost:3000//LUTI_Zoom_Icon.svg);
-  background-size: $background-size;
   background-position: bottom -11px left -15px;
 }
 .leaflet-touch .leaflet-bar a:hover {

src/components/InfoBox.js

@@ -17,7 +17,19 @@ export default function InfoBox({ desc, displayMode, title, url }) {
   const ref = useRef(null);
 
   useEffect(() => {
-    const intro = document.querySelector(".leaflet-control-zoom"); // this except use the new buttons
+    const controlLinks = document.querySelectorAll(
+      ".leaflet-touch .leaflet-bar a"
+    );
+    if (!controlLinks || controlLinks.length !== 2) return;
+
+    const backgroundImage = "url(/LUTI_Zoom_Icon.svg)";
+
+    controlLinks[0].style.backgroundImage = backgroundImage;
+    controlLinks[1].style.backgroundImage = backgroundImage;
+  }, []);
+
+  useEffect(() => {
+    const intro = document.querySelector(".leaflet-control-zoom");
     const height = ref.current.clientHeight;
 
     if (!height || !intro) return;