From f29de61dde70b649b432395755d7e5a892f84327 Mon Sep 17 00:00:00 2001
From: pngwn <hello@pngwn.io>
Date: Fri, 21 Feb 2020 11:09:37 +0000
Subject: [PATCH] Use remix icons for consistency. Styling tweaks.

---
 .../src/common/Icons/ChevronDown.svelte       | 18 ++++++-----
 .../builder/src/common/Icons/ChevronUp.svelte | 18 ++++++-----
 packages/builder/src/common/Icons/Copy.svelte | 20 +++++++-----
 .../builder/src/common/Icons/XCircle.svelte   | 32 ++++++-------------
 .../ComponentsHierarchyChildren.svelte        | 29 ++++++++++++-----
 5 files changed, 63 insertions(+), 54 deletions(-)

diff --git a/packages/builder/src/common/Icons/ChevronDown.svelte b/packages/builder/src/common/Icons/ChevronDown.svelte
index 4e678136ac..6300702ae9 100644
--- a/packages/builder/src/common/Icons/ChevronDown.svelte
+++ b/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>
-
-<style>
-svg {
-    height: 100%;
-    width: 100%;
-}
-</style>
\ No newline at end of file
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="100%"
+  height="100%">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    fill="currentColor"
+    d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" />
+</svg>
diff --git a/packages/builder/src/common/Icons/ChevronUp.svelte b/packages/builder/src/common/Icons/ChevronUp.svelte
index 8a0e3246a5..fcdd07176b 100644
--- a/packages/builder/src/common/Icons/ChevronUp.svelte
+++ b/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>
-
-<style>
-svg {
-    height: 100%;
-    width: 100%;
-}
-</style>
\ No newline at end of file
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="100%"
+  height="100%">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    fill="currentColor"
+    d="M12 10.828l-4.95 4.95-1.414-1.414L12 8l6.364 6.364-1.414 1.414z" />
+</svg>
diff --git a/packages/builder/src/common/Icons/Copy.svelte b/packages/builder/src/common/Icons/Copy.svelte
index f8fdc25663..eb37af47cc 100644
--- a/packages/builder/src/common/Icons/Copy.svelte
+++ b/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>
-
-<style>
-svg {
-    height: 100%;
-    width: 100%;
-}
-</style>
\ No newline at end of file
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="100%"
+  height="100%">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    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>
diff --git a/packages/builder/src/common/Icons/XCircle.svelte b/packages/builder/src/common/Icons/XCircle.svelte
index 1b0aae0a20..77742e644a 100644
--- a/packages/builder/src/common/Icons/XCircle.svelte
+++ b/packages/builder/src/common/Icons/XCircle.svelte
@@ -1,23 +1,11 @@
-<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-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
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="100%"
+  height="100%">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    fill="currentColor"
+    d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414
+    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" />
 </svg>
-
-
-<style>
-svg {
-    height: 100%;
-    width: 100%;
-}
-</style>
\ No newline at end of file
diff --git a/packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte
index 819ab6d3c6..5b06e0dd5b 100644
--- a/packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte
+++ b/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>