From 0b056bf46987c84ccfba5520894993069039784d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 9 Sep 2020 12:40:44 +0100
Subject: [PATCH] Improve workflow block list design and UI consistency

---
 .../WorkflowPanel/BlockList/BlockList.svelte  | 70 ++++---------------
 .../BlockList/WorkflowBlock.svelte            |  9 +--
 .../WorkflowPanel/WorkflowPanel.svelte        |  3 +-
 3 files changed, 22 insertions(+), 60 deletions(-)

diff --git a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte
index 3a071ad00f..3851e1a204 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte
@@ -1,15 +1,23 @@
 <script>
   import { onMount } from "svelte"
   import { backendUiStore, workflowStore } from "builderStore"
-  import { WorkflowList } from "../"
+  import WorkflowList from "../WorkflowList/WorkflowList.svelte"
   import WorkflowBlock from "./WorkflowBlock.svelte"
   import blockDefinitions from "../blockDefinitions"
+  import FlatButtonGroup from "components/userInterface/FlatButtonGroup.svelte"
 
   let selectedTab = "TRIGGER"
   let definitions = []
 
-  $: definitions = Object.entries(blockDefinitions[selectedTab])
+  $: buttonProps = [
+    ...($workflowStore.currentWorkflow.hasTrigger()
+      ? []
+      : [{ value: "TRIGGER", text: "Trigger" }]),
+    { value: "ACTION", text: "Action" },
+    { value: "LOGIC", text: "Logic" },
+  ]
 
+  $: definitions = Object.entries(blockDefinitions[selectedTab])
   $: {
     if (
       $workflowStore.currentWorkflow.hasTrigger() &&
@@ -18,65 +26,17 @@
       selectedTab = "ACTION"
     }
   }
+
+  function onChangeTab(tab) {
+    selectedTab = tab
+  }
 </script>
 
 <section>
-  <div class="subtabs">
-    {#if !$workflowStore.currentWorkflow.hasTrigger()}
-      <span
-        class="hoverable"
-        class:selected={'TRIGGER' === selectedTab}
-        on:click={() => (selectedTab = 'TRIGGER')}>
-        Triggers
-      </span>
-    {/if}
-    <span
-      class="hoverable"
-      class:selected={'ACTION' === selectedTab}
-      on:click={() => (selectedTab = 'ACTION')}>
-      Actions
-    </span>
-    <span
-      class="hoverable"
-      class:selected={'LOGIC' === selectedTab}
-      on:click={() => (selectedTab = 'LOGIC')}>
-      Logic
-    </span>
-  </div>
+  <FlatButtonGroup value={selectedTab} {buttonProps} onChange={onChangeTab} />
   <div id="blocklist">
     {#each definitions as [actionId, blockDefinition]}
       <WorkflowBlock {blockDefinition} {actionId} blockType={selectedTab} />
     {/each}
   </div>
 </section>
-
-<style>
-  .subtabs {
-    margin-top: 20px;
-    display: grid;
-    grid-auto-flow: column;
-    grid-auto-columns: 1fr 1fr 1fr;
-    margin-bottom: 12px;
-  }
-
-  .subtabs span {
-    transition: 0.3s all;
-    text-align: center;
-    color: var(--grey-7);
-    font-weight: 400;
-    padding: 8px 16px;
-    text-rendering: optimizeLegibility;
-    border: none !important;
-    outline: none;
-  }
-
-  .subtabs span.selected {
-    background: var(--grey-3);
-    color: var(--ink);
-    border-radius: 5px;
-  }
-
-  .subtabs span:not(.selected) {
-    color: var(--ink);
-  }
-</style>
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte
index 1882f91b7a..5ba08648c9 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte
@@ -31,11 +31,11 @@
 <style>
   .workflow-block {
     display: grid;
-    grid-template-columns: 40px auto;
+    grid-template-columns: 20px auto;
     align-items: center;
     margin-top: 16px;
-    padding: 16px 0px;
-    border-radius: var(--border);
+    padding: 12px;
+    border-radius: var(--border-radius-m);
   }
 
   .workflow-block:hover {
@@ -43,7 +43,7 @@
   }
 
   .workflow-text {
-    margin-left: 12px;
+    margin-left: 16px;
   }
 
   .icon {
@@ -64,6 +64,7 @@
     font-size: 14px;
     font-weight: 500;
     margin-bottom: 5px;
+    margin-top: 0;
   }
 
   p {
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
index f5cd0c440d..b5bd5c5124 100644
--- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
+++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
@@ -1,7 +1,8 @@
 <script>
   import { onMount } from "svelte"
   import { backendUiStore, workflowStore } from "builderStore"
-  import { WorkflowList, BlockList } from "./"
+  import WorkflowList from "./WorkflowList/WorkflowList.svelte"
+  import BlockList from "./BlockList/BlockList.svelte"
   import blockDefinitions from "./blockDefinitions"
 
   let selectedTab = "WORKFLOWS"