From c3e9cbcfd6ce73e74933ee0b372e821ddc9a5079 Mon Sep 17 00:00:00 2001
From: Mutasem <mutdmour@gmail.com>
Date: Mon, 28 Mar 2022 13:10:10 +0200
Subject: [PATCH] fix component styles

---
 .../editor-ui/src/components/NodeSettings.vue |  9 +++++-
 .../editor-ui/src/components/NodeTitle.vue    | 30 +++++++++++++------
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 95a143287d..2fc531d9ef 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -2,7 +2,7 @@
 	<div class="node-settings" @keydown.stop>
 		<div :class="$style.header">
 			<div class="header-side-menu">
-				<NodeTitle class="node-name" :name="node.name" :nodeType="nodeType" @valueChanged="valueChanged"></NodeTitle>
+				<NodeTitle class="node-name" :value="node.name" :nodeType="nodeType" @input="nameChanged"></NodeTitle>
 				<div
 					v-if="!isReadOnly"
 					class="execute-node-button"
@@ -372,6 +372,13 @@ export default mixins(
 
 				this.$externalHooks().run('nodeSettings.credentialSelected', { updateInformation });
 			},
+			nameChanged(name: string) {
+				// @ts-ignore
+				this.valueChanged({
+					value: name,
+					name: 'name',
+				});
+			},
 			valueChanged (parameterData: IUpdateInformation) {
 				let newValue: NodeParameterValue;
 				if (parameterData.hasOwnProperty('value')) {
diff --git a/packages/editor-ui/src/components/NodeTitle.vue b/packages/editor-ui/src/components/NodeTitle.vue
index 94a7960bc1..883e82d582 100644
--- a/packages/editor-ui/src/components/NodeTitle.vue
+++ b/packages/editor-ui/src/components/NodeTitle.vue
@@ -6,14 +6,16 @@
 			width="200"
 			:value="editName"
 			>
-			<p>Rename node</p>
-			<n8n-input size="small" v-model="newName" />
-			<div :class="$style.editButtons">
-				<n8n-button type="outline" size="small" @click="editName = false" label="Cancel" />
-				<n8n-button type="primary" size="small" @click="onRename" label="Rename" />
+			<div :class="$style.editContainer" @keydown.enter="onRename" @keydown.stop @keydown.esc="editName = false">
+				<n8n-text :bold="true" color="text-base">Rename node</n8n-text>
+				<n8n-input ref="input" size="small" v-model="newName" />
+				<div :class="$style.editButtons">
+					<n8n-button type="outline" size="small" @click="editName = false" label="Cancel" />
+					<n8n-button type="primary" size="small" @click="onRename" label="Rename" />
+				</div>
 			</div>
 			<span :class="$style.title" slot="reference">
-				{{name}}
+				{{value}}
 				<font-awesome-icon :class="$style.editIcon" icon="pencil-alt" />
 			</span>
 		</el-popover>
@@ -26,7 +28,7 @@ import Vue from 'vue';
 export default Vue.extend({
 	name: 'NodeTitle',
 	props: {
-		name: {
+		value: {
 			type: String,
 		},
 		nodeType: {
@@ -40,11 +42,17 @@ export default Vue.extend({
 	},
 	methods: {
 		onEdit() {
-			this.newName = this.name;
+			this.newName = this.value;
 			this.editName = true;
+			this.$nextTick(() => {
+				const input = this.$refs.input;
+				if (input) {
+					(input as HTMLInputElement).focus();
+				}
+			});
 		},
 		onRename() {
-			this.$emit('update', this.newName);
+			this.$emit('input', this.newName);
 			this.editName = false;
 		},
 	},
@@ -90,4 +98,8 @@ export default Vue.extend({
 		margin-left: var(--spacing-4xs);
 	}
 }
+
+.editContainer {
+	text-align: left;
+}
 </style>