fix background img import issue maybe again

Author: basilleaf

src/App.scss

@@ -79,6 +79,11 @@ $border-radius: 6px;
 .leaflet-touch .leaflet-bar a {
   background-size: 64px;
 }
+
+.leaflet-touch .leaflet-bar a {
+  background-image: url("images/LUTI_Zoom_Icon.svg");
+}
+
 .leaflet-touch .leaflet-bar a:first-child {
   border-top-left-radius: $border-radius;
   border-top-right-radius: $border-radius;

src/components/InfoBox.js

@@ -16,18 +16,6 @@ export default function InfoBox({ desc, displayMode, title, url }) {
 
   const ref = useRef(null);
 
-  useEffect(() => {
-    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;