Merge pull request #394 from Budibase/workflow-ui-update

Workflow UI Update

packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte

@@ -5,6 +5,7 @@
   import { notifier } from "builderStore/store/notifications"
   import WorkflowBlockSetup from "./WorkflowBlockSetup.svelte"
   import DeleteWorkflowModal from "./DeleteWorkflowModal.svelte"
+  import { Button } from "@budibase/bbui"
 
   const { open, close } = getContext("simple-modal")
 
@@ -90,26 +91,21 @@
           {testResult}
         </button>
       {/if}
-      <button class="workflow-button hoverable" on:click={testWorkflow}>
-        Test
-      </button>
+      <Button secondary wide on:click={testWorkflow}>Test Workflow</Button>
     </div>
   {/if}
   {#if selectedTab === 'SETUP'}
     {#if workflowBlock}
       <WorkflowBlockSetup {workflowBlock} />
       <div class="buttons">
-        <button
+        <Button
+          green
+          wide
           data-cy="save-workflow-setup"
-          class="workflow-button hoverable"
           on:click={saveWorkflow}>
           Save Workflow
-        </button>
-        <button
-          class="delete-workflow-button hoverable"
-          on:click={deleteWorkflowBlock}>
-          Delete Block
-        </button>
+        </Button>
+        <Button red wide on:click={deleteWorkflowBlock}>Delete Block</Button>
       </div>
     {:else if $workflowStore.currentWorkflow}
       <div class="panel">
@@ -141,15 +137,14 @@
           </div>
         </div>
         <div class="buttons">
-          <button
+          <Button
+            green
+            wide
             data-cy="save-workflow-setup"
-            class="workflow-button hoverable"
             on:click={saveWorkflow}>
             Save Workflow
-          </button>
-          <button class="delete-workflow-button" on:click={deleteWorkflow}>
-            Delete Workflow
-          </button>
+          </Button>
+          <Button red wide on:click={deleteWorkflow}>Delete Workflow</Button>
         </div>
       </div>
     {/if}
@@ -175,11 +170,12 @@
   }
 
   header {
-    font-size: 20px;
+    font-size: 18px;
     font-weight: 600;
+    font-family: inter;
     display: flex;
     align-items: center;
-    margin-bottom: 18px;
+    margin-bottom: 20px;
     color: var(--ink);
   }
 
@@ -190,13 +186,12 @@
   .block-label {
     font-weight: 500;
     font-size: 14px;
-    color: var(--ink);
-    margin: 0px 0px 16px 0px;
+    color: var(--grey-7);
+    margin-bottom: 20px;
   }
 
   .config-item {
-    margin: 0px 0px 4px 0px;
-    padding: 12px 0px;
+    margin-bottom: 20px;
   }
 
   .budibase_input {
@@ -214,6 +209,7 @@
   header > span {
     color: var(--grey-5);
     margin-right: 20px;
+    cursor: pointer;
   }
 
   .form {
@@ -228,52 +224,10 @@
 
   .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 {
-    cursor: pointer;
-    border: 1px solid var(--grey-4);
-    border-radius: 3px;
+    bottom: 20px;
+    display: grid;
     width: 100%;
-    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;
-    margin-bottom: 10px;
-  }
-
-  .workflow-button:hover {
-    background: var(--grey-1);
+    gap: 12px;
   }
 
   .access-level {
@@ -301,7 +255,7 @@
   }
 
   .passed {
-    background: #84c991;
+    background: var(--green);
   }
 
   .failed {

packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte

@@ -13,85 +13,84 @@
     : []
 </script>
 
-<label class="uk-form-label">{workflowBlock.type}: {workflowBlock.name}</label>
+<label class="selected-label">{workflowBlock.type}: {workflowBlock.name}</label>
 {#each workflowParams as [parameter, type]}
   <div class="block-field">
-    <label class="uk-form-label">{parameter}</label>
-    <div class="uk-form-controls">
-      {#if Array.isArray(type)}
-        <select
-          class="budibase_input"
-          bind:value={workflowBlock.args[parameter]}>
-          {#each type as option}
-            <option value={option}>{option}</option>
-          {/each}
-        </select>
-      {:else if type === 'component'}
-        <ComponentSelector bind:value={workflowBlock.args[parameter]} />
-      {:else if type === 'accessLevel'}
-        <select
-          class="budibase__input"
-          bind:value={workflowBlock.args[parameter]}>
-          <option value="ADMIN">Admin</option>
-          <option value="POWER_USER">Power User</option>
-        </select>
-      {:else if type === 'password'}
-        <input
-          type="password"
-          class="budibase__input"
-          bind:value={workflowBlock.args[parameter]} />
-      {:else if type === 'number'}
-        <input
-          type="number"
-          class="budibase__input"
-          bind:value={workflowBlock.args[parameter]} />
-      {:else if type === 'longText'}
-        <textarea
-          type="text"
-          class="budibase__input"
-          bind:value={workflowBlock.args[parameter]} />
-      {:else if type === 'model'}
-        <ModelSelector bind:value={workflowBlock.args[parameter]} />
-      {:else if type === 'record'}
-        <RecordSelector bind:value={workflowBlock.args[parameter]} />
-      {:else if type === 'string'}
-        <input
-          type="text"
-          class="budibase__input"
-          bind:value={workflowBlock.args[parameter]} />
-      {/if}
-    </div>
+    <label class="label">{parameter}</label>
+    {#if Array.isArray(type)}
+      <select class="budibase_input" bind:value={workflowBlock.args[parameter]}>
+        {#each type as option}
+          <option value={option}>{option}</option>
+        {/each}
+      </select>
+    {:else if type === 'component'}
+      <ComponentSelector bind:value={workflowBlock.args[parameter]} />
+    {:else if type === 'accessLevel'}
+      <select class="budibase_input" bind:value={workflowBlock.args[parameter]}>
+        <option value="ADMIN">Admin</option>
+        <option value="POWER_USER">Power User</option>
+      </select>
+    {:else if type === 'password'}
+      <input
+        type="password"
+        class="budibase_input"
+        bind:value={workflowBlock.args[parameter]} />
+    {:else if type === 'number'}
+      <input
+        type="number"
+        class="budibase_input"
+        bind:value={workflowBlock.args[parameter]} />
+    {:else if type === 'longText'}
+      <textarea
+        type="text"
+        class="budibase_input"
+        bind:value={workflowBlock.args[parameter]} />
+    {:else if type === 'model'}
+      <ModelSelector bind:value={workflowBlock.args[parameter]} />
+    {:else if type === 'record'}
+      <RecordSelector bind:value={workflowBlock.args[parameter]} />
+    {:else if type === 'string'}
+      <input
+        type="text"
+        class="budibase_input"
+        bind:value={workflowBlock.args[parameter]} />
+    {/if}
   </div>
 {/each}
 
 <style>
   .block-field {
-    border-radius: 3px;
-    background: var(--grey-1);
-    padding: 12px;
-    margin: 0px 0px 4px 0px;
+    display: grid;
   }
-
   .budibase_input {
     height: 36px;
-    width: 220px;
-    border-radius: 3px;
-    border: 1px solid var(--grey-4);
+    border-radius: 5px;
+    background-color: var(--grey-2);
+    border: 1px solid var(--grey-2);
     text-align: left;
     color: var(--ink);
     font-size: 14px;
     padding-left: 12px;
+    margin-top: 8px;
   }
 
   label {
     text-transform: capitalize;
     font-size: 14px;
     font-weight: 500;
+    margin-top: 20px;
+  }
+
+  .selected-label {
+    text-transform: capitalize;
+    font-size: 14px;
+    font-weight: 500;
   }
 
   textarea {
     min-height: 150px;
     font-family: inherit;
-    padding: 5px;
+    padding: 12px;
+    margin-top: 8px;
   }
 </style>

packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte

@@ -81,7 +81,7 @@
   }
 
   .play-button.highlighted {
-    background: var(--primary);
+    background: var(--purple);
   }
 
   .stop-button.highlighted {

packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte

@@ -67,6 +67,10 @@
     color: var(--ink);
   }
 
+  p {
+    color: inherit;
+  }
+
   div:hover {
     transform: scale(1.05);
   }

packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte

@@ -4,6 +4,7 @@
   import { onMount, getContext } from "svelte"
   import { backendUiStore, workflowStore } from "builderStore"
   import CreateWorkflowModal from "./CreateWorkflowModal.svelte"
+  import { Button } from "@budibase/bbui"
 
   const { open, close } = getContext("simple-modal")
 
@@ -27,10 +28,7 @@
 </script>
 
 <section>
-  <button class="new-workflow-button hoverable" on:click={newWorkflow}>
-    <i class="icon ri-add-circle-fill" />
-    Create New Workflow
-  </button>
+  <Button purple wide on:click{newWorkflow}>Create New Workflow</Button>
   <ul>
     {#each $workflowStore.workflows as workflow}
       <li
@@ -74,10 +72,10 @@
 
   .workflow-item {
     display: flex;
-    border-radius: 3px;
+    border-radius: 5px;
     padding-left: 12px;
     align-items: center;
-    height: 40px;
+    height: 36px;
     margin-bottom: 4px;
     color: var(--ink);
   }