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] 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 283a761c3b..7aa47605f9 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 f8eb00f6e3..153d00b6a6 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 a58fc12240..e6a4fac030 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 807dcee922..c91c30827e 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 8a16d5d0b1..f1d49894a0 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 bd302df5b7..df1b27e426 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 606310d44f..7ca59e87f2 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 e81659f716..35b9563a03 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>