From 4f7b8d68c3a53797e5026fba0d2b89aa14671cb5 Mon Sep 17 00:00:00 2001
From: PavelLaptev <pawellaptew@gmail.com>
Date: Sat, 25 Nov 2023 00:48:46 +0100
Subject: [PATCH 1/4] styles updates

---
 .../navigation/BaseBranchCard.svelte            |  9 +++++++--
 .../[projectId]/navigation/DomainButton.svelte  | 16 +++++++++-------
 .../[projectId]/navigation/Navigation.svelte    |  5 +----
 .../[projectId]/navigation/ProjectsPopup.svelte |  4 ++--
 packages/ui/src/styles/text-classes.css         | 17 -----------------
 5 files changed, 19 insertions(+), 32 deletions(-)

diff --git a/packages/ui/src/routes/[projectId]/navigation/BaseBranchCard.svelte b/packages/ui/src/routes/[projectId]/navigation/BaseBranchCard.svelte
index 15dcfd7d8..5d4491d86 100644
--- a/packages/ui/src/routes/[projectId]/navigation/BaseBranchCard.svelte
+++ b/packages/ui/src/routes/[projectId]/navigation/BaseBranchCard.svelte
@@ -34,8 +34,8 @@
 	</div>
 
 	<div class="content">
-		<div class="row_1 text-base-13 font-bold">
-			<span>Trunk</span>
+		<div class="row_1">
+			<span class="text-base-14 text-semibold trunk-label">Trunk</span>
 			{#if ($base$?.behind || 0) > 0}
 				<Tooltip label="Unmerged upstream commits">
 					<Badge count={$base$?.behind || 0} />
@@ -78,6 +78,8 @@
 		gap: var(--space-10);
 		padding: var(--space-8);
 		border-radius: var(--radius-m);
+		transition: background-color var(--transition-fast);
+
 		&:hover,
 		&:focus {
 			background-color: var(--clr-theme-container-pale);
@@ -91,6 +93,9 @@
 		flex-direction: column;
 		gap: var(--space-8);
 	}
+	.trunk-label {
+		color: var(--clr-theme-scale-ntrl-0);
+	}
 	.row_1 {
 		display: flex;
 		gap: var(--space-6);
diff --git a/packages/ui/src/routes/[projectId]/navigation/DomainButton.svelte b/packages/ui/src/routes/[projectId]/navigation/DomainButton.svelte
index c9292cd07..23642c530 100644
--- a/packages/ui/src/routes/[projectId]/navigation/DomainButton.svelte
+++ b/packages/ui/src/routes/[projectId]/navigation/DomainButton.svelte
@@ -1,22 +1,18 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import Icon from '$lib/icons/Icon.svelte';
-	import type iconsJson from '$lib/icons/icons.json';
 
 	export let href: string;
-	export let icon: keyof typeof iconsJson | undefined = undefined;
+	export let label: string;
 	$: selected = $page.url.href.includes(href);
 </script>
 
 <a
 	{href}
-	class="domain-button font-semibold"
+	class="domain-button"
 	style:background-color={selected ? 'var(--clr-theme-container-pale)' : undefined}
 >
-	{#if icon}
-		<Icon name={icon} class="text-color-4 mr-1 inline h-4 w-4 align-middle" />
-	{/if}
 	<slot />
+	<span class="text-base-14 text-semibold label">{label}</span>
 </a>
 
 <style lang="postcss">
@@ -27,9 +23,15 @@
 		border-radius: var(--radius-m);
 		background-color: var(--clr-theme-container-light);
 		padding: var(--space-10);
+		transition: background-color var(--transition-fast);
+
 		&:hover,
 		&:focus {
 			background-color: var(--clr-theme-container-pale);
 		}
 	}
+
+	.label {
+		color: var(--clr-theme-scale-ntrl-0);
+	}
 </style>
diff --git a/packages/ui/src/routes/[projectId]/navigation/Navigation.svelte b/packages/ui/src/routes/[projectId]/navigation/Navigation.svelte
index 067c1bcc4..4c146f5a9 100644
--- a/packages/ui/src/routes/[projectId]/navigation/Navigation.svelte
+++ b/packages/ui/src/routes/[projectId]/navigation/Navigation.svelte
@@ -28,7 +28,6 @@
 	export let prService: PrService;
 	export let projectService: ProjectService;
 
-	$: activeBranches$ = vbranchService?.activeBranches$;
 	const userSettings = getContext<SettingsStore>(SETTINGS_CONTEXT);
 
 	let stashExpanded = true;
@@ -50,7 +49,7 @@
 		<ProjectSelector {project} {projectService} />
 		<div class="flex flex-col gap-1">
 			<BaseBranchCard {project} {baseBranchService} {branchController} />
-			<DomainButton href={`/${project.id}/board`}>
+			<DomainButton href={`/${project.id}/board`} label="Applied branches">
 				<svg
 					width="16"
 					height="16"
@@ -62,8 +61,6 @@
 					<path d="M5 8.8H11V4" stroke="white" stroke-width="2" />
 					<path d="M5 12V8.44444V4" stroke="white" stroke-width="2" />
 				</svg>
-
-				Applied branches
 			</DomainButton>
 		</div>
 	</div>
diff --git a/packages/ui/src/routes/[projectId]/navigation/ProjectsPopup.svelte b/packages/ui/src/routes/[projectId]/navigation/ProjectsPopup.svelte
index 97232aa0a..9c61a48ca 100644
--- a/packages/ui/src/routes/[projectId]/navigation/ProjectsPopup.svelte
+++ b/packages/ui/src/routes/[projectId]/navigation/ProjectsPopup.svelte
@@ -57,13 +57,13 @@
 		box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.1);
 	}
 	.popup__actions {
-		padding: var(--space-10);
+		padding: var(--space-8);
 		border-top: 1px solid var(--clr-theme-scale-ntrl-70);
 	}
 	.popup__projects {
 		display: flex;
 		flex-direction: column;
 		gap: var(--space-2);
-		padding: var(--space-10);
+		padding: var(--space-8);
 	}
 </style>
