Standardise dropdownmenus in frontend page

packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { MoreIcon } from "components/common/Icons"
   import { store } from "builderStore"
   import { getComponentDefinition } from "builderStore/storeUtils"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
@@ -109,9 +108,9 @@
 </script>
 
 <div bind:this={anchor} on:click|stopPropagation={() => {}}>
-  <button on:click={dropdown.show}>
+  <div class="icon" on:click={dropdown.show}>
-    <MoreIcon />
+    <i class="ri-more-line" />
-  </button>
+  </div>
 </div>
 <DropdownMenu
   class="menu"
@@ -122,27 +121,27 @@
   align="left">
   <ul>
     <li class="item" on:click={() => confirmDeleteDialog.show()}>
-      <i class="icon ri-delete-bin-2-line" />
+      <i class="ri-delete-bin-2-line" />
       Delete
     </li>
     <li class="item" on:click={moveUpComponent}>
-      <i class="icon ri-arrow-up-line" />
+      <i class="ri-arrow-up-line" />
       Move up
     </li>
     <li class="item" on:click={moveDownComponent}>
-      <i class="icon ri-arrow-down-line" />
+      <i class="ri-arrow-down-line" />
       Move down
     </li>
     <li class="item" on:click={copyComponent}>
-      <i class="icon ri-repeat-one-line" />
+      <i class="ri-repeat-one-line" />
       Duplicate
     </li>
     <li class="item" on:click={() => storeComponentForCopy(true)}>
-      <i class="icon ri-scissors-cut-line" />
+      <i class="ri-scissors-cut-line" />
       Cut
     </li>
     <li class="item" on:click={() => storeComponentForCopy(false)}>
-      <i class="icon ri-file-copy-line" />
+      <i class="ri-file-copy-line" />
       Copy
     </li>
     <hr class="hr-style" />
@@ -150,21 +149,21 @@
       class="item"
       class:disabled={noPaste}
       on:click={() => pasteComponent('above')}>
-      <i class="icon ri-insert-row-top" />
+      <i class="ri-insert-row-top" />
       Paste above
     </li>
     <li
       class="item"
       class:disabled={noPaste}
       on:click={() => pasteComponent('below')}>
-      <i class="icon ri-insert-row-bottom" />
+      <i class="ri-insert-row-bottom" />
       Paste below
     </li>
     <li
       class="item"
       class:disabled={noPaste || noChildrenAllowed}
       on:click={() => pasteComponent('inside')}>
-      <i class="icon ri-insert-column-right" />
+      <i class="ri-insert-column-right" />
       Paste inside
     </li>
   </ul>
@@ -181,7 +180,7 @@
   ul {
     list-style: none;
     padding: 0;
-    margin: var(--spacing-xs) 0;
+    margin: var(--spacing-s) 0;
   }
 
   li {
@@ -190,44 +189,29 @@
     font-size: var(--font-size-xs);
     color: var(--ink);
     padding: var(--spacing-s) var(--spacing-m);
-    margin: auto 0px;
+    margin: auto 0;
     align-items: center;
     cursor: pointer;
   }
-
+  li:not(.disabled):hover {
-  button {
-    border-style: none;
-    border-radius: 2px;
-    padding: 0;
-    background: transparent;
-    cursor: pointer;
-    color: var(--ink);
-    outline: none;
-  }
-
-  li:hover {
     background-color: var(--grey-2);
   }
-
   li:active {
     color: var(--blue);
   }
-
+  li i {
-  .item {
-    display: flex;
-    align-items: center;
-    font-size: 14px;
-  }
-
-  .icon {
     margin-right: 8px;
+    font-size: var(--font-size-s);
   }
-
+  li.disabled {
-  .disabled {
     color: var(--grey-4);
     cursor: default;
   }
 
+  .icon i {
+    font-size: 16px;
+  }
+
   .hr-style {
     margin: 8px 0;
     color: var(--grey-4);

packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte

@@ -190,9 +190,9 @@
   .item {
     display: grid;
     grid-template-columns: 1fr auto auto auto;
-    padding: 0px 5px 0px 15px;
+    padding: 0 var(--spacing-m);
-    margin: auto 0px;
+    margin: 0;
-    border-radius: 5px;
+    border-radius: var(--border-radius-m);
     height: 36px;
     align-items: center;
   }
@@ -205,9 +205,6 @@
   .actions {
     display: none;
     color: var(--ink);
-    padding: 0 5px;
-    width: 24px;
-    height: 24px;
     border-style: none;
     background: rgba(0, 0, 0, 0);
     cursor: pointer;

packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { MoreIcon } from "components/common/Icons"
   import { store } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import api from "builderStore/api"
@@ -10,7 +9,7 @@
 
   let confirmDeleteDialog
   let dropdown
-  let buttonForDropdown
+  let anchor
 
   const hideDropdown = () => {
     dropdown.hide()
@@ -34,14 +33,17 @@
   }
 </script>
 
-<div class="root boundary" on:click|stopPropagation={() => {}}>
+<div
-  <button on:click={() => dropdown.show()} bind:this={buttonForDropdown}>
+  bind:this={anchor}
-    <MoreIcon />
+  class="root boundary"
-  </button>
+  on:click|stopPropagation={() => {}}>
-  <DropdownMenu bind:this={dropdown} anchor={buttonForDropdown}>
+  <div class="icon" on:click={() => dropdown.show()}>
-    <ul class="menu" on:click={hideDropdown}>
+    <i class="ri-more-line" />
-      <li class="item" on:click={() => confirmDeleteDialog.show()}>
+  </div>
-        <i class="icon ri-delete-bin-2-line" />
+  <DropdownMenu bind:this={dropdown} {anchor} align="left">
+    <ul on:click={hideDropdown}>
+      <li on:click={() => confirmDeleteDialog.show()}>
+        <i class="ri-delete-bin-2-line" />
         Delete
       </li>
     </ul>
@@ -71,40 +73,40 @@
     outline: none;
   }
 
-  .menu {
+  ul {
     z-index: 100000;
     overflow: visible;
-    padding: var(--spacing-xs) 0;
+    margin: var(--spacing-s) 0;
     border-radius: var(--border-radius-s);
+    padding: 0;
   }
 
-  .menu li {
+  li {
-    border-style: none;
-    background-color: transparent;
-    list-style-type: none;
-    padding: 4px 16px;
-    margin: 0;
-    width: 100%;
-    box-sizing: border-box;
-  }
-
-  .item {
     display: flex;
+    font-family: var(--font-sans);
+    font-size: var(--font-size-xs);
+    color: var(--ink);
+    padding: var(--spacing-s) var(--spacing-m);
+    margin: auto 0;
     align-items: center;
+    cursor: pointer;
+  }
+  li:not(.disabled):hover {
+    background-color: var(--grey-2);
+  }
+  li:active {
+    color: var(--blue);
+  }
+  li i {
+    margin-right: 8px;
     font-size: var(--font-size-s);
   }
-
+  li.disabled {
-  .icon {
+    color: var(--grey-4);
-    margin-right: 8px;
+    cursor: default;
   }
 
-  .menu li:not(.disabled) {
+  .icon i {
-    cursor: pointer;
+    font-size: 16px;
-    color: var(--ink);
-  }
-
-  .menu li:not(.disabled):hover {
-    color: var(--ink);
-    background-color: var(--grey-1);
   }
 </style>