Improve workflow block list design and UI consistency

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">
+  <FlatButtonGroup value={selectedTab} {buttonProps} onChange={onChangeTab} />
-    {#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>
   <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>

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;
+    padding: 12px;
-    border-radius: var(--border);
+    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 {

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"