From e31cee245a4764e13843b2b4a4d0c7296e444b42 Mon Sep 17 00:00:00 2001
From: PavelLaptev <pawellaptew@gmail.com>
Date: Tue, 28 Nov 2023 13:42:03 +0100
Subject: [PATCH] Css fixes

---
 .../components/FileCardHeader.svelte          | 14 ++--
 .../routes/[projectId]/components/Tag.svelte  | 28 +++++--
 .../navigation/SectionHeader.svelte           |  2 +-
 .../stashed/[branchId]/+page.svelte           | 73 +++++++++----------
 packages/ui/src/styles/tokens.css             |  2 +-
 5 files changed, 63 insertions(+), 56 deletions(-)

diff --git a/packages/ui/src/routes/[projectId]/components/FileCardHeader.svelte b/packages/ui/src/routes/[projectId]/components/FileCardHeader.svelte
index 0175f2d42..202741927 100644
--- a/packages/ui/src/routes/[projectId]/components/FileCardHeader.svelte
+++ b/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);
diff --git a/packages/ui/src/routes/[projectId]/components/Tag.svelte b/packages/ui/src/routes/[projectId]/components/Tag.svelte
index 735bdefb8..49a212334 100644
--- a/packages/ui/src/routes/[projectId]/components/Tag.svelte
+++ b/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>
diff --git a/packages/ui/src/routes/[projectId]/navigation/SectionHeader.svelte b/packages/ui/src/routes/[projectId]/navigation/SectionHeader.svelte
index 717ef3c7f..010abb539 100644
--- a/packages/ui/src/routes/[projectId]/navigation/SectionHeader.svelte
+++ b/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 {
diff --git a/packages/ui/src/routes/[projectId]/stashed/[branchId]/+page.svelte b/packages/ui/src/routes/[projectId]/stashed/[branchId]/+page.svelte
index fab7ed00c..b75997ad1 100644
--- a/packages/ui/src/routes/[projectId]/stashed/[branchId]/+page.svelte
+++ b/packages/ui/src/routes/[projectId]/stashed/[branchId]/+page.svelte
@@ -37,51 +37,44 @@
 	}
 </script>
 
-<div class="flex h-full flex-col p-3">
+<div class="h-full flex-grow overflow-y-auto overscroll-none p-3">
 	{#if $error$}
 		<p>Error...</p>
 	{:else if !$branches$}
 		<p>Loading...</p>
 	{:else if branch}
-		<div class="flex items-center">
-			<Button kind="outlined" color="primary" on:click={() => branch && applyBranch(branch)}>
-				<span class="purple"> Apply </span>
-			</Button>
-			<IconButton
-				icon="question-mark"
-				title="delete branch"
-				on:click={() => deleteBranchModal.show(branch)}
-			/>
-			{#await branch.isMergeable then isMergeable}
-				{#if isMergeable}
-					<Tooltip
-						timeoutMilliseconds={100}
-						label="Applying this branch will add merge conflict markers that you will have to resolve"
-					>
-						<div
-							class="flex cursor-default select-none rounded bg-yellow-300 px-2 py-0.5 dark:bg-yellow-800"
-						>
-							Conflicts with Applied Branches
-						</div>
-					</Tooltip>
-				{/if}
-			{/await}
-		</div>
-		<div class="h-full">
-			<BranchLane
-				{branch}
-				{branchController}
-				base={$baseBranch$}
-				{cloud}
-				{projectId}
-				maximized={false}
-				cloudEnabled={false}
-				readonly={true}
-				githubContext={$githubContext$}
-				user={$user$}
-				projectPath={$project$.path}
-			/>
-		</div>
+		<Button kind="outlined" color="primary" on:click={() => branch && applyBranch(branch)}>
+			<span class="purple"> Apply </span>
+		</Button>
+		<IconButton
+			icon="question-mark"
+			title="delete branch"
+			on:click={() => deleteBranchModal.show(branch)}
+		/>
+		{#await branch.isMergeable then isMergeable}
+			{#if isMergeable}
+				<Tooltip
+					label="Applying this branch will add merge conflict markers that you will have to resolve"
+				>
+					<div class="flex select-none bg-yellow-500 px-2 py-0.5 font-bold dark:bg-yellow-600">
+						<span>Conflicts with Applied Branches</span>
+					</div>
+				</Tooltip>
+			{/if}
+		{/await}
+		<BranchLane
+			{branch}
+			{branchController}
+			base={$baseBranch$}
+			{cloud}
+			{projectId}
+			maximized={true}
+			cloudEnabled={false}
+			readonly={true}
+			githubContext={$githubContext$}
+			user={$user$}
+			projectPath={$project$.path}
+		/>
 	{:else}
 		<p>Branch no longer exists</p>
 	{/if}
diff --git a/packages/ui/src/styles/tokens.css b/packages/ui/src/styles/tokens.css
index d1da58637..7050aaf9c 100644
--- a/packages/ui/src/styles/tokens.css
+++ b/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);