From ff4eb7bc5a3cbf497c8ca11bc50ed4b70d541676 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Thu, 28 Nov 2024 17:32:43 +0000
Subject: [PATCH] fixing issues from latest merge

- handle religned to prevent card from growing
- spacing improved with modal cards
- automations closed by default
- background and border added to header to improve structure
---
 .../FlowChart/ActionModal.svelte              |  2 +-
 .../FlowChart/BranchNode.svelte               |  4 ++--
 .../FlowChart/FlowChart.svelte                |  2 ++
 .../FlowChart/FlowItem.svelte                 | 20 ++++++++++++++-----
 .../CreateAutomationModal.svelte              |  2 +-
 5 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
index cc38052f8c..eaec3386fb 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
@@ -221,7 +221,7 @@
 <style>
   .item-body {
     display: flex;
-    margin-left: var(--spacing-m);
+    margin-left: var(--spacing-xs);
     gap: var(--spacing-m);
     align-items: center;
   }
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte
index d45b3299bf..d569ec5b10 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte
@@ -34,7 +34,7 @@
 
   let drawer
   let condition
-  let open = true
+  let open = false
   let confirmDeleteModal
 
   $: branch = step.inputs?.branches?.[branchIdx]
@@ -220,7 +220,7 @@
     display: inline-block;
   }
   .block {
-    width: 360px;
+    width: 380px;
     font-size: 16px;
     background-color: var(--background);
     border: 1px solid var(--spectrum-global-color-gray-300);
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index 7086d5d1cd..87888040cc 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@@ -221,6 +221,8 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    background-color: var(--background);
+    border-bottom: var(--border-light);
     padding-left: var(--spacing-l);
     transition: background 130ms ease-out;
     flex: 0 0 60px;
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index c232b5d558..8274ea2402 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -39,8 +39,8 @@
   const contentPos = getContext("contentPos")
 
   let webhookModal
-  let open = true
-  let showLooping = false
+  let open = false
+  let showLooping = true
   let role
   let blockEle
   let positionStyles
@@ -387,7 +387,6 @@
   .block {
     width: 360px;
     font-size: 16px;
-    border-radius: 4px;
   }
   .block .wrap {
     width: 100%;
@@ -398,20 +397,27 @@
     flex-direction: row;
   }
   .block.draggable .wrap .handle {
-    height: auto;
+    position: absolute;
+    top: -0.5px;
+    left: -14px;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: var(--grey-3);
-    padding: 6px;
+    padding: 0 4px;
+    height: 100%;
     color: var(--grey-6);
     cursor: grab;
+    border-top-left-radius: 12px;
+    border-bottom-left-radius: 12px;
   }
   .block.draggable .wrap .handle.grabbing {
     cursor: grabbing;
   }
   .block.draggable .wrap .handle :global(.drag-handle) {
     width: 6px;
+    margin-left: 1px;
+    padding-top: 4px;
   }
   .block .wrap .block-content {
     width: 100%;
@@ -421,6 +427,10 @@
     border: 1px solid var(--spectrum-global-color-gray-300);
     border-radius: 12px;
   }
+  .block-content:has(.handle) {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+  }
   .blockSection {
     padding: var(--spacing-xl);
   }
diff --git a/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte b/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
index a015a1e086..33cb63ca23 100644
--- a/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
@@ -91,7 +91,7 @@
 <style>
   .item-body {
     display: flex;
-    margin-left: var(--spacing-m);
+    margin-left: var(--spacing-xs);
     gap: var(--spacing-m);
     align-items: center;
   }