From d7a66048c4d70905ebc6b6527baf196d5aed26c2 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Thu, 4 Jun 2020 19:27:25 +0100
Subject: [PATCH] Workflow UI update

---
 packages/builder/src/budibase.css             |   7 +-
 .../workflow/SetupPanel/SetupPanel.svelte     | 158 +++++++++++++-----
 .../SetupPanel/WorkflowBlockSetup.svelte      |  20 ++-
 .../WorkflowList/CreateWorkflowModal.svelte   |   2 +-
 .../WorkflowList/WorkflowList.svelte          |  41 +++--
 .../WorkflowPanel/WorkflowPanel.svelte        |  11 +-
 packages/builder/src/global.css               |   4 +
 .../[application]/frontend/_layout.svelte     |  38 -----
 .../[application]/workflow/_layout.svelte     |  19 ++-
 9 files changed, 187 insertions(+), 113 deletions(-)

diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css
index 910a795cd2..3d880cbfa2 100644
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@@ -76,15 +76,14 @@
 }
 
 .budibase__input {
-    width: 100%;
-    max-width: 250px;
     height: 35px;
+    width: 220px;
     border-radius: 3px;
     border: 1px solid var(--grey-dark);
     text-align: left;
     color: var(--ink);
-    font-size: 16px;
-    padding-left: 5px;
+    font-size: 14px;
+    padding-left: 12px;
 }
 
 .uk-text-right {
diff --git a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
index 7d681a9ac0..ad35af33b9 100644
--- a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
@@ -60,7 +60,7 @@
     </span>
     {#if !workflowBlock}
       <span
-        class="hoverable"
+        class="test-tab"
         class:selected={selectedTab === 'TEST'}
         on:click={() => (selectedTab = 'TEST')}>
         Test
@@ -86,36 +86,42 @@
   {#if selectedTab === 'SETUP'}
     {#if workflowBlock}
       <WorkflowBlockSetup {workflowBlock} />
-      <button class="workflow-button hoverable" on:click={deleteWorkflowBlock}>
-        Delete Block
-      </button>
+      <div class="buttons">
+        <button class="delete-workflow-button hoverable" on:click={deleteWorkflowBlock}>
+          Delete Block
+        </button>
+      </div>
     {:else if $workflowStore.currentWorkflow}
-      <div class="panel-body">
-        <label class="uk-form-label">Workflow: {workflow.name}</label>
-        <div class="uk-margin config-item">
-          <label class="uk-form-label">Name</label>
-          <div class="uk-form-controls">
-            <input
-              type="text"
-              class="budibase__input"
-              bind:value={workflow.name} />
+      <div class="panel">
+        <div class="panel-body">
+          <div class="block-label">Workflow: {workflow.name}</div>
+          <div class="config-item">
+            <label>Name</label>
+            <div class="form">
+              <input
+                type="text"
+                class="budibase_input"
+                bind:value={workflow.name} />
+            </div>
+          </div>
+          <div class="config-item">
+            <label class="uk-form-label">User Access</label>
+            <div class="access-levels">
+              {#each ACCESS_LEVELS as { name, key }}
+                <span class="access-level">
+                  <label>{name}</label>
+                  <input class="uk-checkbox" type="checkbox" />
+                </span>
+              {/each}
+            </div>
           </div>
         </div>
-        <div class="uk-margin config-item">
-          <label class="uk-form-label">User Access</label>
-          <div class="access-levels">
-            {#each ACCESS_LEVELS as { name, key }}
-              <span class="access-level">
-                <label>{name}</label>
-                <input class="uk-checkbox" type="checkbox" />
-              </span>
-            {/each}
-          </div>
+        <div class="buttons">
+          <button class="delete-workflow-button" on:click={deleteWorkflow}>
+            Delete Workflow
+          </button>
         </div>
       </div>
-      <button class="workflow-button hoverable" on:click={deleteWorkflow}>
-        Delete Workflow
-      </button>
     {/if}
   {/if}
 </section>
@@ -125,53 +131,118 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    justify-content: space-between;
   }
 
   .panel-body {
     flex: 1;
   }
 
+  .panel {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
   header {
     font-size: 20px;
-    font-weight: bold;
+    font-weight: 700;
     display: flex;
     align-items: center;
-    margin-bottom: 20px;
+    margin-bottom: 18px;
+    color: var(--ink);
   }
 
   .selected {
-    color: var(--font);
+    color: var(--ink);
+  }
+
+  .block-label {
+    font-weight: 500;
+    font-size: 14px;
+    color: var(--ink);
+    margin: 0px 0px 16px 0px;
   }
 
   .config-item {
-    padding: 20px;
+    margin: 0px 0px 4px 0px;
+    padding: 12px;
     background: var(--light-grey);
   }
 
+  .budibase_input {
+    height: 35px;
+    width: 220px;
+    border-radius: 3px;
+    border: 1px solid var(--grey-dark);
+    text-align: left;
+    color: var(--ink);
+    font-size: 14px;
+    padding-left: 12px;
+}
+
   header > span {
-    color: var(--dark-grey);
+    color: var(--ink-lighter);
     margin-right: 20px;
   }
 
+  .form {
+    margin-top: 12px;
+  }
+
   label {
     font-weight: 500;
     font-size: 14px;
-    color: var(--font);
+    color: var(--ink);
+  }
+
+  .buttons {
+    position: absolute;
+    bottom: 10px;
+  }
+
+  .delete-workflow-button {
+    cursor: pointer;
+    border: 1px solid var(--red);
+    border-radius: 3px;
+    width: 260px;
+    padding: 8px 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: var(--white);
+    color: var(--red);
+    font-size: 14px;
+    font-weight: 500;
+    transition: all 2ms;
+    align-self: flex-end;
+    margin-bottom: 10px;
+  }
+
+  .delete-workflow-button:hover {
+    background: var(--red);
+    border: 1px solid var(--red);
+    color: var(--white);
   }
 
   .workflow-button {
-    font-family: Roboto;
+    cursor: pointer;
+    border: 1px solid var(--grey-dark);
+    border-radius: 3px;
     width: 100%;
-    border: solid 1px #f2f2f2;
-    border-radius: 2px;
-    background: var(--white);
-    height: 32px;
-    font-size: 12px;
+    padding: 8px 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: white;
+    color: var(--ink);
+    font-size: 14px;
     font-weight: 500;
+    transition: all 2ms;
   }
 
   .workflow-button:hover {
-    background: var(--light-grey);
+    background: var(--grey-light);
   }
 
   .access-level {
@@ -183,14 +254,15 @@
 
   .access-level label {
     font-weight: normal;
+    color: var(--ink);
   }
 
   .test-result {
     border: none;
     width: 100%;
-    border-radius: 2px;
+    border-radius: 3px;
     height: 32px;
-    font-size: 12px;
+    font-size: 14px;
     font-weight: 500;
     color: var(--white);
     text-align: center;
@@ -198,10 +270,10 @@
   }
 
   .passed {
-    background: #84c991;
+    background: #84C991;
   }
 
   .failed {
-    background: var(--coral);
+    background: var(--red);
   }
 </style>
diff --git a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
index 08bf2d72db..1c275c0dff 100644
--- a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
@@ -15,12 +15,12 @@
 
 <label class="uk-form-label">{workflowBlock.type}: {workflowBlock.name}</label>
 {#each workflowParams as [parameter, type]}
-  <div class="uk-margin block-field">
+  <div class="block-field">
     <label class="uk-form-label">{parameter}</label>
     <div class="uk-form-controls">
       {#if Array.isArray(type)}
         <select
-          class="budibase__input"
+          class="budibase_input"
           bind:value={workflowBlock.args[parameter]}>
           {#each type as option}
             <option value={option}>{option}</option>
@@ -67,10 +67,22 @@
 <style>
   .block-field {
     border-radius: 3px;
-    background: var(--light-grey);
-    padding: 20px;
+    background: var(--grey-light);
+    padding: 12px;
+    margin: 0px 0px 4px 0px;
   }
 
+  .budibase_input {
+    height: 35px;
+    width: 220px;
+    border-radius: 3px;
+    border: 1px solid var(--grey-dark);
+    text-align: left;
+    color: var(--ink);
+    font-size: 14px;
+    padding-left: 12px;
+}
+
   label {
     text-transform: capitalize;
     font-size: 14px;
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte
index 687c2ec370..66683182b8 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte
@@ -35,7 +35,7 @@
     <i class="ri-information-line" />
     Learn about workflows
   </a>
-  <ActionButton alert on:click={onClosed}>Cancel</ActionButton>
+  <ActionButton secondary on:click={onClosed}>Cancel</ActionButton>
   <ActionButton disabled={!valid} on:click={createWorkflow}>Save</ActionButton>
 </footer>
 
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
index e6182a807d..2aa685ac2e 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
@@ -38,6 +38,7 @@
 
 <section>
   <button class="new-workflow-button hoverable" on:click={newWorkflow}>
+    <i class="icon ri-add-circle-fill" />
     Create New Workflow
   </button>
   <ul>
@@ -87,12 +88,13 @@
   }
 
   .workflow-item {
-    padding: 20px;
     display: flex;
-    align-items: center;
     border-radius: 3px;
-    height: 32px;
-    font-weight: 500;
+    padding-left: 12px; 
+    align-items: center;
+    height: 40px;
+    margin-bottom: 4px;
+    color: var(--ink);
   }
 
   .workflow-item i {
@@ -102,25 +104,36 @@
 
   .workflow-item:hover {
     cursor: pointer;
-    background: var(--secondary);
+    background: var(--grey-light);
   }
 
   .workflow-item.selected {
-    background: var(--secondary);
+    background: var(--blue-light);
   }
-
+  
   .new-workflow-button {
-    font-family: Roboto;
+    cursor: pointer;
+    border: 1px solid var(--grey-dark);
+    border-radius: 3px;
     width: 100%;
-    border: solid 1px #f2f2f2;
-    border-radius: 2px;
-    background: var(--white);
-    height: 32px;
-    font-size: 12px;
+    padding: 8px 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: white;
+    color: var(--ink);
+    font-size: 14px;
     font-weight: 500;
+    transition: all 2ms;
   }
 
   .new-workflow-button:hover {
-    background: var(--light-grey);
+    background: var(--grey-light);
+  }
+
+  .icon {
+    color: var(--ink);
+    font-size: 16px;
+    margin-right: 4px;
   }
 </style>
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
index b057177cae..986afdd6e0 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
@@ -33,8 +33,9 @@
 
 <style>
   header {
-    font-size: 20px;
-    font-weight: bold;
+    font-size: 18px;
+    font-weight: 700;
+    background: none;
     display: flex;
     align-items: center;
     margin-bottom: 20px;
@@ -45,6 +46,10 @@
   }
 
   span:not(.selected) {
-    color: var(--dark-grey);
+    color: var(--ink-lighter);
+  }
+
+    span:not(.selected):hover {
+    color: var(--ink);
   }
 </style>
diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css
index 8f3f2ecd56..7259111c63 100644
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@@ -16,6 +16,10 @@
     --grey-medium: #e8e8ef;
     --grey-dark: #E6E6E6;
 
+    --red: #E26D69;
+    --red-light:#FFE6E6;
+    --red-dark: #800400;
+
     --primary100: #0055ff;
     --primary80: rgba(0, 85, 255, 0.8);
     --primary60: #rgba(0, 85, 255, 0.6);
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte
index 9acdfe70fc..c232df095e 100644
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@@ -106,44 +106,6 @@
     overflow-y: hidden;
   }
 
-  .components-nav-page {
-    font-size: 13px;
-    color: var(--ink);
-    padding-left: 20px;
-    margin-top: 20px;
-    font-weight: 600;
-    opacity: 0.4;
-    letter-spacing: 1px;
-  }
-
-  .components-nav-header {
-    font-size: 13px;
-    color: var(--ink);
-    margin-top: 20px;
-    font-weight: 600;
-    opacity: 0.4;
-    letter-spacing: 1px;
-  }
-
-  .nav-header {
-    display: flex;
-    flex-direction: column;
-    margin-top: 20px;
-  }
-
-  .nav-items-container {
-    padding: 1rem 0rem 0rem 0rem;
-  }
-
-  .nav-group-header {
-    display: flex;
-    padding: 0px 20px 0px 20px;
-    font-size: 0.9rem;
-    font-weight: bold;
-    justify-content: space-between;
-    align-items: center;
-    min-height: 0;
-  }
 
   .nav-group-header > div:nth-child(1) {
     padding: 0rem 0.5rem 0rem 0rem;
diff --git a/packages/builder/src/pages/[application]/workflow/_layout.svelte b/packages/builder/src/pages/[application]/workflow/_layout.svelte
index acaf2350ee..96a0dcbb2f 100644
--- a/packages/builder/src/pages/[application]/workflow/_layout.svelte
+++ b/packages/builder/src/pages/[application]/workflow/_layout.svelte
@@ -5,13 +5,17 @@
 
 <div class="root">
   <div class="nav">
-    <WorkflowPanel />
+    <div class="inner">
+      <WorkflowPanel />
+    </div>
   </div>
   <div class="content">
     <slot />
   </div>
   <div class="nav">
-    <SetupPanel />
+    <div class="inner">
+      <SetupPanel />
+    </div>
   </div>
 </div>
 
@@ -24,7 +28,7 @@
   .root {
     height: 100%;
     display: flex;
-    background: #fafafa;
+    background: var(--grey-light);
   }
 
   .content {
@@ -33,10 +37,13 @@
   }
 
   .nav {
-    padding: 20px;
     overflow: auto;
-    width: 275px;
-    border: 1px solid var(--medium-grey);
+    width: 300px;
+    border-right: 1px solid var(--grey);
     background: var(--white);
   }
+
+  .inner {
+    padding: 20px;
+  }
 </style>