Properly center all path, screen and component dropdown menu icons

5 years ago · 1bd60bda31
4 changed files with 20 additions and 3 deletions
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@ -125,10 +125,9 @@
    height: 20px;
    cursor: pointer;
    position: relative;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
+    display: grid;
    margin-left: var(--spacing-s);
+    place-items: center;
  }

  .iconText {
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentDropdownMenu.svelte
@ -138,3 +138,10 @@
    onOk={deleteComponent}
  />
 {/if}
+
+<style>
+  .icon {
+    display: grid;
+    place-items: center;
+  }
+</style>
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathDropdownMenu.svelte
@ -75,4 +75,8 @@
    align-items: flex-start;
    padding-left: var(--spacing-xl);
  }
+  .icon {
+    display: grid;
+    place-items: center;
+  }
 </style>
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
@ -103,3 +103,10 @@
    confirmText="Duplicate"
  />
 </Modal>
+
+<style>
+  .icon {
+    display: grid;
+    place-items: center;
+  }
+</style>