From e2c9415e1de80265bf2d013a2410af9716f6ff12 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 6 Oct 2021 15:07:51 +0100
Subject: [PATCH] update icon padding and block background-color

---
 .../FlowChart/FlowChart.svelte                | 42 +++++++------------
 1 file changed, 15 insertions(+), 27 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index c05a103fac..fee8afd711 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@@ -4,9 +4,9 @@
   import FlowItem from "./FlowItem.svelte"
   import TestDataModal from "./TestDataModal.svelte"
   import { flip } from "svelte/animate"
-  import { fade, fly } from "svelte/transition"
+  import { fly } from "svelte/transition"
   import {
-    Detail,
+    Heading,
     Icon,
     ActionButton,
     notifications,
@@ -57,26 +57,24 @@
   <div class="content">
     <div class="title">
       <div class="subtitle">
-        <Detail size="L">{automation.name}</Detail>
-        <div
-          style="display:flex;
-          color: var(--spectrum-global-color-gray-400);"
-        >
-          <span class="iconPadding">
+        <Heading size="S">{automation.name}</Heading>
+        <div style="display:flex;">
+          <div class="iconPadding">
             <div class="icon">
               <Icon
                 on:click={confirmDeleteDialog.show}
                 hoverable
+                size="M"
                 name="DeleteOutline"
               />
             </div>
-          </span>
+          </div>
           <ActionButton
             on:click={() => {
               testDataModal.show()
             }}
             icon="MultipleCheck"
-            size="S">Run test</ActionButton
+            size="M">Run test</ActionButton
           >
         </div>
       </div>
@@ -84,16 +82,11 @@
     {#each blocks as block, idx (block.id)}
       <div
         class="block"
-        animate:flip={{ duration: 800 }}
-        in:fade|local
-        out:fly|local={{ x: 500 }}
+        animate:flip={{ duration: 500 }}
+        in:fly|local={{ x: 500, duration: 1500 }}
+        out:fly|local={{ x: 500, duration: 800 }}
       >
         <FlowItem {testDataModal} {testAutomation} {onSelect} {block} />
-        {#if idx !== blocks.length - 1}
-          <div class="separator" />
-          <Icon name="AddCircle" size="S" />
-          <div class="separator" />
-        {/if}
       </div>
     {/each}
   </div>
@@ -114,14 +107,6 @@
 </div>
 
 <style>
-  .separator {
-    width: 1px;
-    height: 25px;
-    border-left: 1px dashed var(--grey-4);
-    color: var(--grey-4);
-    /* center horizontally */
-    align-self: center;
-  }
   .canvas {
     margin: 0 -40px calc(-1 * var(--spacing-l)) -40px;
     overflow-y: auto;
@@ -153,11 +138,14 @@
     padding-bottom: var(--spacing-xl);
     display: flex;
     justify-content: space-between;
+    align-items: center;
+  }
+  .iconPadding {
+    padding-top: var(--spacing-s);
   }
 
   .icon {
     cursor: pointer;
-    display: flex;
     padding-right: var(--spacing-m);
   }
 </style>