fix(editor): Minor styling improvements in project settings page (#12405

)
n8n-io · Dec 30, 2024 · 09ddce0 · 09ddce0
1 parent 1674dd0
commit 09ddce0
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 27 deletions.
diff --git a/packages/editor-ui/src/components/Projects/ProjectHeader.vue b/packages/editor-ui/src/components/Projects/ProjectHeader.vue
@@ -107,16 +107,18 @@ const onSelect = (action: string) => {
 <template>
 	<div>
 		<div :class="[$style.projectHeader]">
-			<ProjectIcon :icon="headerIcon" size="medium" />
-			<div>
-				<N8nHeading bold tag="h2" size="xlarge">{{ projectName }}</N8nHeading>
-				<N8nText color="text-light">
-					<slot name="subtitle">
-						<span v-if="!projectsStore.currentProject">{{
-							i18n.baseText('projects.header.subtitle')
-						}}</span>
-					</slot>
-				</N8nText>
+			<div :class="[$style.projectDetails]">
+				<ProjectIcon :icon="headerIcon" :border-less="true" size="medium" />
+				<div>
+					<N8nHeading bold tag="h2" size="xlarge">{{ projectName }}</N8nHeading>
+					<N8nText color="text-light">
+						<slot name="subtitle">
+							<span v-if="!projectsStore.currentProject">{{
+								i18n.baseText('projects.header.subtitle')
+							}}</span>
+						</slot>
+					</N8nText>
+				</div>
 			</div>
 			<div v-if="route.name !== VIEWS.PROJECT_SETTINGS" :class="[$style.headerActions]">
 				<N8nTooltip
@@ -148,25 +150,17 @@ const onSelect = (action: string) => {
 .projectHeader {
 	display: flex;
 	align-items: center;
-	gap: 8px;
+	justify-content: space-between;
 	padding-bottom: var(--spacing-m);
-	min-height: 64px;
-}
-
-.headerActions {
-	margin-left: auto;
+	min-height: var(--spacing-3xl);
 }
 
-.icon {
-	border: 1px solid var(--color-foreground-light);
-	padding: 6px;
-	border-radius: var(--border-radius-base);
+.projectDetails {
+	display: flex;
+	align-items: center;
 }
 
 .actions {
-	display: flex;
-	justify-content: space-between;
-	align-items: flex-end;
 	padding: var(--spacing-2xs) 0 var(--spacing-l);
 }
 </style>
diff --git a/packages/editor-ui/src/components/Projects/ProjectIcon.vue b/packages/editor-ui/src/components/Projects/ProjectIcon.vue
@@ -5,15 +5,23 @@ type Props = {
 	icon: ProjectIcon;
 	size?: 'small' | 'medium' | 'large';
 	round?: boolean;
+	borderLess?: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
 	size: 'medium',
 	round: false,
+	borderLess: false,
 });
 </script>
 <template>
-	<div :class="[$style.container, $style[props.size], { [$style.round]: props.round }]">
+	<div
+		:class="[
+			$style.container,
+			$style[props.size],
+			{ [$style.round]: props.round, [$style.borderless]: props.borderLess },
+		]"
+	>
 		<N8nIcon
 			v-if="props.icon.type === 'icon'"
 			:icon="props.icon.value"
@@ -36,10 +44,14 @@ const props = withDefaults(defineProps<Props>(), {
 	&.round {
 		border-radius: 50%;
 	}
+
+	&.borderless {
+		border: none;
+	}
 }
 
 .small {
-	width: var(--spacing-l);
+	min-width: var(--spacing-l);
 	height: var(--spacing-l);
 
 	.emoji {
@@ -48,7 +60,7 @@ const props = withDefaults(defineProps<Props>(), {
 }
 
 .medium {
-	width: var(--spacing-xl);
+	min-width: var(--spacing-xl);
 	height: var(--spacing-xl);
 
 	.emoji {
@@ -58,7 +70,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 .large {
 	// Making this in line with user avatar size
-	width: 40px;
+	min-width: 40px;
 	height: 40px;
 
 	.emoji {