[Maps] Fix some overlays designs

x-pack/plugins/maps/public/_main.scss

@@ -18,44 +18,6 @@
   flex-direction: column;
 }
 
-
-// MapBox
-
-.mapContainer {
-  flex-grow: 1;
-
-  .mapboxgl-popup {
-    z-index: 100;
-    border-color: $euiColorEmptyShade;
-  }
-
-  .mapboxgl-popup-content {
-    background-color: $euiColorEmptyShade;
-  }
-
-  .mapboxgl-popup-tip {
-    border-top-color: $euiColorEmptyShade !important;
-  }
-
-  .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
-    margin-left: $euiSizeM;
-    margin-top: $euiSizeM;
-  }
-
-  .mapboxgl-ctrl-group:not(:empty) {
-    @include euiBottomShadowLarge;
-    background-color: $euiColorEmptyShade;
-    border-radius: $euiBorderRadius;
-
-    > button {
-      @include size($euiSizeXL);
-
-      + button {
-        border: none;
-      }
-    }
-  }
-}
 .euiColorPicker__emptySwatch {
   position: relative;
 }

x-pack/plugins/maps/public/_mapbox_hacks.scss

@@ -0,0 +1,51 @@
+// MapBox
+
+.mapContainer {
+  flex-grow: 1;
+
+  .mapboxgl-popup {
+    z-index: 100;
+    border-color: $euiColorEmptyShade;
+  }
+
+  .mapboxgl-popup-content {
+    background-color: $euiColorEmptyShade;
+  }
+
+  .mapboxgl-popup-tip {
+    border-top-color: $euiColorEmptyShade !important;
+  }
+
+  .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
+    margin-left: $euiSizeM;
+    margin-top: $euiSizeM;
+  }
+
+  .mapboxgl-ctrl-group:not(:empty) {
+    @include euiBottomShadowLarge;
+    background-color: $euiColorEmptyShade;
+    border-radius: $euiBorderRadius;
+
+    > button {
+      @include size($euiSizeXL);
+
+      + button {
+        border: none;
+      }
+    }
+  }
+}
+
+// Custom SVG as background for zoom controls based off of EUI glyphs plusInCircleFilled and minusInCircleFilled
+// Also fixes dark mode
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in {
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml,%0A%3Csvg width='15px' height='15px' viewBox='0 0 15 15' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{hexToRGB($euiTextColor)}' d='M8,7 L8,3.5 C8,3.22385763 7.77614237,3 7.5,3 C7.22385763,3 7,3.22385763 7,3.5 L7,7 L3.5,7 C3.22385763,7 3,7.22385763 3,7.5 C3,7.77614237 3.22385763,8 3.5,8 L7,8 L7,11.5 C7,11.7761424 7.22385763,12 7.5,12 C7.77614237,12 8,11.7761424 8,11.5 L8,8 L11.5,8 C11.7761424,8 12,7.77614237 12,7.5 C12,7.22385763 11.7761424,7 11.5,7 L8,7 Z M7.5,15 C3.35786438,15 0,11.6421356 0,7.5 C0,3.35786438 3.35786438,0 7.5,0 C11.6421356,0 15,3.35786438 15,7.5 C15,11.6421356 11.6421356,15 7.5,15 Z' /%3E%3C/svg%3E");
+  background-position: center;
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml,%0A%3Csvg width='15px' height='15px' viewBox='0 0 15 15' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{hexToRGB($euiTextColor)}' d='M7.5,0 C11.6355882,0 15,3.36441176 15,7.5 C15,11.6355882 11.6355882,15 7.5,15 C3.36441176,15 0,11.6355882 0,7.5 C0,3.36441176 3.36441176,0 7.5,0 Z M3.5,7 C3.22385763,7 3,7.22385763 3,7.5 C3,7.77614237 3.22385763,8 3.5,8 L11.5,8 C11.7761424,8 12,7.77614237 12,7.5 C12,7.22385763 11.7761424,7 11.5,7 L3.5,7 Z' /%3E%3C/svg%3E");
+  background-position: center;
+}

x-pack/plugins/maps/public/components/widget_overlay/_index.scss

@@ -1,3 +1,5 @@
+@import './mixins';
+
 @import './widget_overlay';
 @import './attribution_control/attribution_control';
 @import './layer_control/index';

