From f4a40b8a2bd9e9d76fa9ebd93df221249d8c96c6 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Tue, 29 Oct 2024 15:27:50 +0000
Subject: [PATCH] Updated looping icon and spacing

- updated looping icon (cyan + black)
- updated looping label type - to p
- removed label margin
---
 .../FlowChart/FlowItem.svelte                 | 38 +++++++++++++------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index 55c632e1ca..36c1f9c1a0 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -123,17 +123,19 @@
           class="splitHeader"
         >
           <div class="center-items">
-            <svg
-              width="28px"
-              height="28px"
-              class="spectrum-Icon"
-              style="color:var(--spectrum-global-color-gray-700);"
-              focusable="false"
-            >
-              <use xlink:href="#spectrum-icon-18-Reuse" />
-            </svg>
+            <div class="icon-background-loop">
+              <svg
+                width="20px"
+                height="20px"
+                class="spectrum-Icon"
+                style="color:#000000;"
+                focusable="false"
+              >
+                <use xlink:href="#spectrum-icon-18-Reuse" />
+              </svg>
+            </div>
             <div class="iconAlign">
-              <Detail size="S">Looping</Detail>
+              <p class="label">Looping</p>
             </div>
           </div>
 
@@ -145,7 +147,7 @@
             <div style="margin-left: 10px;" on:click={() => {}}>
               <Icon
                 hoverable
-                name={showLooping ? "ChevronDown" : "ChevronRight"}
+                name={showLooping ? "ChevronRight" : "ChevronDown"}
               />
             </div>
           </div>
@@ -254,6 +256,9 @@
     display: flex;
     align-items: center;
   }
+  .label {
+    margin: 0;
+  }
   .splitHeader {
     display: flex;
     justify-content: space-between;
@@ -274,7 +279,16 @@
   .blockSection {
     padding: var(--spacing-xl);
   }
-
+  .icon-background-loop {
+    background-color: #6afdef;
+    padding: 0;
+    border-radius: 8px;
+    min-height: 32px;
+    min-width: 32px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
   .separator {
     width: 1px;
     height: 25px;