Align items in add new layer modal (#256) (#267)

Signed-off-by: Junqiu Lei <junqiu@amazon.com> (cherry picked from commit 31acc44) Co-authored-by: Junqiu Lei <junqiu@amazon.com>
opensearch-project · Feb 21, 2023 · 09d26e6 · 09d26e6
1 parent 391bdb6
commit 09d26e6
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git 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
@@ -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