Style map controls as buttons

projects/common-map/src/fm-map/components/aol/pan-to-location/pan-to-location.component.html

@@ -1,4 +1,4 @@
-<div (click)="handleClick($event)" class="rounded-circle gps-location">
+<div (click)="handleClick($event)" class="btn btn-outline-secondary gps-location">
   <svg height="100%" width="100%" viewBox="0 0 96 96">
     <g
     id="XMLID_1_"><circle      

projects/common-map/src/fm-map/components/aol/pan-to-location/pan-to-location.component.scss

@@ -8,6 +8,8 @@
   background-color: $body-bg;
   background-size: contain;
   margin-top:0.5em;
+  border-radius: 1.75em;
+  padding:0
 }
 
 .center, .tolerance, .border {
@@ -18,10 +20,18 @@
   fill: $secondary;
 }
 
+div.gps-location:hover .pan-to {
+  fill: $white;
+}
+
 .pan-to-centered {
   fill: $primary;
 }
 
-.pan-to-centered.pan-to-disabled {
+div.gps-location:hover .pan-to-centered {
+  fill: theme-color-level($color-name: "primary", $level: -10) 
+}
+
+.pan-to.pan-to-disabled {
   fill: $gray-300;
-}
+}