From d2e4706b973af490fcdda507ef12b544bdf67c21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E0=A4=95=E0=A4=BE=E0=A4=B0=E0=A4=A4=E0=A5=8B=E0=A4=AB?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=AB=E0=A5=87=E0=A4=B2=E0=A4=B8=E0=A5=8D=E0=A4=95?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=B0=E0=A4=BF=E0=A4=AA=E0=A5=8D=E0=A4=9F=E2=84=A2?=
 <netroy@users.noreply.github.com>
Date: Thu, 13 Mar 2025 11:14:30 +0100
Subject: [PATCH] fix(editor): Fix logo alignment issues (#13870)

---
 .../editor-ui/src/components/Logo/Logo.vue    | 24 ++--------------
 .../components/Logo/__tests__/Logo.test.ts    |  7 -----
 .../__tests__/__snapshots__/Logo.test.ts.snap | 28 ++++---------------
 .../src/components/Logo/logo-icon.svg         |  2 +-
 4 files changed, 8 insertions(+), 53 deletions(-)

diff --git a/packages/frontend/editor-ui/src/components/Logo/Logo.vue b/packages/frontend/editor-ui/src/components/Logo/Logo.vue
index d6077bc2af..58ff64f251 100644
--- a/packages/frontend/editor-ui/src/components/Logo/Logo.vue
+++ b/packages/frontend/editor-ui/src/components/Logo/Logo.vue
@@ -22,12 +22,6 @@ const props = defineProps<
 
 const { location, releaseChannel } = props;
 
-const showReleaseChannelTag = computed(() => {
-	if (releaseChannel === 'stable') return false;
-	if (location === 'authView') return true;
-	return !props.collapsed;
-});
-
 const showLogoText = computed(() => {
 	if (location === 'authView') return true;
 	return !props.collapsed;
@@ -65,7 +59,6 @@ onMounted(() => {
 	<div :class="containerClasses" data-test-id="n8n-logo">
 		<LogoIcon ref="logo" :class="$style.logo" />
 		<LogoText v-if="showLogoText" :class="$style.logoText" />
-		<div v-if="showReleaseChannelTag" :class="$style.releaseChannelTag">{{ releaseChannel }}</div>
 		<slot />
 	</div>
 </template>
@@ -84,19 +77,6 @@ onMounted(() => {
 	}
 }
 
-.releaseChannelTag {
-	color: var(--color-text-dark);
-	padding: var(--spacing-5xs) var(--spacing-4xs);
-	background-color: var(--color-background-base);
-	border: 1px solid var(--color-foreground-base);
-	border-radius: var(--border-radius-base);
-	font-size: var(--font-size-3xs);
-	font-weight: var(--font-weight-bold);
-	text-transform: capitalize;
-	line-height: var(--font-line-height-regular);
-	margin: 8px 0 0 3px;
-}
-
 .authView {
 	transform: scale(2);
 	margin-bottom: var(--spacing-xl);
@@ -104,7 +84,7 @@ onMounted(() => {
 
 .logo,
 .logoText {
-	transform: scale(1.3);
+	transform: scale(1.3) translateY(-2px);
 }
 
 .logoText {
@@ -113,7 +93,7 @@ onMounted(() => {
 }
 
 .sidebarExpanded .logo {
-	margin-left: var(--spacing-3xs);
+	margin-left: var(--spacing-2xs);
 }
 
 .sidebarCollapsed .logo {
diff --git a/packages/frontend/editor-ui/src/components/Logo/__tests__/Logo.test.ts b/packages/frontend/editor-ui/src/components/Logo/__tests__/Logo.test.ts
index 49b8d1a22f..84432a108a 100644
--- a/packages/frontend/editor-ui/src/components/Logo/__tests__/Logo.test.ts
+++ b/packages/frontend/editor-ui/src/components/Logo/__tests__/Logo.test.ts
@@ -28,11 +28,4 @@ describe('Logo', () => {
 		});
 		expect(wrapper.html()).toMatchSnapshot();
 	});
-
-	it('renders the releaseChannelTag for non-stable releaseChannel', async () => {
-		const wrapper = renderComponent({
-			props: { location: 'authView', releaseChannel: 'dev' },
-		});
-		expect(wrapper.html()).toMatchSnapshot();
-	});
 });
diff --git a/packages/frontend/editor-ui/src/components/Logo/__tests__/__snapshots__/Logo.test.ts.snap b/packages/frontend/editor-ui/src/components/Logo/__tests__/__snapshots__/Logo.test.ts.snap
index 3a05aaf73d..a6b0809c0d 100644
--- a/packages/frontend/editor-ui/src/components/Logo/__tests__/__snapshots__/Logo.test.ts.snap
+++ b/packages/frontend/editor-ui/src/components/Logo/__tests__/__snapshots__/Logo.test.ts.snap
@@ -1,49 +1,31 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Logo > renders the logo for authView location 1`] = `
-"<div class="logoContainer authView" data-test-id="n8n-logo"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" class="logo">
+"<div class="logoContainer authView" data-test-id="n8n-logo"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="30" class="logo">
     <path fill="#EA4B71" fill-rule="evenodd" d="M27.2 16.4a3.2 3.2 0 0 1-3.1-2.4h-3.667a1.6 1.6 0 0 0-1.578 1.337l-.132.79A3.2 3.2 0 0 1 17.683 18a3.2 3.2 0 0 1 1.04 1.874l.132.789A1.6 1.6 0 0 0 20.433 22h.468a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-6.3.8h-.467a3.2 3.2 0 0 1-3.156-2.674l-.132-.789a1.6 1.6 0 0 0-1.578-1.337h-1.268a3.201 3.201 0 0 1-6.198 0H6.299A3.201 3.201 0 0 1 0 18a3.2 3.2 0 0 1 6.3-.8h1.8a3.201 3.201 0 0 1 6.2 0h1.267a1.6 1.6 0 0 0 1.578-1.337l.132-.79a3.2 3.2 0 0 1 3.156-2.673h3.668a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-3.2 3.2m0-1.6a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m-24 4.8a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m9.6-1.6a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0m12.8 4.8a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0" clip-rule="evenodd"></path>
   </svg><svg width="26" height="30" class="logoText">
     <g fill="#101330">
       <path fill-rule="evenodd" d="M15.002 16.918v-.076c.558-.28 1.116-.762 1.116-1.716 0-1.372-1.13-2.198-2.69-2.198-1.598 0-2.74.877-2.74 2.224 0 .915.533 1.41 1.116 1.69v.076a2.16 2.16 0 0 0-1.42 2.059c0 1.385 1.141 2.351 3.032 2.351 1.89 0 2.994-.966 2.994-2.351a2.16 2.16 0 0 0-1.408-2.059m-1.587-2.82c.635 0 1.104.406 1.104 1.092s-.482 1.093-1.103 1.093c-.622 0-1.142-.407-1.142-1.093 0-.699.495-1.093 1.142-1.093m0 6.01c-.735 0-1.332-.47-1.332-1.27 0-.725.495-1.272 1.32-1.272.812 0 1.307.534 1.307 1.297 0 .775-.571 1.245-1.294 1.245" clip-rule="evenodd"></path>
       <path d="M18.367 21.2h1.624v-3.442c0-1.131.685-1.627 1.46-1.627.76 0 1.357.509 1.357 1.55v3.52h1.624V17.35c0-1.664-.964-2.63-2.474-2.63-.952 0-1.485.381-1.865.877h-.102l-.14-.75h-1.484zm-14.376 0H2.367v-6.352h1.485l.14.75h.1c.381-.496.914-.877 1.866-.877 1.51 0 2.474.966 2.474 2.63v3.85H6.808V17.68c0-1.041-.596-1.55-1.358-1.55-.774 0-1.459.496-1.459 1.627z"></path>
     </g>
-  </svg>
-  <!--v-if-->
-</div>"
+  </svg></div>"
 `;
 
 exports[`Logo > renders the logo for sidebar location when sidebar is collapsed 1`] = `
-"<div class="logoContainer sidebar sidebarCollapsed" data-test-id="n8n-logo"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" class="logo">
+"<div class="logoContainer sidebar sidebarCollapsed" data-test-id="n8n-logo"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="30" class="logo">
     <path fill="#EA4B71" fill-rule="evenodd" d="M27.2 16.4a3.2 3.2 0 0 1-3.1-2.4h-3.667a1.6 1.6 0 0 0-1.578 1.337l-.132.79A3.2 3.2 0 0 1 17.683 18a3.2 3.2 0 0 1 1.04 1.874l.132.789A1.6 1.6 0 0 0 20.433 22h.468a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-6.3.8h-.467a3.2 3.2 0 0 1-3.156-2.674l-.132-.789a1.6 1.6 0 0 0-1.578-1.337h-1.268a3.201 3.201 0 0 1-6.198 0H6.299A3.201 3.201 0 0 1 0 18a3.2 3.2 0 0 1 6.3-.8h1.8a3.201 3.201 0 0 1 6.2 0h1.267a1.6 1.6 0 0 0 1.578-1.337l.132-.79a3.2 3.2 0 0 1 3.156-2.673h3.668a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-3.2 3.2m0-1.6a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m-24 4.8a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m9.6-1.6a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0m12.8 4.8a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0" clip-rule="evenodd"></path>
   </svg>
   <!--v-if-->
-  <!--v-if-->
 </div>"
 `;
 
 exports[`Logo > renders the logo for sidebar location when sidebar is expanded 1`] = `
-"<div class="logoContainer sidebar sidebarExpanded" data-test-id="n8n-logo"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" class="logo">
+"<div class="logoContainer sidebar sidebarExpanded" data-test-id="n8n-logo"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="30" class="logo">
     <path fill="#EA4B71" fill-rule="evenodd" d="M27.2 16.4a3.2 3.2 0 0 1-3.1-2.4h-3.667a1.6 1.6 0 0 0-1.578 1.337l-.132.79A3.2 3.2 0 0 1 17.683 18a3.2 3.2 0 0 1 1.04 1.874l.132.789A1.6 1.6 0 0 0 20.433 22h.468a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-6.3.8h-.467a3.2 3.2 0 0 1-3.156-2.674l-.132-.789a1.6 1.6 0 0 0-1.578-1.337h-1.268a3.201 3.201 0 0 1-6.198 0H6.299A3.201 3.201 0 0 1 0 18a3.2 3.2 0 0 1 6.3-.8h1.8a3.201 3.201 0 0 1 6.2 0h1.267a1.6 1.6 0 0 0 1.578-1.337l.132-.79a3.2 3.2 0 0 1 3.156-2.673h3.668a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-3.2 3.2m0-1.6a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m-24 4.8a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m9.6-1.6a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0m12.8 4.8a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0" clip-rule="evenodd"></path>
   </svg><svg width="26" height="30" class="logoText">
     <g fill="#101330">
       <path fill-rule="evenodd" d="M15.002 16.918v-.076c.558-.28 1.116-.762 1.116-1.716 0-1.372-1.13-2.198-2.69-2.198-1.598 0-2.74.877-2.74 2.224 0 .915.533 1.41 1.116 1.69v.076a2.16 2.16 0 0 0-1.42 2.059c0 1.385 1.141 2.351 3.032 2.351 1.89 0 2.994-.966 2.994-2.351a2.16 2.16 0 0 0-1.408-2.059m-1.587-2.82c.635 0 1.104.406 1.104 1.092s-.482 1.093-1.103 1.093c-.622 0-1.142-.407-1.142-1.093 0-.699.495-1.093 1.142-1.093m0 6.01c-.735 0-1.332-.47-1.332-1.27 0-.725.495-1.272 1.32-1.272.812 0 1.307.534 1.307 1.297 0 .775-.571 1.245-1.294 1.245" clip-rule="evenodd"></path>
       <path d="M18.367 21.2h1.624v-3.442c0-1.131.685-1.627 1.46-1.627.76 0 1.357.509 1.357 1.55v3.52h1.624V17.35c0-1.664-.964-2.63-2.474-2.63-.952 0-1.485.381-1.865.877h-.102l-.14-.75h-1.484zm-14.376 0H2.367v-6.352h1.485l.14.75h.1c.381-.496.914-.877 1.866-.877 1.51 0 2.474.966 2.474 2.63v3.85H6.808V17.68c0-1.041-.596-1.55-1.358-1.55-.774 0-1.459.496-1.459 1.627z"></path>
     </g>
-  </svg>
-  <!--v-if-->
-</div>"
-`;
-
-exports[`Logo > renders the releaseChannelTag for non-stable releaseChannel 1`] = `
-"<div class="logoContainer authView" data-test-id="n8n-logo"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" class="logo">
-    <path fill="#838383" fill-rule="evenodd" d="M27.2 16.4a3.2 3.2 0 0 1-3.1-2.4h-3.667a1.6 1.6 0 0 0-1.578 1.337l-.132.79A3.2 3.2 0 0 1 17.683 18a3.2 3.2 0 0 1 1.04 1.874l.132.789A1.6 1.6 0 0 0 20.433 22h.468a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-6.3.8h-.467a3.2 3.2 0 0 1-3.156-2.674l-.132-.789a1.6 1.6 0 0 0-1.578-1.337h-1.268a3.201 3.201 0 0 1-6.198 0H6.299A3.201 3.201 0 0 1 0 18a3.2 3.2 0 0 1 6.3-.8h1.8a3.201 3.201 0 0 1 6.2 0h1.267a1.6 1.6 0 0 0 1.578-1.337l.132-.79a3.2 3.2 0 0 1 3.156-2.673h3.668a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-3.2 3.2m0-1.6a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m-24 4.8a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m9.6-1.6a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0m12.8 4.8a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0" clip-rule="evenodd"></path>
-  </svg><svg width="26" height="30" class="logoText">
-    <g fill="#101330">
-      <path fill-rule="evenodd" d="M15.002 16.918v-.076c.558-.28 1.116-.762 1.116-1.716 0-1.372-1.13-2.198-2.69-2.198-1.598 0-2.74.877-2.74 2.224 0 .915.533 1.41 1.116 1.69v.076a2.16 2.16 0 0 0-1.42 2.059c0 1.385 1.141 2.351 3.032 2.351 1.89 0 2.994-.966 2.994-2.351a2.16 2.16 0 0 0-1.408-2.059m-1.587-2.82c.635 0 1.104.406 1.104 1.092s-.482 1.093-1.103 1.093c-.622 0-1.142-.407-1.142-1.093 0-.699.495-1.093 1.142-1.093m0 6.01c-.735 0-1.332-.47-1.332-1.27 0-.725.495-1.272 1.32-1.272.812 0 1.307.534 1.307 1.297 0 .775-.571 1.245-1.294 1.245" clip-rule="evenodd"></path>
-      <path d="M18.367 21.2h1.624v-3.442c0-1.131.685-1.627 1.46-1.627.76 0 1.357.509 1.357 1.55v3.52h1.624V17.35c0-1.664-.964-2.63-2.474-2.63-.952 0-1.485.381-1.865.877h-.102l-.14-.75h-1.484zm-14.376 0H2.367v-6.352h1.485l.14.75h.1c.381-.496.914-.877 1.866-.877 1.51 0 2.474.966 2.474 2.63v3.85H6.808V17.68c0-1.041-.596-1.55-1.358-1.55-.774 0-1.459.496-1.459 1.627z"></path>
-    </g>
-  </svg>
-  <div class="releaseChannelTag">dev</div>
-</div>"
+  </svg></div>"
 `;
diff --git a/packages/frontend/editor-ui/src/components/Logo/logo-icon.svg b/packages/frontend/editor-ui/src/components/Logo/logo-icon.svg
index 90a0081f12..14f312c4b7 100644
--- a/packages/frontend/editor-ui/src/components/Logo/logo-icon.svg
+++ b/packages/frontend/editor-ui/src/components/Logo/logo-icon.svg
@@ -1,3 +1,3 @@
-<svg xmlns='http://www.w3.org/2000/svg' width="30" height="30">
+<svg xmlns='http://www.w3.org/2000/svg' width="32" height="30">
   <path fill="#EA4B71" fill-rule="evenodd" clip-rule="evenodd" transform="translate(0, 10)" d="M27.2 6.4A3.2 3.2 0 0 1 24.1 4h-3.667a1.6 1.6 0 0 0-1.578 1.337l-.132.79A3.2 3.2 0 0 1 17.683 8a3.2 3.2 0 0 1 1.04 1.874l.132.789A1.6 1.6 0 0 0 20.433 12h.468a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-6.3.8h-.467a3.2 3.2 0 0 1-3.156-2.674l-.132-.789A1.6 1.6 0 0 0 15.567 8.8h-1.268a3.201 3.201 0 0 1-6.198 0H6.299A3.201 3.201 0 0 1 0 8a3.2 3.2 0 0 1 6.3-.8h1.8a3.201 3.201 0 0 1 6.2 0h1.267a1.6 1.6 0 0 0 1.578-1.337l.132-.79A3.2 3.2 0 0 1 20.433 2.4h3.668a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-3.2 3.2m0-1.6a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m-24 4.8a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2M12.8 8a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0m12.8 4.8a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0" />
 </svg>