diff --git a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte index c46783092c..ad49776605 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte @@ -61,7 +61,7 @@ footer { position: absolute; - bottom: 20px; + bottom: var(--spacing-xl); right: 30px; display: flex; align-items: flex-end; @@ -80,7 +80,7 @@ justify-content: center; } footer > button:first-child { - margin-right: 20px; + margin-right: var(--spacing-m); } .play-button.highlighted { diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/Arrow.svelte b/packages/builder/src/components/automation/AutomationBuilder/flowchart/Arrow.svelte index eaf84c3088..4dab01d6f1 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/flowchart/Arrow.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/flowchart/Arrow.svelte @@ -10,6 +10,6 @@ diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/AutomationBlockTagline.svelte b/packages/builder/src/components/automation/AutomationBuilder/flowchart/AutomationBlockTagline.svelte index 7503f2dc35..1b612390ea 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/flowchart/AutomationBlockTagline.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/flowchart/AutomationBlockTagline.svelte @@ -29,10 +29,11 @@ .replace(/}}/, "}}") // Extract schema paths for any input bindings - const inputPaths = formattedTagline - .match(/{{\s*\S+\s*}}/g) - .map(x => x.replace(/[{}]/g, "").trim()) - const schemaPaths = inputPaths.map(x => x.replace(/\./g, ".properties.")) + let inputPaths = formattedTagline.match(/{{\s*\S+\s*}}/g) || [] + inputPaths = inputPaths.map(path => path.replace(/[{}]/g, "").trim()) + const schemaPaths = inputPaths.map(path => + path.replace(/\./g, ".properties.") + ) // Replace any enum bindings with their pretty equivalents schemaPaths.forEach((path, idx) => { diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte index 2465a421d8..1d7ebb35f8 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte @@ -37,7 +37,7 @@ diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte index 7cd3d3f05a..6f07c97f4d 100644 --- a/packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte +++ b/packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte @@ -22,67 +22,74 @@ } -
- - Create Automation -
-
- +
+
+ + Create Automation +
+
+ +
+
- diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte index 1042f5456b..1940f88d44 100644 --- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte +++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte @@ -20,7 +20,7 @@ class="hoverable" class:selected={selectedTab === 'ADD'} on:click={() => (selectedTab = 'ADD')}> - Add step + Steps {/if} @@ -37,11 +37,11 @@ background: none; display: flex; align-items: center; - margin-bottom: 20px; + margin-bottom: var(--spacing-xl); } .automation-header { - margin-right: 20px; + margin-right: var(--spacing-xl); } span:not(.selected) { diff --git a/packages/builder/src/components/automation/AutomationPanel/BlockList/AutomationBlock.svelte b/packages/builder/src/components/automation/AutomationPanel/BlockList/AutomationBlock.svelte index 50eb977dc7..884a109de5 100644 --- a/packages/builder/src/components/automation/AutomationPanel/BlockList/AutomationBlock.svelte +++ b/packages/builder/src/components/automation/AutomationPanel/BlockList/AutomationBlock.svelte @@ -8,7 +8,7 @@ function addBlockToAutomation() { automationStore.actions.addBlockToAutomation({ ...blockDefinition, - args: blockDefinition.args || {}, + inputs: blockDefinition.inputs || {}, stepId, type: blockType, }) @@ -33,26 +33,15 @@ display: grid; grid-template-columns: 20px auto; align-items: center; - margin-top: 16px; - padding: 12px; + margin-top: var(--spacing-s); + padding: var(--spacing-m); border-radius: var(--border-radius-m); } - .automation-block:hover { background-color: var(--grey-1); } - - .automation-text { - margin-left: 16px; - } - - .icon { - height: 40px; - width: 40px; - background: var(--blue-light); - display: flex; - align-items: center; - justify-content: center; + .automation-block:first-child { + margin-top: 0; } i { @@ -60,14 +49,16 @@ font-size: 20px; } - h4 { + .automation-text { + margin-left: 16px; + } + .automation-text h4 { font-size: 14px; font-weight: 500; margin-bottom: 5px; margin-top: 0; } - - p { + .automation-text p { font-size: 12px; color: var(--grey-7); margin: 0; diff --git a/packages/builder/src/components/automation/AutomationPanel/BlockList/BlockList.svelte b/packages/builder/src/components/automation/AutomationPanel/BlockList/BlockList.svelte index 5dd709c4b2..1455f60ef1 100644 --- a/packages/builder/src/components/automation/AutomationPanel/BlockList/BlockList.svelte +++ b/packages/builder/src/components/automation/AutomationPanel/BlockList/BlockList.svelte @@ -1,11 +1,14 @@ +
{#if $automationStore.selectedAutomation} {/if}
@@ -25,28 +21,19 @@ diff --git a/packages/builder/src/pages/[application]/backend/_layout.svelte b/packages/builder/src/pages/[application]/backend/_layout.svelte index 0dfefef094..2ace085890 100644 --- a/packages/builder/src/pages/[application]/backend/_layout.svelte +++ b/packages/builder/src/pages/[application]/backend/_layout.svelte @@ -1,4 +1,3 @@ - +