new automation modal update

- improved inline alert title spacing
- added a background color to the modal component - it was grey on light
- changed static color of triggers - yellow
-

packages/bbui/src/InlineAlert/InlineAlert.svelte

@@ -63,4 +63,7 @@
     margin: 0;
     border-width: 1px;
   }
+  .spectrum-InLineAlert-header {
+    line-height: 1.2;
+  }
 </style>

packages/bbui/src/Modal/Modal.svelte

@@ -182,6 +182,7 @@
       --spectrum-global-dimension-size-100
     );
     max-width: 100%;
+    background-color: var(--background);
   }
   :global(.spectrum--lightest .spectrum-Modal.inline) {
     border: var(--border-light);

packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte

@@ -267,7 +267,8 @@
     align-items: center;
   }
   .icon-background-trigger {
-    background-color: #6afdef;
+    background-color: #ffd230;
+    /*background-color: #6afdef;*/
     padding: 0;
     border-radius: 8px;
     min-height: 32px;

packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte

@@ -57,6 +57,7 @@
   onConfirm={createAutomation}
   disabled={!selectedTrigger || !name}
 >
+  <InlineAlert header="Click Publish to activate your automation." />
   <Input
     bind:value={name}
     on:input={() => (nameTouched = true)}
@@ -130,7 +131,8 @@
     background: var(--spectrum-global-color-gray-200);
   }
   .icon-background-trigger {
-    background-color: #6afdef;
+    background-color: #ffd230;
+    /*background-color: #6afdef;*/
     padding: 0;
     border-radius: 6px;
     min-height: 28px;