From 955d21ab38de6edd43f34bcb2b5259534e5a8d64 Mon Sep 17 00:00:00 2001
From: Pavel Laptev <pawellaptew@gmail.com>
Date: Thu, 4 Jan 2024 01:20:24 +0100
Subject: [PATCH] - Updated changes list CSS - Updated default line-height to
 120% - Commitbox line-height updated

---
 .../[projectId]/components/CommitCard.svelte  |  2 +-
 .../components/FileListItem.svelte            | 27 ++++++---
 .../components/TreeListFile.svelte            | 54 ++++++++++-------
 .../components/TreeListFolder.svelte          | 58 ++++++++++++++-----
 .../[projectId]/navigation/BranchItem.svelte  |  8 +--
 gitbutler-ui/src/styles/text-classes.css      |  2 +-
 6 files changed, 98 insertions(+), 53 deletions(-)

diff --git a/gitbutler-ui/src/routes/[projectId]/components/CommitCard.svelte b/gitbutler-ui/src/routes/[projectId]/components/CommitCard.svelte
index 010327331..dddfd8a25 100644
--- a/gitbutler-ui/src/routes/[projectId]/components/CommitCard.svelte
+++ b/gitbutler-ui/src/routes/[projectId]/components/CommitCard.svelte
@@ -57,7 +57,7 @@
 >
 	<div class="commit__card" class:is-head-commit={isHeadCommit}>
 		<div class="commit__header">
-			<span class="commit__description text-base-body-12 truncate">
+			<span class="commit__description text-base-12 truncate">
 				{commit.description}
 			</span>
 			{#if isHeadCommit && !readonly}
diff --git a/gitbutler-ui/src/routes/[projectId]/components/FileListItem.svelte b/gitbutler-ui/src/routes/[projectId]/components/FileListItem.svelte
index 42d8d6377..2a8da79f2 100644
--- a/gitbutler-ui/src/routes/[projectId]/components/FileListItem.svelte
+++ b/gitbutler-ui/src/routes/[projectId]/components/FileListItem.svelte
@@ -39,7 +39,7 @@
 	tabindex="0"
 >
 	<div class="file-list-item" id={`file-${file.id}`} class:selected>
-		<div class="info">
+		<div class="info-wrap">
 			{#if showCheckbox}
 				<Checkbox
 					small
@@ -54,13 +54,15 @@
 					}}
 				/>
 			{/if}
-			<img src={getVSIFileIcon(file.path)} alt="js" style="width: var(--space-12)" />
-			<span class="text-base-body-12 name">
-				{file.filename}
-			</span>
-			<span class="text-base-body-12 path">
-				{file.justpath}
-			</span>
+			<div class="info">
+				<img src={getVSIFileIcon(file.path)} alt="js" style="width: var(--space-12)" />
+				<span class="text-base-12 name">
+					{file.filename}
+				</span>
+				<span class="text-base-12 path">
+					{file.justpath}
+				</span>
+			</div>
 		</div>
 		<FileStatusIcons {file} />
 	</div>
@@ -82,7 +84,14 @@
 			background: var(--clr-theme-container-pale);
 		}
 	}
