Merge pull request #669 from gitbutlerapp/sidebar-gussy-up-1

Sidebar gussy up 1

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" />
@@ -45,7 +45,7 @@
 		<!-- 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>

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}

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}

src/routes/repo/[projectId]/FileCard.svelte

@@ -125,6 +125,7 @@
 			{/if}
 		</div>
 	</div>
+
 	<PopupMenu bind:this={popupMenu} let:item={hunk}>
 		<PopupMenuItem
 			on:click={() =>

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: 'drop-zone-hover', active: 'drop-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="drop-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>

src/routes/repo/[projectId]/Tray.svelte

@@ -65,17 +65,17 @@
 	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"
+		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'}
@@ -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="flex h-4 w-4 justify-around">
+			<button class="h-full w-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="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 justify-between border-b border-light-400 p-2 pl-2 pr-4 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">