Design improvements

Author: elizabetdev

x-pack/plugins/maps/public/classes/sources/ems_tms_source/ems_base_map_layer_wizard.tsx

@@ -5,6 +5,7 @@
  */
 import React from 'react';
 import { i18n } from '@kbn/i18n';
+import { EuiPanel } from '@elastic/eui';
 import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_registry';
 // @ts-ignore
 import { EMSTMSSource, sourceTitle } from './ems_tms_source';
@@ -32,7 +33,11 @@ export const emsBaseMapLayerWizardConfig: LayerWizard = {
       previewLayers([layerDescriptor]);
     };
 
-    return <TileServiceSelect onTileSelect={onSourceConfigChange} />;
+    return (
+      <EuiPanel>
+        <TileServiceSelect onTileSelect={onSourceConfigChange} />
+      </EuiPanel>
+    );
   },
   title: sourceTitle,
 };

x-pack/plugins/maps/public/classes/sources/ems_tms_source/tile_service_select.js

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { EuiSelect, EuiFormRow, EuiPanel } from '@elastic/eui';
+import { EuiSelect, EuiFormRow } from '@elastic/eui';
 
 import { getEmsTmsServices } from '../../../meta';
 import { getEmsUnavailableMessage } from '../../../components/ems_unavailable_message';
@@ -71,25 +71,23 @@ export class TileServiceSelect extends React.Component {
     }
 
     return (
-      <EuiPanel>
-        <EuiFormRow
-          label={i18n.translate('xpack.maps.source.emsTile.label', {
-            defaultMessage: 'Tile service',
-          })}
-          helpText={helpText}
-          display="columnCompressed"
-        >
-          <EuiSelect
-            hasNoInitialSelection={!selectedId}
-            value={selectedId}
-            options={this.state.emsTmsOptions}
-            onChange={this._onChange}
-            isLoading={!this.state.hasLoaded}
-            disabled={this.state.hasLoaded && this.state.emsTmsOptions.length === 0}
-            compressed
-          />
-        </EuiFormRow>
-      </EuiPanel>
+      <EuiFormRow
+        label={i18n.translate('xpack.maps.source.emsTile.label', {
+          defaultMessage: 'Tile service',
+        })}
+        helpText={helpText}
+        display="columnCompressed"
+      >
+        <EuiSelect
+          hasNoInitialSelection={!selectedId}
+          value={selectedId}
+          options={this.state.emsTmsOptions}
+          onChange={this._onChange}
+          isLoading={!this.state.hasLoaded}
+          disabled={this.state.hasLoaded && this.state.emsTmsOptions.length === 0}
+          compressed
+        />
+      </EuiFormRow>
     );
   }
 }

x-pack/plugins/maps/public/classes/sources/ems_tms_source/update_source_editor.js

@@ -26,9 +26,7 @@ export function UpdateSourceEditor({ onChange, config }) {
             />
           </h5>
         </EuiTitle>
-
         <EuiSpacer size="m" />
-
         <TileServiceSelect onTileSelect={_onTileSelect} config={config} />
       </EuiPanel>
 

x-pack/plugins/maps/public/classes/styles/vector/components/color/color_map_select.js

@@ -161,7 +161,7 @@ export class ColorMapSelect extends Component {
 
     return (
       <Fragment>
-        <EuiFlexGroup gutterSize={'none'}>
+        <EuiFlexGroup gutterSize={'xs'}>
           {toggle}
           <EuiFlexItem>
             <EuiColorPalettePicker

x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/layer_wizard_select.tsx

@@ -115,7 +115,7 @@ export class LayerWizardSelect extends Component<Props, State> {
     });
 
     return (
-      <EuiFacetGroup layout="horizontal">
+      <EuiFacetGroup layout="horizontal" gutterSize="s">
         <EuiFacetButton
           key="all"
           isSelected={!this.state.selectedCategory}
@@ -154,6 +154,7 @@ export class LayerWizardSelect extends Component<Props, State> {
           <EuiFlexItem key={layerWizard.title}>
             <EuiCard
               title={layerWizard.title}
+              titleSize="xs"
               icon={icon}
               onClick={onClick}
               description={layerWizard.description}
@@ -165,7 +166,8 @@ export class LayerWizardSelect extends Component<Props, State> {
 
     return (
       <>
-        {this._renderCategoryFacets()}
+        <EuiFlexItem> {this._renderCategoryFacets()}</EuiFlexItem>
+
         <EuiSpacer size="s" />
         <EuiFlexGrid columns={2} gutterSize="m">
           {wizardCards}

x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/join_editor.tsx

@@ -85,7 +85,7 @@ export function JoinEditor({ joins, layer, onChange, leftJoinFields, layerDispla
           <EuiButtonEmpty
             onClick={addJoin}
             size="xs"
-            iconType="plusInCircle"
+            iconType="plusInCircleFilled"
             aria-label={i18n.translate('xpack.maps.layerPanel.joinEditor.addJoinAriaLabel', {
               defaultMessage: 'Add join',
             })}

x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/resources/_join.scss

@@ -2,7 +2,7 @@
   position: relative;
   background: tintOrShade($euiColorLightShade, 85%, 0);
   border-radius: $euiBorderRadius;
-  padding: $euiSizeXS;
+  padding: $euiSizeS;
 
   .mapJoinItem__inner {
     @include euiScrollBar;

x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/resources/join.js

@@ -152,7 +152,7 @@ export class Join extends Component {
           applyGlobalQuery={right.applyGlobalQuery}
           setApplyGlobalQuery={this._onApplyGlobalQueryChange}
           label={i18n.translate('xpack.maps.layerPanel.join.applyGlobalQueryCheckboxLabel', {
-            defaultMessage: `Apply global filter to join`,
+            defaultMessage: `Apply global filter to joins`,
           })}
         />
       );
@@ -192,8 +192,7 @@ export class Join extends Component {
           {metricsExpression}
 
           {whereExpression}
-
-          {globalFilterCheckbox}
+          <EuiFlexItem>{globalFilterCheckbox}</EuiFlexItem>
 
           <EuiButtonIcon
             className="mapJoinItem__delete"