From 80c9011892ada85715f0f2aaa98f754a5185748f Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Fri, 18 Oct 2024 23:16:14 +0100
Subject: [PATCH] Add background colors to icons within automations

- added background to trigger - orange
- added background color to actions - indigo
---
 .../FlowChart/ActionModal.svelte              |  2 +-
 .../FlowChart/FlowItemHeader.svelte           | 57 +++++++++++++++----
 .../SetupPanel/AutomationBlockSetup.svelte    |  4 +-
 .../automation/SetupPanel/PropField.svelte    |  2 +-
 4 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
index 90a797482a..9bd4645443 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
@@ -259,7 +259,7 @@
     background: var(--spectrum-global-color-gray-200);
   }
   .icon-background {
-    background-color: var(--spectrum-global-color-indigo-400);
+    background-color: var(--spectrum-global-color-indigo-500);
     padding: 0;
     border-radius: 6px;
     min-height: 28px;
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
index 0a94e79aac..1f417e35ec 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
@@ -115,20 +115,34 @@
       {#if externalActions[block.stepId]}
         <img
           alt={externalActions[block.stepId].name}
-          width="28px"
-          height="28px"
+          width="32px"
+          height="32px"
           src={externalActions[block.stepId].icon}
         />
+      {:else if isHeaderTrigger}
+        <div class="icon-background-trigger">
+          <svg
+            width="24px"
+            height="24px"
+            class="spectrum-Icon"
+            style="color:var(--spectrum-global-color-gray-900);"
+            focusable="false"
+          >
+            <use xlink:href="#spectrum-icon-18-{block.icon}" />
+          </svg>
+        </div>
       {:else}
-        <svg
-          width="28px"
-          height="28px"
-          class="spectrum-Icon"
-          style="color:var(--spectrum-global-color-gray-700);"
-          focusable="false"
-        >
-          <use xlink:href="#spectrum-icon-18-{block.icon}" />
-        </svg>
+        <div class="icon-background">
+          <svg
+            width="24px"
+            height="24px"
+            class="spectrum-Icon"
+            style="color:var(--spectrum-global-color-gray-900);"
+            focusable="false"
+          >
+            <use xlink:href="#spectrum-icon-18-{block.icon}" />
+          </svg>
+        </div>
       {/if}
       <div class="iconAlign">
         {#if isHeaderTrigger}
@@ -257,6 +271,27 @@
     display: flex;
     align-items: center;
   }
+  .icon-background-trigger {
+    background-color: var(--spectrum-global-color-static-orange-400);
+    padding: 0;
+    border-radius: 7px;
+    min-height: 32px;
+    min-width: 32px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .icon-background {
+    background-color: var(--spectrum-global-color-indigo-500);
+    padding: 0;
+    border-radius: 7px;
+    min-height: 32px;
+    min-width: 32px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+
   .splitHeader {
     display: flex;
     justify-content: space-between;
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 0c83e2520e..25ced49a4d 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -672,7 +672,7 @@
         <div class:block-field={shouldRenderField(value)}>
           {#if key !== "fields" && value.type !== "boolean" && shouldRenderField(value)}
             <div class="label-container">
-              <Label>
+              <Label size="L">
                 {label}
               </Label>
               {#if value.customType === AutomationCustomIOType.TRIGGER_FILTER}
@@ -746,7 +746,7 @@
             {:else if value.type === "attachment" || value.type === "signature_single"}
               <div class="attachment-field-wrapper">
                 <div class="label-wrapper">
-                  <Label>{label}</Label>
+                  <Label size="L">{label}</Label>
                 </div>
                 <div class="toggle-container">
                   <Toggle
diff --git a/packages/builder/src/components/automation/SetupPanel/PropField.svelte b/packages/builder/src/components/automation/SetupPanel/PropField.svelte
index ba3c0ff081..2994d317cc 100644
--- a/packages/builder/src/components/automation/SetupPanel/PropField.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/PropField.svelte
@@ -13,7 +13,7 @@
   style={`--comp-width: ${componentWidth}px;`}
 >
   <div class="prop-label" title={label}>
-    <Label tooltip={labelTooltip}>{label}</Label>
+    <Label size="L" tooltip={labelTooltip}>{label}</Label>
   </div>
   <div class="prop-control">
     <slot />