From 400f8b42e439810dd14921763b784b4819d3bd0e 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]  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",