From 7e742dc750f645eb8f0bb320dfd2e021eb27e622 Mon Sep 17 00:00:00 2001
From: Miki <miki@amazon.com>
Date: Mon, 5 Aug 2024 13:40:47 -0700
Subject: [PATCH] Use smaller and compressed varients of buttons and form
 components  (#647)

* Use EuiSmallButton

Signed-off-by: Miki <miki@amazon.com>
---
 .../vector_upload_options.test.tsx.snap       | 20 +++---
 .../__snapshots__/filter_editor.test.tsx.snap | 22 +++---
 .../components/filter_bar/filter_editor.tsx   | 26 +++----
 .../components/filter_bar/filter_options.tsx  |  4 +-
 .../custom_map_config/custom_map_source.tsx   | 68 +++++++++----------
 .../document_layer_source.tsx                 | 35 +++++-----
 .../documents_config/style/color_picker.tsx   |  6 +-
 .../style/document_layer_style.tsx            | 10 +--
 .../style/label_config.test.tsx               | 34 ++++++----
 .../documents_config/style/label_config.tsx   | 40 +++++------
 .../layer_basic_settings.test.tsx             | 32 +++++----
 .../layer_config/layer_basic_settings.tsx     | 30 ++++----
 .../layer_config/layer_config_panel.tsx       | 18 ++---
 public/components/maps_list/maps_list.tsx     |  6 +-
 public/components/show_error_modal.tsx        |  5 +-
 .../tooltip/tooltipHeaderContent.tsx          |  4 +-
 public/components/tooltip/tooltipTable.tsx    |  4 +-
 public/components/vector_upload_options.tsx   | 19 +++---
 18 files changed, 200 insertions(+), 183 deletions(-)

diff --git a/public/components/__snapshots__/vector_upload_options.test.tsx.snap b/public/components/__snapshots__/vector_upload_options.test.tsx.snap
index b2cfd5f8..1bd63af1 100644
--- a/public/components/__snapshots__/vector_upload_options.test.tsx.snap
+++ b/public/components/__snapshots__/vector_upload_options.test.tsx.snap
@@ -39,14 +39,14 @@ Object {
               />
               <div
                 aria-label="form-row-for-file-picker"
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--compressed"
                 id="generated-id-row"
               >
                 <div
                   class="euiFormRow__fieldWrapper"
                 >
                   <div
-                    class="euiFilePicker euiFilePicker--large"
+                    class="euiFilePicker euiFilePicker--large euiFilePicker--compressed"
                   >
                     <div
                       class="euiFilePicker__wrap"
@@ -135,14 +135,14 @@ Object {
                 class="euiSpacer euiSpacer--m"
               />
               <div
-                class="euiFormControlLayout"
+                class="euiFormControlLayout euiFormControlLayout--compressed"
               >
                 <div
                   class="euiFormControlLayout__childrenWrapper"
                 >
                   <input
                     aria-label="map-name-text-field"
-                    class="euiFieldText"
+                    class="euiFieldText euiFieldText--compressed"
                     data-test-subj="customIndex"
                     data-testid="customIndex"
                     id="customIndex"
@@ -206,7 +206,7 @@ Object {
               >
                 <button
                   aria-label="import-file-button"
-                  class="euiButton euiButton--primary euiButton--fill"
+                  class="euiButton euiButton--primary euiButton--small euiButton--fill"
                   id="submitButton"
                   type="button"
                 >
@@ -262,14 +262,14 @@ Object {
             />
             <div
               aria-label="form-row-for-file-picker"
-              class="euiFormRow"
+              class="euiFormRow euiFormRow--compressed"
               id="generated-id-row"
             >
               <div
                 class="euiFormRow__fieldWrapper"
               >
                 <div
-                  class="euiFilePicker euiFilePicker--large"
+                  class="euiFilePicker euiFilePicker--large euiFilePicker--compressed"
                 >
                   <div
                     class="euiFilePicker__wrap"
@@ -358,14 +358,14 @@ Object {
               class="euiSpacer euiSpacer--m"
             />
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <input
                   aria-label="map-name-text-field"
-                  class="euiFieldText"
+                  class="euiFieldText euiFieldText--compressed"
                   data-test-subj="customIndex"
                   data-testid="customIndex"
                   id="customIndex"
@@ -429,7 +429,7 @@ Object {
             >
               <button
                 aria-label="import-file-button"
-                class="euiButton euiButton--primary euiButton--fill"
+                class="euiButton euiButton--primary euiButton--small euiButton--fill"
                 id="submitButton"
                 type="button"
               >
diff --git a/public/components/filter_bar/__snapshots__/filter_editor.test.tsx.snap b/public/components/filter_bar/__snapshots__/filter_editor.test.tsx.snap
index 9695c399..ffae4d80 100644
--- a/public/components/filter_bar/__snapshots__/filter_editor.test.tsx.snap
+++ b/public/components/filter_bar/__snapshots__/filter_editor.test.tsx.snap
@@ -16,9 +16,9 @@ exports[`renders one filter inside filter bar 1`] = `
     className="globalFilterItem__editorForm"
   >
     <EuiForm>
-      <EuiFormRow
+      <EuiCompressedFormRow
         describedByIds={Array []}
-        display="row"
+        display="rowCompressed"
         fullWidth={true}
         hasChildLabel={true}
         hasEmptyLabelSpace={false}
@@ -33,26 +33,26 @@ exports[`renders one filter inside filter bar 1`] = `
           value="\\"{}\\""
           width="100%"
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
       <div>
         <EuiSpacer
           size="m"
         />
-        <EuiFormRow
+        <EuiCompressedFormRow
           describedByIds={Array []}
-          display="row"
+          display="rowCompressed"
           fullWidth={true}
           hasChildLabel={true}
           hasEmptyLabelSpace={false}
           label="Custom label"
           labelType="label"
         >
-          <EuiFieldText
+          <EuiCompressedFieldText
             fullWidth={true}
             onChange={[Function]}
             value="mylabel"
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </div>
       <EuiSpacer
         size="m"
@@ -65,25 +65,25 @@ exports[`renders one filter inside filter bar 1`] = `
         <EuiFlexItem
           grow={false}
         >
-          <EuiButton
+          <EuiSmallButton
             data-test-subj="saveFilter"
             fill={true}
             isDisabled={false}
             onClick={[Function]}
           >
             Save
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
         <EuiFlexItem
           grow={false}
         >
-          <EuiButtonEmpty
+          <EuiSmallButtonEmpty
             data-test-subj="cancelSaveFilter"
             flush="right"
             onClick={[MockFunction]}
           >
             Cancel
-          </EuiButtonEmpty>
+          </EuiSmallButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem />
       </EuiFlexGroup>
diff --git a/public/components/filter_bar/filter_editor.tsx b/public/components/filter_bar/filter_editor.tsx
index 35b6d854..320ffb71 100644
--- a/public/components/filter_bar/filter_editor.tsx
+++ b/public/components/filter_bar/filter_editor.tsx
@@ -4,14 +4,14 @@
  */
 
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiCodeEditor,
-  EuiFieldText,
+  EuiCompressedFieldText,
   EuiFlexGroup,
   EuiFlexItem,
   EuiForm,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiPopoverTitle,
   EuiSpacer,
 } from '@elastic/eui';
@@ -39,7 +39,7 @@ export const FilterEditor = ({ content, label, onSubmit, onCancel }: Props) => {
 
   const renderEditor = () => {
     return (
-      <EuiFormRow
+      <EuiCompressedFormRow
         label={i18n.translate('maps.filter.filterEditor.parameters', {
           defaultMessage: 'Spatial filter parameters',
         })}
@@ -52,7 +52,7 @@ export const FilterEditor = ({ content, label, onSubmit, onCancel }: Props) => {
           width="100%"
           height="250px"
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     );
   };
   return (
@@ -68,35 +68,35 @@ export const FilterEditor = ({ content, label, onSubmit, onCancel }: Props) => {
           {renderEditor()}
           <div>
             <EuiSpacer size="m" />
-            <EuiFormRow
+            <EuiCompressedFormRow
               fullWidth={true}
               label={i18n.translate('maps.filter.filterEditor.createCustomLabelInputLabel', {
                 defaultMessage: 'Custom label',
               })}
             >
-              <EuiFieldText
+              <EuiCompressedFieldText
                 fullWidth={true}
                 value={filterLabel}
                 onChange={(event) => setFilterLabel(event.target.value)}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </div>
           <EuiSpacer size="m" />
           <EuiFlexGroup direction="rowReverse" alignItems="center" responsive={false}>
             <EuiFlexItem grow={false}>
-              <EuiButton
+              <EuiSmallButton
                 fill
                 onClick={() => onSubmit(filterContent, filterLabel)}
                 isDisabled={!isFilterValid(filterContent)}
                 data-test-subj="saveFilter"
               >
                 {'Save'}
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty flush="right" onClick={onCancel} data-test-subj="cancelSaveFilter">
+              <EuiSmallButtonEmpty flush="right" onClick={onCancel} data-test-subj="cancelSaveFilter">
                 {'Cancel'}
-              </EuiButtonEmpty>
+              </EuiSmallButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem />
           </EuiFlexGroup>
diff --git a/public/components/filter_bar/filter_options.tsx b/public/components/filter_bar/filter_options.tsx
index ce6239f3..c6563b36 100644
--- a/public/components/filter_bar/filter_options.tsx
+++ b/public/components/filter_bar/filter_options.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButtonIcon, EuiContextMenu, EuiPopover, EuiPopoverTitle } from '@elastic/eui';
+import { EuiSmallButtonIcon, EuiContextMenu, EuiPopover, EuiPopoverTitle } from '@elastic/eui';
 import React, { useState } from 'react';
 import { i18n } from '@osd/i18n';
 
@@ -99,7 +99,7 @@ export const FilterOptions = ({
       isOpen={isPopoverOpen}
       closePopover={closePopover}
       button={
-        <EuiButtonIcon
+        <EuiSmallButtonIcon
           onClick={togglePopover}
           iconType="filter"
           aria-label={i18n.translate('maps.filter.options.changeAllFiltersButtonLabel', {
diff --git a/public/components/layer_config/custom_map_config/custom_map_source.tsx b/public/components/layer_config/custom_map_config/custom_map_source.tsx
index 1dfd3fc3..2c680b91 100644
--- a/public/components/layer_config/custom_map_config/custom_map_source.tsx
+++ b/public/components/layer_config/custom_map_config/custom_map_source.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import { EuiSpacer, EuiPanel, EuiForm, EuiFieldText, EuiSelect, EuiFormRow } from '@elastic/eui';
+import { EuiSpacer, EuiPanel, EuiForm, EuiCompressedFieldText, EuiCompressedSelect, EuiCompressedFormRow } from '@elastic/eui';
 import { CustomLayerSpecification } from '../../../model/mapLayerType';
 
 interface Props {
@@ -179,124 +179,124 @@ export const CustomMapSource = ({
     <div>
       <EuiPanel paddingSize="s">
         <EuiForm>
-          <EuiFormRow label="Custom type" helpText="Choose custom map type." fullWidth={true}>
-            <EuiSelect
+          <EuiCompressedFormRow label="Custom type" helpText="Choose custom map type." fullWidth={true}>
+            <EuiCompressedSelect
               options={customMapTypeOptions}
               value={customType}
               onChange={onChangeCustomType}
               fullWidth={true}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiForm>
         <EuiSpacer size="m" />
         {selectedLayerConfig.source.customType === 'tms' && (
           <EuiForm>
-            <EuiFormRow
+            <EuiCompressedFormRow
               label="TMS URL*"
               helpText="Raster tile map service URL."
               isInvalid={isInvalidURL(customMapURL)}
               error={isInvalidURL(customMapURL) ? 'Invalid URL' : undefined}
               fullWidth={true}
             >
-              <EuiFieldText
+              <EuiCompressedFieldText
                 placeholder="https://www.example.com/tiles/{z}/{x}/{y}.png"
                 value={customMapURL}
                 onChange={onChangeCustomMapURL}
                 isInvalid={isInvalidURL(customMapURL)}
                 fullWidth={true}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
             <EuiSpacer size="m" />
-            <EuiFormRow
+            <EuiCompressedFormRow
               label="TMS attribution"
               helpText="The attribution for the TMS layer, displayed in the lower-right corner of the map."
               fullWidth={true}
             >
-              <EuiFieldText
+              <EuiCompressedFieldText
                 value={customMapAttribution}
                 onChange={onChangeCustomMapAttribution}
                 fullWidth={true}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiForm>
         )}
         {selectedLayerConfig.source.customType === 'wms' && (
           <EuiForm>
-            <EuiFormRow
+            <EuiCompressedFormRow
               label="WMS URL*"
               helpText="Web map service URL"
               isInvalid={isInvalidURL(customMapURL)}
               error={isInvalidURL(customMapURL) ? 'Invalid URL' : undefined}
               fullWidth={true}
             >
-              <EuiFieldText
+              <EuiCompressedFieldText
                 placeholder="https://www.example.com/wms/dataset"
                 value={customMapURL}
                 onChange={onChangeCustomMapURL}
                 isInvalid={isInvalidURL(customMapURL)}
                 fullWidth={true}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
             <EuiSpacer size="m" />
-            <EuiFormRow
+            <EuiCompressedFormRow
               label="WMS layers*"
               helpText="The names of the layers to include in the map image. For more than one name, use a comma-separated list."
               fullWidth={true}
             >
-              <EuiFieldText value={WMSLayers} onChange={onChangeWMSLayers} fullWidth={true} />
-            </EuiFormRow>
+              <EuiCompressedFieldText value={WMSLayers} onChange={onChangeWMSLayers} fullWidth={true} />
+            </EuiCompressedFormRow>
             <EuiSpacer size="m" />
-            <EuiFormRow label="WMS version*" fullWidth={true}>
-              <EuiFieldText value={WMSVersion} onChange={onChangeWMSVersion} fullWidth={true} />
-            </EuiFormRow>
+            <EuiCompressedFormRow label="WMS version*" fullWidth={true}>
+              <EuiCompressedFieldText value={WMSVersion} onChange={onChangeWMSVersion} fullWidth={true} />
+            </EuiCompressedFormRow>
             <EuiSpacer size="m" />
-            <EuiFormRow
+            <EuiCompressedFormRow
               label="WMS format*"
               helpText="The format of the map image to return. The most common formats are 'image/png' and 'image/jpeg'."
               fullWidth={true}
             >
-              <EuiFieldText value={WMSFormat} onChange={onChangeWMSFormat} fullWidth={true} />
-            </EuiFormRow>
+              <EuiCompressedFieldText value={WMSFormat} onChange={onChangeWMSFormat} fullWidth={true} />
+            </EuiCompressedFormRow>
             <EuiSpacer size="m" />
-            <EuiFormRow
+            <EuiCompressedFormRow
               label="WMS CRS"
               helpText="The coordinate reference system (CRS) to use for the map image."
               fullWidth={true}
             >
-              <EuiFieldText
+              <EuiCompressedFieldText
                 value={WMSCoordinateSystem}
                 onChange={onChangeWMSCoordinateSystem}
                 fullWidth={true}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
             <EuiSpacer size="m" />
-            <EuiFormRow
+            <EuiCompressedFormRow
               label="WMS bbox"
               helpText="The bounding box of the region to include in the map image."
               fullWidth={true}
             >
-              <EuiFieldText value={WMSBbox} onChange={onChangeWMSBbox} fullWidth={true} />
-            </EuiFormRow>
+              <EuiCompressedFieldText value={WMSBbox} onChange={onChangeWMSBbox} fullWidth={true} />
+            </EuiCompressedFormRow>
             <EuiSpacer size="m" />
-            <EuiFormRow
+            <EuiCompressedFormRow
               label="WMS attribution"
               helpText="The attribution for this WMS layer, displayed at right-bottom map."
               fullWidth={true}
             >
-              <EuiFieldText
+              <EuiCompressedFieldText
                 value={customMapAttribution}
                 onChange={onChangeCustomMapAttribution}
                 fullWidth={true}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
             <EuiSpacer size="m" />
-            <EuiFormRow
+            <EuiCompressedFormRow
               label="WMS styles"
               helpText="The styles to be used for each of the layers in the map image."
               fullWidth={true}
             >
-              <EuiFieldText value={WMSStyles} onChange={onChangeWMSStyles} fullWidth={true} />
-            </EuiFormRow>
+              <EuiCompressedFieldText value={WMSStyles} onChange={onChangeWMSStyles} fullWidth={true} />
+            </EuiCompressedFormRow>
           </EuiForm>
         )}
         <EuiSpacer size="s" />
diff --git a/public/components/layer_config/documents_config/document_layer_source.tsx b/public/components/layer_config/documents_config/document_layer_source.tsx
index 69f9ab46..e1bd1588 100644
--- a/public/components/layer_config/documents_config/document_layer_source.tsx
+++ b/public/components/layer_config/documents_config/document_layer_source.tsx
@@ -5,19 +5,20 @@
 
 import React, { useMemo, useCallback, useEffect, useRef, useState } from 'react';
 import {
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiFlexItem,
   EuiFormLabel,
   EuiFlexGrid,
-  EuiFieldNumber,
+  EuiCompressedFieldNumber,
   EuiFormErrorText,
   EuiCollapsibleNavGroup,
   EuiSpacer,
   EuiPanel,
   EuiForm,
-  EuiSwitch,
+  EuiCompressedSwitch,
+  EuiCompressedCheckbox,
   EuiCheckbox,
-  EuiFormRow,
+  EuiCompressedFormRow,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { FormattedMessage } from '@osd/i18n/react';
@@ -263,7 +264,7 @@ export const DocumentLayerSource = ({
           <EuiForm>
             <EuiFlexGrid columns={1}>
               <EuiFlexItem>
-                <EuiFormRow
+                <EuiCompressedFormRow
                   label="Index pattern"
                   isInvalid={!indexPattern}
                   error={errorsMap.datasource}
@@ -284,17 +285,17 @@ export const DocumentLayerSource = ({
                     data-test-subj={'indexPatternSelect'}
                     fullWidth={true}
                   />
-                </EuiFormRow>
+                </EuiCompressedFormRow>
               </EuiFlexItem>
               <EuiFlexItem>
-                <EuiFormRow
+                <EuiCompressedFormRow
                   label="Geospatial field"
                   isInvalid={!selectedField}
                   error={errorsMap.geoFields}
                   data-test-subj={'geoFieldSelect'}
                   fullWidth={true}
                 >
-                  <EuiComboBox
+                  <EuiCompressedComboBox
                     options={getFieldsOptions(indexPattern, acceptedFieldTypes)}
                     selectedOptions={formatFieldStringToComboBox(selectedField?.displayName)}
                     singleSelection={true}
@@ -310,12 +311,12 @@ export const DocumentLayerSource = ({
                     fullWidth={true}
                     isClearable={false}
                   />
-                </EuiFormRow>
+                </EuiCompressedFormRow>
               </EuiFlexItem>
               <EuiFlexItem>
                 <EuiFormLabel>Number of documents</EuiFormLabel>
                 <EuiSpacer size="xs" />
-                <EuiFieldNumber
+                <EuiCompressedFieldNumber
                   placeholder="Number of documents"
                   value={selectedLayerConfig.source.documentRequestNumber}
                   onChange={onDocumentRequestNumberChange}
@@ -352,7 +353,7 @@ export const DocumentLayerSource = ({
             onFiltersUpdated={onFiltersUpdated}
           />
           <EuiSpacer />
-          <EuiFormRow>
+          <EuiCompressedFormRow>
             <EuiCheckbox
               id={`${selectedLayerConfig.id}-bounding-box-filter`}
               label={'Only request data around map extent'}
@@ -360,8 +361,8 @@ export const DocumentLayerSource = ({
               onChange={onToggleGeoBoundingBox}
               compressed
             />
-          </EuiFormRow>
-          <EuiFormRow>
+          </EuiCompressedFormRow>
+          <EuiCompressedFormRow>
             <EuiCheckbox
               id={`${selectedLayerConfig.id}-apply-global-filter`}
               label={i18n.translate('documentLayer.applyGlobalFilters', {
@@ -371,7 +372,7 @@ export const DocumentLayerSource = ({
               onChange={onApplyGlobalFilters}
               compressed
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiCollapsibleNavGroup>
       </EuiPanel>
       <EuiSpacer size="m" />
@@ -384,7 +385,7 @@ export const DocumentLayerSource = ({
         >
           <EuiFlexGrid columns={1}>
             <EuiFlexItem>
-              <EuiCheckbox
+              <EuiCompressedCheckbox
                 id="enable-tooltip"
                 label={i18n.translate('documentLayer.enableTooltips', {
                   defaultMessage: 'Enable tooltips',
@@ -398,7 +399,7 @@ export const DocumentLayerSource = ({
                 <EuiFlexItem>
                   <EuiFormLabel>Tooltip fields</EuiFormLabel>
                   <EuiSpacer size="xs" />
-                  <EuiComboBox
+                  <EuiCompressedComboBox
                     options={getFieldsOptions(indexPattern)}
                     selectedOptions={formatFieldsStringToComboBox(
                       selectedLayerConfig.source.tooltipFields
@@ -414,7 +415,7 @@ export const DocumentLayerSource = ({
                   />
                 </EuiFlexItem>
                 <EuiFlexItem>
-                  <EuiSwitch
+                  <EuiCompressedSwitch
                     label={i18n.translate('documentLayer.displayTooltipsOnHover', {
                       defaultMessage: 'Display tooltips on hover',
                     })}
diff --git a/public/components/layer_config/documents_config/style/color_picker.tsx b/public/components/layer_config/documents_config/style/color_picker.tsx
index a91f88dc..66b106c0 100644
--- a/public/components/layer_config/documents_config/style/color_picker.tsx
+++ b/public/components/layer_config/documents_config/style/color_picker.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { memo, useEffect } from 'react';
-import { EuiColorPicker, EuiFormRow, useColorPickerState } from '@elastic/eui';
+import { EuiColorPicker, EuiCompressedFormRow, useColorPickerState } from '@elastic/eui';
 
 export interface ColorPickerProps {
   originColor: string;
@@ -38,7 +38,7 @@ export const ColorPicker = memo(
     }, [selectedLayerConfigId]);
 
     return (
-      <EuiFormRow label={label} fullWidth={true} isInvalid={!!colorErrors} error={colorErrors}>
+      <EuiCompressedFormRow label={label} fullWidth={true} isInvalid={!!colorErrors} error={colorErrors}>
         <EuiColorPicker
           color={color}
           onChange={setColor}
@@ -46,7 +46,7 @@ export const ColorPicker = memo(
           fullWidth={true}
           data-test-subj={label}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     );
   }
 );
diff --git a/public/components/layer_config/documents_config/style/document_layer_style.tsx b/public/components/layer_config/documents_config/style/document_layer_style.tsx
index 48ff038e..e066fff4 100644
--- a/public/components/layer_config/documents_config/style/document_layer_style.tsx
+++ b/public/components/layer_config/documents_config/style/document_layer_style.tsx
@@ -5,12 +5,12 @@
 
 import React, { ChangeEvent, useEffect, useState } from 'react';
 import {
-  EuiFieldNumber,
+  EuiCompressedFieldNumber,
   EuiFormLabel,
   EuiSpacer,
   EuiButtonGroup,
   EuiPanel,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiForm,
   EuiCollapsibleNavGroup,
 } from '@elastic/eui';
@@ -123,7 +123,7 @@ export const DocumentLayerStyle = ({
     max,
   }: WidthSelectorProps) => {
     return (
-      <EuiFormRow
+      <EuiCompressedFormRow
         label={label}
         fullWidth={true}
         isInvalid={hasInvalid}
@@ -131,7 +131,7 @@ export const DocumentLayerStyle = ({
           defaultMessage: `must be between ${min} and ${max}`,
         })}
       >
-        <EuiFieldNumber
+        <EuiCompressedFieldNumber
           placeholder="Select thickness"
           value={size}
           onChange={onWidthChange}
@@ -141,7 +141,7 @@ export const DocumentLayerStyle = ({
           min={min}
           max={max}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     );
   };
 
diff --git a/public/components/layer_config/documents_config/style/label_config.test.tsx b/public/components/layer_config/documents_config/style/label_config.test.tsx
index 54f3c8ff..c470d28a 100644
--- a/public/components/layer_config/documents_config/style/label_config.test.tsx
+++ b/public/components/layer_config/documents_config/style/label_config.test.tsx
@@ -1,8 +1,16 @@
 import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { LabelConfig } from './label_config';
-import { EuiCheckbox, EuiFormLabel } from '@elastic/eui';
 import {
+  EuiCompressedCheckbox,
+  EuiCompressedComboBox,
+  EuiCompressedFieldNumber,
+  EuiCompressedFieldText,
+  EuiCompressedSelect,
+  EuiFormLabel,
+} from '@elastic/eui';
+import {
+  DASHBOARDS_MAPS_LAYER_TYPE,
   DOCUMENTS_LARGE_LABEL_BORDER_WIDTH,
   DOCUMENTS_MEDIUM_LABEL_BORDER_WIDTH,
   DOCUMENTS_NONE_LABEL_BORDER_WIDTH,
@@ -20,7 +28,7 @@ describe('LabelConfig', () => {
   const mockLayerConfig: DocumentLayerSpecification = {
     name: 'My Document Layer',
     id: 'document-layer-1',
-    type: 'documents',
+    type: DASHBOARDS_MAPS_LAYER_TYPE.DOCUMENTS,
     description: 'A layer of documents',
     zoomRange: [5, 18],
     opacity: 0.8,
@@ -81,13 +89,13 @@ describe('LabelConfig', () => {
   });
 
   it('should render EuiCheckbox with correct props', () => {
-    const checkbox = wrapper.find(EuiCheckbox);
+    const checkbox = wrapper.find(EuiCompressedCheckbox);
     expect(checkbox.prop('label')).toEqual('Add label');
     expect(checkbox.prop('checked')).toEqual(true);
   });
 
   it('should call setSelectedLayerConfig with updated config when onChangeShowLabel is called', () => {
-    const checkbox = wrapper.find(EuiCheckbox);
+    const checkbox = wrapper.find(EuiCompressedCheckbox);
     checkbox.simulate('change', { target: { checked: false } });
     expect(setSelectedLayerConfigMock).toHaveBeenCalledWith({
       ...mockLayerConfig,
@@ -113,12 +121,12 @@ describe('LabelConfig', () => {
       },
     };
     wrapper.setProps({ selectedLayerConfig: newSelectedLayerConfig });
-    const checkbox = wrapper.find(EuiCheckbox);
+    const checkbox = wrapper.find(EuiCompressedCheckbox);
     expect(checkbox.prop('checked')).toEqual(false);
   });
 
   it('should call setSelectedLayerConfig with updated config when onChangeLabelTextType is called', () => {
-    const select = wrapper.find('EuiSelect').at(0);
+    const select = wrapper.find(EuiCompressedSelect).at(0);
     select.simulate('change', { target: { value: 'by_field' } });
     expect(setSelectedLayerConfigMock).toHaveBeenCalledWith({
       ...mockLayerConfig,
@@ -133,7 +141,7 @@ describe('LabelConfig', () => {
   });
 
   it('should render EuiFieldText with correct props when labelTextType is "fixed"', () => {
-    const fieldText = wrapper.find('EuiFieldText');
+    const fieldText = wrapper.find(EuiCompressedFieldText);
     expect(fieldText.prop('value')).toEqual('My Label');
   });
 
@@ -150,12 +158,12 @@ describe('LabelConfig', () => {
       },
     };
     wrapper.setProps({ selectedLayerConfig: newSelectedLayerConfig });
-    const fieldText = wrapper.find('EuiComboBox');
+    const fieldText = wrapper.find(EuiCompressedComboBox);
     expect(fieldText.prop('selectedOptions')).toEqual([{ label: 'Field 1' }]);
   });
 
   it('should call setSelectedLayerConfig with updated config when onStaticLabelChange is called', () => {
-    const fieldText = wrapper.find('EuiFieldText');
+    const fieldText = wrapper.find(EuiCompressedFieldText);
     fieldText.simulate('change', { target: { value: 'new label' } });
     expect(setSelectedLayerConfigMock).toHaveBeenCalledWith({
       ...mockLayerConfig,
@@ -170,14 +178,14 @@ describe('LabelConfig', () => {
   });
 
   it('should render EuiFieldNumber with correct props', () => {
-    const fieldNumber = wrapper.find('EuiFieldNumber');
+    const fieldNumber = wrapper.find(EuiCompressedFieldNumber);
     expect(fieldNumber.prop('value')).toEqual(12);
     expect(fieldNumber.prop('append')).toEqual(<EuiFormLabel>px</EuiFormLabel>);
     expect(fieldNumber.prop('fullWidth')).toEqual(true);
   });
 
   it('should call setSelectedLayerConfig with updated config when OnChangeLabelSize is called', () => {
-    const fieldNumber = wrapper.find('EuiFieldNumber');
+    const fieldNumber = wrapper.find(EuiCompressedFieldNumber);
     fieldNumber.simulate('change', { target: { value: 20 } });
     expect(setSelectedLayerConfigMock).toHaveBeenCalledWith({
       ...mockLayerConfig,
@@ -206,7 +214,7 @@ describe('LabelConfig', () => {
   });
 
   it('should render EuiSelect with correct props for label border width', () => {
-    const select = wrapper.find('EuiSelect').at(1);
+    const select = wrapper.find(EuiCompressedSelect).at(1);
     expect(select.prop('options')).toEqual([
       { value: DOCUMENTS_NONE_LABEL_BORDER_WIDTH, text: 'None' },
       { value: DOCUMENTS_SMALL_LABEL_BORDER_WIDTH, text: 'Small' },
@@ -218,7 +226,7 @@ describe('LabelConfig', () => {
   });
 
   it('should call setSelectedLayerConfig with updated config when onChangeLabelBorderWidth is called', () => {
-    const select = wrapper.find('EuiSelect').at(1);
+    const select = wrapper.find(EuiCompressedSelect).at(1);
     select.simulate('change', { target: { value: 3 } });
     expect(setSelectedLayerConfigMock).toHaveBeenCalledWith({
       ...mockLayerConfig,
diff --git a/public/components/layer_config/documents_config/style/label_config.tsx b/public/components/layer_config/documents_config/style/label_config.tsx
index 4745aa31..6aa0fbbe 100644
--- a/public/components/layer_config/documents_config/style/label_config.tsx
+++ b/public/components/layer_config/documents_config/style/label_config.tsx
@@ -5,15 +5,15 @@
 
 import React, { useEffect, useMemo, ChangeEventHandler, ChangeEvent } from 'react';
 import {
-  EuiFormRow,
-  EuiFieldText,
+  EuiCompressedFormRow,
+  EuiCompressedFieldText,
   EuiFlexItem,
-  EuiCheckbox,
-  EuiSelect,
+  EuiCompressedCheckbox,
+  EuiCompressedSelect,
   EuiFlexGroup,
-  EuiFieldNumber,
+  EuiCompressedFieldNumber,
   EuiFormLabel,
-  EuiComboBox,
+  EuiCompressedComboBox,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { EuiComboBoxOptionOption } from '@opensearch-project/oui/src/eui_components/combo_box/types';
@@ -170,17 +170,17 @@ export const LabelConfig = ({
 
   return (
     <>
-      <EuiFormRow>
-        <EuiCheckbox
+      <EuiCompressedFormRow>
+        <EuiCompressedCheckbox
           id="show-label"
           label="Add label"
           checked={label?.enabled ?? false}
           onChange={onChangeShowLabel}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
       {label?.enabled && (
         <>
-          <EuiFormRow
+          <EuiCompressedFormRow
             label={i18n.translate('maps.documents.labelText', {
               defaultMessage: 'Label text',
             })}
@@ -191,7 +191,7 @@ export const LabelConfig = ({
           >
             <EuiFlexGroup responsive={false} alignItems="center" gutterSize="s">
               <EuiFlexItem grow={false}>
-                <EuiSelect
+                <EuiCompressedSelect
                   options={labelTextTypeOptions}
                   value={label?.textType ?? DOCUMENTS_DEFAULT_LABEL_TEXT_TYPE}
                   onChange={onChangeLabelTextType}
@@ -199,7 +199,7 @@ export const LabelConfig = ({
               </EuiFlexItem>
               <EuiFlexItem className={'documentsLabel__text'}>
                 {label?.textType === DOCUMENTS_LABEL_TEXT_TYPE.FIXED && (
-                  <EuiFieldText
+                  <EuiCompressedFieldText
                     placeholder={i18n.translate('maps.documents.labelTextPlaceholder', {
                       defaultMessage: 'Enter label text',
                     })}
@@ -209,7 +209,7 @@ export const LabelConfig = ({
                   />
                 )}
                 {(!label?.textType || label?.textType === DOCUMENTS_LABEL_TEXT_TYPE.BY_FIELD) && (
-                  <EuiComboBox
+                  <EuiCompressedComboBox
                     options={getFieldsOptions(indexPattern)}
                     selectedOptions={formatFieldStringToComboBox(label?.textByField)}
                     singleSelection={{ asPlainText: true }}
@@ -225,8 +225,8 @@ export const LabelConfig = ({
                 )}
               </EuiFlexItem>
             </EuiFlexGroup>
-          </EuiFormRow>
-          <EuiFormRow
+          </EuiCompressedFormRow>
+          <EuiCompressedFormRow
             label={i18n.translate('maps.documents.labelSize', {
               defaultMessage: 'Label size',
             })}
@@ -235,7 +235,7 @@ export const LabelConfig = ({
               defaultMessage: `Must be between ${DOCUMENTS_MIN_LABEL_SIZE} and ${DOCUMENTS_MAX_LABEL_SIZE}`,
             })}
           >
-            <EuiFieldNumber
+            <EuiCompressedFieldNumber
               placeholder={i18n.translate('maps.documents.labelSizePlaceholder', {
                 defaultMessage: 'Select size',
               })}
@@ -246,7 +246,7 @@ export const LabelConfig = ({
               min={DOCUMENTS_MIN_LABEL_SIZE}
               max={DOCUMENTS_MAX_LABEL_SIZE}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
           <ColorPicker
             originColor={label?.color ?? DOCUMENTS_DEFAULT_LABEL_COLOR}
             label={i18n.translate('maps.documents.labelColor', {
@@ -263,18 +263,18 @@ export const LabelConfig = ({
             setIsUpdateDisabled={setIsUpdateDisabled}
             onColorChange={onChangeLabelBorderColor}
           />
-          <EuiFormRow
+          <EuiCompressedFormRow
             label={i18n.translate('maps.documents.labelBorderWidth', {
               defaultMessage: 'Label border width',
             })}
           >
-            <EuiSelect
+            <EuiCompressedSelect
               options={labelBorderWidthOptions}
               value={label?.borderWidth ?? DOCUMENTS_NONE_LABEL_BORDER_WIDTH}
               onChange={onChangeLabelBorderWidth}
               fullWidth={true}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </>
       )}
     </>
diff --git a/public/components/layer_config/layer_basic_settings.test.tsx b/public/components/layer_config/layer_basic_settings.test.tsx
index 05f18170..b682b2a7 100644
--- a/public/components/layer_config/layer_basic_settings.test.tsx
+++ b/public/components/layer_config/layer_basic_settings.test.tsx
@@ -8,7 +8,13 @@ import { LayerBasicSettings } from './layer_basic_settings';
 import { MapLayerSpecification } from '../../model/mapLayerType';
 import { DASHBOARDS_MAPS_LAYER_TYPE, MAX_LAYER_NAME_LIMIT } from '../../../common';
 import { shallow } from 'enzyme';
-import { EuiDualRange, EuiFieldText, EuiFormRow, EuiRange, EuiTextArea } from '@elastic/eui';
+import {
+  EuiCompressedDualRange,
+  EuiCompressedFieldText,
+  EuiCompressedFormRow,
+  EuiRange,
+  EuiCompressedTextArea
+} from '@elastic/eui';
 
 describe('LayerBasicSettings', () => {
   let wrapper: any;
@@ -34,15 +40,15 @@ describe('LayerBasicSettings', () => {
   });
 
   it('should render with correct props', () => {
-    expect(wrapper.find(EuiFieldText).prop('value')).toBe(mockLayerConfig.name);
-    expect(wrapper.find(EuiTextArea).prop('value')).toBe(mockLayerConfig.description);
-    expect(wrapper.find(EuiDualRange).prop('value')).toEqual(mockLayerConfig.zoomRange);
+    expect(wrapper.find(EuiCompressedFieldText).prop('value')).toBe(mockLayerConfig.name);
+    expect(wrapper.find(EuiCompressedTextArea).prop('value')).toBe(mockLayerConfig.description);
+    expect(wrapper.find(EuiCompressedDualRange).prop('value')).toEqual(mockLayerConfig.zoomRange);
     expect(wrapper.find(EuiRange).prop('value')).toEqual(mockLayerConfig.opacity);
   });
 
   it('should call setSelectedLayerConfig with updated zoom range on zoom level change', () => {
     const newZoomRange = [2, 15];
-    wrapper.find(EuiDualRange).simulate('change', newZoomRange);
+    wrapper.find(EuiCompressedDualRange).simulate('change', newZoomRange);
 
     expect(mockProps.setSelectedLayerConfig).toHaveBeenCalledWith({
       ...mockLayerConfig,
@@ -62,7 +68,7 @@ describe('LayerBasicSettings', () => {
 
   it('should call setSelectedLayerConfig with updated name on name change', () => {
     const newName = 'Updated Test Layer';
-    wrapper.find(EuiFieldText).simulate('change', { target: { value: newName } });
+    wrapper.find(EuiCompressedFieldText).simulate('change', { target: { value: newName } });
 
     expect(mockProps.setSelectedLayerConfig).toHaveBeenCalledWith({
       ...mockLayerConfig,
@@ -72,7 +78,7 @@ describe('LayerBasicSettings', () => {
 
   it('should call setSelectedLayerConfig with updated description on description change', () => {
     const newDescription = 'Updated description';
-    wrapper.find(EuiTextArea).simulate('change', { target: { value: newDescription } });
+    wrapper.find(EuiCompressedTextArea).simulate('change', { target: { value: newDescription } });
 
     expect(mockProps.setSelectedLayerConfig).toHaveBeenCalledWith({
       ...mockLayerConfig,
@@ -83,20 +89,20 @@ describe('LayerBasicSettings', () => {
   it('should display an error for an empty name', () => {
     mockProps.isLayerExists.mockReturnValue(false); // Ensure this returns false for this test
     const emptyName = '';
-    wrapper.find(EuiFieldText).simulate('change', { target: { value: emptyName } });
+    wrapper.find(EuiCompressedFieldText).simulate('change', { target: { value: emptyName } });
 
     wrapper.update();
 
-    expect(wrapper.find(EuiFormRow).first().prop('error')).toContain('Name cannot be empty');
+    expect(wrapper.find(EuiCompressedFormRow).first().prop('error')).toContain('Name cannot be empty');
   });
 
   it('should display an error for a name exceeding the maximum length', () => {
     const longName = 'a'.repeat(MAX_LAYER_NAME_LIMIT + 1); // Create a name longer than MAX_LAYER_NAME_LIMIT
-    wrapper.find(EuiFieldText).simulate('change', { target: { value: longName } });
+    wrapper.find(EuiCompressedFieldText).simulate('change', { target: { value: longName } });
 
     wrapper.update();
 
-    expect(wrapper.find(EuiFormRow).first().prop('error')).toContain(
+    expect(wrapper.find(EuiCompressedFormRow).first().prop('error')).toContain(
       `Name should be less than ${MAX_LAYER_NAME_LIMIT} characters`
     );
   });
@@ -104,10 +110,10 @@ describe('LayerBasicSettings', () => {
   it('should display an error for a name that already exists', () => {
     mockProps.isLayerExists.mockReturnValue(true); // Simulate that the name already exists
     const existingName = 'Existing Layer Name';
-    wrapper.find(EuiFieldText).simulate('change', { target: { value: existingName } });
+    wrapper.find(EuiCompressedFieldText).simulate('change', { target: { value: existingName } });
 
     wrapper.update();
 
-    expect(wrapper.find(EuiFormRow).first().prop('error')).toContain('Name already exists');
+    expect(wrapper.find(EuiCompressedFormRow).first().prop('error')).toContain('Name already exists');
   });
 });
diff --git a/public/components/layer_config/layer_basic_settings.tsx b/public/components/layer_config/layer_basic_settings.tsx
index 1ea5b5c3..58016ff0 100644
--- a/public/components/layer_config/layer_basic_settings.tsx
+++ b/public/components/layer_config/layer_basic_settings.tsx
@@ -5,16 +5,16 @@
 
 import React, { useState, useEffect } from 'react';
 import {
-  EuiDualRange,
-  EuiFieldText,
+  EuiCompressedDualRange,
+  EuiCompressedFieldText,
   EuiForm,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiTitle,
   EuiSpacer,
   EuiRange,
   EuiPanel,
   EuiFormLabel,
-  EuiTextArea,
+  EuiCompressedTextArea,
 } from '@elastic/eui';
 import { MapLayerSpecification } from '../../model/mapLayerType';
 import {
@@ -106,27 +106,27 @@ export const LayerBasicSettings = ({
       </EuiTitle>
       <EuiSpacer size="m" />
       <EuiForm>
-        <EuiFormRow label="Name" error={errors} isInvalid={invalid} fullWidth={true}>
-          <EuiFieldText
+        <EuiCompressedFormRow label="Name" error={errors} isInvalid={invalid} fullWidth={true}>
+          <EuiCompressedFieldText
             name="layerName"
             value={selectedLayerConfig.name}
             onChange={onNameChange}
             isInvalid={invalid}
             fullWidth={true}
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
 
-        <EuiFormRow label="Description" fullWidth={true}>
-          <EuiTextArea
+        <EuiCompressedFormRow label="Description" fullWidth={true}>
+          <EuiCompressedTextArea
             placeholder="Enter description"
             value={selectedLayerConfig.description}
             onChange={onDescriptionChange}
             fullWidth={true}
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
 
-        <EuiFormRow label="Zoom levels" fullWidth={true}>
-          <EuiDualRange
+        <EuiCompressedFormRow label="Zoom levels" fullWidth={true}>
+          <EuiCompressedDualRange
             min={MAP_DEFAULT_MIN_ZOOM}
             max={MAP_DEFAULT_MAX_ZOOM}
             value={zoomLevel}
@@ -137,8 +137,8 @@ export const LayerBasicSettings = ({
             aria-label="DualRange with inputs for zoom level"
             fullWidth={true}
           />
-        </EuiFormRow>
-        <EuiFormRow label="Opacity" fullWidth={true}>
+        </EuiCompressedFormRow>
+        <EuiCompressedFormRow label="Opacity" fullWidth={true}>
           <EuiRange
             min={MAP_LAYER_DEFAULT_MIN_OPACITY}
             max={MAP_LAYER_DEFAULT_MAX_OPACITY}
@@ -150,7 +150,7 @@ export const LayerBasicSettings = ({
             append={<EuiFormLabel>%</EuiFormLabel>}
             fullWidth={true}
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </EuiForm>
     </EuiPanel>
   );
diff --git a/public/components/layer_config/layer_config_panel.tsx b/public/components/layer_config/layer_config_panel.tsx
index 75161450..f8638d8b 100644
--- a/public/components/layer_config/layer_config_panel.tsx
+++ b/public/components/layer_config/layer_config_panel.tsx
@@ -7,13 +7,13 @@ import React, { useEffect, useState } from 'react';
 import { cloneDeep, isEqual } from 'lodash';
 
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiFlyout,
   EuiFlyoutBody,
   EuiFlyoutFooter,
   EuiFlyoutHeader,
   EuiFlexItem,
-  EuiButtonEmpty,
+  EuiSmallButtonEmpty,
   EuiFlexGroup,
   EuiModal,
   EuiModalBody,
@@ -156,12 +156,12 @@ export const LayerConfigPanel = ({
       <EuiFlyoutFooter>
         <EuiFlexGroup justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty iconType="cross" onClick={onClose} flush="left">
+            <EuiSmallButtonEmpty iconType="cross" onClick={onClose} flush="left">
               Discard
-            </EuiButtonEmpty>
+            </EuiSmallButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton
+            <EuiSmallButton
               disabled={isUpdateDisabled}
               iconType="play"
               onClick={onUpdate}
@@ -169,7 +169,7 @@ export const LayerConfigPanel = ({
               data-test-subj="updateButton"
             >
               Update
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlyoutFooter>
@@ -182,10 +182,10 @@ export const LayerConfigPanel = ({
             <p>Do you want to discard the changes?</p>
           </EuiModalBody>
           <EuiModalFooter>
-            <EuiButtonEmpty onClick={closeModal}>Cancel</EuiButtonEmpty>
-            <EuiButton onClick={discardChanges} fill>
+            <EuiSmallButtonEmpty onClick={closeModal}>Cancel</EuiSmallButtonEmpty>
+            <EuiSmallButton onClick={discardChanges} fill>
               Discard
-            </EuiButton>
+            </EuiSmallButton>
           </EuiModalFooter>
         </EuiModal>
       )}
diff --git a/public/components/maps_list/maps_list.tsx b/public/components/maps_list/maps_list.tsx
index 7cc57d06..29a9c20f 100644
--- a/public/components/maps_list/maps_list.tsx
+++ b/public/components/maps_list/maps_list.tsx
@@ -11,7 +11,7 @@ import {
   EuiPageBody,
   EuiPageContentBody,
   EuiLink,
-  EuiButton,
+  EuiSmallButton,
   EuiPageHeader,
 } from '@elastic/eui';
 import {
@@ -110,9 +110,9 @@ export const MapsList = () => {
       pageTitle="Create your first map"
       description="There is no map to display, let's create your first map."
       rightSideItems={[
-        <EuiButton fill onClick={navigateToCreateMapPage}>
+        <EuiSmallButton fill onClick={navigateToCreateMapPage}>
           Create map
-        </EuiButton>,
+        </EuiSmallButton>,
       ]}
     />
   );
diff --git a/public/components/show_error_modal.tsx b/public/components/show_error_modal.tsx
index 885f177e..f656b6c2 100644
--- a/public/components/show_error_modal.tsx
+++ b/public/components/show_error_modal.tsx
@@ -5,6 +5,7 @@
 
 import React, { useState } from 'react';
 import {
+  EuiSmallButton,
   EuiButton,
   EuiModal,
   EuiModalBody,
@@ -42,7 +43,7 @@ const ShowErrorModal = (props: ShowErrorModalProps) => {
         </EuiModalBody>
 
         <EuiModalFooter>
-          <EuiButton
+          <EuiSmallButton
             id="closeModal"
             aria-label="closeModal"
             data-testid="closeModal"
@@ -50,7 +51,7 @@ const ShowErrorModal = (props: ShowErrorModalProps) => {
             fill
           >
             Close
-          </EuiButton>
+          </EuiSmallButton>
         </EuiModalFooter>
       </EuiModal>
     );
diff --git a/public/components/tooltip/tooltipHeaderContent.tsx b/public/components/tooltip/tooltipHeaderContent.tsx
index 7373b38f..9e2c1159 100644
--- a/public/components/tooltip/tooltipHeaderContent.tsx
+++ b/public/components/tooltip/tooltipHeaderContent.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiTextColor } from '@elastic/eui';
+import { EuiSmallButtonIcon, EuiFlexGroup, EuiFlexItem, EuiTextColor } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import React from 'react';
 
@@ -25,7 +25,7 @@ const TooltipHeaderContent = (props: Props) => {
       </EuiFlexItem>
       {props.showCloseButton && (
         <EuiFlexItem key="closeButton" grow={false}>
-          <EuiButtonIcon
+          <EuiSmallButtonIcon
             onClick={() => {
               return props.onClose();
             }}
diff --git a/public/components/tooltip/tooltipTable.tsx b/public/components/tooltip/tooltipTable.tsx
index 8d10734f..069ab835 100644
--- a/public/components/tooltip/tooltipTable.tsx
+++ b/public/components/tooltip/tooltipTable.tsx
@@ -5,7 +5,7 @@
 
 import {
   EuiBasicTable,
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiComboBoxOptionOption,
   EuiFlexGroup,
   EuiFlexItem,
@@ -170,7 +170,7 @@ const TooltipTable = ({
       <EuiFlexGroup justifyContent="spaceAround" alignItems="center" gutterSize="none">
         {showLayerSelection && options?.length > 1 && (
           <EuiFlexItem>
-            <EuiComboBox<number>
+            <EuiCompressedComboBox<number>
               placeholder="Select a layer"
               selectedOptions={selectedLayers}
               singleSelection={{ asPlainText: true }}
diff --git a/public/components/vector_upload_options.tsx b/public/components/vector_upload_options.tsx
index 4eb903f3..6ced9a0d 100644
--- a/public/components/vector_upload_options.tsx
+++ b/public/components/vector_upload_options.tsx
@@ -8,15 +8,16 @@ import React, { useState } from 'react';
 import path from 'path';
 import {
   EuiButton,
-  EuiFilePicker,
+  EuiSmallButton,
+  EuiCompressedFilePicker,
   EuiFlexItem,
   EuiFlexGroup,
   EuiText,
   EuiSpacer,
   EuiCard,
-  EuiFieldText,
+  EuiCompressedFieldText,
   EuiTextColor,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiCodeBlock,
 } from '@elastic/eui';
 import { getIndex, postGeojson } from '../services';
@@ -323,8 +324,8 @@ const VectorUploadOptions = (props: RegionMapOptionsProps) => {
         </EuiText>
         <EuiSpacer size="m" aria-label="medium-spacer" />
 
-        <EuiFormRow aria-label="form-row-for-file-picker">
-          <EuiFilePicker
+        <EuiCompressedFormRow aria-label="form-row-for-file-picker">
+          <EuiCompressedFilePicker
             id="filePicker"
             data-testid="filePicker"
             data-test-subj="filePicker"
@@ -337,7 +338,7 @@ const VectorUploadOptions = (props: RegionMapOptionsProps) => {
             required={true}
             aria-label="geojson-file-picker"
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
         <EuiSpacer size="m" aria-label="medium-spacer" />
 
         <EuiText size="xs" color="subdued" aria-label="geojson-file-format-text">
@@ -356,7 +357,7 @@ const VectorUploadOptions = (props: RegionMapOptionsProps) => {
         </EuiText>
         <EuiSpacer size="m" aria-label="medium-spacer" />
 
-        <EuiFieldText
+        <EuiCompressedFieldText
           data-testid="customIndex"
           data-test-subj="customIndex"
           tabIndex="0"
@@ -391,7 +392,7 @@ const VectorUploadOptions = (props: RegionMapOptionsProps) => {
         <EuiSpacer size="m" aria-label="medium-spacer" />
 
         <div className="importFileButton">
-          <EuiButton
+          <EuiSmallButton
             id="submitButton"
             type="button"
             fill
@@ -400,7 +401,7 @@ const VectorUploadOptions = (props: RegionMapOptionsProps) => {
             aria-label="import-file-button"
           >
             Import file
-          </EuiButton>
+          </EuiSmallButton>
         </div>
       </EuiCard>
     </div>