Use remix icons for consistency. Styling tweaks.

packages/builder/src/common/Icons/ChevronDown.svelte

@@ -1,8 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
+<svg
-
+  xmlns="http://www.w3.org/2000/svg"
-<style>
+  viewBox="0 0 24 24"
-svg {
+  width="100%"
-    height: 100%;
+  height="100%">
-    width: 100%;
+  <path fill="none" d="M0 0h24v24H0z" />
-}
+  <path
-</style>
+    fill="currentColor"
+    d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" />
+</svg>

packages/builder/src/common/Icons/ChevronUp.svelte

@@ -1,8 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>
+<svg
-
+  xmlns="http://www.w3.org/2000/svg"
-<style>
+  viewBox="0 0 24 24"
-svg {
+  width="100%"
-    height: 100%;
+  height="100%">
-    width: 100%;
+  <path fill="none" d="M0 0h24v24H0z" />
-}
+  <path
-</style>
+    fill="currentColor"
+    d="M12 10.828l-4.95 4.95-1.414-1.414L12 8l6.364 6.364-1.414 1.414z" />
+</svg>

packages/builder/src/common/Icons/Copy.svelte

@@ -1,8 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
+<svg
-
+  xmlns="http://www.w3.org/2000/svg"
-<style>
+  viewBox="0 0 24 24"
-svg {
+  width="100%"
-    height: 100%;
+  height="100%">
-    width: 100%;
+  <path fill="none" d="M0 0h24v24H0z" />
-}
+  <path
-</style>
+    fill="currentColor"
+    d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45
+    1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003
+    8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z" />
+</svg>

packages/builder/src/common/Icons/XCircle.svelte

@@ -1,23 +1,11 @@
-<svg 
+<svg
-    xmlns="http://www.w3.org/2000/svg" 
+  xmlns="http://www.w3.org/2000/svg"
-    width="24" 
+  viewBox="0 0 24 24"
-    height="24" 
+  width="100%"
-    viewBox="0 0 24 24" 
+  height="100%">
-    fill="none" 
+  <path fill="none" d="M0 0h24v24H0z" />
-    stroke="currentColor" 
+  <path
-    stroke-width="2" 
+    fill="currentColor"
-    stroke-linecap="round" 
+    d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414
-    stroke-linejoin="round" 
+    1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
-    class="feather feather-x-circle">
-    <circle cx="12" cy="12" r="10"/>
-    <line x1="15" y1="9" x2="9" y2="15"/>
-    <line x1="9" y1="9" x2="15" y2="15"/>
 </svg>
-
-
-<style>
-svg {
-    height: 100%;
-    width: 100%;
-}
-</style>

packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte

@@ -40,22 +40,27 @@
       <div
         class="item"
         class:selected={currentComponent === component}
-        style="padding-left: {level * 20 + 15}px">
+        style="padding-left: {level * 20 + 53}px">
         <div>{get_capitalised_name(component._component)}</div>
         <div class="reorder-buttons">
           {#if index > 0}
             <button
+              class:solo={index === components.length - 1}
               on:click|stopPropagation={() => onMoveUpComponent(component)}>
               <ChevronUpIcon />
             </button>
           {/if}
           {#if index < components.length - 1}
-            <button on:click|stopPropagation={moveDownComponent(component)}>
+            <button
+              class:solo={index === 0}
+              on:click|stopPropagation={moveDownComponent(component)}>
               <ChevronDownIcon />
             </button>
           {/if}
         </div>
-        <button on:click|stopPropagation={() => onCopyComponent(component)}>
+        <button
+          class="copy"
+          on:click|stopPropagation={() => onCopyComponent(component)}>
           <CopyIcon />
         </button>
         <button on:click|stopPropagation={() => onDeleteComponent(component)}>
@@ -100,9 +105,16 @@
   .item button {
     display: none;
     height: 20px;
-    width: 30px;
+    width: 28px;
     color: var(--slate);
     padding: 0px 5px;
+    border-style: none;
+    background: rgba(0, 0, 0, 0);
+    cursor: pointer;
+  }
+
+  .item button.copy {
+    width: 26px;
   }
 
   .item:hover {
@@ -110,10 +122,7 @@
     cursor: pointer;
   }
   .item:hover button {
-    border-style: none;
-    background: rgba(0, 0, 0, 0);
     display: block;
-    cursor: pointer;
   }
 
   .item:hover button:hover {
@@ -134,7 +143,11 @@
 
   .reorder-buttons > button {
     flex: 1 1 auto;
-    height: 17px;
     width: 30px;
+    height: 15px;
+  }
+
+  .reorder-buttons > button.solo {
+    padding-top: 2px;
   }
 </style>