From 9ab0cedff2a171589593112067015faaf67a270f Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Wed, 3 Jun 2020 16:19:04 +0100
Subject: [PATCH 01/20] Screen and page latest

---
 .../builder/src/builderStore/store/index.js   | 10 ++++
 .../ComponentPropertiesPanel.svelte           | 52 +++++++++++++++----
 .../userInterface/FrontendNavigatePane.svelte |  1 +
 .../userInterface/SettingsView.svelte         |  4 +-
 .../userInterface/propertyCategories.js       | 16 ++++--
 5 files changed, 68 insertions(+), 15 deletions(-)

diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index 9f91550bca..3572e4e344 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -69,6 +69,7 @@ export const getStore = () => {
   store.getPathToComponent = getPathToComponent(store)
   store.addTemplatedComponent = addTemplatedComponent(store)
   store.setMetadataProp = setMetadataProp(store)
+  store.editPageOrScreen = editPageOrScreen(store)
   return store
 }
 
@@ -171,6 +172,15 @@ const createScreen = store => (screenName, route, layoutComponentName) => {
   })
 }
 
+const editPageOrScreen = store => (key, value) => {
+  store.update(state => {
+    state.currentPreviewItem[key] = value
+    _saveCurrentPreviewItem(state)
+
+    return state
+  })
+}
+
 const setCurrentScreen = store => screenName => {
   store.update(s => {
     const screen = getExactComponent(s.screens, screenName)
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 60279aa9a1..62a3c91c3e 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -1,5 +1,6 @@
 <script>
   import { setContext, onMount } from "svelte"
+  import {screen, page} from "./propertyCategories.js"
   import PropsView from "./PropsView.svelte"
   import { store } from "builderStore"
   import IconButton from "components/common/IconButton.svelte"
@@ -41,15 +42,48 @@
   $: panelDefinition = componentPropDefinition.properties
     ? componentPropDefinition.properties[selectedCategory.value]
     : {}
+  
+  let panelDefNew = {}
 
-  // SCREEN PROPS =============================================
-  $: screen_props =
-    $store.currentFrontEndType === "page"
-      ? getProps($store.currentPreviewItem, ["name", "favicon"])
-      : getProps($store.currentPreviewItem, ["name", "description", "route"])
+  $: {
+    if(componentPropDefinition.properties) {
+      if(selectedCategory.value === "design") {
+        panelDefNew = componentPropDefinition.properties["design"]
+      }else{
+        let panelDef = componentPropDefinition.properties["settings"]
+        if($store.currentFrontEndType === "page") {
+          panelDefNew = [...page,...panelDef]
+        }else if($store.currentFrontEndType === "screen" && $store.currentView !== "component") {
+          panelDefNew = [...screen, ...panelDef]
+        }else {
+          panelDefNew = panelDef
+        }
+      }
+    }
+  }
+
+  let componentInstanceNew = {}
+  $: {
+     if(($store.currentFrontEndType === "screen" || $store.currentFrontEndType === "page") && $store.currentView !== "component") {
+       componentInstanceNew = {...$store.currentPreviewItem, ...$store.currentComponentInfo}
+     }else {
+       componentInstanceNew = $store.currentComponentInfo
+     }
+  }
+
+  $: console.log("COMP INSTA NEW", componentInstanceNew)
 
   const onStyleChanged = store.setComponentStyle
-  const onPropChanged = store.setComponentProp
+
+  function onPropChanged(key, value) {
+   if($store.currentFrontEndType === "page") {
+      store.editPageOrScreen(key, value)
+   }else if($store.currentFrontEndType === "screen" && $store.currentView !== "component") {
+      store.editPageOrScreen(key, value)
+   }else {
+      store.setComponentProp(key, value)
+    }
+  }
 
   function walkProps(component, action) {
     action(component)
@@ -86,12 +120,12 @@
 
   <div class="component-props-container">
     {#if selectedCategory.value === 'design'}
-      <DesignView {panelDefinition} {componentInstance} {onStyleChanged} />
+      <DesignView panelDefinition={panelDefNew} {componentInstance} {onStyleChanged} />
     {:else if selectedCategory.value === 'settings'}
       <SettingsView
+        panelDefinition={panelDefNew}
         {componentInstance}
         {componentDefinition}
-        {panelDefinition}
         onChange={onPropChanged} />
     {:else if selectedCategory.value === 'events'}
       <EventsEditor component={componentInstance} />
@@ -106,12 +140,10 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    /* Merge Check */
     overflow-x: hidden;
     overflow-y: hidden;
     padding: 20px;
     box-sizing: border-box;
-    /* Merge Check */
   }
 
   .title > div:nth-child(1) {
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
index 59fc13bcd1..c577380eae 100644
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@@ -9,6 +9,7 @@
     newScreenPicker.show()
   }
 
+  $: console.log("STORE SCREENS", $store.screens)
   let newScreenPicker
 </script>
 
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index 99e704d1d9..86a70d0a25 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -9,7 +9,9 @@
   export let componentInstance = {}
   export let onChange = () => {}
 
-  const propExistsOnComponentDef = prop => prop in componentDefinition.props
+  let pageScreenProps = ["name", "favicon", "description", "route"]
+  
+  const propExistsOnComponentDef = prop => pageScreenProps.includes(prop) || prop in componentDefinition.props
 
   function handleChange(key, data) {
     data.target ? onChange(key, data.target.value) : onChange(key, data)
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 59458edd49..18572ea6ba 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -2,10 +2,18 @@ import Input from "../common/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
 import InputGroup from "../common/Inputs/InputGroup.svelte"
 import FlatButtonGroup from "./FlatButtonGroup.svelte"
-// import Colorpicker from "../common/Colorpicker.svelte"
-/*
-  TODO: Allow for default values for all properties
-*/
+
+
+export const screen = [
+  { label: "Name", key: "name", control: Input },
+  { label: "Description", key: "description", control: Input },
+  { label: "Route", key: "route", control: Input },
+]
+
+export const page = [
+  { label: "Name", key: "name", control: Input },
+  { label: "Favicon", key: "favicon", control: Input },
+]
 
 export const layout = [
   {

From 0d6ee860dfc7df09af8eff854704bcc78e25cd29 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Wed, 3 Jun 2020 22:05:02 +0100
Subject: [PATCH 02/20] Fixes for screen and page props

---
 .../ComponentPropertiesPanel.svelte           | 26 +++++++------------
 .../userInterface/SettingsView.svelte         |  4 ++-
 .../userInterface/propertyCategories.js       |  3 +--
 3 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 62a3c91c3e..690426a034 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -31,7 +31,6 @@
   let selectedCategory = categories[0]
 
   $: components = $store.components
-  $: componentInstance = $store.currentComponentInfo
   $: componentDefinition = $store.components[componentInstance._component]
   $: componentPropDefinition =
     flattenedPanel.find(
@@ -39,40 +38,35 @@
       c => c._component === componentInstance._component
     ) || {}
 
-  $: panelDefinition = componentPropDefinition.properties
-    ? componentPropDefinition.properties[selectedCategory.value]
-    : {}
   
-  let panelDefNew = {}
+  let panelDefinition = {}
 
   $: {
     if(componentPropDefinition.properties) {
       if(selectedCategory.value === "design") {
-        panelDefNew = componentPropDefinition.properties["design"]
+        panelDefinition = componentPropDefinition.properties["design"]
       }else{
         let panelDef = componentPropDefinition.properties["settings"]
         if($store.currentFrontEndType === "page") {
-          panelDefNew = [...page,...panelDef]
+          panelDefinition = [...page,...panelDef]
         }else if($store.currentFrontEndType === "screen" && $store.currentView !== "component") {
-          panelDefNew = [...screen, ...panelDef]
+          panelDefinition = [...screen, ...panelDef]
         }else {
-          panelDefNew = panelDef
+          panelDefinition = panelDef
         }
       }
     }
   }
 
-  let componentInstanceNew = {}
+  let componentInstance = {}
   $: {
      if(($store.currentFrontEndType === "screen" || $store.currentFrontEndType === "page") && $store.currentView !== "component") {
-       componentInstanceNew = {...$store.currentPreviewItem, ...$store.currentComponentInfo}
+       componentInstance = {...$store.currentPreviewItem, ...$store.currentComponentInfo}
      }else {
-       componentInstanceNew = $store.currentComponentInfo
+       componentInstance = $store.currentComponentInfo
      }
   }
 
-  $: console.log("COMP INSTA NEW", componentInstanceNew)
-
   const onStyleChanged = store.setComponentStyle
 
   function onPropChanged(key, value) {
@@ -120,10 +114,10 @@
 
   <div class="component-props-container">
     {#if selectedCategory.value === 'design'}
-      <DesignView panelDefinition={panelDefNew} {componentInstance} {onStyleChanged} />
+      <DesignView {panelDefinition} {componentInstance} {onStyleChanged} />
     {:else if selectedCategory.value === 'settings'}
       <SettingsView
-        panelDefinition={panelDefNew}
+        {panelDefinition}
         {componentInstance}
         {componentDefinition}
         onChange={onPropChanged} />
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index 86a70d0a25..133a495198 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -9,7 +9,9 @@
   export let componentInstance = {}
   export let onChange = () => {}
 
-  let pageScreenProps = ["name", "favicon", "description", "route"]
+  $: console.log("SET COMP INSTANCE",componentInstance)
+
+  let pageScreenProps = ["title","favicon", "description", "route"]
   
   const propExistsOnComponentDef = prop => pageScreenProps.includes(prop) || prop in componentDefinition.props
 
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 18572ea6ba..7b88547fbb 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -5,13 +5,12 @@ import FlatButtonGroup from "./FlatButtonGroup.svelte"
 
 
 export const screen = [
-  { label: "Name", key: "name", control: Input },
   { label: "Description", key: "description", control: Input },
   { label: "Route", key: "route", control: Input },
 ]
 
 export const page = [
-  { label: "Name", key: "name", control: Input },
+  { label: "Title", key: "title", control: Input },
   { label: "Favicon", key: "favicon", control: Input },
 ]
 

From 241b3028e9fcdb886512072a38c26335ab549001 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Mon, 8 Jun 2020 10:49:13 +0100
Subject: [PATCH 03/20] Tidyup

---
 .../builder/src/components/userInterface/SettingsView.svelte     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index 133a495198..a3438a4e4f 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -9,7 +9,6 @@
   export let componentInstance = {}
   export let onChange = () => {}
 
-  $: console.log("SET COMP INSTANCE",componentInstance)
 
   let pageScreenProps = ["title","favicon", "description", "route"]
   

From 2a2d9812b229da47a7abd81a97c820c999b198e7 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Mon, 8 Jun 2020 21:13:19 +0100
Subject: [PATCH 04/20] app preview improvements

---
 .../AppPreview/CurrentItemPreview.svelte      | 124 ++++++++++--------
 .../AppPreview/iframeTemplate.js              |  59 ++++++---
 2 files changed, 106 insertions(+), 77 deletions(-)

diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index a7288c8c91..538e8c0769 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -21,14 +21,48 @@
     return componentName || "element"
   }
 
-  $: iframe &&
-    console.log(
-      iframe.contentDocument.head.insertAdjacentHTML(
-        "beforeend",
-        `<\style></style>`
-      )
-    )
+  const screenPlaceholder =  {
+    name: "Screen Placeholder",
+    route: "*",
+    props: {
+      _component: "@budibase/standard-components/container",
+      type: "div",
+      _children: [
+        {
+          _component: "@budibase/standard-components/container",
+          _styles: { normal: {}, hover: {}, active: {}, selected: {} },
+          _id: "__screenslot__text",
+          _code: "",
+          className: "",
+          onLoad: [],
+          type: "div",
+          _children: [
+            {
+              _component: "@budibase/standard-components/text",
+              _styles: {
+                normal: {},
+                hover: {},
+                active: {},
+                selected: {},
+              },
+              _id: "__screenslot__text_2",
+              _code: "",
+              text: "content",
+              font: "",
+              color: "",
+              textAlign: "inline",
+              verticalAlign: "inline",
+              formattingTag: "none",
+            },
+          ],
+        },
+      ],
+    },
+  }
+
+
   $: hasComponent = !!$store.currentPreviewItem
+  
   $: {
     styles = ""
     // Apply the CSS from the currently selected page and its screens
@@ -52,49 +86,12 @@
   $: frontendDefinition = {
     appId: $store.appId,
     libraries: $store.libraries,
-    page: $store.currentPreviewItem,
-    screens: screensExist
-      ? $store.currentPreviewItem._screens
-      : [
-          {
-            name: "Screen Placeholder",
-            route: "*",
-            props: {
-              _component: "@budibase/standard-components/container",
-              type: "div",
-              _children: [
-                {
-                  _component: "@budibase/standard-components/container",
-                  _styles: { normal: {}, hover: {}, active: {}, selected: {} },
-                  _id: "__screenslot__text",
-                  _code: "",
-                  className: "",
-                  onLoad: [],
-                  type: "div",
-                  _children: [
-                    {
-                      _component: "@budibase/standard-components/text",
-                      _styles: {
-                        normal: {},
-                        hover: {},
-                        active: {},
-                        selected: {},
-                      },
-                      _id: "__screenslot__text_2",
-                      _code: "",
-                      text: "content",
-                      font: "",
-                      color: "",
-                      textAlign: "inline",
-                      verticalAlign: "inline",
-                      formattingTag: "none",
-                    },
-                  ],
-                },
-              ],
-            },
-          },
-        ],
+    page: $store.pages[$store.currentPageName],
+    screens: [
+          $store.currentFrontEndType === "page"
+          ? screenPlaceholder
+          : $store.currentPreviewItem,
+    ],
     appRootPath: "",
   }
 
@@ -103,6 +100,25 @@
   $: selectedComponentId = $store.currentComponentInfo
     ? $store.currentComponentInfo._id
     : ""
+
+  const refreshContent = () => {
+    iframe.contentWindow.postMessage(JSON.stringify({
+      styles,
+      stylesheetLinks,
+      selectedComponentType,
+      selectedComponentId,
+      frontendDefinition,
+    }))
+  }
+  let iframeLoaded = false
+  $: if(iframe && !iframeLoaded) {
+    iframe.contentWindow.addEventListener("bb-ready", refreshContent)
+    iframeLoaded = true
+  }
+
+  $: if(iframe && frontendDefinition) {
+		refreshContent()
+	}
 </script>
 
 <div class="component-container">
@@ -111,13 +127,7 @@
       style="height: 100%; width: 100%"
       title="componentPreview"
       bind:this={iframe}
-      srcdoc={iframeTemplate({
-        styles,
-        stylesheetLinks,
-        selectedComponentType,
-        selectedComponentId,
-        frontendDefinition: JSON.stringify(frontendDefinition),
-      })} />
+      srcdoc={iframeTemplate} />
   {/if}
 </div>
 
diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
index 462becb32f..c7b7aeebcc 100644
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@@ -1,20 +1,6 @@
-export default ({
-  styles,
-  stylesheetLinks,
-  selectedComponentType,
-  selectedComponentId,
-  frontendDefinition,
-}) => `<html>
+export default `<html>
   <head>
-    ${stylesheetLinks}
-
     <style>
-      ${styles || ""}
-
-      .${selectedComponentType}-${selectedComponentId} {
-        border: 2px solid #0055ff; 
-      }
-
       body, html {
         height: 100%!important;
         font-family: Roboto !important;
@@ -35,12 +21,45 @@ export default ({
         }
     </style>
     <script>
-        window["##BUDIBASE_FRONTEND_DEFINITION##"] = ${frontendDefinition};
+      function receiveMessage(event) { 
 
-        import('/_builder/budibase-client.esm.mjs')
-        .then(module => {
-            module.loadBudibase({ window, localStorage });
-        })
+        if (!event.data) return
+
+        const data = JSON.parse(event.data)
+
+        try {
+          if (styles) document.head.removeChild(styles)
+        } catch(_) { }
+
+        try {
+          if (selectedComponentStyle) document.head.removeChild(selectedComponentStyle)
+        } catch(_) { }
+
+        selectedComponentStyle = document.createElement('style');
+        document.head.appendChild(selectedComponentStyle)
+        var selectedCss = '.' + data.selectedComponentType + '-' + data.selectedComponentId + '{ border: 2px solid #0055ff;  }'
+        selectedComponentStyle.appendChild(document.createTextNode(selectedCss))
+
+        styles = document.createElement('style')
+        document.head.appendChild(styles)
+        styles.appendChild(document.createTextNode(data.styles))
+
+        window["##BUDIBASE_FRONTEND_DEFINITION##"] = data.frontendDefinition;
+        if (clientModule) {
+          clientModule.loadBudibase({ window, localStorage })
+        }
+      }
+      let clientModule
+      let styles
+      let selectedComponentStyle
+
+
+      import('/_builder/budibase-client.esm.mjs')
+      .then(module => {
+        clientModule = module
+        window.addEventListener('message', receiveMessage)
+        window.dispatchEvent(new Event('bb-ready'))
+      })
     </script>
   </head>
   <body>

From eea966a6ae3a2e900d9d1386c28b0056a8032296 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Tue, 9 Jun 2020 06:22:00 +0100
Subject: [PATCH 05/20] code review: add listner once

---
 .../userInterface/AppPreview/CurrentItemPreview.svelte     | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index 538e8c0769..53450c2200 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -110,11 +110,8 @@
       frontendDefinition,
     }))
   }
-  let iframeLoaded = false
-  $: if(iframe && !iframeLoaded) {
-    iframe.contentWindow.addEventListener("bb-ready", refreshContent)
-    iframeLoaded = true
-  }
+
+  $: if(iframe) iframe.contentWindow.addEventListener("bb-ready", refreshContent, { once: true })
 
   $: if(iframe && frontendDefinition) {
 		refreshContent()

From 50f4007d0dfb69ae3c626e45b2511e00d82e8333 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Tue, 9 Jun 2020 10:59:15 +0100
Subject: [PATCH 06/20] Refactorings for page and settings props

---
 .../builder/src/builderStore/store/index.js     |  2 ++
 .../ComponentPropertiesPanel.svelte             | 17 ++++-------------
 .../userInterface/FrontendNavigatePane.svelte   |  1 -
 3 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index 3572e4e344..ac66643612 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -295,6 +295,7 @@ const setCurrentPage = store => pageName => {
 
     state.currentFrontEndType = "page"
     state.currentPageName = pageName
+    state.currentView = "detail"
     state.screens = Array.isArray(current_screens)
       ? current_screens
       : Object.values(current_screens)
@@ -455,6 +456,7 @@ const setScreenType = store => type => {
 
     state.currentComponentInfo = pageOrScreen ? pageOrScreen.props : null
     state.currentPreviewItem = pageOrScreen
+    state.currentView = "detail"
     return state
   })
 }
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 690426a034..caef9eb2fd 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -58,25 +58,16 @@
     }
   }
 
-  let componentInstance = {}
-  $: {
-     if(($store.currentFrontEndType === "screen" || $store.currentFrontEndType === "page") && $store.currentView !== "component") {
-       componentInstance = {...$store.currentPreviewItem, ...$store.currentComponentInfo}
-     }else {
-       componentInstance = $store.currentComponentInfo
-     }
-  }
+  $: componentInstance = $store.currentView !== "component" ? {...$store.currentPreviewItem, ...$store.currentComponentInfo} : $store.currentComponentInfo
 
   const onStyleChanged = store.setComponentStyle
 
   function onPropChanged(key, value) {
-   if($store.currentFrontEndType === "page") {
+    if($store.currentView !== "component") {
       store.editPageOrScreen(key, value)
-   }else if($store.currentFrontEndType === "screen" && $store.currentView !== "component") {
-      store.editPageOrScreen(key, value)
-   }else {
-      store.setComponentProp(key, value)
+      return
     }
+    store.setComponentProp(key, value)
   }
 
   function walkProps(component, action) {
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
index c577380eae..59fc13bcd1 100644
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@@ -9,7 +9,6 @@
     newScreenPicker.show()
   }
 
-  $: console.log("STORE SCREENS", $store.screens)
   let newScreenPicker
 </script>
 

From 4b3f171c5d76ea4f040d9915f947232be99fb385 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Tue, 9 Jun 2020 11:02:47 +0100
Subject: [PATCH 07/20] Linting

---
 .../builder/src/components/userInterface/propertyCategories.js   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index f2f3516a26..259324fb6d 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -3,7 +3,6 @@ import OptionSelect from "./OptionSelect.svelte"
 import InputGroup from "../common/Inputs/InputGroup.svelte"
 import FlatButtonGroup from "./FlatButtonGroup.svelte"
 
-
 export const screen = [
   { label: "Description", key: "description", control: Input },
   { label: "Route", key: "route", control: Input },

From bd908a6e67a96bf26f6e72cd9c2334f74ab10e57 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Tue, 9 Jun 2020 11:06:18 +0100
Subject: [PATCH 08/20] Image Component

Image component added to builder
---
 .../userInterface/temporaryPanelStructure.js          | 11 +++++++++++
 packages/standard-components/src/Image.svelte         |  2 ++
 2 files changed, 13 insertions(+)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 603e348e18..a2916ca710 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -187,6 +187,17 @@ export default {
             ],
           },
         },
+        {
+          _component: "@budibase/standard-components/image",
+          name: "Image",
+          description: "A basic component for displaying images",
+          icon: "ri-image-fill",
+          children: [],
+          properties: {
+            design: { ...all },
+            settings: [{label: "URL", key: "url", control: Input }],
+          },
+        },
         {
           _component: "@budibase/standard-components/icon",
           name: "Icon",
diff --git a/packages/standard-components/src/Image.svelte b/packages/standard-components/src/Image.svelte
index 84f515b287..cd204f5fc2 100644
--- a/packages/standard-components/src/Image.svelte
+++ b/packages/standard-components/src/Image.svelte
@@ -7,6 +7,8 @@
   export let height
   export let width
 
+  export let _bb
+
   $: style = buildStyle({ height, width })
 </script>
 

From e32b179fb5a4a0bffc1969da48e43c443b66f34e Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Tue, 9 Jun 2020 11:33:37 +0100
Subject: [PATCH 09/20] User can now specify suffix in the Input

---
 .../src/components/common/Inputs/InputGroup.svelte        | 8 ++++----
 .../src/components/userInterface/propertyCategories.js    | 8 --------
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/components/common/Inputs/InputGroup.svelte b/packages/builder/src/components/common/Inputs/InputGroup.svelte
index 3be9f17b16..e5fed68103 100644
--- a/packages/builder/src/components/common/Inputs/InputGroup.svelte
+++ b/packages/builder/src/components/common/Inputs/InputGroup.svelte
@@ -10,18 +10,18 @@
   export let onChange = () => {}
 
   function handleChange(val, idx) {
-    value.splice(idx, 1, val !== "auto" ? val + suffix : val)
+    value.splice(idx, 1, val !== "auto" && suffix ? val + suffix : val)
 
     value = value
     let _value = value.map(v =>
-      !v.endsWith(suffix) && v !== "auto" ? v + suffix : v
+      suffix && !v.endsWith(suffix) && v !== "auto" ? v + suffix : v
     )
     onChange(_value)
   }
 
-  $: displayValues = value
+  $: displayValues = value && suffix
     ? value.map(v => v.replace(new RegExp(`${suffix}$`), ""))
-    : []
+    : value || []
 </script>
 
 <div class="input-container">
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 59458edd49..20e4703324 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -84,7 +84,6 @@ export const spacing = [
     key: "margin",
     control: InputGroup,
     meta: spacingMeta,
-    suffix: "px",
     defaultValue: ["0", "0", "0", "0"],
   },
   {
@@ -92,7 +91,6 @@ export const spacing = [
     key: "padding",
     control: InputGroup,
     meta: spacingMeta,
-    suffix: "px",
     defaultValue: ["0", "0", "0", "0"],
   },
 ]
@@ -103,7 +101,6 @@ export const size = [
     key: "width",
     control: Input,
     placeholder: "px",
-    suffix: "px",
     width: "48px",
     textAlign: "center",
   },
@@ -112,7 +109,6 @@ export const size = [
     key: "height",
     control: Input,
     placeholder: "px",
-    suffix: "px",
     width: "48px",
     textAlign: "center",
   },
@@ -121,7 +117,6 @@ export const size = [
     key: "min-width",
     control: Input,
     placeholder: "px",
-    suffix: "px",
     width: "48px",
     textAlign: "center",
   },
@@ -129,7 +124,6 @@ export const size = [
     label: "Min H",
     key: "min-height",
     control: Input,
-    suffix: "px",
     placeholder: "px",
     width: "48px",
     textAlign: "center",
@@ -139,7 +133,6 @@ export const size = [
     key: "max-width",
     control: Input,
     placeholder: "px",
-    suffix: "px",
     width: "48px",
     textAlign: "center",
   },
@@ -148,7 +141,6 @@ export const size = [
     key: "max-height",
     control: Input,
     placeholder: "px",
-    suffix: "px",
     width: "48px",
     textAlign: "center",
   },

From dc8c22e0184402078cc09a590d44a218aac3a21b Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Tue, 9 Jun 2020 11:44:33 +0100
Subject: [PATCH 10/20] preventDefault on clicks, in preview

---
 .../components/userInterface/AppPreview/iframeTemplate.js    | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
index c7b7aeebcc..3d305f1c1d 100644
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@@ -53,6 +53,11 @@ export default `<html>
       let styles
       let selectedComponentStyle
 
+      document.addEventListener("click", function(e) {
+        e.preventDefault()
+        e.stopPropagation()
+        return false;
+      }, true)
 
       import('/_builder/budibase-client.esm.mjs')
       .then(module => {

From 67868eb9d3eb43b713fc24c3581339f70506975c Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Tue, 9 Jun 2020 11:49:06 +0100
Subject: [PATCH 11/20] formatting

---
 .../src/components/userInterface/temporaryPanelStructure.js   | 2 +-
 packages/standard-components/src/DataForm.svelte              | 1 -
 packages/standard-components/src/DataTable.svelte             | 4 ++--
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index a2916ca710..afd3a06694 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -195,7 +195,7 @@ export default {
           children: [],
           properties: {
             design: { ...all },
-            settings: [{label: "URL", key: "url", control: Input }],
+            settings: [{ label: "URL", key: "url", control: Input }],
           },
         },
         {
diff --git a/packages/standard-components/src/DataForm.svelte b/packages/standard-components/src/DataForm.svelte
index ab515551dd..6a9788458e 100644
--- a/packages/standard-components/src/DataForm.svelte
+++ b/packages/standard-components/src/DataForm.svelte
@@ -87,7 +87,6 @@
 
   .form-content {
     margin-bottom: 20px;
-
   }
 
   .input {
diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index c0db923d58..90716383da 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -65,7 +65,7 @@
   }
 
   thead {
-    background: #393C44;
+    background: #393c44;
     border: 1px solid #ccc;
     height: 40px;
     text-align: left;
@@ -87,7 +87,7 @@
   tbody tr {
     border-bottom: 1px solid #ccc;
     transition: 0.3s background-color;
-    color: #393C44;
+    color: #393c44;
     font-size: 14px;
     height: 40px;
   }

From cb8ba237426234a827081f79cdb6401ae0edc23c Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 9 Jun 2020 13:30:01 +0100
Subject: [PATCH 12/20] preview app in new window

---
 .../builder/src/pages/[application]/_reset.svelte    | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index 2eec749c8f..63d9ab38d2 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -59,12 +59,12 @@
           on:click={() => $goto(`/settings`)}>
           <SettingsIcon />
         </span>
-        <span
-          class:active={false}
-          class="topnavitemright"
-          on:click={() => (location = `/${application}`)}>
-          <PreviewIcon />
-        </span>
+          <span
+            class:active={false}
+            class="topnavitemright"
+            on:click={() => window.open(`/${application}`)}>
+            <PreviewIcon />
+          </span>
       </div>
     </div>
 

From d9fe761dd65bada23aa02454118164343d1adf9e Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 9 Jun 2020 13:34:19 +0100
Subject: [PATCH 13/20] fix spacing

---
 .../builder/src/pages/[application]/_reset.svelte    | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index 63d9ab38d2..4d2a708f1e 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -59,12 +59,12 @@
           on:click={() => $goto(`/settings`)}>
           <SettingsIcon />
         </span>
-          <span
-            class:active={false}
-            class="topnavitemright"
-            on:click={() => window.open(`/${application}`)}>
-            <PreviewIcon />
-          </span>
+        <span
+          class:active={false}
+          class="topnavitemright"
+          on:click={() => window.open(`/${application}`)}>
+          <PreviewIcon />
+        </span>
       </div>
     </div>
 

From eff761053cb1b78959df56fd0edc05605b659f3a Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martinmckeaveney@gmail.com>
Date: Tue, 9 Jun 2020 19:18:45 +0100
Subject: [PATCH 14/20] Revert "Fixes for Screen and Page Props"

---
 .../builder/src/builderStore/store/index.js   | 12 ------
 .../ComponentPropertiesPanel.svelte           | 43 ++++++-------------
 .../userInterface/SettingsView.svelte         |  5 +--
 .../userInterface/propertyCategories.js       | 14 ++----
 4 files changed, 18 insertions(+), 56 deletions(-)

diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index ac66643612..9f91550bca 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -69,7 +69,6 @@ export const getStore = () => {
   store.getPathToComponent = getPathToComponent(store)
   store.addTemplatedComponent = addTemplatedComponent(store)
   store.setMetadataProp = setMetadataProp(store)
-  store.editPageOrScreen = editPageOrScreen(store)
   return store
 }
 
@@ -172,15 +171,6 @@ const createScreen = store => (screenName, route, layoutComponentName) => {
   })
 }
 
-const editPageOrScreen = store => (key, value) => {
-  store.update(state => {
-    state.currentPreviewItem[key] = value
-    _saveCurrentPreviewItem(state)
-
-    return state
-  })
-}
-
 const setCurrentScreen = store => screenName => {
   store.update(s => {
     const screen = getExactComponent(s.screens, screenName)
@@ -295,7 +285,6 @@ const setCurrentPage = store => pageName => {
 
     state.currentFrontEndType = "page"
     state.currentPageName = pageName
-    state.currentView = "detail"
     state.screens = Array.isArray(current_screens)
       ? current_screens
       : Object.values(current_screens)
@@ -456,7 +445,6 @@ const setScreenType = store => type => {
 
     state.currentComponentInfo = pageOrScreen ? pageOrScreen.props : null
     state.currentPreviewItem = pageOrScreen
-    state.currentView = "detail"
     return state
   })
 }
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index caef9eb2fd..60279aa9a1 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -1,6 +1,5 @@
 <script>
   import { setContext, onMount } from "svelte"
-  import {screen, page} from "./propertyCategories.js"
   import PropsView from "./PropsView.svelte"
   import { store } from "builderStore"
   import IconButton from "components/common/IconButton.svelte"
@@ -31,6 +30,7 @@
   let selectedCategory = categories[0]
 
   $: components = $store.components
+  $: componentInstance = $store.currentComponentInfo
   $: componentDefinition = $store.components[componentInstance._component]
   $: componentPropDefinition =
     flattenedPanel.find(
@@ -38,37 +38,18 @@
       c => c._component === componentInstance._component
     ) || {}
 
-  
-  let panelDefinition = {}
+  $: panelDefinition = componentPropDefinition.properties
+    ? componentPropDefinition.properties[selectedCategory.value]
+    : {}
 
-  $: {
-    if(componentPropDefinition.properties) {
-      if(selectedCategory.value === "design") {
-        panelDefinition = componentPropDefinition.properties["design"]
-      }else{
-        let panelDef = componentPropDefinition.properties["settings"]
-        if($store.currentFrontEndType === "page") {
-          panelDefinition = [...page,...panelDef]
-        }else if($store.currentFrontEndType === "screen" && $store.currentView !== "component") {
-          panelDefinition = [...screen, ...panelDef]
-        }else {
-          panelDefinition = panelDef
-        }
-      }
-    }
-  }
-
-  $: componentInstance = $store.currentView !== "component" ? {...$store.currentPreviewItem, ...$store.currentComponentInfo} : $store.currentComponentInfo
+  // SCREEN PROPS =============================================
+  $: screen_props =
+    $store.currentFrontEndType === "page"
+      ? getProps($store.currentPreviewItem, ["name", "favicon"])
+      : getProps($store.currentPreviewItem, ["name", "description", "route"])
 
   const onStyleChanged = store.setComponentStyle
-
-  function onPropChanged(key, value) {
-    if($store.currentView !== "component") {
-      store.editPageOrScreen(key, value)
-      return
-    }
-    store.setComponentProp(key, value)
-  }
+  const onPropChanged = store.setComponentProp
 
   function walkProps(component, action) {
     action(component)
@@ -108,9 +89,9 @@
       <DesignView {panelDefinition} {componentInstance} {onStyleChanged} />
     {:else if selectedCategory.value === 'settings'}
       <SettingsView
-        {panelDefinition}
         {componentInstance}
         {componentDefinition}
+        {panelDefinition}
         onChange={onPropChanged} />
     {:else if selectedCategory.value === 'events'}
       <EventsEditor component={componentInstance} />
@@ -125,10 +106,12 @@
     height: 100%;
     display: flex;
     flex-direction: column;
+    /* Merge Check */
     overflow-x: hidden;
     overflow-y: hidden;
     padding: 20px;
     box-sizing: border-box;
+    /* Merge Check */
   }
 
   .title > div:nth-child(1) {
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index a3438a4e4f..99e704d1d9 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -9,10 +9,7 @@
   export let componentInstance = {}
   export let onChange = () => {}
 
-
-  let pageScreenProps = ["title","favicon", "description", "route"]
-  
-  const propExistsOnComponentDef = prop => pageScreenProps.includes(prop) || prop in componentDefinition.props
+  const propExistsOnComponentDef = prop => prop in componentDefinition.props
 
   function handleChange(key, data) {
     data.target ? onChange(key, data.target.value) : onChange(key, data)
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index a01bff64ab..38ef0558e4 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -2,16 +2,10 @@ import Input from "../common/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
 import InputGroup from "../common/Inputs/InputGroup.svelte"
 import FlatButtonGroup from "./FlatButtonGroup.svelte"
-
-export const screen = [
-  { label: "Description", key: "description", control: Input },
-  { label: "Route", key: "route", control: Input },
-]
-
-export const page = [
-  { label: "Title", key: "title", control: Input },
-  { label: "Favicon", key: "favicon", control: Input },
-]
+// import Colorpicker from "../common/Colorpicker.svelte"
+/*
+  TODO: Allow for default values for all properties
+*/
 
 export const layout = [
   {

From 96d52bf6e85d8b794a0b23c78d65e0b9c28ae34a Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Wed, 10 Jun 2020 10:16:38 +0100
Subject: [PATCH 15/20] Fix - No Page Props on Master Screen Components

---
 .../components/userInterface/ComponentPropertiesPanel.svelte    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index caef9eb2fd..71a5c019fc 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -47,7 +47,7 @@
         panelDefinition = componentPropDefinition.properties["design"]
       }else{
         let panelDef = componentPropDefinition.properties["settings"]
-        if($store.currentFrontEndType === "page") {
+        if($store.currentFrontEndType === "page" && $store.currentView !== "component") {
           panelDefinition = [...page,...panelDef]
         }else if($store.currentFrontEndType === "screen" && $store.currentView !== "component") {
           panelDefinition = [...screen, ...panelDef]

From 2d4321177f5b620f4d2ed6a2efe6b78fef62d85a Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Wed, 10 Jun 2020 21:39:30 +0100
Subject: [PATCH 16/20] application supports multiple concurrent client DB

---
 .../server/src/api/controllers/application.js | 45 ++++++++++++++++---
 packages/server/src/api/controllers/auth.js   |  9 +++-
 packages/server/src/api/controllers/client.js | 21 +++++++--
 .../server/src/api/controllers/component.js   |  4 +-
 .../server/src/api/controllers/instance.js    |  5 ++-
 packages/server/src/api/controllers/user.js   |  5 ++-
 .../src/api/routes/tests/application.spec.js  | 33 ++++++++++++++
 .../src/api/routes/tests/couchTestUtils.js    |  3 +-
 8 files changed, 108 insertions(+), 17 deletions(-)

diff --git a/packages/server/src/api/controllers/application.js b/packages/server/src/api/controllers/application.js
index 9bd015c86a..0eb7818032 100644
--- a/packages/server/src/api/controllers/application.js
+++ b/packages/server/src/api/controllers/application.js
@@ -11,7 +11,7 @@ const { exec } = require("child_process")
 const sqrl = require("squirrelly")
 
 exports.fetch = async function(ctx) {
-  const db = new CouchDB(ClientDb.name(env.CLIENT_ID))
+  const db = new CouchDB(ClientDb.name(getClientId(ctx)))
   const body = await db.query("client/by_type", {
     include_docs: true,
     key: ["app"],
@@ -21,16 +21,30 @@ exports.fetch = async function(ctx) {
 }
 
 exports.fetchAppPackage = async function(ctx) {
-  const db = new CouchDB(ClientDb.name(env.CLIENT_ID))
+  const clientId = await lookupClientId(ctx.params.applicationId)
+  const db = new CouchDB(ClientDb.name(clientId))
   const application = await db.get(ctx.params.applicationId)
   ctx.body = await getPackageForBuilder(ctx.config, application)
 }
 
 exports.create = async function(ctx) {
-  const db = new CouchDB(ClientDb.name(env.CLIENT_ID))
+  const clientId =
+    (ctx.request.body && ctx.request.body.clientId) || env.CLIENT_ID
+
+  if (!clientId) {
+    ctx.throw(400, "ClientId not suplied")
+  }
+  const appId = newid()
+  // insert an appId -> clientId lookup
+  const masterDb = new CouchDB("master")
+  await masterDb.put({
+    _id: appId,
+    clientId,
+  })
+  const db = new CouchDB(ClientDb.name(clientId))
 
   const newApplication = {
-    _id: newid(),
+    _id: appId,
     type: "app",
     instances: [],
     userInstanceMap: {},
@@ -47,11 +61,10 @@ exports.create = async function(ctx) {
 
   const createInstCtx = {
     params: {
-      clientId: env.CLIENT_ID,
       applicationId: newApplication._id,
     },
     request: {
-      body: { name: `dev-${env.CLIENT_ID}` },
+      body: { name: `dev-${clientId}` },
     },
   }
   await instanceController.create(createInstCtx)
@@ -61,6 +74,7 @@ exports.create = async function(ctx) {
     await runNpmInstall(newAppFolder)
   }
 
+  ctx.status = 200
   ctx.body = newApplication
   ctx.message = `Application ${ctx.request.body.name} created successfully`
 }
@@ -79,7 +93,6 @@ const createEmptyAppPackage = async (ctx, app) => {
 
   if (await exists(newAppFolder)) {
     ctx.throw(400, "App folder already exists for this application")
-    return
   }
 
   await copy(templateFolder, newAppFolder)
@@ -99,6 +112,24 @@ const createEmptyAppPackage = async (ctx, app) => {
   return newAppFolder
 }
 
+const lookupClientId = async appId => {
+  const masterDb = new CouchDB("master")
+  const { clientId } = await masterDb.get(appId)
+  return clientId
+}
+
+const getClientId = ctx => {
+  const clientId =
+    (ctx.request.body && ctx.request.body.clientId) ||
+    (ctx.query && ctx.query.clientId) ||
+    env.CLIENT_ID
+
+  if (!clientId) {
+    ctx.throw(400, "ClientId not suplied")
+  }
+  return clientId
+}
+
 const updateJsonFile = async (filePath, app) => {
   const json = await readFile(filePath, "utf8")
   const newJson = sqrl.Render(json, app)
diff --git a/packages/server/src/api/controllers/auth.js b/packages/server/src/api/controllers/auth.js
index de88c29643..f083d57ba6 100644
--- a/packages/server/src/api/controllers/auth.js
+++ b/packages/server/src/api/controllers/auth.js
@@ -2,7 +2,6 @@ const jwt = require("jsonwebtoken")
 const CouchDB = require("../../db")
 const ClientDb = require("../../db/clientDb")
 const bcrypt = require("../../utilities/bcrypt")
-const env = require("../../environment")
 
 exports.authenticate = async ctx => {
   const { username, password } = ctx.request.body
@@ -10,8 +9,14 @@ exports.authenticate = async ctx => {
   if (!username) ctx.throw(400, "Username Required.")
   if (!password) ctx.throw(400, "Password Required")
 
+  const masterDb = new CouchDB("master")
+  const { clientId } = await masterDb.get(ctx.params.appId)
+
+  if (!clientId) {
+    ctx.throw(400, "ClientId not suplied")
+  }
   // find the instance that the user is associated with
-  const db = new CouchDB(ClientDb.name(env.CLIENT_ID))
+  const db = new CouchDB(ClientDb.name(clientId))
   const appId = ctx.params.appId
   const app = await db.get(appId)
   const instanceId = app.userInstanceMap[username]
diff --git a/packages/server/src/api/controllers/client.js b/packages/server/src/api/controllers/client.js
index 433bf58c3b..400ccde358 100644
--- a/packages/server/src/api/controllers/client.js
+++ b/packages/server/src/api/controllers/client.js
@@ -6,13 +6,26 @@ exports.getClientId = async function(ctx) {
 }
 
 exports.create = async function(ctx) {
-  await create(env.CLIENT_ID)
+  const clientId = getClientId(ctx)
+  await create(clientId)
   ctx.status = 200
-  ctx.message = `Client Database ${env.CLIENT_ID} successfully provisioned.`
+  ctx.message = `Client Database ${clientId} successfully provisioned.`
 }
 
 exports.destroy = async function(ctx) {
-  await destroy(env.CLIENT_ID)
+  const clientId = getClientId(ctx)
+  await destroy(clientId)
   ctx.status = 200
-  ctx.message = `Client Database ${env.CLIENT_ID} successfully deleted.`
+  ctx.message = `Client Database ${clientId} successfully deleted.`
+}
+
+const getClientId = ctx => {
+  const clientId =
+    (ctx.query && ctx.query.clientId) ||
+    (ctx.body && ctx.body.clientId) ||
+    env.CLIENT_ID
+  if (!clientId) {
+    ctx.throw(400, "ClientId not suplied")
+  }
+  return clientId
 }
diff --git a/packages/server/src/api/controllers/component.js b/packages/server/src/api/controllers/component.js
index 0b07826555..eedd3a8ceb 100644
--- a/packages/server/src/api/controllers/component.js
+++ b/packages/server/src/api/controllers/component.js
@@ -8,7 +8,9 @@ const {
 const env = require("../../environment")
 
 exports.fetchAppComponentDefinitions = async function(ctx) {
-  const db = new CouchDB(ClientDb.name(env.CLIENT_ID))
+  const masterDb = new CouchDB("master")
+  const { clientId } = await masterDb.get(ctx.params.appId)
+  const db = new CouchDB(ClientDb.name(clientId))
   const app = await db.get(ctx.params.appId)
 
   const componentDefinitions = app.componentLibraries.reduce(
diff --git a/packages/server/src/api/controllers/instance.js b/packages/server/src/api/controllers/instance.js
index fe40cf9fb4..d8f6a07888 100644
--- a/packages/server/src/api/controllers/instance.js
+++ b/packages/server/src/api/controllers/instance.js
@@ -8,7 +8,10 @@ exports.create = async function(ctx) {
   const appShortId = ctx.params.applicationId.substring(0, 7)
   const instanceId = `inst_${appShortId}_${newid()}`
   const { applicationId } = ctx.params
-  const clientId = env.CLIENT_ID
+
+  const masterDb = new CouchDB("master")
+  const { clientId } = await masterDb.get(applicationId)
+
   const db = new CouchDB(instanceId)
   await db.put({
     _id: "_design/database",
diff --git a/packages/server/src/api/controllers/user.js b/packages/server/src/api/controllers/user.js
index 5810872989..d529619843 100644
--- a/packages/server/src/api/controllers/user.js
+++ b/packages/server/src/api/controllers/user.js
@@ -42,8 +42,11 @@ exports.create = async function(ctx) {
 
   const response = await database.post(user)
 
+  const masterDb = new CouchDB("master")
+  const { clientId } = await masterDb.get(appId)
+
   // the clientDB needs to store a map of users against the app
-  const db = new CouchDB(clientDb.name(env.CLIENT_ID))
+  const db = new CouchDB(clientDb.name(clientId))
   const app = await db.get(appId)
 
   app.userInstanceMap = {
diff --git a/packages/server/src/api/routes/tests/application.spec.js b/packages/server/src/api/routes/tests/application.spec.js
index 4c193613fd..7f64419778 100644
--- a/packages/server/src/api/routes/tests/application.spec.js
+++ b/packages/server/src/api/routes/tests/application.spec.js
@@ -5,6 +5,7 @@ const {
   destroyClientDatabase,
   builderEndpointShouldBlockNormalUsers,
   supertest,
+  TEST_CLIENT_ID,
   defaultHeaders,
 } = require("./couchTestUtils")
 
@@ -51,6 +52,7 @@ describe("/applications", () => {
         body: { name: "My App" }
       })
     })
+
   })
 
   describe("fetch", () => {
@@ -68,6 +70,37 @@ describe("/applications", () => {
       expect(res.body.length).toBe(2)
     })
 
+    it("lists only applications in requested client databse", async () => {
+      await createApplication(request, "app1")
+      await createClientDatabase("new_client")
+
+      const blah = await request
+        .post("/api/applications")
+        .send({ name: "app2", clientId: "new_client"})
+        .set(defaultHeaders)
+        .expect('Content-Type', /json/)
+        //.expect(200)
+
+      const client1Res = await request
+        .get(`/api/applications?clientId=${TEST_CLIENT_ID}`)
+        .set(defaultHeaders)
+        .expect('Content-Type', /json/)
+        .expect(200)
+      
+      expect(client1Res.body.length).toBe(1)
+      expect(client1Res.body[0].name).toBe("app1")
+
+      const client2Res = await request
+        .get(`/api/applications?clientId=new_client`)
+        .set(defaultHeaders)
+        .expect('Content-Type', /json/)
+        .expect(200)
+      
+      expect(client2Res.body.length).toBe(1)
+      expect(client2Res.body[0].name).toBe("app2")
+
+    })
+
     it("should apply authorization to endpoint", async () => {
       const otherApplication = await createApplication(request) 
       const instance = await createInstance(request, otherApplication._id)
diff --git a/packages/server/src/api/routes/tests/couchTestUtils.js b/packages/server/src/api/routes/tests/couchTestUtils.js
index f70fc0ced1..6029e080cc 100644
--- a/packages/server/src/api/routes/tests/couchTestUtils.js
+++ b/packages/server/src/api/routes/tests/couchTestUtils.js
@@ -9,6 +9,7 @@ const {
 
 const TEST_CLIENT_ID = "test-client-id"
 
+exports.TEST_CLIENT_ID = TEST_CLIENT_ID
 exports.supertest = async () => {
   let request
   let port = 4002
@@ -59,7 +60,7 @@ exports.createView = async (request, instanceId, view) => {
   return res.body
 }
 
-exports.createClientDatabase = async () => await create(TEST_CLIENT_ID)
+exports.createClientDatabase = async id => await create(id || TEST_CLIENT_ID)
 
 exports.createApplication = async (request, name = "test_application") => {
   const res = await request

From eddda1d675f2794831879b7200c8334559cb8420 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Wed, 10 Jun 2020 21:41:55 +0100
Subject: [PATCH 17/20] lint fix

---
 packages/server/src/api/controllers/component.js | 1 -
 packages/server/src/api/controllers/instance.js  | 1 -
 packages/server/src/api/controllers/user.js      | 1 -
 3 files changed, 3 deletions(-)

diff --git a/packages/server/src/api/controllers/component.js b/packages/server/src/api/controllers/component.js
index eedd3a8ceb..630b7c541b 100644
--- a/packages/server/src/api/controllers/component.js
+++ b/packages/server/src/api/controllers/component.js
@@ -5,7 +5,6 @@ const {
   budibaseTempDir,
   budibaseAppsDir,
 } = require("../../utilities/budibaseDir")
-const env = require("../../environment")
 
 exports.fetchAppComponentDefinitions = async function(ctx) {
   const masterDb = new CouchDB("master")
diff --git a/packages/server/src/api/controllers/instance.js b/packages/server/src/api/controllers/instance.js
index d8f6a07888..5239b8de09 100644
--- a/packages/server/src/api/controllers/instance.js
+++ b/packages/server/src/api/controllers/instance.js
@@ -1,7 +1,6 @@
 const CouchDB = require("../../db")
 const client = require("../../db/clientDb")
 const newid = require("../../db/newid")
-const env = require("../../environment")
 
 exports.create = async function(ctx) {
   const instanceName = ctx.request.body.name
diff --git a/packages/server/src/api/controllers/user.js b/packages/server/src/api/controllers/user.js
index d529619843..d66f56903f 100644
--- a/packages/server/src/api/controllers/user.js
+++ b/packages/server/src/api/controllers/user.js
@@ -1,7 +1,6 @@
 const CouchDB = require("../../db")
 const clientDb = require("../../db/clientDb")
 const bcrypt = require("../../utilities/bcrypt")
-const env = require("../../environment")
 const getUserId = userName => `user_${userName}`
 const {
   POWERUSER_LEVEL_ID,

From 6cb7e995a2d9cfaa07322a2ef969d5e2be47bb0e Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Thu, 11 Jun 2020 10:12:01 +0100
Subject: [PATCH 18/20] changed "master" databse to "clientAppLookup"

---
 packages/server/src/api/controllers/application.js | 4 ++--
 packages/server/src/api/controllers/auth.js        | 2 +-
 packages/server/src/api/controllers/component.js   | 2 +-
 packages/server/src/api/controllers/instance.js    | 2 +-
 packages/server/src/api/controllers/user.js        | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/server/src/api/controllers/application.js b/packages/server/src/api/controllers/application.js
index 0eb7818032..0f604be0e7 100644
--- a/packages/server/src/api/controllers/application.js
+++ b/packages/server/src/api/controllers/application.js
@@ -36,7 +36,7 @@ exports.create = async function(ctx) {
   }
   const appId = newid()
   // insert an appId -> clientId lookup
-  const masterDb = new CouchDB("master")
+  const masterDb = new CouchDB("clientAppLookup")
   await masterDb.put({
     _id: appId,
     clientId,
@@ -113,7 +113,7 @@ const createEmptyAppPackage = async (ctx, app) => {
 }
 
 const lookupClientId = async appId => {
-  const masterDb = new CouchDB("master")
+  const masterDb = new CouchDB("clientAppLookup")
   const { clientId } = await masterDb.get(appId)
   return clientId
 }
diff --git a/packages/server/src/api/controllers/auth.js b/packages/server/src/api/controllers/auth.js
index f083d57ba6..5ec3aea617 100644
--- a/packages/server/src/api/controllers/auth.js
+++ b/packages/server/src/api/controllers/auth.js
@@ -9,7 +9,7 @@ exports.authenticate = async ctx => {
   if (!username) ctx.throw(400, "Username Required.")
   if (!password) ctx.throw(400, "Password Required")
 
-  const masterDb = new CouchDB("master")
+  const masterDb = new CouchDB("clientAppLookup")
   const { clientId } = await masterDb.get(ctx.params.appId)
 
   if (!clientId) {
diff --git a/packages/server/src/api/controllers/component.js b/packages/server/src/api/controllers/component.js
index 630b7c541b..a3b4d9c2bb 100644
--- a/packages/server/src/api/controllers/component.js
+++ b/packages/server/src/api/controllers/component.js
@@ -7,7 +7,7 @@ const {
 } = require("../../utilities/budibaseDir")
 
 exports.fetchAppComponentDefinitions = async function(ctx) {
-  const masterDb = new CouchDB("master")
+  const masterDb = new CouchDB("clientAppLookup")
   const { clientId } = await masterDb.get(ctx.params.appId)
   const db = new CouchDB(ClientDb.name(clientId))
   const app = await db.get(ctx.params.appId)
diff --git a/packages/server/src/api/controllers/instance.js b/packages/server/src/api/controllers/instance.js
index 5239b8de09..155437371f 100644
--- a/packages/server/src/api/controllers/instance.js
+++ b/packages/server/src/api/controllers/instance.js
@@ -8,7 +8,7 @@ exports.create = async function(ctx) {
   const instanceId = `inst_${appShortId}_${newid()}`
   const { applicationId } = ctx.params
 
-  const masterDb = new CouchDB("master")
+  const masterDb = new CouchDB("clientAppLookup")
   const { clientId } = await masterDb.get(applicationId)
 
   const db = new CouchDB(instanceId)
diff --git a/packages/server/src/api/controllers/user.js b/packages/server/src/api/controllers/user.js
index d66f56903f..1b66cf1cca 100644
--- a/packages/server/src/api/controllers/user.js
+++ b/packages/server/src/api/controllers/user.js
@@ -41,7 +41,7 @@ exports.create = async function(ctx) {
 
   const response = await database.post(user)
 
-  const masterDb = new CouchDB("master")
+  const masterDb = new CouchDB("clientAppLookup")
   const { clientId } = await masterDb.get(appId)
 
   // the clientDB needs to store a map of users against the app

From 3f77e0a0ba87e96d07bd8f6bf358cdaedc0ec79a Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Thu, 11 Jun 2020 13:07:10 +0100
Subject: [PATCH 19/20] Props update, including flex, border, shadow, rotate

---
 .../userInterface/propertyCategories.js       | 66 ++++++++++++++-----
 1 file changed, 49 insertions(+), 17 deletions(-)

diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 38ef0558e4..8ee38d3c35 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -12,8 +12,9 @@ export const layout = [
     label: "Display",
     key: "display",
     control: OptionSelect,
-    initialValue: "Flex",
+    initialValue: "",
     options: [
+      { label: "", value: "" },
       { label: "Flex", value: "flex" },
       { label: "Inline Flex", value: "inline-flex" },
     ],
@@ -39,6 +40,7 @@ export const layout = [
     control: OptionSelect,
     initialValue: "Flex Start",
     options: [
+      { label: "", value: "" },
       { label: "Flex Start", value: "flex-start" },
       { label: "Flex End", value: "flex-end" },
       { label: "Center", value: "center" },
@@ -317,19 +319,31 @@ export const border = [
   {
     label: "Radius",
     key: "border-radius",
-    control: Input,
-    width: "48px",
-    placeholder: "px",
-    textAlign: "center",
+    control: OptionSelect,
+    defaultValue: "None",
+    options: [
+      { label: "None", value: "0" },
+      { label: "small", value: "0.125rem" },
+      { label: "Medium", value: "0.25rem;" },
+      { label: "Large", value: "0.375rem" },
+      { label: "Extra large", value: "0.5rem" },
+      { label: "Full", value: "5678px" },
+    ],
   },
   {
     label: "Width",
     key: "border-width",
-    control: Input,
-    width: "48px",
-    placeholder: "px",
-    textAlign: "center",
-  }, //custom
+    control: OptionSelect,
+    defaultValue: "None",
+    options: [
+      { label: "None", value: "0" },
+      { label: "Extra small", value: "0.5px" },
+      { label: "Small", value: "1px" },
+      { label: "Medium", value: "2px" },
+      { label: "Large", value: "4px" },
+      { label: "Extra large", value: "8px" },
+    ],
+  },
   {
     label: "Color",
     key: "border-color",
@@ -339,6 +353,7 @@ export const border = [
     label: "Style",
     key: "border-style",
     control: OptionSelect,
+    defaultValue: "None",
     options: [
       "none",
       "hidden",
@@ -365,17 +380,34 @@ export const effects = [
   },
   {
     label: "Rotate",
-    key: "transform",
-    control: Input,
-    width: "48px",
-    textAlign: "center",
-    placeholder: "deg",
+    key: "transform-rotate",
+    control: OptionSelect,
+    defaultValue: "0",
+    options: [
+      "0",
+      "45deg",
+      "90deg",
+      "90deg",
+      "135deg",
+      "180deg",
+      "225deg",
+      "270deg",
+      "315dev",
+    ],
   }, //needs special control
   {
     label: "Shadow",
     key: "box-shadow",
-    control: InputGroup,
-    meta: [{ placeholder: "X" }, { placeholder: "Y" }, { placeholder: "B" }],
+    control: OptionSelect,
+    defaultValue: "None",
+    options: [
+      { label: "None", value: "none" },
+      { label: "Extra small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
+      { label: "Small", value: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)" },
+      { label: "Medium", value: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)" },
+      { label: "Large", value: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)" },
+      { label: "Extra large", value: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" },
+    ],
   },
 ]
 

From b603e27bc49734c8055979a41846bd9eeae65abd Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Thu, 11 Jun 2020 13:15:19 +0100
Subject: [PATCH 20/20] formatting and lint update

---
 .../common/Inputs/InputGroup.svelte           |  7 ++--
 .../AppPreview/CurrentItemPreview.svelte      | 38 ++++++++++---------
 .../ComponentPropertiesPanel.svelte           | 23 ++++++-----
 .../userInterface/propertyCategories.js       | 24 ++++++++++--
 4 files changed, 59 insertions(+), 33 deletions(-)

diff --git a/packages/builder/src/components/common/Inputs/InputGroup.svelte b/packages/builder/src/components/common/Inputs/InputGroup.svelte
index e5fed68103..385623ca19 100644
--- a/packages/builder/src/components/common/Inputs/InputGroup.svelte
+++ b/packages/builder/src/components/common/Inputs/InputGroup.svelte
@@ -19,9 +19,10 @@
     onChange(_value)
   }
 
-  $: displayValues = value && suffix
-    ? value.map(v => v.replace(new RegExp(`${suffix}$`), ""))
-    : value || []
+  $: displayValues =
+    value && suffix
+      ? value.map(v => v.replace(new RegExp(`${suffix}$`), ""))
+      : value || []
 </script>
 
 <div class="input-container">
diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index 53450c2200..00d7e6c171 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -21,7 +21,7 @@
     return componentName || "element"
   }
 
-  const screenPlaceholder =  {
+  const screenPlaceholder = {
     name: "Screen Placeholder",
     route: "*",
     props: {
@@ -60,9 +60,8 @@
     },
   }
 
-
   $: hasComponent = !!$store.currentPreviewItem
-  
+
   $: {
     styles = ""
     // Apply the CSS from the currently selected page and its screens
@@ -88,9 +87,9 @@
     libraries: $store.libraries,
     page: $store.pages[$store.currentPageName],
     screens: [
-          $store.currentFrontEndType === "page"
-          ? screenPlaceholder
-          : $store.currentPreviewItem,
+      $store.currentFrontEndType === "page"
+        ? screenPlaceholder
+        : $store.currentPreviewItem,
     ],
     appRootPath: "",
   }
@@ -102,20 +101,25 @@
     : ""
 
   const refreshContent = () => {
-    iframe.contentWindow.postMessage(JSON.stringify({
-      styles,
-      stylesheetLinks,
-      selectedComponentType,
-      selectedComponentId,
-      frontendDefinition,
-    }))
+    iframe.contentWindow.postMessage(
+      JSON.stringify({
+        styles,
+        stylesheetLinks,
+        selectedComponentType,
+        selectedComponentId,
+        frontendDefinition,
+      })
+    )
   }
 
-  $: if(iframe) iframe.contentWindow.addEventListener("bb-ready", refreshContent, { once: true })
+  $: if (iframe)
+    iframe.contentWindow.addEventListener("bb-ready", refreshContent, {
+      once: true,
+    })
 
-  $: if(iframe && frontendDefinition) {
-		refreshContent()
-	}
+  $: if (iframe && frontendDefinition) {
+    refreshContent()
+  }
 </script>
 
 <div class="component-container">
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index bfe5507256..7d33b9c963 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -37,27 +37,32 @@
       //use for getting controls for each component property
       c => c._component === componentInstance._component
     ) || {}
-  
+
   let panelDefinition = {}
 
   $: {
-    if(componentPropDefinition.properties) {
-      if(selectedCategory.value === "design") {
+    if (componentPropDefinition.properties) {
+      if (selectedCategory.value === "design") {
         panelDefinition = componentPropDefinition.properties["design"]
-      }else{
+      } else {
         let panelDef = componentPropDefinition.properties["settings"]
-        if($store.currentFrontEndType === "page" && $store.currentView !== "component") {
-          panelDefinition = [...page,...panelDef]
-        }else if($store.currentFrontEndType === "screen" && $store.currentView !== "component") {
+        if (
+          $store.currentFrontEndType === "page" &&
+          $store.currentView !== "component"
+        ) {
+          panelDefinition = [...page, ...panelDef]
+        } else if (
+          $store.currentFrontEndType === "screen" &&
+          $store.currentView !== "component"
+        ) {
           panelDefinition = [...screen, ...panelDef]
-        }else {
+        } else {
           panelDefinition = panelDef
         }
       }
     }
   }
 
-
   const onStyleChanged = store.setComponentStyle
   const onPropChanged = store.setComponentProp
 
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 8ee38d3c35..c0485304ce 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -403,10 +403,26 @@ export const effects = [
     options: [
       { label: "None", value: "none" },
       { label: "Extra small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
-      { label: "Small", value: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)" },
-      { label: "Medium", value: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)" },
-      { label: "Large", value: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)" },
-      { label: "Extra large", value: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" },
+      {
+        label: "Small",
+        value:
+          "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+      },
+      {
+        label: "Medium",
+        value:
+          "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+      },
+      {
+        label: "Large",
+        value:
+          "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+      },
+      {
+        label: "Extra large",
+        value:
+          "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+      },
     ],
   },
 ]