Add background colors to icons within automations

- added background to trigger - orange
- added background color to actions - indigo

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;

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"
+          width="32px"
-          height="28px"
+          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
+        <div class="icon-background">
-          width="28px"
+          <svg
-          height="28px"
+            width="24px"
-          class="spectrum-Icon"
+            height="24px"
-          style="color:var(--spectrum-global-color-gray-700);"
+            class="spectrum-Icon"
-          focusable="false"
+            style="color:var(--spectrum-global-color-gray-900);"
-        >
+            focusable="false"
-          <use xlink:href="#spectrum-icon-18-{block.icon}" />
+          >
-        </svg>
+            <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;

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

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 />