From fc73bb2341ecef3dbe363929265bb834026f6f75 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Thu, 28 May 2020 09:23:36 +0100
Subject: [PATCH 1/4] Color fix

---
 .../src/components/userInterface/FlatButton.svelte     | 10 +++++-----
 .../components/userInterface/FlatButtonGroup.svelte    |  1 -
 .../src/components/userInterface/propertyCategories.js |  3 +--
 .../userInterface/temporaryPanelStructure.js           |  2 +-
 4 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/components/userInterface/FlatButton.svelte b/packages/builder/src/components/userInterface/FlatButton.svelte
index 9e11a546e3..7fb5742c46 100644
--- a/packages/builder/src/components/userInterface/FlatButton.svelte
+++ b/packages/builder/src/components/userInterface/FlatButton.svelte
@@ -19,20 +19,20 @@
 <style>
   .flatbutton {
     cursor: pointer;
-    padding: 8px 4px;
+    padding: 8px 2px;
     text-align: center;
     background: #ffffff;
     color: var(--ink-light);
     border-radius: 5px;
     font-family: Roboto;
-    font-size: 13px;
-    font-weight: 500;
-    transition: background 0.5s, color 0.5s ease;
+    font-size: 14px;
+    font-weight: 400;
+    transition: all 0.3s;
     text-rendering: optimizeLegibility;
   }
 
   .selected {
-    background: #808192;
+    background: var(--ink-light);
     color: #ffffff;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
index 9081694c0c..ffa1a98393 100644
--- a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
+++ b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
@@ -1,6 +1,5 @@
 <script>
   import { onMount } from "svelte"
-
   import FlatButton from "./FlatButton.svelte"
   export let buttonProps = []
   export let isMultiSelect = false
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 96c11bec38..26e2365332 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -148,8 +148,7 @@ export const typography = [
   {
     label: "Color",
     key: "color",
-    control: OptionSelect,
-    options: ["black", "white", "red", "blue", "green"],
+    control: Input,
   },
   {
     label: "align",
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 072bc143ac..ed084afbef 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -295,7 +295,7 @@ export default {
           description:
             "This component is a placeholder for the rendering of a screen within a page.",
           icon: "ri-crop-2-fill",
-          commonProps: {},
+          commonProps: { design: { ...all } },
           children: [],
         },
         {

From 8e019a3f6da1eb5e9bb96e03ea0c59dcd34f497f Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Thu, 28 May 2020 09:37:54 +0100
Subject: [PATCH 2/4] Sweet transition

---
 .../builder/src/components/userInterface/ItemTab/Item.svelte   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/userInterface/ItemTab/Item.svelte b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
index cd51e42564..e61d80aaa1 100644
--- a/packages/builder/src/components/userInterface/ItemTab/Item.svelte
+++ b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
@@ -1,8 +1,9 @@
 <script>
+	import { fly } from 'svelte/transition';
   export let item
 </script>
 
-<div class="item-item" on:click>
+<div class="item-item" transition:fly="{{ y: 100, duration: 1000 }}" on:click>
   <div class="item-icon">
     <i class={item.icon} />
   </div>

From 8f731286219f51ce75cfac6cc90e281d080fa31f Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Thu, 28 May 2020 19:41:07 +0100
Subject: [PATCH 3/4] Update propertyCategories.js

New fonts added
Z-index added
initial values changed
Position fixed
New position props added
Background color changed to an input
---
 .../userInterface/propertyCategories.js       | 98 ++++++++++++++-----
 1 file changed, 75 insertions(+), 23 deletions(-)

diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 26e2365332..a0ca139459 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -11,9 +11,8 @@ export const layout = [
     label: "Display",
     key: "display",
     control: OptionSelect,
-    initialValue: "Select Option",
+    initialValue: "Flex",
     options: [
-      { label: "Select Option", value: "Na" },
       { label: "Flex", value: "flex" },
       { label: "Inline Flex", value: "inline-flex" },
     ],
@@ -22,9 +21,8 @@ export const layout = [
     label: "Direction",
     key: "flex-direction",
     control: OptionSelect,
-    initialValue: "Select Option",
+    initialValue: "Row",
     options: [
-      { label: "Select Option", value: "Na" },
       { label: "Row", value: "row" },
       { label: "Row Reverse", value: "rowReverse" },
       { label: "column", value: "column" },
@@ -35,9 +33,8 @@ export const layout = [
     label: "Justify",
     key: "justify-content",
     control: OptionSelect,
-    initialValue: "Select Option",
+    initialValue: "Flex Start",
     options: [
-      { label: "Select Option", value: "Na" },
       { label: "Flex Start", value: "flex-start" },
       { label: "Flex End", value: "flex-end" },
       { label: "Center", value: "center" },
@@ -50,9 +47,8 @@ export const layout = [
     label: "Align",
     key: "align-items",
     control: OptionSelect,
-    initialValue: "Select Option",
+    initialValue: "Flex Start",
     options: [
-      { label: "Select Option", value: "Na" },
       { label: "Flex Start", value: "flex-start" },
       { label: "Flex End", value: "flex-end" },
       { label: "Center", value: "center" },
@@ -66,7 +62,6 @@ export const layout = [
     control: OptionSelect,
     initialValue: "Wrap",
     options: [
-      { label: "Select Option", value: "Na" },
       { label: "Wrap", value: "wrap" },
       { label: "No Wrap", value: "nowrap" },
       { label: "Wrap Reverse", value: "wrap-reverse" },
@@ -80,8 +75,13 @@ const spacingMeta = [
   { placeholder: "R" },
   { placeholder: "T" },
 ]
+
 export const spacing = [
-  { label: "Margin", key: "margin", control: InputGroup, meta: spacingMeta },
+  { label: "Margin", 
+    key: "margin", 
+    control: InputGroup, 
+    meta: spacingMeta 
+  },
   {
     label: "Padding",
     key: "padding",
@@ -104,14 +104,40 @@ export const position = [
     label: "Position",
     key: "position",
     control: OptionSelect,
+    initialValue: "Wrap",
     options: [
-      { label: "static" },
-      { label: "relative" },
-      { label: "fixed" },
-      { label: "absolute" },
-      { label: "sticky" },
+      { label: "Static", value: "static"},
+      { label: "Relative", value: "relative"},
+      { label: "Fixed", value: "fixed"},
+      { label: "Absolute", value: "absolute"},
+      { label: "Sticky", value: "sticky"},
     ],
   },
+  {
+    label: "Top",
+    key: "top",
+    control: Input,
+  },
+  {
+    label: "Right",
+    key: "right",
+    control: Input,
+  },
+  {
+    label: "Bottom",
+    key: "bottom",
+    control: Input,
+  },
+  {
+    label: "Left",
+    key: "left",
+    control: Input,
+  },
+  {
+    label: "Z-index",
+    key: "z-index",
+    control: Input,
+  },
 ]
 
 export const typography = [
@@ -122,13 +148,21 @@ export const typography = [
     defaultValue: "initial",
     options: [
       "initial",
-      "Times New Roman",
-      "Georgia",
       "Arial",
       "Arial Black",
+      "Cursive",
+      "Courier",
       "Comic Sans MS",
+      "Helvetica",
       "Impact",
+      "Inter",
       "Lucida Sans Unicode",
+      "Open Sans",
+      "Playfair",
+      "Roboto",
+      "Roboto Mono",
+      "Times New Roman",
+      "Verdana",
     ],
     styleBindingProperty: "font-family",
   },
@@ -164,8 +198,7 @@ export const background = [
   {
     label: "Background",
     key: "background",
-    control: OptionSelect,
-    options: ["black", "white", "red", "blue", "green"],
+    control: Input,
   },
   { label: "Image", key: "image", control: Input }, //custom
 ]
@@ -176,15 +209,34 @@ export const border = [
   {
     label: "Color",
     key: "border-color",
-    control: OptionSelect,
-    options: ["black", "white", "red", "blue", "green"],
+    control: Input,
   },
-  { label: "Style", key: "border-style", control: Input },
+  { 
+    label: "Style", 
+    key: "border-style", 
+    control: OptionSelect,
+    options: ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"],
+   },
 ]
 
 export const effects = [
   { label: "Opacity", key: "opacity", control: Input },
-  { label: "Rotate", key: "transform", control: Input }, //needs special control
+  { label: "Rotate", 
+    key: "transform", 
+    control: OptionSelect,
+    options: [
+      {label: "None", value:"rotate(0deg)"}, 
+      {label: "45 degrees", value:"rotate(45deg)"}, 
+      {label: "90 degrees", value:"rotate(90deg)"}, 
+      {label: "135 degrees", value:"rotate(135deg)"}, 
+      {label: "180 degrees", value:"rotate(180deg)"}, 
+      {label: "225 degrees", value:"rotate(225deg)"}, 
+      {label: "270 degrees", value:"rotate(270deg)"}, 
+      {label: "315 degrees", value:"rotate(315deg)"}, 
+      {label: "360 degrees", value:"rotate(360deg)"}, 
+    ],
+  }
+    , //needs special control
   { label: "Shadow", key: "box-shadow", control: Input },
 ]
 

From 13cdc81196a7ed7fc76b7b52b4853b0e615621d5 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Thu, 28 May 2020 19:42:33 +0100
Subject: [PATCH 4/4] formatting

---
 .../src/components/common/Icons/Close.svelte  | 11 +++-
 .../src/components/common/Icons/Info.svelte   |  7 ++-
 .../src/components/start/AppCard.svelte       | 22 +++----
 .../src/components/start/AppList.svelte       | 10 +--
 .../userInterface/ItemTab/Item.svelte         |  4 +-
 .../userInterface/propertyCategories.js       | 63 ++++++++++---------
 6 files changed, 67 insertions(+), 50 deletions(-)

diff --git a/packages/builder/src/components/common/Icons/Close.svelte b/packages/builder/src/components/common/Icons/Close.svelte
index e39564d9ad..b6cacd076c 100644
--- a/packages/builder/src/components/common/Icons/Close.svelte
+++ b/packages/builder/src/components/common/Icons/Close.svelte
@@ -1 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path 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>
\ No newline at end of file
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="24"
+  height="24">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    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>
diff --git a/packages/builder/src/components/common/Icons/Info.svelte b/packages/builder/src/components/common/Icons/Info.svelte
index 162a9b3887..ea9779858d 100644
--- a/packages/builder/src/components/common/Icons/Info.svelte
+++ b/packages/builder/src/components/common/Icons/Info.svelte
@@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM11 7h2v2h-2V7zm0 4h2v6h-2v-6z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10
+    10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM11 7h2v2h-2V7zm0 4h2v6h-2v-6z" />
+</svg>
diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
index a54012ac0a..2608bfa370 100644
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -1,24 +1,20 @@
 <script>
   import Button from "components/common/Button.svelte"
-  export let name, description =`A minimalist CRM which removes the noise and allows you to focus
-              on your business.`, _id;
-              
-  
+  export let name,
+    description = `A minimalist CRM which removes the noise and allows you to focus
+              on your business.`,
+    _id
 </script>
 
 <div class="apps-card">
   <h3 class="app-title">{name}</h3>
-  <p class="app-desc">
-    {description}
-  </p>
+  <p class="app-desc">{description}</p>
   <div class="card-footer">
     <div class="modified-date">Last Edited - 25th May 2020</div>
-    <a href={`/_builder/${_id}`} class="app-button">
-      Open Web App
-    </a>
+    <a href={`/_builder/${_id}`} class="app-button">Open Web App</a>
   </div>
 </div>
-          
+
 <style>
   .apps-card {
     background-color: var(--white);
@@ -33,7 +29,7 @@
     background-color: var(--grey-light);
     text-decoration: none;
   }
-  
+
   .app-title {
     font-size: 18px;
     font-weight: 700;
@@ -69,4 +65,4 @@
     transition: all 0.2s;
     box-sizing: border-box;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/builder/src/components/start/AppList.svelte b/packages/builder/src/components/start/AppList.svelte
index e3b1f572e1..a0eacbc470 100644
--- a/packages/builder/src/components/start/AppList.svelte
+++ b/packages/builder/src/components/start/AppList.svelte
@@ -13,11 +13,11 @@
     <div>
       <div>
         <div class="app-section-title">Your Web Apps</div>
-          <div class="apps">
-            {#each apps as app}
-              <AppCard {...app} />
-            {/each}
-          </div>
+        <div class="apps">
+          {#each apps as app}
+            <AppCard {...app} />
+          {/each}
+        </div>
       </div>
     </div>
   </div>
diff --git a/packages/builder/src/components/userInterface/ItemTab/Item.svelte b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
index e61d80aaa1..d4576055c6 100644
--- a/packages/builder/src/components/userInterface/ItemTab/Item.svelte
+++ b/packages/builder/src/components/userInterface/ItemTab/Item.svelte
@@ -1,9 +1,9 @@
 <script>
-	import { fly } from 'svelte/transition';
+  import { fly } from "svelte/transition"
   export let item
 </script>
 
-<div class="item-item" transition:fly="{{ y: 100, duration: 1000 }}" on:click>
+<div class="item-item" transition:fly={{ y: 100, duration: 1000 }} on:click>
   <div class="item-icon">
     <i class={item.icon} />
   </div>
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index a0ca139459..dde62f7e5a 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -77,11 +77,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",
@@ -106,11 +102,11 @@ export const position = [
     control: OptionSelect,
     initialValue: "Wrap",
     options: [
-      { label: "Static", value: "static"},
-      { label: "Relative", value: "relative"},
-      { label: "Fixed", value: "fixed"},
-      { label: "Absolute", value: "absolute"},
-      { label: "Sticky", value: "sticky"},
+      { label: "Static", value: "static" },
+      { label: "Relative", value: "relative" },
+      { label: "Fixed", value: "fixed" },
+      { label: "Absolute", value: "absolute" },
+      { label: "Sticky", value: "sticky" },
     ],
   },
   {
@@ -211,32 +207,43 @@ export const border = [
     key: "border-color",
     control: Input,
   },
-  { 
-    label: "Style", 
-    key: "border-style", 
+  {
+    label: "Style",
+    key: "border-style",
     control: OptionSelect,
-    options: ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"],
-   },
+    options: [
+      "none",
+      "hidden",
+      "dotted",
+      "dashed",
+      "solid",
+      "double",
+      "groove",
+      "ridge",
+      "inset",
+      "outset",
+    ],
+  },
 ]
 
 export const effects = [
   { label: "Opacity", key: "opacity", control: Input },
-  { label: "Rotate", 
-    key: "transform", 
+  {
+    label: "Rotate",
+    key: "transform",
     control: OptionSelect,
     options: [
-      {label: "None", value:"rotate(0deg)"}, 
-      {label: "45 degrees", value:"rotate(45deg)"}, 
-      {label: "90 degrees", value:"rotate(90deg)"}, 
-      {label: "135 degrees", value:"rotate(135deg)"}, 
-      {label: "180 degrees", value:"rotate(180deg)"}, 
-      {label: "225 degrees", value:"rotate(225deg)"}, 
-      {label: "270 degrees", value:"rotate(270deg)"}, 
-      {label: "315 degrees", value:"rotate(315deg)"}, 
-      {label: "360 degrees", value:"rotate(360deg)"}, 
+      { label: "None", value: "rotate(0deg)" },
+      { label: "45 degrees", value: "rotate(45deg)" },
+      { label: "90 degrees", value: "rotate(90deg)" },
+      { label: "135 degrees", value: "rotate(135deg)" },
+      { label: "180 degrees", value: "rotate(180deg)" },
+      { label: "225 degrees", value: "rotate(225deg)" },
+      { label: "270 degrees", value: "rotate(270deg)" },
+      { label: "315 degrees", value: "rotate(315deg)" },
+      { label: "360 degrees", value: "rotate(360deg)" },
     ],
-  }
-    , //needs special control
+  }, //needs special control
   { label: "Shadow", key: "box-shadow", control: Input },
 ]