diff --git a/packages/ui/src/styles/text-classes.css b/packages/ui/src/styles/text-classes.css
index de8b296e7..b4a541f68 100644
--- a/packages/ui/src/styles/text-classes.css
+++ b/packages/ui/src/styles/text-classes.css
@@ -3,7 +3,6 @@
 	font-family: var(--base-font-family);
 	font-size: 0.625rem;
 	font-weight: 500;
-	letter-spacing: 0;
 	line-height: 100%;
 }
 
@@ -11,7 +10,6 @@
 	font-family: var(--base-font-family);
 	font-size: 0.6875rem;
 	font-weight: 500;
-	letter-spacing: 0;
 	line-height: 100%;
 }
 
@@ -19,7 +17,6 @@
 	font-family: var(--base-font-family);
 	font-size: 0.75rem;
 	font-weight: 500;
-	letter-spacing: 0;
 	line-height: 100%;
 }
 
@@ -27,7 +24,6 @@
 	font-family: var(--base-font-family);
 	font-size: 0.8125rem;
 	font-weight: 500;
-	letter-spacing: 0;
 	line-height: 100%;
 }
 
@@ -35,7 +31,6 @@
 	font-family: var(--base-font-family);
 	font-size: 0.875rem;
 	font-weight: 500;
-	letter-spacing: 0;
 	line-height: 100%;
 }
 
@@ -43,7 +38,6 @@
 	font-family: var(--base-font-family);
 	font-size: 1rem;
 	font-weight: 500;
-	letter-spacing: 0;
 	line-height: 100%;
 }
 
@@ -51,7 +45,6 @@
 	font-family: var(--base-font-family);
 	font-size: 1.125rem;
 	font-weight: 500;
-	letter-spacing: 0;
 	line-height: 100%;
 }
 
@@ -60,7 +53,6 @@
 	font-family: var(--base-font-family);
 	font-size: 625rem;
 	font-weight: 500;
-	letter-spacing: 0;
 	line-height: 150%;
 }
 
@@ -68,7 +60,6 @@
 	font-family: var(--base-font-family);
 	font-size: 0.6875rem;
 	font-weight: 500;
-	letter-spacing: 0;
 	line-height: 150%;
 }
 
@@ -76,7 +67,6 @@
 	font-family: var(--base-font-family);
 	font-size: 0.75rem;
 	font-weight: 500;
-	letter-spacing: 0;
 	line-height: 150%;
 }
 
@@ -84,7 +74,6 @@
 	font-family: var(--base-font-family);
 	font-size: 0.8125rem;
 	font-weight: 500;
-	letter-spacing: 0;
 	line-height: 150%;
 }
 
@@ -92,7 +81,6 @@
 	font-family: var(--base-font-family);
 	font-size: 0.875rem;
 	font-weight: 500;
-	letter-spacing: 0;
 	line-height: 150%;
 }
 
@@ -100,7 +88,6 @@
 	font-family: var(--base-font-family);
 	font-size: 1rem;
 	font-weight: 500;
-	letter-spacing: 0;
 	line-height: 150%;
 }
 
