From 09d26e678ba55a7893c84f2a93257500ab21f003 Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Tue, 21 Feb 2023 10:11:14 -0800
Subject: [PATCH] Align items in add new layer modal (#256) (#267)

Signed-off-by: Junqiu Lei <junqiu@amazon.com>
(cherry picked from commit 31acc44dd86a67869df70a2010308cd6ddb96456)

Co-authored-by: Junqiu Lei <junqiu@amazon.com>
---
 .../add_layer_panel/add_layer_panel.scss         | 15 ++++++++++++++-
 .../add_layer_panel/add_layer_panel.tsx          | 16 ++++++++--------
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/public/components/add_layer_panel/add_layer_panel.scss b/public/components/add_layer_panel/add_layer_panel.scss
index 0209fa59..292153d0 100644
--- a/public/components/add_layer_panel/add_layer_panel.scss
+++ b/public/components/add_layer_panel/add_layer_panel.scss
@@ -8,5 +8,18 @@
 }
 
 .addLayerDialog__description {
-  width: 272px;
+  width: 16 * $euiSizeM;
+}
+
+.addLayer__types {
+  width: 5 * $euiSizeL;
+  height: 5 * $euiSizeL;
+}
+
+.addLayer__modalBody {
+  padding: 0;
+
+  .addLayer__selection {
+    width: 10 * $euiSizeL
+  }
 }
diff --git a/public/components/add_layer_panel/add_layer_panel.tsx b/public/components/add_layer_panel/add_layer_panel.tsx
index c06aa078..c1ebed8e 100644
--- a/public/components/add_layer_panel/add_layer_panel.tsx
+++ b/public/components/add_layer_panel/add_layer_panel.tsx
@@ -19,6 +19,7 @@ import {
   EuiKeyPadMenuItem,
   EuiSpacer,
   EuiText,
+  EuiKeyPadMenu,
 } from '@elastic/eui';
 import './add_layer_panel.scss';
 import {
@@ -77,6 +78,7 @@ export const AddLayerPanel = ({
         onMouseEnter={() => setHighlightItem(layerItem)}
         onMouseLeave={() => setHighlightItem(null)}
         onBlur={() => setHighlightItem(null)}
+        className={'addLayer__types'}
       >
         <EuiIcon type={layerItem.icon} size="xl" color="secondary" />
       </EuiKeyPadMenuItem>
@@ -95,6 +97,7 @@ export const AddLayerPanel = ({
         onMouseEnter={() => setHighlightItem(layerItem)}
         onMouseLeave={() => setHighlightItem(null)}
         onBlur={() => setHighlightItem(null)}
+        className="addLayer__types"
       >
         <EuiIcon type={layerItem.icon} size="xl" color="secondary" />
       </EuiKeyPadMenuItem>
@@ -141,27 +144,24 @@ export const AddLayerPanel = ({
               <h2>Add layer</h2>
             </EuiModalHeaderTitle>
           </EuiModalHeader>
-          <EuiModalBody>
+          <EuiModalBody className="addLayer__modalBody">
             <EuiFlexGroup>
-              <EuiFlexItem>
+              <EuiFlexItem className="addLayer__selection">
                 <EuiTitle size="s">
                   <h6>Data layer</h6>
                 </EuiTitle>
-                <EuiSpacer size="s" />
-                <EuiFlexGroup gutterSize="xs">{dataLayerItems}</EuiFlexGroup>
-                <EuiSpacer size="s" />
+                <EuiKeyPadMenu>{dataLayerItems}</EuiKeyPadMenu>
                 <EuiHorizontalRule margin="xs" />
+                <EuiSpacer size="m" />
                 <EuiTitle size="s">
                   <h6>Base layer</h6>
                 </EuiTitle>
-                <EuiSpacer size="s" />
-                <EuiFlexGroup gutterSize="xs">{baseLayersItems}</EuiFlexGroup>
+                <EuiKeyPadMenu>{baseLayersItems}</EuiKeyPadMenu>
               </EuiFlexItem>
               <EuiFlexItem className="addLayerDialog__description">
                 <EuiTitle size="s">
                   <h6>{highlightItem?.name ? highlightItem.name : 'Select a layer type'}</h6>
                 </EuiTitle>
-                <EuiSpacer size="m" />
                 <EuiText>
                   {highlightItem?.description
                     ? highlightItem.description