From b6055c5fe97756f64e6b91a1132d91226fb014aa Mon Sep 17 00:00:00 2001
From: Jaakko Husso <jaakko@n8n.io>
Date: Thu, 8 May 2025 17:20:30 +0300
Subject: [PATCH] feat(editor): Change WorkflowCard archived styles
 (no-changelog) (#15214)

---
 .../src/components/WorkflowCard.test.ts       | 13 +++--
 .../editor-ui/src/components/WorkflowCard.vue | 54 +++++++++++++++----
 2 files changed, 51 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/editor-ui/src/components/WorkflowCard.test.ts b/packages/frontend/editor-ui/src/components/WorkflowCard.test.ts
index 27940e4dc6c..466bbe8dca0 100644
--- a/packages/frontend/editor-ui/src/components/WorkflowCard.test.ts
+++ b/packages/frontend/editor-ui/src/components/WorkflowCard.test.ts
@@ -314,17 +314,20 @@ describe('WorkflowCard', () => {
 		expect(heading).toHaveTextContent('Read only');
 	});
 
-	it('should show Archived badge on archived workflows', async () => {
+	it('should show Archived text on archived workflows', async () => {
 		const data = createWorkflow({ isArchived: true });
-		const { getByTestId } = renderComponent({ props: { data } });
+		const { getByTestId, queryByTestId } = renderComponent({ props: { data } });
 
-		expect(getByTestId('workflow-archived-tag')).toBeInTheDocument();
+		expect(getByTestId('workflow-card-archived')).toBeInTheDocument();
+		expect(getByTestId('workflow-card-archived')).toHaveTextContent('Archived');
+		expect(queryByTestId('workflow-card-activator')).not.toBeInTheDocument();
 	});
 
-	it('should not show Archived badge on non archived workflows', async () => {
+	it('should not show Archived text on non archived workflows', async () => {
 		const data = createWorkflow({ isArchived: false });
 		const { queryByTestId } = renderComponent({ props: { data } });
 
-		expect(queryByTestId('workflow-archived-tag')).not.toBeInTheDocument();
+		expect(queryByTestId('workflow-card-archived')).not.toBeInTheDocument();
+		expect(queryByTestId('workflow-card-activator')).toBeInTheDocument();
 	});
 });
diff --git a/packages/frontend/editor-ui/src/components/WorkflowCard.vue b/packages/frontend/editor-ui/src/components/WorkflowCard.vue
index e189f395908..f8723584188 100644
--- a/packages/frontend/editor-ui/src/components/WorkflowCard.vue
+++ b/packages/frontend/editor-ui/src/components/WorkflowCard.vue
@@ -401,22 +401,28 @@ const onBreadcrumbItemClick = async (item: PathItem) => {
 </script>
 
 <template>
-	<n8n-card :class="$style.cardLink" data-test-id="workflow-card" @click="onClick">
+	<n8n-card
+		:class="{
+			[$style.cardLink]: true,
+			[$style.cardArchived]: data.isArchived,
+		}"
+		data-test-id="workflow-card"
+		@click="onClick"
+	>
 		<template #header>
-			<n8n-text tag="h2" bold :class="$style.cardHeading" data-test-id="workflow-card-name">
+			<n8n-text
+				tag="h2"
+				bold
+				:class="{
+					[$style.cardHeading]: true,
+					[$style.cardHeadingArchived]: data.isArchived,
+				}"
+				data-test-id="workflow-card-name"
+			>
 				{{ data.name }}
 				<N8nBadge v-if="!workflowPermissions.update" class="ml-3xs" theme="tertiary" bold>
 					{{ locale.baseText('workflows.item.readonly') }}
 				</N8nBadge>
-				<N8nBadge
-					v-if="data.isArchived"
-					class="ml-3xs"
-					theme="tertiary"
-					bold
-					data-test-id="workflow-archived-tag"
-				>
-					{{ locale.baseText('workflows.item.archived') }}
-				</N8nBadge>
 			</n8n-text>
 		</template>
 		<div :class="$style.cardDescription">
@@ -472,7 +478,19 @@ const onBreadcrumbItemClick = async (item: PathItem) => {
 						</n8n-breadcrumbs>
 					</div>
 				</ProjectCardBadge>
+
+				<n8n-text
+					v-if="data.isArchived"
+					color="text-light"
+					size="small"
+					bold
+					class="ml-s mr-s"
+					data-test-id="workflow-card-archived"
+				>
+					{{ locale.baseText('workflows.item.archived') }}
+				</n8n-text>
 				<WorkflowActivator
+					v-else
 					class="mr-s"
 					:is-archived="data.isArchived"
 					:workflow-active="data.active"
@@ -515,6 +533,10 @@ const onBreadcrumbItemClick = async (item: PathItem) => {
 	}
 }
 
+.cardHeadingArchived {
+	color: var(--color-text-light);
+}
+
 .cardDescription {
 	min-height: 19px;
 	display: flex;
@@ -532,6 +554,10 @@ const onBreadcrumbItemClick = async (item: PathItem) => {
 	cursor: default;
 }
 
+.cardBadge {
+	background-color: var(--color-background-xlight);
+}
+
 .cardBadge.with-breadcrumbs {
 	:global(.n8n-badge) {
 		padding-right: 0;
@@ -541,6 +567,12 @@ const onBreadcrumbItemClick = async (item: PathItem) => {
 	}
 }
 
+.cardArchived {
+	background-color: var(--color-background-light);
+	border-color: var(--color-foreground-light);
+	color: var(--color-text-base);
+}
+
 @include mixins.breakpoint('sm-and-down') {
 	.cardLink {
 		--card--padding: 0 var(--spacing-s) var(--spacing-s);