From fa2170ad75470ede11005680b452c0ad76686e0c Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Fri, 23 Aug 2024 13:03:19 -0700
Subject: [PATCH] [Look & Feel] Consistency and Density Changes (#659) (#661)

* consistency changes

Signed-off-by: Shey Gao <sheygao@amazon.com>

* fixed unit tests

Signed-off-by: Shey Gao <sheygao@amazon.com>

* add changelog

Signed-off-by: Shey Gao <sheygao@amazon.com>

---------

Signed-off-by: Shey Gao <sheygao@amazon.com>
Co-authored-by: Shey Gao <sheygao@amazon.com>
(cherry picked from commit ea8852ad26378ced716c36af39a0ca2fbd3ae9bc)

Co-authored-by: SheyGao <134346934+SheyGao@users.noreply.github.com>
---
 CHANGELOG.md                                     |  1 +
 .../vector_upload_options.test.tsx.snap          |  4 ++--
 .../add_layer_panel/add_layer_panel.tsx          |  8 +++++---
 public/components/filter_bar/filter_item.tsx     |  2 +-
 public/components/filter_bar/filter_options.tsx  |  2 +-
 .../layer_config/base_map_layer_config_panel.tsx |  2 +-
 .../custom_map_config_panel.tsx                  |  2 +-
 .../document_layer_config_panel.tsx              |  2 +-
 .../layer_config/layer_config_panel.tsx          | 11 ++++++++---
 .../delete_layer_modal.test.tsx                  |  3 ++-
 .../layer_control_panel/delete_layer_modal.tsx   | 16 +++++++++++-----
 .../layer_control_panel/layer_control_panel.tsx  |  1 +
 .../components/map_container/maps_messages.tsx   |  4 ++--
 public/components/maps_list/maps_list.tsx        |  1 +
 public/components/show_error_modal.tsx           |  6 ++++--
 .../spatial_filter/display_draw_helper.tsx       |  2 +-
 .../toolbar/spatial_filter/filter_by_shape.tsx   |  2 +-
 .../spatial_filter/filter_input_panel.tsx        |  1 -
 public/components/vector_upload_options.tsx      |  1 -
 19 files changed, 44 insertions(+), 27 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5e11a259..41d28b29 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,3 +24,4 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Maintenance
 * Deprecated maps multi data source display [#651](https://github.com/opensearch-project/dashboards-maps/pull/651)
 ### Refactoring
+* Consistency and Desntiy changes [#659] (https://github.com/opensearch-project/dashboards-maps/pull/659)
diff --git a/public/components/__snapshots__/vector_upload_options.test.tsx.snap b/public/components/__snapshots__/vector_upload_options.test.tsx.snap
index 65dcecb4..f21d0439 100644
--- a/public/components/__snapshots__/vector_upload_options.test.tsx.snap
+++ b/public/components/__snapshots__/vector_upload_options.test.tsx.snap
@@ -206,7 +206,7 @@ Object {
               >
                 <button
                   aria-label="import-file-button"
-                  class="euiButton euiButton--primary euiButton--small euiButton--fill"
+                  class="euiButton euiButton--primary euiButton--small"
                   id="submitButton"
                   type="button"
                 >
@@ -429,7 +429,7 @@ Object {
             >
               <button
                 aria-label="import-file-button"
-                class="euiButton euiButton--primary euiButton--small euiButton--fill"
+                class="euiButton euiButton--primary euiButton--small"
                 id="submitButton"
                 type="button"
               >
diff --git a/public/components/add_layer_panel/add_layer_panel.tsx b/public/components/add_layer_panel/add_layer_panel.tsx
index 30940b00..770cb3fe 100644
--- a/public/components/add_layer_panel/add_layer_panel.tsx
+++ b/public/components/add_layer_panel/add_layer_panel.tsx
@@ -124,11 +124,11 @@ export const AddLayerPanel = ({
           <EuiButton
             fullWidth
             size="s"
-            fill
             onClick={showModal}
             aria-label="Add layer"
             isDisabled={IsLayerConfigVisible || isMaxLayerLimitReached()}
             data-test-subj="addLayerButton"
+            iconType="plusInCircle"
           >
             Add layer
           </EuiButton>
@@ -138,7 +138,9 @@ export const AddLayerPanel = ({
         <EuiModal onClose={closeModal}>
           <EuiModalHeader>
             <EuiModalHeaderTitle>
-              <h2>Add layer</h2>
+              <EuiText size="s">
+                <h2>Add layer</h2>
+              </EuiText>
             </EuiModalHeaderTitle>
           </EuiModalHeader>
           <EuiModalBody className="addLayer__modalBody">
@@ -159,7 +161,7 @@ export const AddLayerPanel = ({
                 <EuiTitle size="s">
                   <h6>{highlightItem?.name ? highlightItem.name : 'Select a layer type'}</h6>
                 </EuiTitle>
-                <EuiText>
+                <EuiText size="s">
                   {highlightItem?.description
                     ? highlightItem.description
                     : 'Start creating your map by selecting a layer type.'}
diff --git a/public/components/filter_bar/filter_item.tsx b/public/components/filter_bar/filter_item.tsx
index caf0863c..c1da1003 100644
--- a/public/components/filter_bar/filter_item.tsx
+++ b/public/components/filter_bar/filter_item.tsx
@@ -173,7 +173,7 @@ export function FilterItem({ filterMeta, onUpdate, onRemove, id, className }: Pr
       anchorPosition="downLeft"
       panelPaddingSize="none"
     >
-      <EuiContextMenu initialPanelId={0} panels={getPanels()} />
+      <EuiContextMenu initialPanelId={0} panels={getPanels()} size="s" />
     </EuiPopover>
   );
 }
diff --git a/public/components/filter_bar/filter_options.tsx b/public/components/filter_bar/filter_options.tsx
index c6563b36..77328b69 100644
--- a/public/components/filter_bar/filter_options.tsx
+++ b/public/components/filter_bar/filter_options.tsx
@@ -120,7 +120,7 @@ export const FilterOptions = ({
           defaultMessage: 'Change all filters',
         })}
       </EuiPopoverTitle>
-      <EuiContextMenu initialPanelId={0} panels={[panelTree]} />
+      <EuiContextMenu initialPanelId={0} panels={[panelTree]} size="s"/>
     </EuiPopover>
   );
 };
diff --git a/public/components/layer_config/base_map_layer_config_panel.tsx b/public/components/layer_config/base_map_layer_config_panel.tsx
index 8b983623..c55352a7 100644
--- a/public/components/layer_config/base_map_layer_config_panel.tsx
+++ b/public/components/layer_config/base_map_layer_config_panel.tsx
@@ -28,5 +28,5 @@ export const BaseMapLayerConfigPanel = (props: Props) => {
       ),
     },
   ];
-  return <EuiTabbedContent tabs={tabs} initialSelectedTab={tabs[0]} />;
+  return <EuiTabbedContent tabs={tabs} size="s" initialSelectedTab={tabs[0]} />;
 };
diff --git a/public/components/layer_config/custom_map_config/custom_map_config_panel.tsx b/public/components/layer_config/custom_map_config/custom_map_config_panel.tsx
index 5c6d1673..2b32d6d9 100644
--- a/public/components/layer_config/custom_map_config/custom_map_config_panel.tsx
+++ b/public/components/layer_config/custom_map_config/custom_map_config_panel.tsx
@@ -43,5 +43,5 @@ export const CustomMapConfigPanel = (props: Props) => {
       ),
     },
   ];
-  return <EuiTabbedContent tabs={tabs} initialSelectedTab={tabs[0]} />;
+  return <EuiTabbedContent tabs={tabs} size="s" initialSelectedTab={tabs[0]} />;
 };
diff --git a/public/components/layer_config/documents_config/document_layer_config_panel.tsx b/public/components/layer_config/documents_config/document_layer_config_panel.tsx
index f2eb86ea..0093e48d 100644
--- a/public/components/layer_config/documents_config/document_layer_config_panel.tsx
+++ b/public/components/layer_config/documents_config/document_layer_config_panel.tsx
@@ -85,5 +85,5 @@ export const DocumentLayerConfigPanel = (props: Props) => {
       testsubj: 'settingsTab',
     },
   ];
