From ab72dc24cff7fce36c35a2314d6002f3b2cf18cc Mon Sep 17 00:00:00 2001
From: Nat Hillard <72811320+NatHillardUSDS@users.noreply.github.com>
Date: Thu, 22 Jul 2021 12:53:18 -0400
Subject: [PATCH]  Zoom button styling does not match spec (#395)

* Fixes #320, Zoom button styling does not match spec
* Setting explicit size for icon dimension to avoid automatic SVG sizing weirdness for gatsby build static site
---
 .../territoryFocusControl.module.scss         |  6 +-
 client/src/styles/global.scss                 | 63 ++++++++++++++++---
 2 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/client/src/components/territoryFocusControl.module.scss b/client/src/components/territoryFocusControl.module.scss
index adc600e6..82fa91fd 100644
--- a/client/src/components/territoryFocusControl.module.scss
+++ b/client/src/components/territoryFocusControl.module.scss
@@ -1,6 +1,6 @@
 .territoryFocusButton {
-  width: 40px;
-  height: 40px;
+  width: 2.5em;
+  height: 2.5em;
   border-width: 1px 2px;
   border-color: #000000;
   border-style: solid;
@@ -16,7 +16,7 @@
   flex-direction: column;
   text-align: center;
   font-size: 16px;
-  line-height: 40px;
+  line-height: 1.75em;
   position: absolute;
   left: 20px;
   top: 300px;
diff --git a/client/src/styles/global.scss b/client/src/styles/global.scss
index 30344849..84dfdd94 100644
--- a/client/src/styles/global.scss
+++ b/client/src/styles/global.scss
@@ -211,15 +211,58 @@ $primary-color: #112f4e;
 }
 
 // Because we're using react-map-gl, you need to use
-// the mapboxgl- class name variables
+// the mapboxgl- class name variables.
+// Maplibre has its own classnames with a maplibre prefix,
+// but it after 1.14.0 it optionally still allows for the mapbox-gl prefix
 
-.mapboxgl-ctrl-group button {
-  height: 40px;
-  width: 40px;
-  box-sizing: border-box;
-  border-width: 2px;
-  border-color: #000000;
-  border-style: solid;
-  background-color: #ffffff;
-  font-size: 24px;
+// Below properties override mb defaults
+.mapboxgl-ctrl-group:not(:empty) {
+  box-shadow: none;
+}
+
+@media (-ms-high-contrast: active) {
+  .mapboxgl-ctrl-group:not(:empty) {
+    box-shadow: none;
+  }
+}
+
+.mapboxgl-ctrl-group {
+  border-radius: 0px;
+}
+
+.mapboxgl-ctrl {
+  button + button {
+    border-top: 1px;
+  }
+
+  button {
+    border-radius: 0px;
+    height: 1.66em;
+    width: 1.66em;
+    box-sizing: border-box;
+    background-color: #ffffff;
+    border-width: 2px;
+    border-color: #000000;
+    border-style: solid;
+    font-size: 1.5em;
+
+    // It seems necessary to set an explicit size for one of the dimensions
+    // in order for this icon to be rendered correctly by gatsby build
+    // see more here: https://thatemil.com/blog/2014/04/06/intrinsic-sizing-of-svg-in-responsive-web-design/
+    .mapboxgl-ctrl-icon {
+      height: 1em;
+    }
+  }
+
+  button.mapboxgl-ctrl-zoom-in {
+    .mapboxgl-ctrl-icon {
+      background-image: url("../../node_modules/uswds/dist/img/usa-icons/add.svg");
+    }
+  }
+
+  button.mapboxgl-ctrl-zoom-out {
+    .mapboxgl-ctrl-icon {
+      background-image: url("../../node_modules/uswds/dist/img/usa-icons/remove.svg");
+    }
+  }
 }