From 6fcc3ad1630187b8309cf784b365778619def629 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Tue, 2 Jun 2020 19:59:58 +0100
Subject: [PATCH 1/6] Backend modal UI update

Models include:
Create new view
Create new model
Create new field
Create new user
---
 packages/builder/src/budibase.css             |  27 ++---
 .../src/components/common/ActionButton.svelte |  22 ++--
 .../src/components/common/CodeArea.svelte     |   3 +-
 .../src/components/common/Modal.svelte        |   4 +-
 .../ModelDataTable/ModelDataTable.svelte      |  14 +--
 .../CreateEditModel/CreateEditModel.svelte    |  57 ++++++----
 .../modals/CreateEditView.svelte              | 100 +++++++++++-------
 .../ModelDataTable/modals/CreateUser.svelte   |   2 +-
 8 files changed, 141 insertions(+), 88 deletions(-)

diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css
index 283a761c3..7aa47605f 100644
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@@ -1,8 +1,7 @@
 /* Budibase Component Styles */
 .header {
     font-size: 0.75rem;
-    color: #000333;
-    opacity: 0.4;
+    color: var(--ink);
     text-transform: uppercase;
     margin-top: 1rem;
     font-weight: 500;
@@ -81,10 +80,9 @@
     max-width: 250px;
     height: 35px;
     border-radius: 3px;
-    border: 1px solid #DBDBDB;
+    border: 1px solid var(--grey-dark);
     text-align: left;
-    letter-spacing: 0.7px;
-    color: #000333;
+    color: var(--ink);
     font-size: 16px;
     padding-left: 5px;
 }
@@ -103,27 +101,32 @@
 }
 
 .budibase__table {
-    border: 1px solid #ccc;
+    border: 1px solid var(--grey-dark);
     background: #fff;
     border-radius: 2px;
 }
 
 .budibase__table thead {
-    background: #fafafa;
+    background: var(--blue-light);
 }
 
 .budibase__table thead > tr > th {
-    color: var(--button-text);
+    color: var(--ink);
     text-transform: capitalize;
     font-weight: 500;
 }
 
 .budibase__table tr {
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid var(--blue-light);
 }
 
 .button--toggled {
-    background: #fafafa;
-    color: var(--button-text);
-    padding: 10px;
+    background: var(--blue-light);
+    color: var(--ink-light);
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
 }
\ No newline at end of file
diff --git a/packages/builder/src/components/common/ActionButton.svelte b/packages/builder/src/components/common/ActionButton.svelte
index f8eb00f6e..153d00b6a 100644
--- a/packages/builder/src/components/common/ActionButton.svelte
+++ b/packages/builder/src/components/common/ActionButton.svelte
@@ -1,6 +1,7 @@
 <script>
   export let disabled = false
   export let hidden = false
+  export let secondary = false
   export let primary = true
   export let cancel = false
   export let alert = false
@@ -11,6 +12,7 @@
   on:click
   class="button"
   class:hidden
+  class:secondary
   class:primary
   class:alert
   class:cancel
@@ -22,12 +24,14 @@
 <style>
   .primary {
     color: #ffffff;
-    background: #0055ff;
+    background: var(--blue);
+    border: solid 1px var(--blue);
   }
 
   .alert {
-    color: rgba(255, 0, 31, 1);
-    background: rgba(255, 0, 31, 0.1);
+    color: white;
+    background: #E26D69;
+    border: solid 1px #E26D69;
   }
 
   .cancel {
@@ -35,18 +39,22 @@
     background: none;
   }
 
+  .secondary {
+    color: var(--ink);
+    border: solid 1px var(--grey-dark);
+    background: none;
+  }
+
   .button {
     font-size: 14px;
-    font-weight: 600;
+    font-weight: 500;
     border-radius: 5px;
-    border: none;
     padding: 10px 20px;
-    height: 45px;
+    height: 40px;
   }
 
   .button:hover {
     cursor: pointer;
-    font-weight: 600;
     filter: saturate(90%);
   }
 
diff --git a/packages/builder/src/components/common/CodeArea.svelte b/packages/builder/src/components/common/CodeArea.svelte
index a58fc1224..e6a4fac03 100644
--- a/packages/builder/src/components/common/CodeArea.svelte
+++ b/packages/builder/src/components/common/CodeArea.svelte
@@ -14,8 +14,7 @@
     background: var(--secondary80);
     color: var(--white);
     font-family: "Courier New", Courier, monospace;
-    width: 95%;
-    height: 100px;
+    height: 200px;
     border-radius: 5px;
   }
 </style>
diff --git a/packages/builder/src/components/common/Modal.svelte b/packages/builder/src/components/common/Modal.svelte
index 807dcee92..c91c30827 100644
--- a/packages/builder/src/components/common/Modal.svelte
+++ b/packages/builder/src/components/common/Modal.svelte
@@ -50,10 +50,10 @@
 <style>
   .uk-modal-dialog {
     border-radius: 0.3rem;
-    width: 60%;
+    width: 520px;
     height: 80vh;
     display: flex;
     flex-direction: column;
-    padding: 0;
+    padding: 40px;
   }
 </style>
