Merge pull request gitbutlerapp#2893 from gitbutlerapp/small-CSS-fixe…

…s-Profile-page small CSS fixes: Profile page
honnip · Feb 23, 2024 · 2a10996 · 2a10996
2 parents 392cff5 + d32b9de
commit 2a10996
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 17 deletions.
diff --git 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>
diff --git 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 {

diff --git 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 {

diff --git 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);