@@ -108,7 +95,6 @@
 	font-family: var(--base-font-family);
 	font-size: 1.125rem;
 	font-weight: 500;
-	letter-spacing: 0;
 	line-height: 150%;
 }
 
@@ -117,7 +103,6 @@
 	font-family: var(--base-font-family);
 	font-size: 1.25rem;
 	font-weight: 700;
-	letter-spacing: 0;
 	line-height: 100%;
 }
 
@@ -125,7 +110,6 @@
 	font-family: var(--base-font-family);
 	font-size: 1.375rem;
 	font-weight: 700;
-	letter-spacing: 0;
 	line-height: 100%;
 }
 
@@ -133,7 +117,6 @@
 	font-family: var(--base-font-family);
 	font-size: 1.5rem;
 	font-weight: 700;
-	letter-spacing: 0;
 	line-height: 100%;
 }
 

From d398fa3d6672145c019a80ace6d31ec146d9db7b Mon Sep 17 00:00:00 2001
From: PavelLaptev <pawellaptew@gmail.com>
Date: Sat, 25 Nov 2023 01:57:10 +0100
Subject: [PATCH 2/4] added new color tokens for accent outlines

---
 packages/ui/src/styles/tokens.css | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/styles/tokens.css b/packages/ui/src/styles/tokens.css
index 692e434dc..5a793d212 100644
--- a/packages/ui/src/styles/tokens.css
+++ b/packages/ui/src/styles/tokens.css
@@ -32,7 +32,7 @@
 	--clr-core-ntrl-25: #383838;
 	--clr-core-ntrl-30: #424242;
 	--clr-core-ntrl-35: #4d4d4d;
-	--clr-core-ntrl-40: #5e5e5e;
+	--clr-core-ntrl-40: #676767;
 	--clr-core-ntrl-45: #7a7a7a;
 	--clr-core-ntrl-50: #989898;
 	--clr-core-ntrl-55: #b1b1b1;
@@ -110,7 +110,7 @@
 	--clr-theme-container-outline-dim: var(--clr-core-ntrl-35);
 	--clr-theme-container-outline-light: var(--clr-core-ntrl-65);
 	--clr-theme-container-outline-mid: var(--clr-core-ntrl-40);
-	--clr-theme-container-outline-pale: var(--clr-core-ntrl-60);
+	--clr-theme-container-outline-pale: var(--clr-core-ntrl-55);
 	--clr-theme-container-outline-sub: var(--clr-core-ntrl-50);
 	--clr-theme-container-pale: var(--clr-core-ntrl-90);
 	--clr-theme-container-sub: var(--clr-core-ntrl-80);
@@ -118,7 +118,7 @@
 	--clr-theme-err-container-dark: var(--clr-core-err-70);
 	--clr-theme-err-container-dim: var(--clr-core-err-80);
 	--clr-theme-err-element: var(--clr-core-err-50);
-	--clr-theme-err-element-dark: var(--clr-core-err-35);
+	--clr-theme-err-element-dark: var(--clr-core-err-30);
 	--clr-theme-err-element-dim: var(--clr-core-err-40);
 	--clr-theme-err-onContainer: var(--clr-core-err-40);
 	--clr-theme-err-onElement: var(--clr-core-err-95);
@@ -130,6 +130,9 @@
 	--clr-theme-pop-element-dim: var(--clr-core-pop-30);
 	--clr-theme-pop-onContainer: var(--clr-core-pop-10);
 	--clr-theme-pop-onElement: var(--clr-core-ntrl-100);
+	--clr-theme-pop-oulint-dark: var(--clr-core-pop-25);
+	--clr-theme-pop-outline: var(--clr-core-pop-50);
+	--clr-theme-pop-outline-dim: var(--clr-core-pop-35);
 	--clr-theme-scale-err-10: var(--clr-core-err-10);
 	--clr-theme-scale-err-20: var(--clr-core-err-20);
 	--clr-theme-scale-err-30: var(--clr-core-err-30);
@@ -245,11 +248,14 @@
 	--clr-theme-pop-container: var(--clr-core-pop-15);
 	--clr-theme-pop-container-dark: var(--clr-core-pop-5);
 	--clr-theme-pop-container-dim: var(--clr-core-pop-10);
-	--clr-theme-pop-element: var(--clr-core-pop-30);
-	--clr-theme-pop-element-dark: var(--clr-core-pop-15);
-	--clr-theme-pop-element-dim: var(--clr-core-pop-20);
+	--clr-theme-pop-element: var(--clr-core-pop-40);
+	--clr-theme-pop-element-dark: var(--clr-core-pop-20);
+	--clr-theme-pop-element-dim: var(--clr-core-pop-30);
 	--clr-theme-pop-onContainer: var(--clr-core-pop-80);
 	--clr-theme-pop-onElement: var(--clr-core-ntrl-100);