-	/* hello */
+	.info-wrap {
+		display: flex;
+		align-items: center;
+		flex-grow: 1;
+		flex-shrink: 1;
+		gap: var(--space-10);
+		overflow: hidden;
+	}
 	.info {
 		display: flex;
 		align-items: center;
diff --git a/gitbutler-ui/src/routes/[projectId]/components/TreeListFile.svelte b/gitbutler-ui/src/routes/[projectId]/components/TreeListFile.svelte
index b19176505..5242505ad 100644
--- a/gitbutler-ui/src/routes/[projectId]/components/TreeListFile.svelte
+++ b/gitbutler-ui/src/routes/[projectId]/components/TreeListFile.svelte
@@ -44,29 +44,29 @@
 	tabindex="0"
 >
 	<div class="tree-list-file" class:selected>
-		{#if showCheckbox}
-			<Checkbox
-				small
-				{checked}
-				{indeterminate}
-				on:change={(e) => {
-					selectedOwnership.update((ownership) => {
-						if (e.detail) file.hunks.forEach((h) => ownership.addHunk(file.id, h.id));
-						if (!e.detail) file.hunks.forEach((h) => ownership.removeHunk(file.id, h.id));
-						return ownership;
-					});
-				}}
-			/>
-		{:else}
-			<div class="dot">
-				<Icon name="dot" />
+		<div class="content-wrapper">
+			{#if showCheckbox}
+				<Checkbox
+					small
+					{checked}
+					{indeterminate}
+					on:change={(e) => {
+						selectedOwnership.update((ownership) => {
+							if (e.detail) file.hunks.forEach((h) => ownership.addHunk(file.id, h.id));
+							if (!e.detail) file.hunks.forEach((h) => ownership.removeHunk(file.id, h.id));
+							return ownership;
+						});
+					}}
+				/>
+			{/if}
+			<div class="name-wrapper">
+				<img src={getVSIFileIcon(file.path)} alt="js" style="width: var(--space-12)" class="icon" />
+				<span class="name text-base-12">
+					{file.filename}
+				</span>
+				<FileStatusIcons {file} />
 			</div>
-		{/if}
-		<img src={getVSIFileIcon(file.path)} alt="js" style="width: var(--space-12)" class="icon" />
-		<span class="name text-base-12">
-			{file.filename}
-		</span>
-		<FileStatusIcons {file} />
+		</div>
 	</div>
 </div>
 
@@ -88,6 +88,16 @@
 		}
 		overflow: hidden;
 	}
+	.content-wrapper {
+		display: flex;
+		align-items: center;
+		gap: var(--space-10);
+	}
+	.name-wrapper {
+		display: flex;
+		align-items: center;
+		gap: var(--space-6);
+	}
 	.name {
 		color: var(--clr-theme-scale-ntrl-0);
 		text-overflow: ellipsis;
diff --git a/gitbutler-ui/src/routes/[projectId]/components/TreeListFolder.svelte b/gitbutler-ui/src/routes/[projectId]/components/TreeListFolder.svelte
index 0741f3bb6..6517e77fc 100644
--- a/gitbutler-ui/src/routes/[projectId]/components/TreeListFolder.svelte
+++ b/gitbutler-ui/src/routes/[projectId]/components/TreeListFolder.svelte
@@ -32,23 +32,25 @@
 </script>
 
 <button class="tree-list-folder" class:expanded on:click>
-	{#if expanded}
+	<div class="chevron-icon" class:chevron-expanded={expanded}>
 		<Icon name="chevron-down-small" />
-	{:else}
-		<Icon name="chevron-right-small" />
-	{/if}
-	{#if showCheckbox}
-		<Checkbox
-			small
-			checked={isChecked}
-			indeterminate={isIndeterminate}
-			on:change={onSelectionChanged}
-		/>
-	{/if}
-	<IconFolder style="width: var(--space-12)" />
-	<span class="name text-base-body-12">
-		{node.name}
-	</span>
+	</div>
+	<div class="content-wrapper">
+		{#if showCheckbox}
+			<Checkbox
+				small
+				checked={isChecked}
+				indeterminate={isIndeterminate}
+				on:change={onSelectionChanged}
+			/>
+		{/if}
+		<div class="name-wrapper">
+			<IconFolder style="width: var(--space-12)" />
+			<span class="name text-base-12">
+				{node.name}
+			</span>
+		</div>
+	</div>
 </button>
 
 <style lang="postcss">
@@ -61,9 +63,33 @@
 		border-radius: var(--radius-s);
 		&:hover {
 			background: var(--clr-theme-container-pale);
+
+			& .chevron-icon {
+				opacity: 0.7;
+			}
 		}
 	}
+	.content-wrapper {
+		display: flex;
+		align-items: center;
+		gap: var(--space-10);
+	}
+	.name-wrapper {
+		display: flex;
+		align-items: center;
+		gap: var(--space-6);
+	}
 	.name {
 		color: var(--clr-theme-scale-ntrl-0);
 	}
+	.chevron-icon {
+		opacity: 0.5;
+		transform: rotate(-90deg);
+		transition:
+			opacity var(--transition-fast),
+			transform var(--transition-fast);
+	}
+	.chevron-expanded {
+		transform: rotate(0deg);
+	}
 </style>
diff --git a/gitbutler-ui/src/routes/[projectId]/navigation/BranchItem.svelte b/gitbutler-ui/src/routes/[projectId]/navigation/BranchItem.svelte
index 3ff4b45f8..00157526a 100644
--- a/gitbutler-ui/src/routes/[projectId]/navigation/BranchItem.svelte
+++ b/gitbutler-ui/src/routes/[projectId]/navigation/BranchItem.svelte
@@ -22,15 +22,14 @@
 
 <a class="branch" class:selected {href}>
 	{#if branch.icon}
-		<!-- <div class="item__icon"><Icon name={branch.icon} color={branch.color} /></div> -->
 		<BranchIcon name={branch.icon} color={branch.color} />
 	{/if}
 	<div class="branch__info flex flex-col gap-2">
-		<p class="text-base-body-13 branch__name">
+		<p class="text-base-13 branch__name">
 			{branch.displayName}
 		</p>
 		<div class="branch__details">
-			<span class="branch__author text-base-body-11 details truncate">
+			<span class="branch__author text-base-11 details truncate">
 				<TimeAgo date={branch.modifiedAt} />
 				{#if branch.author}
 					by {branch.author?.name ?? 'unknown'}
@@ -55,8 +54,8 @@
 		display: flex;
 		flex-grow: 1;
 		flex-direction: column;
-		overflow-x: hidden;
 		gap: var(--space-6);
+		overflow: hidden;
 	}
 
 	.branch__details {
@@ -66,6 +65,7 @@
 	}
 
 	.branch__name {
+		white-space: nowrap;
 		overflow-x: hidden;
 		text-overflow: ellipsis;
 	}
diff --git a/gitbutler-ui/src/styles/text-classes.css b/gitbutler-ui/src/styles/text-classes.css
index 6f6b80285..f24a16d84 100644
--- a/gitbutler-ui/src/styles/text-classes.css
+++ b/gitbutler-ui/src/styles/text-classes.css
@@ -3,7 +3,7 @@
 	--base-font-weight: 500;
 	--semidold-font-weight: 600;
 	--bold-font-weight: 700;
-	--base-line-height: 100%;
+	--base-line-height: 120%;
 	--text-body-line-height: 140%;
 }