From 45243876dc3acd3ced32197d2f61bcc4e47e3429 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Tue, 22 Oct 2024 13:46:36 +0100
Subject: [PATCH] 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              | 3 +++
 packages/bbui/src/Modal/Modal.svelte                          | 1 +
 .../AutomationBuilder/FlowChart/FlowItemHeader.svelte         | 3 ++-
 .../automation/AutomationPanel/CreateAutomationModal.svelte   | 4 +++-
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/InlineAlert/InlineAlert.svelte b/packages/bbui/src/InlineAlert/InlineAlert.svelte
index 3b98936f62..3203b17a1c 100644
--- a/packages/bbui/src/InlineAlert/InlineAlert.svelte
+++ b/packages/bbui/src/InlineAlert/InlineAlert.svelte
@@ -63,4 +63,7 @@
     margin: 0;
     border-width: 1px;
   }
+  .spectrum-InLineAlert-header {
+    line-height: 1.2;
+  }
 </style>
diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte
index c5a6ffc17b..c58b615a38 100644
--- a/packages/bbui/src/Modal/Modal.svelte
+++ b/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);
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
index 8a6cf15a6f..0c1fc04527 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
+++ b/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;
diff --git a/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte b/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
index 56a4f132a0..49e9e6f3bb 100644
--- a/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
+++ b/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;