+	--clr-theme-pop-oulint-dark: var(--clr-core-pop-65);
+	--clr-theme-pop-outline: var(--clr-core-pop-50);
+	--clr-theme-pop-outline-dim: var(--clr-core-pop-55);
 	--clr-theme-scale-err-10: var(--clr-core-err-90);
 	--clr-theme-scale-err-20: var(--clr-core-err-80);
 	--clr-theme-scale-err-30: var(--clr-core-err-70);

From a547df9b76d8876b76ada9ce0539d31c757ae281 Mon Sep 17 00:00:00 2001
From: PavelLaptev <pawellaptew@gmail.com>
Date: Sat, 25 Nov 2023 02:09:51 +0100
Subject: [PATCH 3/4] dark theme update

---
 packages/ui/src/styles/tokens.css | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/ui/src/styles/tokens.css b/packages/ui/src/styles/tokens.css
index 5a793d212..d3756353c 100644
--- a/packages/ui/src/styles/tokens.css
+++ b/packages/ui/src/styles/tokens.css
@@ -118,7 +118,7 @@
 	--clr-theme-err-container-dark: var(--clr-core-err-70);
 	--clr-theme-err-container-dim: var(--clr-core-err-80);
 	--clr-theme-err-element: var(--clr-core-err-50);
-	--clr-theme-err-element-dark: var(--clr-core-err-30);
+	--clr-theme-err-element-dark: var(--clr-core-err-35);
 	--clr-theme-err-element-dim: var(--clr-core-err-40);
 	--clr-theme-err-onContainer: var(--clr-core-err-40);
 	--clr-theme-err-onElement: var(--clr-core-err-95);
@@ -240,9 +240,9 @@
 	--clr-theme-err-container: var(--clr-core-err-15);
 	--clr-theme-err-container-dark: var(--clr-core-err-5);
 	--clr-theme-err-container-dim: var(--clr-core-err-10);
-	--clr-theme-err-element: var(--clr-core-err-30);
-	--clr-theme-err-element-dark: var(--clr-core-err-20);
-	--clr-theme-err-element-dim: var(--clr-core-err-25);
+	--clr-theme-err-element: var(--clr-core-err-50);
+	--clr-theme-err-element-dark: var(--clr-core-err-35);
+	--clr-theme-err-element-dim: var(--clr-core-err-40);
 	--clr-theme-err-onContainer: var(--clr-core-err-80);
 	--clr-theme-err-onElement: var(--clr-core-err-90);
 	--clr-theme-pop-container: var(--clr-core-pop-15);
@@ -306,17 +306,17 @@
 	--clr-theme-succ-container: var(--clr-core-succ-15);
 	--clr-theme-succ-container-dim: var(--clr-core-succ-5);
 	--clr-theme-succ-conteiner-dim: var(--clr-core-succ-10);
-	--clr-theme-succ-element: var(--clr-core-succ-30);
-	--clr-theme-succ-element-dark: var(--clr-core-succ-15);
-	--clr-theme-succ-element-dim: var(--clr-core-succ-20);
+	--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);
 	--clr-theme-succ-onContainer: var(--clr-core-succ-80);
 	--clr-theme-succ-onElement: var(--clr-core-succ-90);
 	--clr-theme-warn-container: var(--clr-core-warn-15);
 	--clr-theme-warn-container-dark: var(--clr-core-warn-5);
 	--clr-theme-warn-container-dim: var(--clr-core-warn-10);
-	--clr-theme-warn-eleemnt-dark: var(--clr-core-warn-20);
-	--clr-theme-warn-element: var(--clr-core-warn-30);
-	--clr-theme-warn-element-dim: var(--clr-core-warn-25);
+	--clr-theme-warn-eleemnt-dark: var(--clr-core-warn-35);
+	--clr-theme-warn-element: var(--clr-core-warn-50);
+	--clr-theme-warn-element-dim: var(--clr-core-warn-40);
 	--clr-theme-warn-onContainer: var(--clr-core-warn-80);
 	--clr-theme-warn-onElement: var(--clr-core-warn-90);
 }

From 3687cf2d402a68b34a980ad4c1f58f0e54799bfa Mon Sep 17 00:00:00 2001
From: PavelLaptev <pawellaptew@gmail.com>
Date: Sat, 25 Nov 2023 02:27:48 +0100
Subject: [PATCH 4/4] - updated sidebar paddings. Changed `16` to `12` spacers

