empty states updated, added missing text class

gitbutler-ui/src/routes/[projectId]/components/BranchCard.svelte

@@ -27,6 +27,7 @@
 	import { SETTINGS_CONTEXT, type SettingsStore } from '$lib/settings/userSettings';
 	import BranchCommits from './BranchCommits.svelte';
 	import type { Project } from '$lib/backend/projects';
+	import ImgThemed from '$lib/components/ImgThemed.svelte';
 
 	import DropzoneOverlay from './DropzoneOverlay.svelte';
 
@@ -217,13 +218,39 @@
 				{/if}
 			{:else if branch.commits.length == 0}
 				<div class="new-branch" data-dnd-ignore>
-					<h1 class="text-base-16 text-semibold">This is a new branch. Let's start creating!</h1>
-					<p class="px-12">Get some work done, then throw some files my way!</p>
+					<div class="new-branch__content">
+						<div class="new-branch__image">
+							<ImgThemed
+								imgSet={{
+									light: '/images/lane-new-light.webp',
+									dark: '/images/lane-new-dark.webp'
+								}}
+							/>
+						</div>
+						<h2 class="new-branch__title text-base-body-15 text-semibold">
+							This is a new branch.<br />Let's start creating!
+						</h2>
+						<p class="new-branch__caption text-base-body-12">
+							Get some work done,<br />then throw some files my way
+						</p>
+					</div>
 				</div>
 			{:else}
 				<!-- attention: these markers have custom css at the bottom of thise file -->
 				<div class="no-changes" data-dnd-ignore>
-					<h1 class="text-base-16 text-semibold">No uncommitted changes on this branch</h1>
+					<div class="new-branch__content">
+						<div class="new-branch__image">
+							<ImgThemed
+								imgSet={{
+									light: '/images/lane-no-changes-light.webp',
+									dark: '/images/lane-no-changes-dark.webp'
+								}}
+							/>
+						</div>
+						<h2 class="new-branch__title-caption text-base-body-16 text-semibold">
+							No uncommitted changes on this branch
+						</h2>
+					</div>
 				</div>
 			{/if}
 			<BranchCommits
@@ -275,23 +302,37 @@
 		color: var(--clr-theme-scale-ntrl-60);
 		background: var(--clr-theme-container-light);
 		justify-content: center;
-		gap: var(--space-8);
+		align-items: center;
 		padding: var(--space-24) var(--space-40);
 	}
 
-	.new-branch h1 {
+	.new-branch__content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--space-8);
+		max-width: 14rem;
+	}
+
+	.new-branch__image {
+		width: 7.5rem;
+		margin-bottom: var(--space-12);
+	}
+
+	.new-branch__title {
 		color: var(--clr-theme-scale-ntrl-40);
 		text-align: center;
 	}
 
-	.new-branch p {
-		text-align: center;
+	.new-branch__caption {
 		color: var(--clr-theme-scale-ntrl-50);
+		text-align: center;
 	}
 
-	.no-changes h1 {
-		text-align: center;
+	.new-branch__title-caption {
+		color: var(--clr-theme-scale-ntrl-60);
 		text-align: center;
+		max-width: 12rem;
 	}
 
 	/* hunks drop zone */

gitbutler-ui/src/routes/[projectId]/navigation/Branches.svelte

@@ -15,6 +15,8 @@
 	import { storeToObservable } from '$lib/rxjs/store';
 	import TextBox from '$lib/components/TextBox.svelte';
 	import { persisted } from '$lib/persisted/persisted';
+	import ImgThemed from '$lib/components/ImgThemed.svelte';
+
 	import type { GitHubService } from '$lib/github/service';
 
 	export let branchService: BranchService;
@@ -158,22 +160,50 @@
 				on:action
 			/>
 		</BranchesHeader>
-		<ScrollableContainer bind:viewport showBorderWhenScrolled>
-			<div class="scroll-container">
-				<TextBox icon="filter" placeholder="Search" on:input={(e) => textFilter$.next(e.detail)} />
-				<div bind:this={contents} class="content">
-					{#if $filteredBranches$?.length > 0}
+		{#if $filteredBranches$?.length > 0}
+			<ScrollableContainer bind:viewport showBorderWhenScrolled>
+				<div class="scroll-container">
+					<TextBox
+						icon="filter"
+						placeholder="Search"
+						on:input={(e) => textFilter$.next(e.detail)}
+					/>
+					<div bind:this={contents} class="content">
 						{#each $filteredBranches$ as branch}
 							<BranchItem {projectId} {branch} />
 						{/each}
-					{:else if $branches$?.length > 0}
-						No branches match your filter
-					{:else}
-						You have no branches
-					{/if}
+					</div>
 				</div>
+			</ScrollableContainer>
+		{:else if $branches$.length > 0}
+			<div class="branch-list__empty-state">
+				<div class="branch-list__empty-state__image">
+					<ImgThemed
+						imgSet={{
+							light: '/images/no-branches-light.webp',
+							dark: '/images/no-branches-dark.webp'
+						}}
+					/>
+				</div>
+				<span class="branch-list__empty-state__caption text-base-body-14 text-semibold"
+					>No branches match your filter</span
+				>
 			</div>
-		</ScrollableContainer>
+		{:else}
+			<div class="branch-list__empty-state">
+				<div class="branch-list__empty-state__image">
+					<ImgThemed
+						imgSet={{
+							light: '/images/no-branches-light.webp',
+							dark: '/images/no-branches-dark.webp'
+						}}
+					/>
+				</div>
+				<span class="branch-list__empty-state__caption text-base-body-14 text-semibold"
+					>You have no branches</span
+				>
+			</div>
+		{/if}
 	</div>
 </div>
 
@@ -203,6 +233,28 @@
 	.content {
 		display: flex;
 		flex-direction: column;
+		justify-content: center;
+		align-items: center;
 		gap: var(--space-2);
 	}
+
+	/* EMPTY STATE */
+	.branch-list__empty-state {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		gap: var(--space-10);
+	}
+
+	.branch-list__empty-state__image {
+		width: 8.125rem;
+	}
+
+	.branch-list__empty-state__caption {
+		color: var(--clr-theme-scale-ntrl-60);
+		text-align: center;
+		max-width: 10rem;
+	}
 </style>

gitbutler-ui/src/styles/text-classes.css

@@ -58,6 +58,13 @@
 	line-height: var(--base-line-height);
 }
 
+.text-base-15 {
+	font-family: var(--base-font-family);
+	font-size: 0.938rem;
+	font-weight: var(--base-font-weight);
+	line-height: var(--base-line-height);
+}
+
 .text-base-16 {
 	font-family: var(--base-font-family);
 	font-size: 1rem;
@@ -108,6 +115,13 @@
 	line-height: var(--text-body-line-height);
 }
 
+.text-base-body-15 {
+	font-family: var(--base-font-family);
+	font-size: 0.938rem;
+	font-weight: var(--base-font-weight);
+	line-height: var(--text-body-line-height);
+}
+
 .text-base-body-16 {
 	font-family: var(--base-font-family);
 	font-size: 1rem;