Fix button centering on iphone (#581)

* Fix button centering on iphone
For some reason, physical iPhones are not centering the text inside the map buttons correctly. (`48`, `AK`, `HI`, `PR`)
* convert to verbose css syntax
* Test using svg buttons
* Remove unused style reference
* Fix new icon svg images were "eating" the button's click events

client/src/components/territoryFocusControl.module.scss

@@ -1,34 +1,8 @@
-.territoryFocusButton {
-  width: 2.5em;
-  height: 2.5em;
-  border-width: 1px 2px;
-  border-color: #000000;
-  border-style: solid;
-  background-color: #ffffff;
-}
-
-.territoryFocusButton:not(:disabled):hover {
-  background-color: #f4f4f4;
-}
-
 .territoryFocusContainer {
   display: flex;
   flex-direction: column;
-  text-align: center;
-  font-size: 16px;
-  line-height: 1.75em;
   position: absolute;
   left: 20px;
-  top: 300px;
-  z-index: 10;
-  left: 20px;
   top: 150px;
-}
-
-.territoryFocusButton:first-child {
-  border-top-width: 2px;
-}
-
-.territoryFocusButton:last-child {
-  border-bottom-width: 2px;
+  z-index: 10;
 }

client/src/components/territoryFocusControl.module.scss.d.ts

@@ -1,7 +1,6 @@
 declare namespace TerritoryFocusControlModuleScssNamespace {
     export interface ITerritoryFocusControlModuleScss {
       territoryFocusContainer: string;
-      territoryFocusButton: string;
     }
   }
 

client/src/components/territoryFocusControl.tsx

@@ -4,10 +4,10 @@ import {_useMapControl as useMapControl} from 'react-map-gl';
 import * as styles from './territoryFocusControl.module.scss';
 
 interface ITerritoryFocusControl {
-  onClickTerritoryFocusButton : MouseEventHandler<HTMLButtonElement>;
+  onClickTerritoryFocusButton: MouseEventHandler<HTMLButtonElement>;
 }
 
-const TerritoryFocusControl = ({onClickTerritoryFocusButton} : ITerritoryFocusControl) => {
+const TerritoryFocusControl = ({onClickTerritoryFocusButton}: ITerritoryFocusControl) => {
   const intl = useIntl();
 
   const {containerRef} = useMapControl({
@@ -81,28 +81,37 @@ const TerritoryFocusControl = ({onClickTerritoryFocusButton} : ITerritoryFocusCo
       ),
     },
   ];
+  // the offset for this array should map the territories variable
+  const territoriesIconClassName = [
+    'mapboxgl-ctrl-zoom-to-48',
+    'mapboxgl-ctrl-zoom-to-ak',
+    'mapboxgl-ctrl-zoom-to-hi',
+    'mapboxgl-ctrl-zoom-to-pr',
+  ];
 
   return (
     <div ref={containerRef} className={styles.territoryFocusContainer}>
-      {territories.map((territory) =>
-        <button
-          id={territory.short}
-          key={territory.short}
-          onClick={onClickTerritoryFocusButton}
-          className={styles.territoryFocusButton}
-          aria-label={intl.formatMessage(
-              {
-                id: 'map.territoryFocus.focusOn',
-                defaultMessage: 'Focus on {territory}',
-                description: 'Focus on the bounds of a specific territory',
-              },
-              {
-                territory: territory.long,
-              },
-          )}>
-          {territory.short}
-        </button>,
-      )}
+      <div className={'mapboxgl-ctrl mapboxgl-ctrl-group'}>
+        {territories.map((territory, index) =>
+          <button
+            id={territory.short}
+            key={territory.short}
+            onClick={onClickTerritoryFocusButton}
+            className={'mapboxgl-ctrl-icon ' + territoriesIconClassName[index]}
+            aria-label={intl.formatMessage(
+                {
+                  id: 'map.territoryFocus.focusOn',
+                  defaultMessage: 'Focus on {territory}',
+                  description: 'Focus on the bounds of a specific territory',
+                },
+                {
+                  territory: territory.long,
+                },
+            )}>
+            <span className={'mapboxgl-ctrl-icon'} aria-hidden={true}/>
+          </button>,
+        )}
+      </div>
     </div>
   );
 };