From 356e433f5b0882f015b5d94a922c71a54330a04e Mon Sep 17 00:00:00 2001
From: GitButler <gitbutler@gitbutler.com>
Date: Mon, 10 Jul 2023 17:07:47 +0200
Subject: [PATCH 1/3] gitbutler joint commit

---
 src/lib/components/Modal/Modal.svelte           |  8 ++++----
 src/lib/components/Overlay/Overlay.svelte       |  2 +-
 src/lib/components/PopupMenu/PopupMenu.svelte   |  6 +++++-
 src/routes/repo/[projectId]/FileCard.svelte     |  4 ++--
 .../repo/[projectId]/NewBranchDropZone.svelte   | 17 ++++++++++-------
 src/routes/repo/[projectId]/Tray.svelte         | 16 ++++++++--------
 6 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/src/lib/components/Modal/Modal.svelte b/src/lib/components/Modal/Modal.svelte
index 534e14a2e..8bb4d9436 100644
--- a/src/lib/components/Modal/Modal.svelte
+++ b/src/lib/components/Modal/Modal.svelte
@@ -30,7 +30,7 @@
 	>
 		{#if $$slots.title}
 			<div
-				class="flex w-full items-center justify-between border-b border-light-400 px-4 pb-4 dark:border-dark-500"
+				class="flex w-full items-center justify-between border-b border-light-100 px-4 pr-2 pb-4 dark:border-dark-800"
 			>
 				<div class="flex items-center gap-2">
 					<svelte:component this={icon} class="h-5 w-5" />
@@ -38,14 +38,14 @@
 						<slot name="title" />
 					</h2>
 				</div>
-				<Button height="small" kind="plain" on:click={close} icon={IconClose} />
+				<Button height="small" kind="plain" on:click={close} icon={IconClose}/>
 			</div>
 		{/if}
 
 		<!-- TODO: Remove this props based way once all other modals have been updated -->
 		{#if title}
 			<div
-				class="flex w-full items-center justify-between border-b border-light-400 px-4 pb-4 dark:border-dark-500"
+				class="flex w-full items-center justify-between border-b border-light-100 px-4 pr-2 pb-4 dark:border-dark-800"
 			>
 				<div class="flex items-center gap-2">
 					<svelte:component this={icon} class="h-5 w-5" />
@@ -64,7 +64,7 @@
 		</div>
 
 		<div
-			class="flex w-full justify-end gap-4 border-t border-light-400 px-4 pt-4 dark:border-dark-500"
+			class="flex w-full justify-end gap-4 border-t border-light-100 px-4 pr-2 pt-4 dark:border-dark-800"
 		>
 			<slot name="controls" {item} {close}>
 				<Button kind="outlined" on:click={close}>Secondary action</Button>
diff --git a/src/lib/components/Overlay/Overlay.svelte b/src/lib/components/Overlay/Overlay.svelte
index a0c285cef..e5ae902e6 100644
--- a/src/lib/components/Overlay/Overlay.svelte
+++ b/src/lib/components/Overlay/Overlay.svelte
@@ -23,7 +23,7 @@
 </script>
 
 <dialog
-	class="rounded-lg border-[0.5px] border-light-200 bg-white p-0 backdrop:bg-white/50 dark:border-dark-500 dark:bg-dark-700 backdrop:dark:bg-black/20"
+	class="rounded-lg border-[0.5px] border-light-200 bg-white p-0 backdrop:bg-white/50 dark:border-dark-500 dark:bg-dark-1000 backdrop:dark:bg-black/50"
 	in:scale={{ duration: 150 }}
 	bind:this={dialog}
 	on:close={close}
diff --git a/src/lib/components/PopupMenu/PopupMenu.svelte b/src/lib/components/PopupMenu/PopupMenu.svelte
index 80ced041a..e69b4fc6e 100644
--- a/src/lib/components/PopupMenu/PopupMenu.svelte
+++ b/src/lib/components/PopupMenu/PopupMenu.svelte
@@ -45,7 +45,11 @@
 </script>
 
 {#if showMenu}
-	<div class="absolute top-0 left-0 z-50 h-full w-full" on:click={onDismiss} on:keydown={onDismiss}>
+	<div
+		class="absolute top-0 left-0 z-50 h-full w-full shadow-2xl"
+		on:click={onDismiss}
+		on:keydown={onDismiss}
+	>
 		<div
 			use:recordDimensions
 			on:mouseleave={onDismiss}
diff --git a/src/routes/repo/[projectId]/FileCard.svelte b/src/routes/repo/[projectId]/FileCard.svelte
index dc12c1835..1948bc50a 100644
--- a/src/routes/repo/[projectId]/FileCard.svelte
+++ b/src/routes/repo/[projectId]/FileCard.svelte
@@ -89,7 +89,7 @@
 					use:dzTrigger={{ type: dzType }}
 					on:dragstart={(e) => e.dataTransfer?.setData('text/hunk', id + ':' + hunk.id)}
 					on:contextmenu|preventDefault={(e) => popupMenu.openByMouse(e, hunk)}
-					class="changed-hunk flex w-full flex-col rounded-lg border border-light-200 bg-white dark:border-dark-400 dark:bg-dark-900"
+					class="changed-hunk flex w-full flex-col overflow-hidden rounded border border-light-200 bg-white dark:border-dark-400 dark:bg-dark-900"
 				>
 					{#if $userSettings.aiSummariesEnabled}
 						<div class="truncate whitespace-normal p-2">
@@ -102,7 +102,7 @@
 						<!-- Disabling syntax highlighting for performance reasons -->
 						<HunkDiffViewer diff={hunk.diff} filePath="foo" linesShown={maximized ? 8 : 2} />
 					</div>
-					<div class="flex px-2 py-1 text-sm">
+					<div class="flex px-2 py-1">
 						<div class="flex flex-grow gap-1">
 							<div class="text-green-600">+{hunkSize(hunk.diff)[0]}</div>
 							{#if hunkSize(hunk.diff)[1] > 0}
diff --git a/src/routes/repo/[projectId]/NewBranchDropZone.svelte b/src/routes/repo/[projectId]/NewBranchDropZone.svelte
index e335944b5..5ac05bd53 100644
--- a/src/routes/repo/[projectId]/NewBranchDropZone.svelte
+++ b/src/routes/repo/[projectId]/NewBranchDropZone.svelte
@@ -22,7 +22,7 @@
 
 <div
 	id="new-branch-dz"
-	class="h-42 ml-4 mt-16 flex w-[22.5rem] shrink-0 justify-center text-center text-light-800 dark:text-dark-100"
+	class="h-42 ml-4 mt-14 flex w-[22.5rem] shrink-0 justify-center text-center text-light-800 dark:text-dark-100"
 	bind:this={dropZone}
 	use:dzHighlight={{ type: 'text/hunk', hover: 'drag-zone-hover', active: 'drag-zone-active' }}
 	on:drop|stopPropagation={(e) => {
@@ -34,17 +34,20 @@
 	}}
 >
 	<div class="bg-green-300" />
-	<div class="call-to-action flex-grow rounded-lg border border-dashed border-light-600 p-8">
+	<div class="call-to-action flex-grow rounded border border-light-500 p-8 dark:border-dark-500">
 		<div class="flex flex-col items-center gap-y-3 self-center p-2">
 			<p>Drag changes or click button to create new virtual branch</p>
-			<Button color="purple" height="small" on:click={handleNewVirtualBranch}
-				>New virtual branch</Button
-			>
+			<Button color="purple" height="small" on:click={handleNewVirtualBranch}>
+				New virtual branch
+			</Button>
 		</div>
 	</div>
-	<div class="drag-zone-marker hidden flex-grow rounded-lg border border-green-450 p-8">
+	<div class="drag-zone-marker hidden flex-grow rounded border border-green-450 p-8">
 		<div class="flex flex-col items-center gap-y-3 self-center p-2">
-			<p>Drop here to add to virtual branch</p>
+			<p>Drag changes or click button to create new virtual branch</p>
+			<Button color="purple" height="small" on:click={handleNewVirtualBranch}>
+				New virtual branch
+			</Button>
 		</div>
 	</div>
 </div>
diff --git a/src/routes/repo/[projectId]/Tray.svelte b/src/routes/repo/[projectId]/Tray.svelte
index 158197ba1..907e46e33 100644
--- a/src/routes/repo/[projectId]/Tray.svelte
+++ b/src/routes/repo/[projectId]/Tray.svelte
@@ -65,7 +65,7 @@
 	class="w-80 min-w-[216px] max-w-lg shrink-0 resize-x overflow-y-auto border-r border-light-400 bg-white text-light-800 dark:border-dark-600 dark:bg-dark-900 dark:text-dark-100"
 >
 	<!-- Target branch -->
-	<div class="pl-2 pr-4 pt-2 text-light-700 dark:bg-dark-700 dark:text-dark-200">Target branch</div>
+	<div class="pl-2 pr-4 pt-2 text-light-700 dark:bg-dark-700 dark:text-dark-200">Base branch</div>
 	<div
 		class="flex w-full flex-row items-center  justify-between border-b border-light-400 pl-2 pr-2 text-light-900 dark:border-dark-500 dark:bg-dark-700 dark:text-dark-100"
 	>
@@ -97,11 +97,11 @@
 
 	<!-- Your branches -->
 	<div
-		class="flex items-center justify-between border-b border-light-400 bg-light-100 py-2 pl-2 pr-4 dark:border-dark-600 dark:bg-dark-800"
+		class="flex items-center justify-between border-b border-light-400 bg-light-100 py-1 px-2 pr-1 dark:border-dark-600 dark:bg-dark-800"
 	>
 		<div class="font-bold">Your branches</div>
-		<div>
-			<button class="p-1" on:click={() => (yourBranchesOpen = !yourBranchesOpen)}>
+		<div class="h-4 w-4 2-4 flex justify-around">
+			<button class="w-full h-full" on:click={() => (yourBranchesOpen = !yourBranchesOpen)}>
 				{#if yourBranchesOpen}
 					<IconTriangleUp />
 				{:else}
@@ -142,11 +142,11 @@
 	<!-- Remote branches -->
 	{#if remoteBranches}
 		<div
-			class="flex items-center justify-between border-b border-light-400 bg-light-100 py-2 pl-2 pr-4 dark:border-dark-600 dark:bg-dark-800"
+			class="flex items-center justify-between border-b border-light-400 bg-light-100 py-1 px-2 pr-1 dark:border-dark-600 dark:bg-dark-800"
 		>
 			<div class="font-bold">Remote branches</div>
-			<div>
-				<button class="p-1" on:click={() => (remoteBranchesOpen = !remoteBranchesOpen)}>
+			<div class="h-4 w-4 2-4 flex justify-around">
+				<button class="w-full h-full" on:click={() => (remoteBranchesOpen = !remoteBranchesOpen)}>
 					{#if remoteBranchesOpen}
 						<IconTriangleUp />
 					{:else}
@@ -160,7 +160,7 @@
 			{#each remoteBranches as branch}
 				<div
 					on:contextmenu|preventDefault={(e) => remoteBranchContextMenu.openByMouse(e, branch)}
-					class="flex flex-col justify-between border-b border-light-400 p-2 pl-2 pr-4 dark:border-dark-600"
+					class="flex flex-col gap-1 justify-between border-b border-light-400 py-1 px-2 pt-2 dark:border-dark-600"
 				>
 					<div class="flex flex-row items-center gap-x-2">
 						<div class="text-light-600 dark:text-dark-200">

From 977852798a2006d95e83a32b5fdd2b91c52f06c2 Mon Sep 17 00:00:00 2001
From: idonahue <donahue.ian@gmail.com>
Date: Mon, 10 Jul 2023 17:29:15 +0200
Subject: [PATCH 2/3] fixed up the target branch and changed it to base branch

---
 src/lib/components/Modal/Modal.svelte   |  2 +-
 src/routes/repo/[projectId]/Tray.svelte | 22 +++++++++++-----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/Modal/Modal.svelte b/src/lib/components/Modal/Modal.svelte
index 8bb4d9436..c216ac631 100644
--- a/src/lib/components/Modal/Modal.svelte
+++ b/src/lib/components/Modal/Modal.svelte
@@ -38,7 +38,7 @@
 						<slot name="title" />
 					</h2>
 				</div>
-				<Button height="small" kind="plain" on:click={close} icon={IconClose}/>
+				<Button height="small" kind="plain" on:click={close} icon={IconClose} />
 			</div>
 		{/if}
 
diff --git a/src/routes/repo/[projectId]/Tray.svelte b/src/routes/repo/[projectId]/Tray.svelte
index 907e46e33..5bee79541 100644
--- a/src/routes/repo/[projectId]/Tray.svelte
+++ b/src/routes/repo/[projectId]/Tray.svelte
@@ -67,15 +67,15 @@
 	<!-- Target branch -->
 	<div class="pl-2 pr-4 pt-2 text-light-700 dark:bg-dark-700 dark:text-dark-200">Base branch</div>
 	<div
-		class="flex w-full flex-row items-center  justify-between border-b border-light-400 pl-2 pr-2 text-light-900 dark:border-dark-500 dark:bg-dark-700 dark:text-dark-100"
+		class="flex w-full flex-row items-center justify-between border-b border-light-400 pb-1 pl-2 pr-1 text-light-900 dark:border-dark-500 dark:bg-dark-700 dark:text-dark-100"
 	>
-		<div class="flex-grow text-lg font-bold" title={behindMessage}>{target.name}</div>
-		<div class="flex items-center">
-			<div>{target.behind > 0 ? `behind ${target.behind}` : 'up-to-date'}</div>
+		<div class="flex-grow pb-1 font-bold" title={behindMessage}>{target.name}</div>
+		<div class="flex items-center gap-1">
+			<div class="pb-1">{target.behind > 0 ? `behind ${target.behind}` : 'up-to-date'}</div>
 			<div class="flex-shrink-0 text-light-700 dark:text-dark-100" title={behindMessage}>
 				{#if target.behind == 0}
 					<button
-						class="p-1 disabled:text-light-300 disabled:dark:text-dark-300"
+						class="p-0 hover:bg-light-200 disabled:text-light-300 dark:hover:bg-dark-800 disabled:dark:text-dark-300"
 						on:click={() => branchController.fetchFromTarget()}
 						title="click to fetch"
 					>
@@ -83,7 +83,7 @@
 					</button>
 				{:else}
 					<button
-						class="p-1 disabled:text-light-300 disabled:dark:text-dark-300"
+						class="p-0 disabled:text-light-300 disabled:dark:text-dark-300"
 						on:click={updateTargetModal.show}
 						disabled={target.behind == 0}
 						title={target.behind > 0 ? 'click to update target' : 'already up-to-date'}
@@ -100,8 +100,8 @@
 		class="flex items-center justify-between border-b border-light-400 bg-light-100 py-1 px-2 pr-1 dark:border-dark-600 dark:bg-dark-800"
 	>
 		<div class="font-bold">Your branches</div>
-		<div class="h-4 w-4 2-4 flex justify-around">
-			<button class="w-full h-full" on:click={() => (yourBranchesOpen = !yourBranchesOpen)}>
+		<div class="flex h-4 w-4 justify-around">
+			<button class="h-full w-full" on:click={() => (yourBranchesOpen = !yourBranchesOpen)}>
 				{#if yourBranchesOpen}
 					<IconTriangleUp />
 				{:else}
@@ -145,8 +145,8 @@
 			class="flex items-center justify-between border-b border-light-400 bg-light-100 py-1 px-2 pr-1 dark:border-dark-600 dark:bg-dark-800"
 		>
 			<div class="font-bold">Remote branches</div>
-			<div class="h-4 w-4 2-4 flex justify-around">
-				<button class="w-full h-full" on:click={() => (remoteBranchesOpen = !remoteBranchesOpen)}>
+			<div class="flex h-4 w-4 justify-around">
+				<button class="h-full w-full" on:click={() => (remoteBranchesOpen = !remoteBranchesOpen)}>
 					{#if remoteBranchesOpen}
 						<IconTriangleUp />
 					{:else}
@@ -160,7 +160,7 @@
 			{#each remoteBranches as branch}
 				<div
 					on:contextmenu|preventDefault={(e) => remoteBranchContextMenu.openByMouse(e, branch)}
-					class="flex flex-col gap-1 justify-between border-b border-light-400 py-1 px-2 pt-2 dark:border-dark-600"
+					class="flex flex-col justify-between gap-1 border-b border-light-400 py-1 px-2 pt-2 dark:border-dark-600"
 				>
 					<div class="flex flex-row items-center gap-x-2">
 						<div class="text-light-600 dark:text-dark-200">

From d555ea6c146d8bfcbea4490327abbfad001e1c25 Mon Sep 17 00:00:00 2001
From: idonahue <donahue.ian@gmail.com>
Date: Mon, 10 Jul 2023 17:46:12 +0200
Subject: [PATCH 3/3] pnpm format

---
 src/routes/repo/[projectId]/NewBranchDropZone.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/repo/[projectId]/NewBranchDropZone.svelte b/src/routes/repo/[projectId]/NewBranchDropZone.svelte
index eefea3558..d087d31ba 100644
--- a/src/routes/repo/[projectId]/NewBranchDropZone.svelte
+++ b/src/routes/repo/[projectId]/NewBranchDropZone.svelte
@@ -43,7 +43,6 @@
 		</div>
 	</div>
 	<div class="drag-zone-marker hidden flex-grow rounded border border-green-450 p-8">
-
 		<div class="flex flex-col items-center gap-y-3 self-center p-2">
 			<p>Drag changes or click button to create new virtual branch</p>
 			<Button color="purple" height="small" on:click={handleNewVirtualBranch}>