From bbfbee100bf965b07e5d86db354b5f21df39b07e Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Mon, 1 Jun 2020 15:31:55 +0100
Subject: [PATCH 1/5] UI update for dropdown

---
 .../ComponentDropdownMenu.svelte              | 56 +++++++++++--------
 .../ComponentsHierarchyChildren.svelte        |  8 +--
 .../userInterface/propertyCategories.js       | 12 ++--
 packages/builder/src/pages/_layout.svelte     |  2 +-
 4 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
index 712031aa3d..a9edabfd16 100644
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@@ -1,4 +1,4 @@
-<script>
+ <script>
   import { MoreIcon } from "components/common/Icons"
   import { store } from "builderStore"
   import { getComponentDefinition } from "builderStore/store"
@@ -155,24 +155,16 @@
     <MoreIcon />
   </button>
   <ul class="menu" bind:this={dropdownEl} on:click={hideDropdown}>
-    <li on:click={() => confirmDeleteDialog.show()}>Delete</li>
-    <li on:click={moveUpComponent}>Move up</li>
-    <li on:click={moveDownComponent}>Move down</li>
-    <li on:click={copyComponent}>Duplicate</li>
-    <li on:click={() => storeComponentForCopy(true)}>Cut</li>
-    <li on:click={() => storeComponentForCopy(false)}>Copy</li>
-    <hr />
-    <li class:disabled={noPaste} on:click={() => pasteComponent('above')}>
-      Paste above
-    </li>
-    <li class:disabled={noPaste} on:click={() => pasteComponent('below')}>
-      Paste below
-    </li>
-    <li
-      class:disabled={noPaste || noChildrenAllowed}
-      on:click={() => pasteComponent('inside')}>
-      Paste inside
-    </li>
+    <li class="item" on:click={() => confirmDeleteDialog.show()}><i class="icon ri-delete-bin-2-line"></i>Delete</li>
+    <li class="item" on:click={moveUpComponent}><i class="icon ri-arrow-up-line"></i>Move up</li>
+    <li class="item" on:click={moveDownComponent}><i class="icon ri-arrow-down-line"></i>Move down</li>
+    <li class="item" on:click={copyComponent}><i class="icon ri-repeat-one-line"></i>Duplicate</li>
+    <li class="item" on:click={() => storeComponentForCopy(true)}><i class="icon ri-scissors-cut-line"></i>Cut</li>
+    <li class="item" on:click={() => storeComponentForCopy(false)}><i class="icon ri-file-copy-line"></i>Copy</li>
+    <hr class="hr-style">
+    <li class="item" class:disabled={noPaste} on:click={() => pasteComponent('above')}><i class="icon ri-insert-row-top"></i>Paste above</li>
+    <li class="item" class:disabled={noPaste} on:click={() => pasteComponent('below')}><MoreIcon /></i>Paste below</li>
+    <li class="item" class:disabled={noPaste || noChildrenAllowed} on:click={() => pasteComponent('inside')}>Paste inside</li>
   </ul>
 </div>
 
@@ -195,33 +187,44 @@
     padding: 5px;
     background: transparent;
     cursor: pointer;
-    color: var(--button-text);
+    color: var(--ink);
     outline: none;
   }
 
   .menu {
     z-index: 100000;
     overflow: visible;
-    padding: 10px 0;
+    padding: 12px 0px;
+    border-radius: 5px;
   }
 
   .menu li {
     border-style: none;
     background-color: transparent;
     list-style-type: none;
-    padding: 4px 5px 4px 15px;
+    padding: 4px 16px;
     margin: 0;
     width: 100%;
     box-sizing: border-box;
   }
 
+  .item {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+  }
+
+  .icon {
+    margin-right: 8px;
+  }
+
   .menu li:not(.disabled) {
     cursor: pointer;
-    color: var(--ink);
+    color: var(--ink-light);
   }
 
   .menu li:not(.disabled):hover {
-    color: var(--button-text);
+    color: var(--ink);
     background-color: var(--grey-light);
   }
 
