From f3f4e55016c709ef9a08814e49921a2a9f329397 Mon Sep 17 00:00:00 2001
From: Pavel Laptev <pawellaptew@gmail.com>
Date: Fri, 23 Feb 2024 23:39:17 +0100
Subject: [PATCH 1/4] CSS fix: updated theme card radius and border-width

---
 gitbutler-ui/src/lib/components/ThemeSelector.svelte | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/gitbutler-ui/src/lib/components/ThemeSelector.svelte b/gitbutler-ui/src/lib/components/ThemeSelector.svelte
index e79d1cceb..7c190c315 100644
--- a/gitbutler-ui/src/lib/components/ThemeSelector.svelte
+++ b/gitbutler-ui/src/lib/components/ThemeSelector.svelte
@@ -78,14 +78,14 @@
 		position: relative;
 		width: 100%;
 		height: auto;
-		border-radius: var(--radius-l);
+		border-radius: var(--radius-m);
 		border: 1px solid var(--clr-theme-container-outline-light);
 		overflow: hidden;
 
 		& img {
 			width: 100%;
-			height: 100%;
-			object-fit: cover;
+			height: auto;
+			border-radius: var(--radius-m);
 		}
 	}
 
@@ -114,7 +114,6 @@
 
 	.theme-card.selected .theme-card__preview {
 		border-color: var(--clr-core-pop-50);
-		border-width: 2px;
 	}
 
 	.theme-card.selected .theme-card__icon {

From 3f6e659c645a3c277d541c1714236d5ec2f38145 Mon Sep 17 00:00:00 2001
From: Pavel Laptev <pawellaptew@gmail.com>
Date: Fri, 23 Feb 2024 23:40:13 +0100
Subject: [PATCH 2/4] UI fix: switched the content background and the sidebar
 background colors

---
 .../lib/components/settings/ProfileSIdebar.svelte    | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/gitbutler-ui/src/lib/components/settings/ProfileSIdebar.svelte b/gitbutler-ui/src/lib/components/settings/ProfileSIdebar.svelte
index 01e9578ce..6aebc6e60 100644
--- a/gitbutler-ui/src/lib/components/settings/ProfileSIdebar.svelte
+++ b/gitbutler-ui/src/lib/components/settings/ProfileSIdebar.svelte
@@ -119,7 +119,7 @@
 		justify-content: space-between;
 		padding: calc(var(--space-40) + var(--space-4)) var(--space-20) var(--space-20) var(--space-20);
 		border-right: 1px solid var(--clr-theme-container-outline-light);
-		background-color: var(--clr-theme-container-pale);
+		background-color: var(--clr-theme-container-light);
 		height: 100%;
 		width: 16rem;
 	}
@@ -172,7 +172,7 @@
 			transition: none;
 			background-color: color-mix(
 				in srgb,
-				var(--clr-theme-container-pale),
+				var(--clr-theme-container-light),
 				var(--darken-tint-light)
 			);
 		}
@@ -183,7 +183,11 @@
 	}
 
 	.item_selected {
-		background-color: color-mix(in srgb, var(--clr-theme-container-pale), var(--darken-tint-light));
+		background-color: color-mix(
+			in srgb,
+			var(--clr-theme-container-light),
+			var(--darken-tint-light)
+		);
 		color: var(--clr-theme-scale-ntrl-0);
 	}
 
@@ -209,7 +213,7 @@
 		padding: var(--space-16);
 		border-radius: var(--radius-m);
 		border: 1px solid var(--clr-theme-container-outline-light);
-		background-color: var(--clr-theme-container-pale);
+		background-color: var(--clr-theme-container-light);
 		color: var(--clr-theme-scale-ntrl-30);
 		transition: background-color var(--transition-fast);
 

From c59d899e26a84082e2b9678827b55838578841fa Mon Sep 17 00:00:00 2001
From: Pavel Laptev <pawellaptew@gmail.com>
Date: Fri, 23 Feb 2024 23:41:24 +0100
Subject: [PATCH 3/4] UX fix: added draggable areas on the empry sides in the
 content vew

---
 .../components/settings/ContentWrapper.svelte | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/gitbutler-ui/src/lib/components/settings/ContentWrapper.svelte b/gitbutler-ui/src/lib/components/settings/ContentWrapper.svelte
index b13f66244..62d12451c 100644
--- a/gitbutler-ui/src/lib/components/settings/ContentWrapper.svelte
+++ b/gitbutler-ui/src/lib/components/settings/ContentWrapper.svelte
@@ -6,13 +6,15 @@
 
 <section class="content-wrapper">
 	<ScrollableContainer>
-		<div class="content" data-tauri-drag-region>
-			{#if title}
-				<h1 class="title text-head-24">
-					{title}
-				</h1>
-			{/if}
-			<slot />
+		<div class="drag-region" data-tauri-drag-region>
+			<div class="content" data-tauri-drag-region>
+				{#if title}
+					<h1 class="title text-head-24">
+						{title}
+					</h1>
+				{/if}
+				<slot />
+			</div>
 		</div>
 	</ScrollableContainer>
 </section>
@@ -23,7 +25,12 @@
 		width: 100%;
 		height: 100%;
 		flex: 1;
-		background-color: var(--clr-theme-container-light);
+		background-color: var(--clr-theme-container-pale);
+	}
+
+	.drag-region {
+		width: 100%;
+		min-height: 100vh;
 	}
 
 	.content {

From d32b9deba78b8e67f86e82aa743ce7a56c9ce172 Mon Sep 17 00:00:00 2001
From: Pavel Laptev <pawellaptew@gmail.com>
Date: Fri, 23 Feb 2024 23:46:14 +0100
Subject: [PATCH 4/4] UI fix: divider color updated

---
 gitbutler-ui/src/lib/components/Spacer.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/gitbutler-ui/src/lib/components/Spacer.svelte b/gitbutler-ui/src/lib/components/Spacer.svelte
index efd754e46..9b1af5779 100644
--- a/gitbutler-ui/src/lib/components/Spacer.svelte
+++ b/gitbutler-ui/src/lib/components/Spacer.svelte
@@ -16,6 +16,7 @@
 	.divider {
 		height: 1px;
 		width: 100%;
-		border-bottom: 1px solid var(--clr-theme-container-outline-light);
+		border-bottom: 1px solid var(--clr-theme-scale-ntrl-0);
+		opacity: 0.15;
 	}
 </style>