fix(editor): Tune styles of template credential setup (no-changelog) (#…

…7898)
n8n-io · Dec 1, 2023 · 38e4b56 · 38e4b56
1 parent f8e93b3
commit 38e4b56
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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 {