---
 .../src/routes/[projectId]/navigation/Branches.svelte  |  4 ++--
 .../ui/src/routes/[projectId]/navigation/Footer.svelte |  2 +-
 .../routes/[projectId]/navigation/Navigation.svelte    | 10 +++++-----
 .../routes/[projectId]/navigation/SectionHeader.svelte |  4 +++-
 .../[projectId]/navigation/StashedBranches.svelte      |  4 ++--
 5 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/ui/src/routes/[projectId]/navigation/Branches.svelte b/packages/ui/src/routes/[projectId]/navigation/Branches.svelte
index a60277074..3c02a1708 100644
--- a/packages/ui/src/routes/[projectId]/navigation/Branches.svelte
+++ b/packages/ui/src/routes/[projectId]/navigation/Branches.svelte
@@ -72,8 +72,8 @@
 		overscroll-behavior: none;
 		padding-top: var(--space-4);
 		padding-bottom: var(--space-16);
-		padding-left: var(--space-16);
-		padding-right: var(--space-16);
+		padding-left: var(--space-12);
+		padding-right: var(--space-12);
 	}
 	.content {
 		display: flex;
diff --git a/packages/ui/src/routes/[projectId]/navigation/Footer.svelte b/packages/ui/src/routes/[projectId]/navigation/Footer.svelte
index 4d112d09f..5c685d95d 100644
--- a/packages/ui/src/routes/[projectId]/navigation/Footer.svelte
+++ b/packages/ui/src/routes/[projectId]/navigation/Footer.svelte
@@ -14,7 +14,7 @@
 </script>
 
 <div
-	class="text-color-3 flex flex-shrink-0 items-center justify-between border-t px-4 py-4"
+	class="text-color-3 flex flex-shrink-0 items-center justify-between border-t px-3 py-3"
 	style:background-color="var(--bg-surface-highlight)"
 	style:border-color="var(--border-surface)"
 >
diff --git a/packages/ui/src/routes/[projectId]/navigation/Navigation.svelte b/packages/ui/src/routes/[projectId]/navigation/Navigation.svelte
index 4c146f5a9..5ab34a0c3 100644
--- a/packages/ui/src/routes/[projectId]/navigation/Navigation.svelte
+++ b/packages/ui/src/routes/[projectId]/navigation/Navigation.svelte
@@ -72,14 +72,14 @@
 
 <style lang="postcss">
 	.drag-region {
-		padding-top: var(--space-14);
-		padding-left: var(--space-16);
-		padding-right: var(--space-16);
+		padding-top: var(--space-12);
+		padding-left: var(--space-12);
+		padding-right: var(--space-12);
 	}
 	.domains {
 		flex-grow: 1;
 		padding-bottom: var(--space-24);
-		padding-left: var(--space-16);
-		padding-right: var(--space-16);
+		padding-left: var(--space-12);
+		padding-right: var(--space-12);
 	}
 </style>
diff --git a/packages/ui/src/routes/[projectId]/navigation/SectionHeader.svelte b/packages/ui/src/routes/[projectId]/navigation/SectionHeader.svelte
index 0593dd718..717ef3c7f 100644
--- a/packages/ui/src/routes/[projectId]/navigation/SectionHeader.svelte
+++ b/packages/ui/src/routes/[projectId]/navigation/SectionHeader.svelte
@@ -13,7 +13,7 @@
 		if (expandable) expanded = !expanded;
 	}}
 	disabled={count && count > 0 ? false : true}
-	class="header border-t p-4 font-bold"
+	class="header border-t font-bold"
 	style:border-color="var(--border-surface)"
 	class:border-b={scrolled}
 >
@@ -35,6 +35,8 @@
 		align-items: center;
 		justify-content: space-between;
 		width: 100%;
+		padding: var(--space-16) var(--space-12);
+		gap: var(--space-8);
 	}
 	.header:hover,
 	.header:focus {
diff --git a/packages/ui/src/routes/[projectId]/navigation/StashedBranches.svelte b/packages/ui/src/routes/[projectId]/navigation/StashedBranches.svelte
index b9b7d0e1e..3b90dae30 100644
--- a/packages/ui/src/routes/[projectId]/navigation/StashedBranches.svelte
+++ b/packages/ui/src/routes/[projectId]/navigation/StashedBranches.svelte
@@ -113,8 +113,8 @@
 	.viewport {
 		padding-top: var(--space-4);
 		padding-bottom: var(--space-4);
-		padding-left: var(--space-16);
-		padding-right: var(--space-16);
+		padding-left: var(--space-12);
+		padding-right: var(--space-12);
 	}
 	.wrapper {
 		position: relative;