feat(editor): Improve UI for highlighted data, tags and rating in executions (#15926)

Co-authored-by: Giulio Andreini <[email protected]>

Author: schrothbn

packages/frontend/@n8n/design-system/src/components/N8nTag/Tag.vue

@@ -18,13 +18,18 @@ withDefaults(defineProps<TagProps>(), {
 
 <style lang="scss" module>
 .tag {
+	display: flex;
+	align-items: center;
+	justify-content: center;
 	min-width: max-content;
-	padding: 1px var(--spacing-4xs);
-	color: var(--color-text-base);
-	background-color: var(--color-background-base);
-	border-radius: var(--border-radius-base);
-	font-size: var(--font-size-2xs);
-
+	height: var(--tag-height);
+	padding: var(--tag-padding);
+	line-height: var(--tag-line-height);
+	color: var(--tag-text-color);
+	background-color: var(--tag-background-color);
+	border: 1px solid var(--tag-border-color);
+	border-radius: var(--tag-border-radius);
+	font-size: var(--tag-font-size);
 	transition: background-color 0.3s ease;
 
 	&.clickable {

packages/frontend/@n8n/design-system/src/css/_tokens.scss

@@ -224,6 +224,17 @@
 	--color-line-break: var(--prim-gray-320);
 	--color-code-line-break: var(--prim-color-secondary-tint-200);
 
+	// Tag
+	--tag-height: 22px;
+	--tag-padding: 0 var(--spacing-4xs);
+	--tag-background-color: var(--prim-gray-40);
+	--tag-border-color: var(--color-foreground-light);
+	--tag-border-radius: var(--border-radius-base);
+	--tag-text-color: var(--color-text-base);
+	--tag-font-size: var(--font-size-2xs);
+	--tag-font-weight: var(--font-weight-regular);
+	--tag-line-height: 0;
+
 	// Variables
 	--color-variables-usage-font: var(--color-success);
 	--color-variables-usage-syntax-bg: var(--color-success-tint-2);

packages/frontend/@n8n/i18n/src/locales/en.json

@@ -710,6 +710,7 @@
 	"error.pageNotFound": "Oops, couldn’t find that",
 	"executions.ExecutionStatus": "Execution status",
 	"executions.concurrency.docsLink": "https://docs.n8n.io/hosting/scaling/concurrency-control/",
+	"executionDetails.additionalActions": "Additional Actions",
 	"executionDetails.confirmMessage.confirmButtonText": "Yes, delete",
 	"executionDetails.confirmMessage.headline": "Delete Execution?",
 	"executionDetails.confirmMessage.message": "Are you sure that you want to delete the current execution?",

packages/frontend/editor-ui/src/components/executions/workflow/VoteButtons.vue

@@ -17,18 +17,18 @@ const onVoteClick = (vote: AnnotationVote) => {
 <template>
 	<div :class="$style.ratingIcon">
 		<n8n-icon-button
-			:class="{ [$style.up]: vote === 'up' }"
+			:class="[$style.icon, vote === 'up' && $style.up]"
 			type="tertiary"
 			text
-			size="medium"
+			size="small"
 			icon="thumbs-up"
 			@click="onVoteClick('up')"
 		/>
 		<n8n-icon-button
-			:class="{ [$style.down]: vote === 'down' }"
+			:class="[$style.icon, vote === 'down' && $style.down]"
 			type="tertiary"
 			text
-			size="medium"
+			size="small"
 			icon="thumbs-down"
 			@click="onVoteClick('down')"
 		/>
@@ -40,6 +40,14 @@ const onVoteClick = (vote: AnnotationVote) => {
 	display: flex;
 	flex-direction: row;
 
+	.icon {
+		color: var(--color-text-light);
+
+		&:not(.up):not(.down):hover {
+			color: var(--color-primary);
+		}
+	}
+
 	.up {
 		color: var(--color-success);
 	}