fix: design alignment

gitbutlerapp · Jan 22, 2025 · 45b36e5 · 45b36e5
1 parent 16093b0
commit 45b36e5
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 27 deletions.
diff --git a/apps/desktop/src/components/ChromeHeader.svelte b/apps/desktop/src/components/ChromeHeader.svelte
@@ -36,7 +36,10 @@
 		{#if platformName === 'macos'}
 			<div class="traffic-lights-placeholder" data-tauri-drag-region></div>
 		{/if}
-		<SyncButton size="button" />
+		<div class="left-buttons">
+			<SyncButton size="button" />
+			<Button style="pop">3 upstream commits</Button>
+		</div>
 	</div>
 	<div class="center">
 		<Select
@@ -110,6 +113,16 @@
 		margin: 16px 16px 0 16px;
 	}
 
+	.left {
+		display: flex;
+		gap: 16px;
+	}
+
+	.left-buttons {
+		display: flex;
+		gap: 8px;
+	}
+
 	.selector-series-select {
 		display: flex;
 		align-items: center;

diff --git a/apps/desktop/src/components/ChromeSidebar.svelte b/apps/desktop/src/components/ChromeSidebar.svelte
@@ -174,7 +174,7 @@
 				kind="outline"
 				onclick={() => goto(routes.settingsPath(project.id))}
 				width={34}
-				class="btn-square"
+				class={['btn-square', routes.isSettingsPath && 'btn-active']}
 			/>
 		</div>
 		<Button
@@ -202,35 +202,37 @@
 			</div>
 		</Button>
 
-		<Button
-			icon="keyboard"
-			kind="ghost"
-			style="neutral"
-			tooltip="Keyboard Shortcuts"
-			tooltipPosition="top"
-			tooltipAlign="start"
-			width={34}
-			class="fill-text-2"
-		/>
-		<Button
-			icon="mail"
-			kind="ghost"
-			tooltip="Share feedback"
-			tooltipPosition="top"
-			tooltipAlign="start"
-			width={34}
-			class="fill-text-2"
-			onclick={() => {
-				shareIssueModal?.show();
-			}}
-		/>
+		<div>
+			<Button
+				icon="keyboard"
+				kind="ghost"
+				style="neutral"
+				tooltip="Keyboard Shortcuts"
+				tooltipPosition="top"
+				tooltipAlign="start"
+				width={34}
+				class="fill-text-2"
+			/>
+			<Button
+				icon="mail"
+				kind="ghost"
+				tooltip="Share feedback"
+				tooltipPosition="top"
+				tooltipAlign="start"
+				width={34}
+				class="fill-text-2"
+				onclick={() => {
+					shareIssueModal?.show();
+				}}
+			/>
+		</div>
 	</div>
 </nav>
 
 <ContextMenu
 	bind:this={contextMenuEl}
 	leftClickTrigger={contextTriggerButton}
-	verticalAlign="bottom"
+	verticalAlign="top"
 	horizontalAlign="left"
 >
 	<ContextMenuSection>
@@ -288,15 +290,29 @@
 	.bottom {
 		display: flex;
 		flex-direction: column;
+	}
+	.top {
 		gap: 4px;
 	}
+	.bottom {
+		gap: 8px;
+	}
 
 	.user-button {
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
 		width: 34px;
+		padding: 4px;
+		gap: 4px;
+	}
+	.user-button img {
+		border-radius: var(--radius-m);
+	}
+
+	.profile-picture {
+		border-radius: var(--radius-m);
 	}
 
 	.active-page-indicator {
@@ -352,15 +368,19 @@
 
 	:global(.btn-height-auto) {
 		height: auto !important;
+		border-radius: var(--radius-ml) !important;
 		opacity: 0.7;
+		padding: 0 !important;
 	}
 
 	:global(.btn-square) {
 		aspect-ratio: 1 / 1;
 		height: unset !important;
 		opacity: 0.7;
+		border-radius: var(--radius-ml) !important;
 	}
 	:global(.btn-square.btn-active) {
 		opacity: 1 !important;
+		background-color: var(--clr-scale-ntrl-100);
 	}
 </style>
diff --git a/apps/desktop/src/routes/[projectId]/workspace/[[branchId]]/+page.svelte b/apps/desktop/src/routes/[projectId]/workspace/[[branchId]]/+page.svelte
@@ -12,7 +12,7 @@
 
 	// Redirect to board if we have switched away from V3 feature.
 	$effect(() => {
-		if (!$settingsStore?.featureFlags.v3) {
+		if ($settingsStore && !$settingsStore.featureFlags.v3) {
 			goto(`/${data.projectId}/board`);
 		}
 	});
@@ -94,14 +94,15 @@
 		width: 290px;
 		background-color: var(--clr-bg-1);
 		border-radius: var(--radius-ml);
-		padding: 8px;
+		border: 1px solid var(--clr-border-2);
 	}
 
 	.sidebar-header {
 		width: 100%;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
+		padding: 10px 8px 10px 14px;
 	}
 
 	.sidebar-body {
@@ -115,6 +116,7 @@
 	.content {
 		flex: 1;
 		padding: 8px;
+		border: 1px solid var(--clr-border-2);
 		border-radius: var(--radius-ml);
 
 		background-color: #f3f3f2;