From 38e4b562808dadbe47d4fcdf4c907e6d1c374a33 Mon Sep 17 00:00:00 2001
From: Tomi Turtiainen <10324676+tomi@users.noreply.github.com>
Date: Fri, 1 Dec 2023 16:00:48 +0200
Subject: [PATCH] fix(editor): Tune styles of template credential setup
 (no-changelog) (#7898)

---
 .../AppsRequiringCredsNotice.vue                          | 8 +++++++-
 .../SetupTemplateFormStep.vue                             | 5 ++++-
 .../SetupWorkflowFromTemplateView.vue                     | 5 +++--
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/AppsRequiringCredsNotice.vue b/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/AppsRequiringCredsNotice.vue
index 45f7e4392..87e44b489 100644
--- a/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/AppsRequiringCredsNotice.vue
+++ b/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/AppsRequiringCredsNotice.vue
@@ -22,9 +22,15 @@ const appNodeCounts = computed(() => {
 </script>
 
 <template>
-	<n8n-notice theme="info">
+	<n8n-notice :class="$style.notice" theme="info">
 		<i18n-t tag="span" keypath="templateSetup.instructions" scope="global">
 			<span v-html="appNodeCounts" />
 		</i18n-t>
 	</n8n-notice>
 </template>
+
+<style lang="scss" module>
+.notice {
+	margin-top: 0;
+}
+</style>
diff --git a/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupTemplateFormStep.vue b/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupTemplateFormStep.vue
index 161d501d0..ae67e6d21 100644
--- a/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupTemplateFormStep.vue
+++ b/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupTemplateFormStep.vue
@@ -118,7 +118,7 @@ const onCredentialDeselected = () => {
 .heading {
 	display: flex;
 	align-items: center;
-	margin-bottom: var(--spacing-xs);
+	margin-bottom: var(--spacing-2xs);
 }
 
 .headingOrder {
@@ -132,6 +132,8 @@ const onCredentialDeselected = () => {
 
 .description {
 	margin-bottom: var(--spacing-l);
+	font-size: var(--font-size-s);
+	color: var(--color-text-base);
 }
 
 .credentials {
@@ -146,6 +148,7 @@ const onCredentialDeselected = () => {
 
 .credentialOk {
 	margin-left: var(--spacing-2xs);
+	font-size: 24px;
 }
 
 .invisible {
diff --git a/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupWorkflowFromTemplateView.vue b/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupWorkflowFromTemplateView.vue
index 13ffcb1b0..f985a36f6 100644
--- a/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupWorkflowFromTemplateView.vue
+++ b/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/SetupWorkflowFromTemplateView.vue
@@ -143,6 +143,7 @@ onMounted(async () => {
 							:disabled="setupTemplateStore.numCredentialsLeft === 0"
 						>
 							<n8n-button
+								size="large"
 								:label="$locale.baseText('templateSetup.continue.button')"
 								:disabled="setupTemplateStore.numCredentialsLeft > 0 || setupTemplateStore.isSaving"
 								@click="setupTemplateStore.createWorkflow($router)"
@@ -163,7 +164,7 @@ onMounted(async () => {
 .grid {
 	display: grid;
 	grid-template-columns: repeat(12, 1fr);
-	padding: var(--spacing-l) var(--spacing-l) 0;
+	padding: 0 var(--spacing-l);
 	justify-content: center;
 }
 
@@ -191,7 +192,7 @@ onMounted(async () => {
 
 .appCredential:not(:last-of-type) {
 	padding-bottom: var(--spacing-2xl);
-	border-bottom: 1px solid var(--prim-gray-540);
+	border-bottom: 1px solid var(--color-foreground-light);
 }
 
 .actions {