-  return <EuiTabbedContent tabs={tabs} initialSelectedTab={tabs[0]} />;
+  return <EuiTabbedContent tabs={tabs} size="s" initialSelectedTab={tabs[0]} />;
 };
diff --git a/public/components/layer_config/layer_config_panel.tsx b/public/components/layer_config/layer_config_panel.tsx
index f8638d8b..3ca42bdc 100644
--- a/public/components/layer_config/layer_config_panel.tsx
+++ b/public/components/layer_config/layer_config_panel.tsx
@@ -22,6 +22,7 @@ import {
   EuiModalHeaderTitle,
   EuiIcon,
   EuiSpacer,
+  EuiText,
 } from '@elastic/eui';
 
 import { MapLayerSpecification } from '../../model/mapLayerType';
@@ -163,7 +164,7 @@ export const LayerConfigPanel = ({
           <EuiFlexItem grow={false}>
             <EuiSmallButton
               disabled={isUpdateDisabled}
-              iconType="play"
+              iconType="refresh"
               onClick={onUpdate}
               fill
               data-test-subj="updateButton"
@@ -176,10 +177,14 @@ export const LayerConfigPanel = ({
       {unsavedModalVisible && (
         <EuiModal onClose={closeModal}>
           <EuiModalHeader>
-            <EuiModalHeaderTitle>Unsaved changes</EuiModalHeaderTitle>
+            <EuiText size="s">
+              <h2><EuiModalHeaderTitle>Unsaved changes</EuiModalHeaderTitle></h2>
+            </EuiText>
           </EuiModalHeader>
           <EuiModalBody>
-            <p>Do you want to discard the changes?</p>
+            <EuiText size="s">
+              <p>Do you want to discard the changes?</p>
+            </EuiText>
           </EuiModalBody>
           <EuiModalFooter>
             <EuiSmallButtonEmpty onClick={closeModal}>Cancel</EuiSmallButtonEmpty>
diff --git a/public/components/layer_control_panel/delete_layer_modal.test.tsx b/public/components/layer_control_panel/delete_layer_modal.test.tsx
index 85bc626c..689331d0 100644
--- a/public/components/layer_control_panel/delete_layer_modal.test.tsx
+++ b/public/components/layer_control_panel/delete_layer_modal.test.tsx
@@ -14,7 +14,8 @@ describe('test delete layer modal', function () {
       <DeleteLayerModal layerName={'test-layer'} onCancel={() => {}} onConfirm={() => {}} />
     );
     const testInstance = deleteLayerModal.root;
-    expect(testInstance.findByType(EuiConfirmModal).props.title).toBe('Delete layer');
+    //expect(testInstance.findByType(EuiConfirmModal).props.title).toBe('Delete layer');
+    expect(testInstance.findByType(EuiConfirmModal).props.title.props.children.props.children).toBe('Delete layer');
     expect(testInstance.findByType(EuiConfirmModal).props.confirmButtonText).toBe('Delete');
     expect(testInstance.findByType(EuiConfirmModal).props.cancelButtonText).toBe('Cancel');
     expect(testInstance.findByType(EuiConfirmModal).props.buttonColor).toBe('danger');
diff --git a/public/components/layer_control_panel/delete_layer_modal.tsx b/public/components/layer_control_panel/delete_layer_modal.tsx
index 75d5cf3d..288ef388 100644
--- a/public/components/layer_control_panel/delete_layer_modal.tsx
+++ b/public/components/layer_control_panel/delete_layer_modal.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiConfirmModal } from '@elastic/eui';
+import { EuiConfirmModal, EuiText } from '@elastic/eui';
 import React from 'react';
 
 interface DeleteLayerModalProps {
@@ -14,7 +14,11 @@ interface DeleteLayerModalProps {
 export const DeleteLayerModal = ({ onCancel, onConfirm, layerName }: DeleteLayerModalProps) => {
   return (
     <EuiConfirmModal
-      title="Delete layer"
+      title={
+        <EuiText size="s">
+          <h2>Delete layer</h2>
+        </EuiText>
+      }
       onCancel={onCancel}
       onConfirm={onConfirm}
       cancelButtonText="Cancel"
@@ -22,9 +26,11 @@ export const DeleteLayerModal = ({ onCancel, onConfirm, layerName }: DeleteLayer
       buttonColor="danger"
       defaultFocusedButton="confirm"
     >
-      <p>
-        Do you want to delete layer <strong>{layerName}</strong>?
-      </p>
+      <EuiText size="s">
+        <p>
+          Do you want to delete layer <strong>{layerName}</strong>?
+        </p>
+      </EuiText>
     </EuiConfirmModal>
   );
 };
diff --git a/public/components/layer_control_panel/layer_control_panel.tsx b/public/components/layer_control_panel/layer_control_panel.tsx
index 993fc0b2..680e67fc 100644
--- a/public/components/layer_control_panel/layer_control_panel.tsx
+++ b/public/components/layer_control_panel/layer_control_panel.tsx
@@ -316,6 +316,7 @@ export const LayerControlPanel = memo(
                               <EuiFlexItem>
                                 <EuiToolTip position="top" content={getLayerTooltipContent(layer)}>
                                   <EuiListGroupItem
+                                    size="s"
                                     key={layer.id}
                                     label={layer.name}
                                     color={layerIsVisible(layer) ? 'text' : 'subdued'}
diff --git a/public/components/map_container/maps_messages.tsx b/public/components/map_container/maps_messages.tsx
index 02d0d058..0fef35d4 100644
--- a/public/components/map_container/maps_messages.tsx
+++ b/public/components/map_container/maps_messages.tsx
@@ -3,14 +3,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiLink } from '@elastic/eui';
+import { EuiLink, EuiText } from '@elastic/eui';
 import React from 'react';
 import { ToastInputFields } from '../../../../../src/core/public';
 import { toMountPoint } from '../../../../../src/plugins/opensearch_dashboards_react/public';
 
 export const MapsServiceErrorMsg: ToastInputFields = {
   title: 'The OpenSearch Maps Service is currently not available in your region',
-  text: toMountPoint(
+  text: toMountPoint( 
     <p>
       You can configure OpenSearch Dashboards to use a{' '}
       <EuiLink
diff --git a/public/components/maps_list/maps_list.tsx b/public/components/maps_list/maps_list.tsx
index 3ebcbcf3..89dc5b89 100644
--- a/public/components/maps_list/maps_list.tsx
+++ b/public/components/maps_list/maps_list.tsx
@@ -116,6 +116,7 @@ export const MapsList = () => {
             fill
             onClick={navigateToCreateMapPage}
             data-test-subj="createFirstMapButton"
+            iconType="plus"
           >
             Create map
           </EuiSmallButton>
diff --git a/public/components/show_error_modal.tsx b/public/components/show_error_modal.tsx
index f656b6c2..2b763f65 100644
--- a/public/components/show_error_modal.tsx
+++ b/public/components/show_error_modal.tsx
@@ -13,6 +13,7 @@ import {
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiCodeBlock,
+  EuiText,
 } from '@elastic/eui';
 
 export interface ShowErrorModalProps {
@@ -34,7 +35,9 @@ const ShowErrorModal = (props: ShowErrorModalProps) => {
       <EuiModal onClose={closeModal}>
         <EuiModalHeader>
           <EuiModalHeaderTitle>
-            <h1>{props.modalTitle}</h1>
+            <EuiText size="s">
+              <h2>{props.modalTitle}</h2>
+            </EuiText>
           </EuiModalHeaderTitle>
         </EuiModalHeader>
 
@@ -48,7 +51,6 @@ const ShowErrorModal = (props: ShowErrorModalProps) => {
             aria-label="closeModal"
             data-testid="closeModal"
             onClick={closeModal}
-            fill
           >
             Close
           </EuiSmallButton>
diff --git a/public/components/toolbar/spatial_filter/display_draw_helper.tsx b/public/components/toolbar/spatial_filter/display_draw_helper.tsx
index fbcd15d2..ea6205fd 100644
--- a/public/components/toolbar/spatial_filter/display_draw_helper.tsx
+++ b/public/components/toolbar/spatial_filter/display_draw_helper.tsx
@@ -52,7 +52,7 @@ export const DrawFilterShapeHelper = memo(({ map, mode, onCancel }: DrawFilterSh
           <small>{getHelpText(mode)}</small>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton fill onClick={onCancel} size={'s'}>
+          <EuiButton onClick={onCancel} size={'s'}>
             {'Cancel'}
           </EuiButton>
         </EuiFlexItem>
diff --git a/public/components/toolbar/spatial_filter/filter_by_shape.tsx b/public/components/toolbar/spatial_filter/filter_by_shape.tsx
index ca53c058..1ed8e08c 100644
--- a/public/components/toolbar/spatial_filter/filter_by_shape.tsx
+++ b/public/components/toolbar/spatial_filter/filter_by_shape.tsx
@@ -101,7 +101,7 @@ export const FilterByShape = ({
       anchorPosition="leftUp"
       data-test-subj="drawShapePopOver"
     >
-      <EuiContextMenu initialPanelId={0} panels={panels} />
+      <EuiContextMenu initialPanelId={0} panels={panels} size="s" />
     </EuiPopover>
   );
 };
diff --git a/public/components/toolbar/spatial_filter/filter_input_panel.tsx b/public/components/toolbar/spatial_filter/filter_input_panel.tsx
index 68a4bbb5..7cdce599 100644
--- a/public/components/toolbar/spatial_filter/filter_input_panel.tsx
+++ b/public/components/toolbar/spatial_filter/filter_input_panel.tsx
@@ -80,7 +80,6 @@ export const FilterInputPanel = ({
           <EuiButton
             fullWidth
             size="s"
-            fill
             aria-label={drawLabel}
             data-test-subj="add-draw-button"
             onClick={updateSpatialFilterProperties}
diff --git a/public/components/vector_upload_options.tsx b/public/components/vector_upload_options.tsx
index 0eab066a..418afcf4 100644
--- a/public/components/vector_upload_options.tsx
+++ b/public/components/vector_upload_options.tsx
@@ -395,7 +395,6 @@ const VectorUploadOptions = (props: RegionMapOptionsProps) => {
           <EuiSmallButton
             id="submitButton"
             type="button"
-            fill
             onClick={handleSubmit}
             isLoading={isLoading}
             aria-label="import-file-button"