From 45991462dfde3dfe6bb14581f94421fe7bf37f86 Mon Sep 17 00:00:00 2001
From: Lisa Ballard <lballard.cat@gmail.com>
Date: Wed, 27 Jul 2022 22:30:20 -0700
Subject: [PATCH] fix relative import/url issue in css background image

---
 src/App.scss              |  9 ++++-----
 src/components/InfoBox.js | 14 +++++++++++++-
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 6be11b2..33706e1 100644
--- a/src/App.scss
+++ b/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 {
diff --git a/src/components/InfoBox.js b/src/components/InfoBox.js
index 10703cc..cac891c 100644
--- a/src/components/InfoBox.js
+++ b/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;