@@ -229,4 +232,9 @@
     color: var(--grey-dark);
     cursor: default;
   }
+
+  .hr-style {
+    margin: 8px 0;
+    color: var(--grey-dark)
+  }
 </style>
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index 344e02d127..057cbd0be2 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -78,9 +78,9 @@
 
   .actions {
     display: none;
-    height: 20px;
-    width: 28px;
-    color: var(--slate);
+    height: 24px;
+    width: 24px;
+    color: var(--ink);
     padding: 0px 5px;
     border-style: none;
     background: rgba(0, 0, 0, 0);
@@ -89,7 +89,7 @@
   }
 
   .item:hover {
-    background: #fafafa;
+    background: var(--grey-light);
     cursor: pointer;
   }
   .item:hover .actions {
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 35d624140a..f4b75601f5 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -22,8 +22,9 @@ export const layout = [
     label: "Direction",
     key: "flex-direction",
     control: OptionSelect,
-    initialValue: "Row",
+    initialValue: "Select Option",
     options: [
+      { label: "Select Option", value: "" },
       { label: "Row", value: "row" },
       { label: "Row Reverse", value: "rowReverse" },
       { label: "column", value: "column" },
@@ -34,8 +35,9 @@ export const layout = [
     label: "Justify",
     key: "justify-content",
     control: OptionSelect,
-    initialValue: "Flex Start",
+    initialValue: "Select Option",
     options: [
+      { label: "Select Option", value: "" },
       { label: "Flex Start", value: "flex-start" },
       { label: "Flex End", value: "flex-end" },
       { label: "Center", value: "center" },
@@ -48,8 +50,9 @@ export const layout = [
     label: "Align",
     key: "align-items",
     control: OptionSelect,
-    initialValue: "Flex Start",
+    initialValue: "Select Option",
     options: [
+      { label: "Select Option", value: "" },
       { label: "Flex Start", value: "flex-start" },
       { label: "Flex End", value: "flex-end" },
       { label: "Center", value: "center" },
@@ -61,8 +64,9 @@ export const layout = [
     label: "Wrap",
     key: "flex-wrap",
     control: OptionSelect,
-    initialValue: "NoWrap",
+    initialValue: "Select Option",
     options: [
+      { label: "Select Option", value: "" },
       { label: "No Wrap", value: "nowrap" },
       { label: "Wrap", value: "wrap" },
       { label: "Wrap Reverse", value: "wrap-reverse" },
diff --git a/packages/builder/src/pages/_layout.svelte b/packages/builder/src/pages/_layout.svelte
index 001561cae9..8ad997205b 100644
--- a/packages/builder/src/pages/_layout.svelte
+++ b/packages/builder/src/pages/_layout.svelte
@@ -197,7 +197,7 @@
   .nav-item-title {
     font-size: 14px;
     color: var(--ink);
-    font-weight: 500;
+    font-weight: 400;
     margin-left: 12px;
   }
 

From 658c59d1d0b16167900d363f4906a0563fce8188 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Mon, 1 Jun 2020 17:17:35 +0100
Subject: [PATCH 2/5] Update ComponentDropdownMenu.svelte

---
 .../src/components/userInterface/ComponentDropdownMenu.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
index a9edabfd16..a4e8a1f7b3 100644
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@@ -163,8 +163,8 @@
     <li class="item" on:click={() => storeComponentForCopy(false)}><i class="icon ri-file-copy-line"></i>Copy</li>
     <hr class="hr-style">
     <li class="item" class:disabled={noPaste} on:click={() => pasteComponent('above')}><i class="icon ri-insert-row-top"></i>Paste above</li>
-    <li class="item" class:disabled={noPaste} on:click={() => pasteComponent('below')}><MoreIcon /></i>Paste below</li>
-    <li class="item" class:disabled={noPaste || noChildrenAllowed} on:click={() => pasteComponent('inside')}>Paste inside</li>
+    <li class="item" class:disabled={noPaste} on:click={() => pasteComponent('below')}><i class="icon ri-insert-row-bottom"></i>Paste below</li>
+    <li class="item" class:disabled={noPaste || noChildrenAllowed} on:click={() => pasteComponent('inside')}><i class="icon ri-insert-column-right"></i>Paste inside</li>
   </ul>
 </div>
 

From 9e26508bc2ca7055d467fba9db4b46a138299131 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Mon, 1 Jun 2020 21:18:25 +0100
Subject: [PATCH 3/5] Padding and margin input fields fix

---
 .../builder/src/components/common/Input.svelte   |  1 -
 .../ComponentsHierarchyChildren.svelte           | 16 +++++++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/common/Input.svelte b/packages/builder/src/components/common/Input.svelte
index a136b4e2f3..b80e24e000 100644
--- a/packages/builder/src/components/common/Input.svelte
+++ b/packages/builder/src/components/common/Input.svelte
@@ -16,7 +16,6 @@
     line-height: 1.3;
     padding: 12px;
     width: 164px;
-    float: right;
     max-width: 100%;
     box-sizing: border-box;
     margin: 0;
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index 344e02d127..dfa6f67faa 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -40,7 +40,7 @@
         class="budibase__nav-item item"
         class:selected={currentComponent === component}
         style="padding-left: {level * 20 + 53}px">
-        <div>{get_capitalised_name(component._component)}</div>
+        <div class="nav-item"><i class="icon ri-arrow-right-circle-fill"></i>{get_capitalised_name(component._component)}</div>
         <div class="actions">
           <ComponentDropdownMenu {component} />
         </div>
@@ -72,8 +72,6 @@
     border-radius: 3px;
     height: 35px;
     align-items: center;
-    font-weight: 400;
-    font-size: 13px;
   }
 
   .actions {
@@ -95,4 +93,16 @@
   .item:hover .actions {
     display: block;
   }
+
+  .nav-item {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: var(--ink);
+  }
+
+  .icon {
+    color: var(--ink-light);
+    margin-right: 8px;
+  }
 </style>

From 6cd94db36791819d5fbad3b29bef506dc533334e Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Mon, 1 Jun 2020 21:18:43 +0100
Subject: [PATCH 4/5]  Padding and margin fix

---
 packages/builder/src/builderStore/generate_css.js  |  4 +++-
 .../src/components/common/Inputs/InputGroup.svelte | 11 ++++-------
 .../components/userInterface/propertyCategories.js | 14 +++++++++-----
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/packages/builder/src/builderStore/generate_css.js b/packages/builder/src/builderStore/generate_css.js
index 5826d4f824..d2d6f40bdf 100644
--- a/packages/builder/src/builderStore/generate_css.js
+++ b/packages/builder/src/builderStore/generate_css.js
@@ -1,3 +1,5 @@
+import {toNumber} from "lodash/fp"
+
 export const generate_screen_css = component_arr => {
   let styles = ""
   for (const { _styles, _id, _children, _component } of component_arr) {
@@ -37,7 +39,7 @@ export const generate_css = style => {
 export const generate_array_styles = item => {
   let safeItem = item === "" ? 0 : item
   let hasPx = new RegExp("px$")
-  if (!hasPx.test(safeItem)) {
+  if (!hasPx.test(safeItem) && !isNaN(toNumber(safeItem))) {
     return `${safeItem}px`
   } else {
     return safeItem
diff --git a/packages/builder/src/components/common/Inputs/InputGroup.svelte b/packages/builder/src/components/common/Inputs/InputGroup.svelte
index ffe6880f51..f5497b2a26 100644
--- a/packages/builder/src/components/common/Inputs/InputGroup.svelte
+++ b/packages/builder/src/components/common/Inputs/InputGroup.svelte
@@ -4,7 +4,7 @@
   export let meta = []
   export let label = ""
   export let value = [0, 0, 0, 0]
-  export let type = "number"
+  export let type = "text"
   export let onChange = () => {}
 
   function handleChange(val, idx) {
@@ -28,8 +28,6 @@
 </div>
 
 <style>
-  .input-container {
-  }
 
   .label {
     flex: 0;
@@ -53,18 +51,17 @@
     border: 1px solid var(--grey);
     border-radius: 2px;
     outline: none;
-    float: right;
   }
 
-  input[type="number"]::-webkit-inner-spin-button,
-  input[type="number"]::-webkit-outer-spin-button {
+  input[type="text"]::-webkit-inner-spin-button,
+  input[type="text"]::-webkit-outer-spin-button {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     margin: 0;
   }
 
-  input[type="number"] {
+  input[type="text"] {
     -moz-appearance: textfield;
   }
 
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 35d624140a..95c6452941 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -26,7 +26,7 @@ export const layout = [
     options: [
       { label: "Row", value: "row" },
       { label: "Row Reverse", value: "rowReverse" },
-      { label: "column", value: "column" },
+      { label: "Column", value: "column" },
       { label: "Column Reverse", value: "columnReverse" },
     ],
   },
@@ -71,14 +71,18 @@ export const layout = [
 ]
 
 const spacingMeta = [
-  { placeholder: "L" },
-  { placeholder: "B" },
-  { placeholder: "R" },
   { placeholder: "T" },
+  { placeholder: "R" },
+  { placeholder: "B" },
+  { placeholder: "L" },
 ]
 
 export const spacing = [
-  { label: "Margin", key: "margin", control: InputGroup, meta: spacingMeta },
+  { label: "Margin", 
+    key: "margin", 
+    control: InputGroup,
+    meta: spacingMeta 
+  },
   {
     label: "Padding",
     key: "padding",

From c1aaeffaecda05cae5f077367ce1a9ac89463157 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Mon, 1 Jun 2020 21:34:03 +0100
Subject: [PATCH 5/5] Formatting update

---
 packages/builder/src/builderStore/generate_css.js           | 2 +-
 .../builder/src/components/common/Inputs/InputGroup.svelte  | 1 -
 .../userInterface/ComponentsHierarchyChildren.svelte        | 5 ++++-
 .../src/components/userInterface/propertyCategories.js      | 6 +-----
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/builderStore/generate_css.js b/packages/builder/src/builderStore/generate_css.js
index d2d6f40bdf..bc82cb48f1 100644
--- a/packages/builder/src/builderStore/generate_css.js
+++ b/packages/builder/src/builderStore/generate_css.js
@@ -1,4 +1,4 @@
-import {toNumber} from "lodash/fp"
+import { toNumber } from "lodash/fp"
 
 export const generate_screen_css = component_arr => {
   let styles = ""
diff --git a/packages/builder/src/components/common/Inputs/InputGroup.svelte b/packages/builder/src/components/common/Inputs/InputGroup.svelte
index f5497b2a26..95ebf1a3b4 100644
--- a/packages/builder/src/components/common/Inputs/InputGroup.svelte
+++ b/packages/builder/src/components/common/Inputs/InputGroup.svelte
@@ -28,7 +28,6 @@
 </div>
 
 <style>
-
   .label {
     flex: 0;
   }
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index dfa6f67faa..ba638c73f8 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -40,7 +40,10 @@
         class="budibase__nav-item item"
         class:selected={currentComponent === component}
         style="padding-left: {level * 20 + 53}px">
-        <div class="nav-item"><i class="icon ri-arrow-right-circle-fill"></i>{get_capitalised_name(component._component)}</div>
+        <div class="nav-item">
+          <i class="icon ri-arrow-right-circle-fill" />
+          {get_capitalised_name(component._component)}
+        </div>
         <div class="actions">
           <ComponentDropdownMenu {component} />
         </div>
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 95c6452941..ce6934c89c 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -78,11 +78,7 @@ const spacingMeta = [
 ]
 
 export const spacing = [
-  { label: "Margin", 
-    key: "margin", 
-    control: InputGroup,
-    meta: spacingMeta 
-  },
+  { label: "Margin", key: "margin", control: InputGroup, meta: spacingMeta },
   {
     label: "Padding",
     key: "padding",