x-pack/plugins/maps/public/components/widget_overlay/_mixins.scss

@@ -0,0 +1,12 @@
+@mixin mapOverlayIsTextOnly() {
+  text-shadow:
+    0 0 2px $euiColorEmptyShade,
+    // Multiple shadows helps turn it into an outline since
+    // text shadows have no spread value
+    0 0 1px $euiColorEmptyShade,
+    0 0 1px $euiColorEmptyShade,
+    0 0 1px $euiColorEmptyShade,
+    0 0 1px $euiColorEmptyShade,
+    0 0 1px $euiColorEmptyShade,
+    0 0 1px $euiColorEmptyShade;
+}

x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss

@@ -13,16 +13,14 @@
   pointer-events: none; /* 1 */
 }
 
-.mapWidgetOverlay__rightSideWrapper {
-  overflow: hidden; // Fixes Chrome overflow
-}
-
-.mapWidgetOverlay__rightSide {
+.mapWidgetOverlay__layerWrapper {
+  align-items: flex-end;
   width: $euiSize * 20;
+  min-height: 0; // Fixes scroll in Firefox
 }
 
-.mapWidgetOverlay__layerWrapper {
-  align-items: flex-end;
+.mapWidgetControl__headerFlexItem {
+  flex-shrink: 0;
 }
 
 .mapWidgetControl {
@@ -45,5 +43,3 @@
   flex-shrink: 0;
   text-transform: uppercase;
 }
-
-

x-pack/plugins/maps/public/components/widget_overlay/attribution_control/_attribution_control.scss

@@ -1,3 +1,5 @@
 .mapAttributionControl {
-  padding: 0 $euiSizeXS;
+  @include mapOverlayIsTextOnly;
+  pointer-events: all;
+  padding-left: $euiSizeM;
 }

x-pack/plugins/maps/public/components/widget_overlay/attribution_control/view.js

@@ -8,7 +8,6 @@ import React, { Fragment } from 'react';
 import _ from 'lodash';
 import {
   EuiText,
-  EuiPanel,
   EuiLink,
 } from '@elastic/eui';
 
@@ -68,7 +67,7 @@ export class AttributionControl  extends React.Component {
     }
 
     return (
-      <EuiLink color="subdued" href={url} target="_blank">{label}</EuiLink>
+      <EuiLink color="text" href={url} target="_blank">{label}</EuiLink>
     );
   }
 
@@ -88,11 +87,11 @@ export class AttributionControl  extends React.Component {
       return null;
     }
     return (
-      <EuiPanel className="mapWidgetControl mapAttributionControl" paddingSize="none" grow={false}>
-        <EuiText color="subdued" size="xs">
-          <small>{this._renderAttributions()}</small>
+      <div className="mapAttributionControl">
+        <EuiText size="xs">
+          <small><strong>{this._renderAttributions()}</strong></small>
         </EuiText>
-      </EuiPanel>
+      </div>
     );
   }
 }

x-pack/plugins/maps/public/components/widget_overlay/layer_control/_layer_control.scss

@@ -6,8 +6,13 @@
   border-top: 1px solid $euiColorLightestShade;
 }
 
+.mapLayerControl__addLayerButton {
+  flex-shrink: 0;
+}
+
 .mapLayerControl__addLayerButton,