diff --git a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
index 8a16d5d0b..f1d49894a 100644
--- a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
@@ -145,19 +145,19 @@
   }
 
   table {
-    border: 1px solid #ccc;
+    border: 1px solid var(--grey-dark);
     background: #fff;
     border-radius: 3px;
     border-collapse: collapse;
   }
 
   thead {
-    background: #f9f9f9;
-    border: 1px solid #ccc;
+    background: var(--blue-light);
+    border: 1px solid var(--grey-dark);
   }
 
   thead th {
-    color: var(--button-text);
+    color: var(--ink);
     text-transform: capitalize;
     font-weight: 500;
     font-size: 14px;
@@ -166,14 +166,14 @@
   }
 
   tbody tr {
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid var(--grey-dark);
     transition: 0.3s background-color;
-    color: var(--secondary100);
+    color: var(--ink);
     font-size: 14px;
   }
 
   tbody tr:hover {
-    background: #fafafa;
+    background: var(--grey-light);
   }
 
   .table-controls {
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
index bd302df5b..df1b27e42 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
@@ -35,7 +35,7 @@
   }
 </script>
 
-<header>
+<div class="heading">
   {#if !showFieldView}
     <i class="ri-list-settings-line button--toggled" />
     <h3 class="budibase__title--3">Create / Edit Model</h3>
@@ -43,22 +43,20 @@
     <i class="ri-file-list-line button--toggled" />
     <h3 class="budibase__title--3">Create / Edit Field</h3>
   {/if}
-</header>
+</div>
 {#if !showFieldView}
   <div class="padding">
-    <h4 class="budibase__label--big">Settings</h4>
-
     {#if $store.errors && $store.errors.length > 0}
       <ErrorsBox errors={$store.errors} />
     {/if}
-
-    <Textbox label="Name" bind:text={model.name} />
-
+    <div class="textbox">
+      <Textbox label="Name" bind:text={model.name} />
+    </div>
     <div class="table-controls">
-      <span class="budibase__label--big">Fields</span>
-      <h4 class="hoverable new-field" on:click={() => (showFieldView = true)}>
+      <span class="label">Fields</span>
+      <div class="hoverable new-field" on:click={() => (showFieldView = true)}>
         Add new field
-      </h4>
+      </div>
     </div>
 
     <table class="uk-table fields-table budibase__table">
@@ -67,7 +65,6 @@
           <th>Edit</th>
           <th>Name</th>
           <th>Type</th>
-          <th>Values</th>
           <th />
         </tr>
       </thead>
@@ -90,9 +87,9 @@
         {/each}
       </tbody>
     </table>
-    <div class="uk-margin">
+    <footer>
       <ActionButton color="secondary" on:click={saveModel}>Save</ActionButton>
-    </div>
+    </footer>
   </div>
 {:else}
   <FieldView
@@ -104,41 +101,63 @@
 
 <style>
   .padding {
-    padding: 20px;
+    padding-top: 40px;
+  }
+
+  .label {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  .textbox {
+    margin: 0px 40px 0px 40px;
+    font-size: 14px;
+    font-weight: 500;
   }
 
   .new-field {
     font-size: 16px;
     font-weight: bold;
-    color: var(--button-text);
+    color: var(--blue);
   }
 
   .fields-table {
-    margin: 1rem 1rem 0rem 0rem;
+    margin: 8px 40px 0px 40px;
     border-collapse: collapse;
+    width: 88%;
   }
 
   tbody > tr:hover {
-    background-color: var(--primary10);
+    background-color: var(--blue-light);
   }
 
   .table-controls {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    margin: 0px 40px;
   }
 
   .ri-more-line:hover {
     cursor: pointer;
   }
 
-  heading {
-    padding: 20px 20px 0 20px;
+  .heading {
+    padding: 40px 40px 0 40px;
     display: flex;
     align-items: center;
   }
 
   h3 {
     margin: 0 0 0 10px;
+    color: var(--ink);
+  }
+
+  footer {
+    margin: 40px 40px 0px 40px;
+    background-color: var(--grey-light);
+    padding: 20px 0px;
+    display: flex;
+    justify-content: flex-end;
   }
 </style>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
index 606310d44..7ca59e87f 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
@@ -39,51 +39,49 @@
   }
 </script>
 
-<heading>
+<div class="header">
   <i class="ri-eye-line button--toggled" />
   <h3 class="budibase__title--3">Create / Edit View</h3>
-</heading>
-<form on:submit|preventDefault class="uk-form-stacked root">
-  <h4 class="budibase__label--big">Settings</h4>
-  {#if $store.errors && $store.errors.length > 0}
-    <ErrorsBox errors={$store.errors} />
-  {/if}
-  <div class="uk-grid-small" uk-grid>
-    <div class="uk-width-1-2@s">
-      <Textbox bind:text={view.name} label="Name" />
+</div>
+  <form on:submit|preventDefault class="uk-form-stacked root">
+    {#if $store.errors && $store.errors.length > 0}
+      <ErrorsBox errors={$store.errors} />
+    {/if}
+    <div class="main">
+    <div class="uk-grid-small" uk-grid>
+      <div class="uk-width-1-2@s">
+        <Textbox bind:text={view.name} label="Name" />
+      </div>
+    </div>
+    <div class="code-snippets">
+      {#each Object.values(SNIPPET_EDITORS) as snippetType}
+        <span
+          class="snippet-selector__heading hoverable"
+          class:highlighted={currentSnippetEditor === snippetType}
+          on:click={() => (currentSnippetEditor = snippetType)}>
+          {snippetType}
+        </span>
+      {/each}
+      {#if currentSnippetEditor === SNIPPET_EDITORS.MAP}
+        <CodeArea bind:text={view.map} label="Map" />
+      {:else if currentSnippetEditor === SNIPPET_EDITORS.FILTER}
+        <CodeArea bind:text={view.filter} label="Filter" />
+      {:else if currentSnippetEditor === SNIPPET_EDITORS.REDUCE}
+        <CodeArea bind:text={view.reduce} label="Reduce" />
+      {/if}
     </div>
   </div>
-
-  <h4 class="budibase__label--big">Snippets</h4>
-  {#each Object.values(SNIPPET_EDITORS) as snippetType}
-    <span
-      class="snippet-selector__heading hoverable"
-      class:highlighted={currentSnippetEditor === snippetType}
-      on:click={() => (currentSnippetEditor = snippetType)}>
-      {snippetType}
-    </span>
-  {/each}
-  {#if currentSnippetEditor === SNIPPET_EDITORS.MAP}
-    <CodeArea bind:text={view.map} label="Map" />
-  {:else if currentSnippetEditor === SNIPPET_EDITORS.FILTER}
-    <CodeArea bind:text={view.filter} label="Filter" />
-  {:else if currentSnippetEditor === SNIPPET_EDITORS.REDUCE}
-    <CodeArea bind:text={view.reduce} label="Reduce" />
-  {/if}
-
-  <ActionButton color="secondary" on:click={saveView}>Save</ActionButton>
-  <ActionButton alert on:click={deleteView}>Delete</ActionButton>
+  <div class="buttons">
+    <div class="button">
+      <ActionButton secondary on:click={deleteView}>Delete</ActionButton>
+    </div>
+    <ActionButton color="secondary" on:click={saveView}>Save</ActionButton>
+  </div>
 </form>
 
 <style>
   .root {
     height: 100%;
-    padding: 15px;
-  }
-
-  .snippet-selector__heading {
-    margin-right: 20px;
-    opacity: 0.7;
   }
 
   .highlighted {
@@ -92,11 +90,37 @@
 
   h3 {
     margin: 0 0 0 10px;
+    color: var(--ink);
   }
 
-  heading {
-    padding: 20px 20px 0 20px;
+  .snippet-selector__heading {
+    margin-right: 20px;
+    font-size: 14px;
+  }
+
+  .header {
+    padding: 20px 40px 0 40px;
     display: flex;
     align-items: center;
   }
+
+  .main {
+    margin: 20px 40px 0px 40px;
+  }
+  
+  .code-snippets {
+  margin: 20px 0px 20px 0px;
+  }
+
+  .buttons {
+    display: flex;
+    justify-content: flex-end;
+    background-color: var(--grey-light);
+    margin: 0 40px;
+    padding: 20px 0;
+  }
+
+  .button {
+    margin-right: 20px;
+  }
 </style>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
index e81659f71..35b9563a0 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
@@ -52,7 +52,7 @@
   }
   footer {
     padding: 20px;
-    background: #fafafa;
+    background: var(--grey-light);
     border-radius: 0.5rem;
   }
 </style>

From 63882727dee06688be304247ab45fcc253a654ea Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Tue, 2 Jun 2020 20:55:15 +0100
Subject: [PATCH 2/6] Defeat

I stand defeated to UIKit and its CSS shackles
---
 packages/builder/src/budibase.css               |  2 +-
 .../src/components/common/ActionButton.svelte   |  4 ++--
 .../builder/src/components/common/Select.svelte | 10 ++++------
 .../CreateEditModel/CreateEditModel.svelte      | 10 ++++++----
 .../modals/CreateEditModel/FieldView.svelte     | 17 +++++++++++++----
 .../ModelDataTable/modals/CreateEditView.svelte |  3 ++-
 6 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css
index 7aa47605f..910a795cd 100644
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@@ -117,7 +117,7 @@
 }
 
 .budibase__table tr {
-    border-bottom: 1px solid var(--blue-light);
+    border-bottom: 1px solid var(--grey-light);
 }
 
 .button--toggled {
diff --git a/packages/builder/src/components/common/ActionButton.svelte b/packages/builder/src/components/common/ActionButton.svelte
index 153d00b6a..96e7c6b6a 100644
--- a/packages/builder/src/components/common/ActionButton.svelte
+++ b/packages/builder/src/components/common/ActionButton.svelte
@@ -42,13 +42,13 @@
   .secondary {
     color: var(--ink);
     border: solid 1px var(--grey-dark);
-    background: none;
+    background: white;
   }
 
   .button {
     font-size: 14px;
     font-weight: 500;
-    border-radius: 5px;
+    border-radius: 3px;
     padding: 10px 20px;
     height: 40px;
   }
diff --git a/packages/builder/src/components/common/Select.svelte b/packages/builder/src/components/common/Select.svelte
index 39dbe6d05..e89b8006a 100644
--- a/packages/builder/src/components/common/Select.svelte
+++ b/packages/builder/src/components/common/Select.svelte
@@ -20,11 +20,9 @@
 <style>
   .select-container {
     font-size: 14px;
-    color: var(--secondary60);
-    font-weight: bold;
     position: relative;
-    max-width: 400px;
-    min-width: 275px;
+    border: var(--grey-dark) 1px solid;
+    max-width: 256px;
   }
 
   .adjusted {
@@ -43,7 +41,7 @@
     font-family: sans-serif;
     font-weight: 400;
     font-size: 14px;
-    color: #000333;
+    color: var(--ink);
     padding: 0 40px 0px 20px;
     width: 100%;
     max-width: 100%;
@@ -63,6 +61,6 @@
     width: 30px;
     height: 30px;
     pointer-events: none;
-    color: var(--secondary100);
+    color: var(--ink);
   }
 </style>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
index df1b27e42..ecb35c23b 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
@@ -88,7 +88,7 @@
       </tbody>
     </table>
     <footer>
-      <ActionButton color="secondary" on:click={saveModel}>Save</ActionButton>
+        <ActionButton color="secondary" on:click={saveModel}>Save</ActionButton>
     </footer>
   </div>
 {:else}
@@ -128,7 +128,7 @@
   }
 
   tbody > tr:hover {
-    background-color: var(--blue-light);
+    background-color: var(--grey-light);
   }
 
   .table-controls {
@@ -154,10 +154,12 @@
   }
 
   footer {
-    margin: 40px 40px 0px 40px;
     background-color: var(--grey-light);
-    padding: 20px 0px;
+    margin-top: 40px;
+    padding: 20px 40px 20px 40px;
     display: flex;
     justify-content: flex-end;
   }
+
+
 </style>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte
index 2c3443ae5..c17a0ac9c 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte
@@ -79,19 +79,28 @@
   </form>
 </div>
 <footer>
+  <div class="button">
+    <ActionButton secondary on:click={goBack}>Cancel</ActionButton>
+  </div>
   <ActionButton primary on:click={save}>Save</ActionButton>
-  <ActionButton alert on:click={goBack}>Cancel</ActionButton>
 </footer>
 
 <style>
   .root {
-    margin: 20px;
+    margin: 40px;
   }
   footer {
-    padding: 20px;
+    padding: 20px 40px;
     border-radius: 0 0 5px 5px;
     bottom: 0;
     left: 0;
-    background: #fafafa;
+    background: var(--grey-light);
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .button {
+    margin-right: 20px;
   }
 </style>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
index 7ca59e87f..873e34950 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
@@ -96,6 +96,7 @@
   .snippet-selector__heading {
     margin-right: 20px;
     font-size: 14px;
+    color: var(--ink-lighter);
   }
 
   .header {
@@ -109,7 +110,7 @@
   }
   
   .code-snippets {
-  margin: 20px 0px 20px 0px;
+    margin: 20px 0px 20px 0px;
   }
 
   .buttons {

From a416ecc7893c2aa4ddffec479482b530c29ffa3e Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Tue, 2 Jun 2020 20:56:16 +0100
Subject: [PATCH 3/6] formatting

---
 .../src/components/common/ActionButton.svelte |  4 ++--
 .../src/components/common/Input.svelte        | 22 +++++++++++++------
 .../common/Inputs/InputGroup.svelte           |  7 +++---
 .../CreateEditModel/CreateEditModel.svelte    |  4 +---
 .../modals/CreateEditView.svelte              | 12 +++++-----
 .../userInterface/FlatButton.svelte           | 19 ++++++++++------
 .../userInterface/FlatButtonGroup.svelte      |  2 --
 .../userInterface/OptionSelect.svelte         |  6 ++---
 8 files changed, 43 insertions(+), 33 deletions(-)

diff --git a/packages/builder/src/components/common/ActionButton.svelte b/packages/builder/src/components/common/ActionButton.svelte
index 96e7c6b6a..147737b5c 100644
--- a/packages/builder/src/components/common/ActionButton.svelte
+++ b/packages/builder/src/components/common/ActionButton.svelte
@@ -30,8 +30,8 @@
 
   .alert {
     color: white;
-    background: #E26D69;
-    border: solid 1px #E26D69;
+    background: #e26d69;
+    border: solid 1px #e26d69;
   }
 
   .cancel {
diff --git a/packages/builder/src/components/common/Input.svelte b/packages/builder/src/components/common/Input.svelte
index 3ac872dc5..82305be60 100644
--- a/packages/builder/src/components/common/Input.svelte
+++ b/packages/builder/src/components/common/Input.svelte
@@ -1,5 +1,5 @@
 <script>
-  import {onMount} from "svelte"
+  import { onMount } from "svelte"
   import { buildStyle } from "../../helpers.js"
   export let value = ""
   export let textAlign = "left"
@@ -7,22 +7,30 @@
   export let placeholder = ""
   export let suffix = ""
   export let onChange = val => {}
-  
+
   let centerPlaceholder = textAlign === "center"
 
   let style = buildStyle({ width, textAlign })
-  
+
   function handleChange(val) {
     value = val
     let _value = value !== "auto" ? value + suffix : value
     onChange(_value)
   }
 
-  $: displayValue = suffix && value && value.endsWith(suffix) ? value.replace(new RegExp(`${suffix}$`), "") : (value || "")
-  
+  $: displayValue =
+    suffix && value && value.endsWith(suffix)
+      ? value.replace(new RegExp(`${suffix}$`), "")
+      : value || ""
 </script>
 
-<input class:centerPlaceholder type="text" value={displayValue} {placeholder} {style} on:change={e => handleChange(e.target.value)} />
+<input
+  class:centerPlaceholder
+  type="text"
+  value={displayValue}
+  {placeholder}
+  {style}
+  on:change={e => handleChange(e.target.value)} />
 
 <style>
   input {
@@ -43,7 +51,7 @@
     outline: none;
   }
 
-  input::placeholder {    
+  input::placeholder {
     text-align: left;
   }
 
diff --git a/packages/builder/src/components/common/Inputs/InputGroup.svelte b/packages/builder/src/components/common/Inputs/InputGroup.svelte
index a1cab5a50..3be9f17b1 100644
--- a/packages/builder/src/components/common/Inputs/InputGroup.svelte
+++ b/packages/builder/src/components/common/Inputs/InputGroup.svelte
@@ -11,9 +11,11 @@
 
   function handleChange(val, idx) {
     value.splice(idx, 1, val !== "auto" ? val + suffix : val)
-    
+
     value = value
-    let _value = value.map(v => (!v.endsWith(suffix) && v !== "auto" ? v + suffix : v))
+    let _value = value.map(v =>
+      !v.endsWith(suffix) && v !== "auto" ? v + suffix : v
+    )
     onChange(_value)
   }
 
@@ -44,5 +46,4 @@
   .inputs-group {
     flex: 1;
   }
-
 </style>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
index ecb35c23b..6264b74e0 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
@@ -88,7 +88,7 @@
       </tbody>
     </table>
     <footer>
-        <ActionButton color="secondary" on:click={saveModel}>Save</ActionButton>
+      <ActionButton color="secondary" on:click={saveModel}>Save</ActionButton>
     </footer>
   </div>
 {:else}
@@ -160,6 +160,4 @@
     display: flex;
     justify-content: flex-end;
   }
-
-
 </style>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
index 873e34950..4db445e54 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
@@ -43,11 +43,11 @@
   <i class="ri-eye-line button--toggled" />
   <h3 class="budibase__title--3">Create / Edit View</h3>
 </div>
-  <form on:submit|preventDefault class="uk-form-stacked root">
-    {#if $store.errors && $store.errors.length > 0}
-      <ErrorsBox errors={$store.errors} />
-    {/if}
-    <div class="main">
+<form on:submit|preventDefault class="uk-form-stacked root">
+  {#if $store.errors && $store.errors.length > 0}
+    <ErrorsBox errors={$store.errors} />
+  {/if}
+  <div class="main">
     <div class="uk-grid-small" uk-grid>
       <div class="uk-width-1-2@s">
         <Textbox bind:text={view.name} label="Name" />
@@ -108,7 +108,7 @@
   .main {
     margin: 20px 40px 0px 40px;
   }
-  
+
   .code-snippets {
     margin: 20px 0px 20px 0px;
   }
diff --git a/packages/builder/src/components/userInterface/FlatButton.svelte b/packages/builder/src/components/userInterface/FlatButton.svelte
index e9798fc89..2eff1a6be 100644
--- a/packages/builder/src/components/userInterface/FlatButton.svelte
+++ b/packages/builder/src/components/userInterface/FlatButton.svelte
@@ -1,5 +1,5 @@
 <script>
-  import {buildStyle} from "../../helpers.js"
+  import { buildStyle } from "../../helpers.js"
   export let value = ""
   export let text = ""
   export let icon = ""
@@ -8,19 +8,24 @@
   export let selected = false
   export let fontWeight = ""
 
-  $: style = buildStyle({padding, fontWeight})
+  $: style = buildStyle({ padding, fontWeight })
   $: useIcon = !!icon
 </script>
 
-<div class="flatbutton" {style} class:selected on:click={() => onClick(value || text)}>
+<div
+  class="flatbutton"
+  {style}
+  class:selected
+  on:click={() => onClick(value || text)}>
   {#if useIcon}
     <i class={icon} />
   {:else}
-    <span>{@html text}</span>
+    <span>
+      {@html text}
+    </span>
   {/if}
 </div>
 
-
 <style>
   .flatbutton {
     cursor: pointer;
@@ -41,8 +46,8 @@
     background: var(--ink-light);
     color: #ffffff;
   }
-  
-  i{
+
+  i {
     font-size: 20px;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
index ad1107b1f..c9523f4d5 100644
--- a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
+++ b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
@@ -28,10 +28,8 @@
     onChange(val)
   }
 
-
   const checkSelected = val =>
     isMultiSelect ? value.includes(val) : value === val
-
 </script>
 
 <div class="flatbutton-group">
diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte
index d226e6129..8a1e3685f 100644
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@@ -1,6 +1,6 @@
 <script>
   import { onMount, beforeUpdate } from "svelte"
-  import {buildStyle} from "../../helpers.js"
+  import { buildStyle } from "../../helpers.js"
   export let options = []
   export let value = ""
   export let styleBindingProperty
@@ -214,10 +214,10 @@
     height: auto;
     padding: 5px 0px;
     cursor: pointer;
-    padding-left: 10px
+    padding-left: 10px;
   }
 
   li:hover {
-    background-color:#e6e6e6
+    background-color: #e6e6e6;
   }
 </style>

From b726363c34981144d51c12226ecaaf31b2c810d5 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Tue, 2 Jun 2020 21:12:33 +0100
Subject: [PATCH 4/6] Add User Model Update

---
 .../ModelDataTable/modals/CreateUser.svelte   | 39 ++++++++++++++++---
 1 file changed, 33 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
index 35b9563a0..b29e5e83d 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
@@ -22,7 +22,11 @@
 </script>
 
 <form on:submit|preventDefault class="uk-form-stacked">
-  <div>
+<div class="main">
+  <div class="heading">
+    <i class="ri-list-settings-line button--toggled" />
+    <div class="title">Create User</div>
+  </div>
     <div class="uk-margin">
       <label class="uk-form-label" for="form-stacked-text">Username</label>
       <input class="uk-input" type="text" bind:value={username} />
@@ -41,18 +45,41 @@
     </div>
   </div>
   <footer>
-    <ActionButton alert on:click={onClosed}>Cancel</ActionButton>
-    <ActionButton disabled={!valid} on:click={createUser}>Save</ActionButton>
+  <div class="button">
+    <ActionButton secondary on:click={onClosed}>Cancel</ActionButton>
+  </div>
+    <ActionButton disabled={!valid}  on:click={createUser}>Save</ActionButton>
   </footer>
 </form>
 
 <style>
-  div {
-    padding: 30px;
+
+  .main {
+    padding: 40px 40px 20px 40px;
+  }
+
+  .title {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--ink);
+    margin-left: 12px;
   }
+
+  .heading {
+    display: flex;
+    align-items: baseline;
+  }
+
   footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
     padding: 20px;
     background: var(--grey-light);
-    border-radius: 0.5rem;
+    border-radius: 0 0 5px 5px;
+  }
+
+  .button {
+    margin-right: 20px;
   }
 </style>

From 3faaf94554f6ef33ba1e61725112c96976c14c67 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Tue, 2 Jun 2020 21:13:19 +0100
Subject: [PATCH 5/6] formatting update

---
 .../ModelDataTable/modals/CreateUser.svelte   | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
index b29e5e83d..d5c924405 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
@@ -22,11 +22,11 @@
 </script>
 
 <form on:submit|preventDefault class="uk-form-stacked">
-<div class="main">
-  <div class="heading">
-    <i class="ri-list-settings-line button--toggled" />
-    <div class="title">Create User</div>
-  </div>
+  <div class="main">
+    <div class="heading">
+      <i class="ri-list-settings-line button--toggled" />
+      <div class="title">Create User</div>
+    </div>
     <div class="uk-margin">
       <label class="uk-form-label" for="form-stacked-text">Username</label>
       <input class="uk-input" type="text" bind:value={username} />
@@ -45,15 +45,14 @@
     </div>
   </div>
   <footer>
-  <div class="button">
-    <ActionButton secondary on:click={onClosed}>Cancel</ActionButton>
-  </div>
-    <ActionButton disabled={!valid}  on:click={createUser}>Save</ActionButton>
+    <div class="button">
+      <ActionButton secondary on:click={onClosed}>Cancel</ActionButton>
+    </div>
+    <ActionButton disabled={!valid} on:click={createUser}>Save</ActionButton>
   </footer>
 </form>
 
 <style>
-
   .main {
     padding: 40px 40px 20px 40px;
   }

From 10ecb8d7328ab4597a8c19e3ed96f7f672505547 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 2 Jun 2020 21:31:29 +0100
Subject: [PATCH 6/6] fix datalist, datatable and chart component

---
 .../src/components/common/Input.svelte        | 22 +++++++++++++------
 .../common/Inputs/InputGroup.svelte           |  7 +++---
 .../ComponentDropdownMenu.svelte              |  2 +-
 .../userInterface/FlatButton.svelte           | 19 ++++++++++------
 .../userInterface/FlatButtonGroup.svelte      |  2 --
 .../userInterface/ModelSelect.svelte          | 15 +++++++++++++
 .../userInterface/OptionSelect.svelte         |  6 ++---
 .../userInterface/temporaryPanelStructure.js  | 21 ++++++++++++++----
 .../ParamInputs/ModelSelector.svelte          |  1 -
 .../standard-components/src/DataChart.svelte  |  6 ++---
 .../standard-components/src/DataList.svelte   |  9 +++++---
 .../standard-components/src/DataTable.svelte  |  8 ++++---
 12 files changed, 81 insertions(+), 37 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/ModelSelect.svelte

diff --git a/packages/builder/src/components/common/Input.svelte b/packages/builder/src/components/common/Input.svelte
index 3ac872dc5..82305be60 100644
--- a/packages/builder/src/components/common/Input.svelte
+++ b/packages/builder/src/components/common/Input.svelte
@@ -1,5 +1,5 @@
 <script>
-  import {onMount} from "svelte"
+  import { onMount } from "svelte"
   import { buildStyle } from "../../helpers.js"
   export let value = ""
   export let textAlign = "left"
@@ -7,22 +7,30 @@
   export let placeholder = ""
   export let suffix = ""
   export let onChange = val => {}
-  
+
   let centerPlaceholder = textAlign === "center"
 
   let style = buildStyle({ width, textAlign })
-  
+
   function handleChange(val) {
     value = val
     let _value = value !== "auto" ? value + suffix : value
     onChange(_value)
   }
 
-  $: displayValue = suffix && value && value.endsWith(suffix) ? value.replace(new RegExp(`${suffix}$`), "") : (value || "")
-  
+  $: displayValue =
+    suffix && value && value.endsWith(suffix)
+      ? value.replace(new RegExp(`${suffix}$`), "")
+      : value || ""
 </script>
 
-<input class:centerPlaceholder type="text" value={displayValue} {placeholder} {style} on:change={e => handleChange(e.target.value)} />
+<input
+  class:centerPlaceholder
+  type="text"
+  value={displayValue}
+  {placeholder}
+  {style}
+  on:change={e => handleChange(e.target.value)} />
 
 <style>
   input {
@@ -43,7 +51,7 @@
     outline: none;
   }
 
-  input::placeholder {    
+  input::placeholder {
     text-align: left;
   }
 
diff --git a/packages/builder/src/components/common/Inputs/InputGroup.svelte b/packages/builder/src/components/common/Inputs/InputGroup.svelte
index 41f184975..5249df5ef 100644
--- a/packages/builder/src/components/common/Inputs/InputGroup.svelte
+++ b/packages/builder/src/components/common/Inputs/InputGroup.svelte
@@ -11,9 +11,11 @@
 
   function handleChange(val, idx) {
     value.splice(idx, 1, val !== "auto" ? val + suffix : val)
-    
+
     value = value
-    let _value = value.map(v => (!v.endsWith(suffix) && v !== "auto" ? v + suffix : v))
+    let _value = value.map(v =>
+      !v.endsWith(suffix) && v !== "auto" ? v + suffix : v
+    )
     onChange(_value)
   }
 
@@ -44,5 +46,4 @@
   .inputs-group {
     flex: 1;
   }
-
 </style>
diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
index 151f013ff..0b51b962b 100644
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@@ -151,7 +151,7 @@
   }
 </script>
 
-<div class="root" on:click|stopPropagation={() => {}}>
+<div class="root boundary" on:click|stopPropagation={() => {}}>
   <button>
     <MoreIcon />
   </button>
diff --git a/packages/builder/src/components/userInterface/FlatButton.svelte b/packages/builder/src/components/userInterface/FlatButton.svelte
index e9798fc89..2eff1a6be 100644
--- a/packages/builder/src/components/userInterface/FlatButton.svelte
+++ b/packages/builder/src/components/userInterface/FlatButton.svelte
@@ -1,5 +1,5 @@
 <script>
-  import {buildStyle} from "../../helpers.js"
+  import { buildStyle } from "../../helpers.js"
   export let value = ""
   export let text = ""
   export let icon = ""
@@ -8,19 +8,24 @@
   export let selected = false
   export let fontWeight = ""
 
-  $: style = buildStyle({padding, fontWeight})
+  $: style = buildStyle({ padding, fontWeight })
   $: useIcon = !!icon
 </script>
 
-<div class="flatbutton" {style} class:selected on:click={() => onClick(value || text)}>
+<div
+  class="flatbutton"
+  {style}
+  class:selected
+  on:click={() => onClick(value || text)}>
   {#if useIcon}
     <i class={icon} />
   {:else}
-    <span>{@html text}</span>
+    <span>
+      {@html text}
+    </span>
   {/if}
 </div>
 
-
 <style>
   .flatbutton {
     cursor: pointer;
@@ -41,8 +46,8 @@
     background: var(--ink-light);
     color: #ffffff;
   }
-  
-  i{
+
+  i {
     font-size: 20px;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
index ad1107b1f..c9523f4d5 100644
--- a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
+++ b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
@@ -28,10 +28,8 @@
     onChange(val)
   }
 
-
   const checkSelected = val =>
     isMultiSelect ? value.includes(val) : value === val
-
 </script>
 
 <div class="flatbutton-group">
diff --git a/packages/builder/src/components/userInterface/ModelSelect.svelte b/packages/builder/src/components/userInterface/ModelSelect.svelte
new file mode 100644
index 000000000..4eab7a374
--- /dev/null
+++ b/packages/builder/src/components/userInterface/ModelSelect.svelte
@@ -0,0 +1,15 @@
+<script>
+  import { backendUiStore } from "builderStore"
+
+  export let value
+</script>
+
+<div class="uk-margin block-field">
+  <div class="uk-form-controls">
+    <select class="budibase__input" on:change {value}>
+      {#each $backendUiStore.models as model}
+        <option value={model._id}>{model.name}</option>
+      {/each}
+    </select>
+  </div>
+</div>
diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte
index d226e6129..8a1e3685f 100644
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@@ -1,6 +1,6 @@
 <script>
   import { onMount, beforeUpdate } from "svelte"
-  import {buildStyle} from "../../helpers.js"
+  import { buildStyle } from "../../helpers.js"
   export let options = []
   export let value = ""
   export let styleBindingProperty
@@ -214,10 +214,10 @@
     height: auto;
     padding: 5px 0px;
     cursor: pointer;
-    padding-left: 10px
+    padding-left: 10px;
   }
 
   li:hover {
-    background-color:#e6e6e6
+    background-color: #e6e6e6;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 711a2fa41..55036b2da 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -1,6 +1,7 @@
 import Input from "../common/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
 import Checkbox from "../common/Checkbox.svelte"
+import ModelSelect from "components/userInterface/ModelSelect.svelte"
 
 import { all } from "./propertyCategories.js"
 
@@ -273,14 +274,20 @@ export default {
           _component: "@budibase/standard-components/datatable",
           description: "A component that generates a table from your data.",
           icon: "ri-archive-drawer-fill",
-          properties: { design: { ...all } },
+          properties: {
+            design: { ...all },
+            settings: [{ label: "Model", key: "model", control: ModelSelect }],
+          },
           children: [],
         },
         {
           name: "Form",
           description: "A component that generates a form from your data.",
           icon: "ri-file-edit-fill",
-          properties: { design: { ...all } },
+          properties: {
+            design: { ...all },
+            settings: [{ label: "Model", key: "model", control: ModelSelect }],
+          },
           _component: "@budibase/standard-components/dataform",
           template: {
             component: "@budibase/materialdesign-components/Form",
@@ -294,7 +301,10 @@ export default {
           _component: "@budibase/standard-components/datachart",
           description: "Shiny chart",
           icon: "ri-bar-chart-fill",
-          properties: { design: { ...all } },
+          properties: {
+            design: { ...all },
+            settings: [{ label: "Model", key: "model", control: ModelSelect }],
+          },
           children: [],
         },
         {
@@ -302,7 +312,10 @@ export default {
           _component: "@budibase/standard-components/datalist",
           description: "Shiny list",
           icon: "ri-file-list-fill",
-          properties: { design: { ...all } },
+          properties: {
+            design: { ...all },
+            settings: [{ label: "Model", key: "model", control: ModelSelect }],
+          },
           children: [],
         },
         {
diff --git a/packages/builder/src/components/workflow/SetupPanel/ParamInputs/ModelSelector.svelte b/packages/builder/src/components/workflow/SetupPanel/ParamInputs/ModelSelector.svelte
index 29babefcd..1c39e1950 100644
--- a/packages/builder/src/components/workflow/SetupPanel/ParamInputs/ModelSelector.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/ParamInputs/ModelSelector.svelte
@@ -5,7 +5,6 @@
 </script>
 
 <div class="uk-margin block-field">
-  <label class="uk-form-label">Model</label>
   <div class="uk-form-controls">
     <select class="budibase__input" bind:value>
       {#each $backendUiStore.models as model}
diff --git a/packages/standard-components/src/DataChart.svelte b/packages/standard-components/src/DataChart.svelte
index 67c1579a2..3f7aafd8a 100644
--- a/packages/standard-components/src/DataChart.svelte
+++ b/packages/standard-components/src/DataChart.svelte
@@ -20,17 +20,17 @@
     height: "400",
     dataFormat: "json",
     dataSource: {
-      data: $store[model._id] || [],
+      data: $store[model] || [],
     },
   }
 
   async function fetchData() {
-    const FETCH_RECORDS_URL = `/api/${_instanceId}/all_${model._id}/records`
+    const FETCH_RECORDS_URL = `/api/${_instanceId}/views/all_${model}`
     const response = await _bb.api.get(FETCH_RECORDS_URL)
     if (response.status === 200) {
       const json = await response.json()
       store.update(state => {
-        state[model._id] = json
+        state[model] = json
         return state
       })
     } else {
diff --git a/packages/standard-components/src/DataList.svelte b/packages/standard-components/src/DataList.svelte
index 112332c6d..03bcd5ccc 100644
--- a/packages/standard-components/src/DataList.svelte
+++ b/packages/standard-components/src/DataList.svelte
@@ -10,13 +10,15 @@
   let store = _bb.store
 
   async function fetchData() {
-    const FETCH_RECORDS_URL = `/api/${_instanceId}/all_${model._id}/records`
+    if (!model || !model.length) return
+
+    const FETCH_RECORDS_URL = `/api/${_instanceId}/views/all_${model}`
     const response = await _bb.api.get(FETCH_RECORDS_URL)
     if (response.status === 200) {
       const json = await response.json()
 
       store.update(state => {
-        state[model._id] = json
+        state[model] = json
         return state
       })
     } else {
@@ -24,7 +26,8 @@
     }
   }
 
-  $: data = $store[model._id] || []
+  $: data = $store[model] || []
+  $: if (model) fetchData()
 
   onMount(async () => {
     await fetchData()
diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index 2d9097eb4..3619e1a39 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -10,13 +10,14 @@
   let store = _bb.store
 
   async function fetchData() {
-    const FETCH_RECORDS_URL = `/api/${_instanceId}/all_${model._id}/records`
+    const FETCH_RECORDS_URL = `/api/${_instanceId}/views/all_${model}`
+
     const response = await _bb.api.get(FETCH_RECORDS_URL)
     if (response.status === 200) {
       const json = await response.json()
 
       store.update(state => {
-        state[model._id] = json
+        state[model] = json
         return state
       })
 
@@ -26,7 +27,8 @@
     }
   }
 
-  $: data = $store[model._id] || []
+  $: data = $store[model] || []
+  $: if (model) fetchData()
 
   onMount(async () => {
     await fetchData()