From 5616857d162df3e894364376e15f4cc95f0699aa Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <mutasem@n8n.io>
Date: Mon, 13 Oct 2025 11:27:44 +0200
Subject: [PATCH] update latest components

---
 .../N8nNavigationDropdown/NavigationDropdown.vue |  2 +-
 .../editor-ui/src/features/chatHub/ChatView.vue  |  4 ++--
 .../features/chatHub/components/ChatSidebar.vue  | 16 ++++++++--------
 .../components/CredentialSelectorModal.vue       |  2 +-
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/frontend/@n8n/design-system/src/components/N8nNavigationDropdown/NavigationDropdown.vue b/packages/frontend/@n8n/design-system/src/components/N8nNavigationDropdown/NavigationDropdown.vue
index 1bff3e0b795..f1220740b1b 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nNavigationDropdown/NavigationDropdown.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nNavigationDropdown/NavigationDropdown.vue
@@ -239,7 +239,7 @@ defineExpose({
 .subMenuTitle {
 	display: inline-flex;
 	align-items: center;
-	gap: var(--spacing-2xs);
+	gap: var(--spacing--2xs);
 }
 
 .submenu__icon {
diff --git a/packages/frontend/editor-ui/src/features/chatHub/ChatView.vue b/packages/frontend/editor-ui/src/features/chatHub/ChatView.vue
index 80eab3b59c3..95e06cc64b7 100644
--- a/packages/frontend/editor-ui/src/features/chatHub/ChatView.vue
+++ b/packages/frontend/editor-ui/src/features/chatHub/ChatView.vue
@@ -722,8 +722,8 @@ const linksNewTabPlugin = (vueMarkdownItInstance: MarkdownIt) => {
 
 .modelSelector {
 	position: absolute;
-	top: var(--spacing-xs);
-	left: var(--spacing-xs);
+	top: var(--spacing--xs);
+	left: var(--spacing--xs);
 	z-index: 100;
 }
 </style>
diff --git a/packages/frontend/editor-ui/src/features/chatHub/components/ChatSidebar.vue b/packages/frontend/editor-ui/src/features/chatHub/components/ChatSidebar.vue
index 14ee8b86477..107b57782bf 100644
--- a/packages/frontend/editor-ui/src/features/chatHub/components/ChatSidebar.vue
+++ b/packages/frontend/editor-ui/src/features/chatHub/components/ChatSidebar.vue
@@ -69,7 +69,7 @@ function onNewChat() {
 	width: 200px;
 	height: 100%;
 	background-color: var(--color--background--light-3);
-	border-right: var(--border-base);
+	border-right: var(--border);
 	position: relative;
 	overflow: auto;
 }
@@ -78,14 +78,14 @@ function onNewChat() {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	padding: var(--spacing-xs);
-	gap: var(--spacing-2xs);
+	padding: var(--spacing--xs);
+	gap: var(--spacing--2xs);
 }
 
 .returnButton {
 	cursor: pointer;
 	display: flex;
-	gap: var(--spacing-3xs);
+	gap: var(--spacing--3xs);
 	align-items: center;
 	flex: 1;
 	&:hover {
@@ -96,8 +96,8 @@ function onNewChat() {
 .items {
 	display: flex;
 	flex-direction: column;
-	padding: 0 var(--spacing-3xs);
-	gap: var(--spacing-xs);
+	padding: 0 var(--spacing--3xs);
+	gap: var(--spacing--xs);
 }
 
 .group {
@@ -106,12 +106,12 @@ function onNewChat() {
 }
 
 .groupHeader {
-	padding: 0 var(--spacing-3xs) var(--spacing-3xs) var(--spacing-3xs);
+	padding: 0 var(--spacing--3xs) var(--spacing--3xs) var(--spacing--3xs);
 }
 
 .loading,
 .empty {
-	padding: var(--spacing-xs);
+	padding: var(--spacing--xs);
 	text-align: center;
 }
 </style>
diff --git a/packages/frontend/editor-ui/src/features/chatHub/components/CredentialSelectorModal.vue b/packages/frontend/editor-ui/src/features/chatHub/components/CredentialSelectorModal.vue
index 2d6acdb633c..b7dca0b2a6d 100644
--- a/packages/frontend/editor-ui/src/features/chatHub/components/CredentialSelectorModal.vue
+++ b/packages/frontend/editor-ui/src/features/chatHub/components/CredentialSelectorModal.vue
@@ -130,7 +130,7 @@ function onCancel() {
 
 .header {
 	display: flex;
-	gap: var(--spacing-2xs);
+	gap: var(--spacing--2xs);
 	align-items: center;
 }