[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 ea8852a) Co-authored-by: SheyGao <134346934+SheyGao@users.noreply.github.com>
opensearch-project · Aug 23, 2024 · fa2170a · fa2170a
1 parent e3235e3
commit fa2170a
Show file tree

Hide file tree

Showing 19 changed files with 44 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,17 +14,23 @@ 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"
       confirmButtonText="Delete"
       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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -395,7 +395,6 @@ const VectorUploadOptions = (props: RegionMapOptionsProps) => {
           <EuiSmallButton
             id="submitButton"
             type="button"
-            fill
             onClick={handleSubmit}
             isLoading={isLoading}
             aria-label="import-file-button"