-.mapLayerControl__openLayerTOCButton {
+.mapLayerControl__openLayerTOCButton,
+.mapViewControl__gotoButton {
   pointer-events: all;
 
   &:enabled,
@@ -18,7 +23,8 @@
 }
 
 .mapLayerControl__openLayerTOCButton,
-.mapLayerControl__closeLayerTOCButton {
+.mapLayerControl__closeLayerTOCButton,
+.mapViewControl__gotoButton {
   @include size($euiSizeXL);
   background-color: $euiColorEmptyShade !important; // During all states
 }

x-pack/plugins/maps/public/components/widget_overlay/layer_control/view.js

@@ -66,7 +66,7 @@ export function LayerControl({ isReadOnly, isLayerTOCOpen, showAddLayerWizard, c
   return (
     <Fragment>
       <EuiPanel className="mapWidgetControl mapWidgetControl-hasShadow" paddingSize="none" grow={false}>
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem className="mapWidgetControl__headerFlexItem" grow={false}>
           <EuiFlexGroup
             justifyContent="spaceBetween"
             alignItems="center"

x-pack/plugins/maps/public/components/widget_overlay/view_control/_view_control.scss

@@ -5,7 +5,7 @@
  */
 
 .mapViewControl__coordinates {
-  padding: $euiSizeXS $euiSizeS;
+  @include mapOverlayIsTextOnly;
   justify-content: center;
   pointer-events: none;
 }

x-pack/plugins/maps/public/components/widget_overlay/view_control/view_control.js

@@ -9,14 +9,14 @@ import React from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
-  EuiPanel,
-  EuiButton,
+  EuiButtonIcon,
   EuiPopover,
   EuiText,
 } from '@elastic/eui';
 import { SetView } from './set_view';
 import { DECIMAL_DEGREES_PRECISION } from '../../../../common/constants';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 
 export function ViewControl({ isSetViewOpen, closeSetView, openSetView, mouseCoordinates }) {
   const toggleSetViewVisibility = () => {
@@ -31,18 +31,20 @@ export function ViewControl({ isSetViewOpen, closeSetView, openSetView, mouseCoo
     <EuiPopover
       anchorPosition="upRight"
       button={(
-        <EuiButton
+        <EuiButtonIcon
           className="mapViewControl__gotoButton"
-          fill
-          size="s"
           onClick={toggleSetViewVisibility}
           data-test-subj="toggleSetViewVisibilityButton"
-        >
-          <FormattedMessage
-            id="xpack.maps.viewControl.goToButtonLabel"
-            defaultMessage="Go to"
-          />
-        </EuiButton>)}
+          iconType="crosshairs"
+          color="text"
+          aria-label={i18n.translate('xpack.maps.viewControl.goToButtonLabel', {
+            defaultMessage: 'Go to'
+          })}
+          title={i18n.translate('xpack.maps.viewControl.goToButtonLabel', {
+            defaultMessage: 'Go to'
+          })}
+        />
+      )}
       isOpen={isSetViewOpen}
       closePopover={closeSetView}
     >
@@ -58,9 +60,9 @@ export function ViewControl({ isSetViewOpen, closeSetView, openSetView, mouseCoo
       ? _.round(mouseCoordinates.lon, DECIMAL_DEGREES_PRECISION)
       : '';
     return (
-      <EuiPanel className="mapWidgetControl mapViewControl__coordinates" paddingSize="none">
+      <div className="mapViewControl__coordinates">
         <EuiText size="xs">
-          <p>
+          <small>
             <strong>
               <FormattedMessage
                 id="xpack.maps.viewControl.latLabel"
@@ -73,19 +75,20 @@ export function ViewControl({ isSetViewOpen, closeSetView, openSetView, mouseCoo
                 defaultMessage="lon:"
               />
             </strong> {lon}
-          </p>
+          </small>
         </EuiText>
-      </EuiPanel>
+      </div>
     );
   }
 
   return (
     <EuiFlexGroup
-      justifyContent="spaceBetween"
+      justifyContent="flexEnd"
+      alignItems="flexEnd"
       gutterSize="s"
       responsive={false}
     >
-      <EuiFlexItem>
+      <EuiFlexItem grow={false}>
         {mouseCoordinates && renderMouseCoordinates()}
       </EuiFlexItem>
 

x-pack/plugins/maps/public/components/widget_overlay/widget_overlay.js

@@ -16,20 +16,11 @@ import { AttributionControl } from './attribution_control';
 export function WidgetOverlay() {
   return (
     <EuiFlexGroup className="mapWidgetOverlay" responsive={false} direction="column" alignItems="flexEnd" gutterSize="s">
-      <EuiFlexItem className="mapWidgetOverlay__rightSideWrapper">
-        <EuiFlexGroup
-          className="mapWidgetOverlay__rightSide"
-          direction="column"
-          justifyContent="spaceBetween"
-          responsive={false}
-        >
-          <EuiFlexItem className="mapWidgetOverlay__layerWrapper">
-            <LayerControl/>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <ViewControl/>
-          </EuiFlexItem>
-        </EuiFlexGroup>
+      <EuiFlexItem className="mapWidgetOverlay__layerWrapper">
+        <LayerControl/>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <ViewControl/>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <AttributionControl/>