Merge pull request #1775 from gitbutlerapp/css-fixes

`Tag` components CSS updates

packages/ui/src/routes/[projectId]/components/FileCardHeader.svelte

@@ -42,7 +42,7 @@
 				{@html boldenFilename(file.path)}
 			</div>
 			<div class="header__tags">
-				<div>
+				<div class="header__tag-group">
 					{#if isFileLocked}
 						<Tooltip
 							label="File changes cannot be moved because part of this file was already committed into this branch"
@@ -50,11 +50,11 @@
 							<Tag icon="locked-small" color="warning" border>Locked</Tag>
 						</Tooltip>
 					{/if}
-				</div>
-				<div>
 					{#if file.conflicted}
 						<Tag icon="warning-small" color="error" border>Has conflicts</Tag>
 					{/if}
+				</div>
+				<div class="header__tag-group">
 					{#if fileStats.added}
 						<Tag color="success" border>+{fileStats.added}</Tag>
 					{/if}
@@ -93,10 +93,10 @@
 	.header__tags {
 		display: flex;
 		gap: var(--space-6);
-		& > div {
-			display: flex;
-			gap: var(--space-2);
-		}
+	}
+	.header__tag-group {
+		display: flex;
+		gap: var(--space-2);
 	}
 	.header__filename {
 		color: var(--clr-theme-scale-ntrl-50);

packages/ui/src/routes/[projectId]/components/Tag.svelte

@@ -10,6 +10,7 @@
 	export let color: TagColor;
 	export let border = false;
 	export let filled = false;
+	export let onClick: (() => void) | undefined = undefined;
 </script>
 
 <div
@@ -21,27 +22,37 @@
 	class:neutral-dim={color == 'neutral-dim'}
 	class:border
 	class:filled
+	class:not-button={!onClick}
+	on:click={onClick}
+	role={onClick ? 'button' : undefined}
 >
-	<div class="label text-base-11">
+	<span class="label text-base-11 text-semibold">
 		<slot />
-	</div>
-	<div class="icon">
-		{#if icon}
+	</span>
+	{#if icon}
+		<div class="icon">
 			<Icon name={icon} />
-		{/if}
-	</div>
+		</div>
+	{/if}
 </div>
 
 <style lang="postcss">
 	.tag {
+		cursor: default;
 		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: var(--size-btn-s);
 		padding: var(--space-2) var(--space-4);
 		border-radius: var(--radius-m);
-		align-items: center;
 	}
 	.icon {
 		flex-shrink: 0;
 	}
+	.label {
+		display: inline-block;
+		padding: 0 var(--space-2);
+	}
 	.success {
 		color: var(--clr-theme-succ-outline-dark);
 		background: var(--clr-theme-succ-container);
@@ -123,4 +134,7 @@
 			}
 		}
 	}
+	.not-button {
+		pointer-events: none;
+	}
 </style>

packages/ui/src/routes/[projectId]/navigation/SectionHeader.svelte

@@ -14,7 +14,6 @@
 	}}
 	disabled={count && count > 0 ? false : true}
 	class="header border-t font-bold"
-	style:border-color="var(--border-surface)"
 	class:border-b={scrolled}
 >
 	<div class="whitespace-nowrap font-bold">
@@ -37,6 +36,7 @@
 		width: 100%;
 		padding: var(--space-16) var(--space-12);
 		gap: var(--space-8);
+		border-top: 1px solid var(--clr-theme-container-outline-light);
 	}
 	.header:hover,
 	.header:focus {

packages/ui/src/styles/tokens.css

@@ -320,7 +320,7 @@
 	--clr-theme-scale-warn-90: var(--clr-core-warn-10);
 	--clr-theme-succ-container: var(--clr-core-succ-15);
 	--clr-theme-succ-container-dark: var(--clr-core-succ-5);
-	--clr-theme-succ-conteiner-dim: var(--clr-core-succ-10);
+	--clr-theme-succ-container-dim: var(--clr-core-succ-10);
 	--clr-theme-succ-element: var(--clr-core-succ-50);
 	--clr-theme-succ-element-dark: var(--clr-core-succ-35);
 	--clr-theme-succ-element-dim: var(--clr-core-succ-40);