rezizer styles updated

- updated resizer styles
- removed Tailwind classes (we will remove it in the future)
- updated components styles that use `Resize` in order to support its update

gitbutler-ui/src/lib/components/BranchCard.svelte

@@ -353,6 +353,9 @@
 				inside={$selectedFiles.length > 0}
 				minWidth={320}
 				sticky
+				defaultLineColor={$selectedFiles.length > 0
+					? 'transparent'
+					: 'var(--clr-theme-container-outline-light)'}
 				on:width={(e) => {
 					laneWidth = e.detail / (16 * $userSettings.zoom);
 					lscache.set(laneWidthKey + branch.id, laneWidth, 7 * 1440); // 7 day ttl
@@ -386,21 +389,8 @@
 		position: absolute;
 		top: 0;
 		right: 0;
-		width: var(--space-4);
 		height: 100%;
 		transform: translateX(var(--selected-resize-shift));
-
-		&:after {
-			pointer-events: none;
-			content: '';
-			position: absolute;
-			top: 0;
-			right: 0;
-			width: 1px;
-			height: 100%;
-			opacity: var(--selected-opacity);
-			background-color: var(--clr-theme-container-outline-light);
-		}
 	}
 
 	.branch-card__dropzone-wrapper {

gitbutler-ui/src/lib/components/BranchLane.svelte

@@ -118,6 +118,7 @@
 				direction="right"
 				inside
 				minWidth={240}
+				defaultLineColor="var(--clr-theme-container-outline-light)"
 				on:width={(e) => {
 					fileWidth = e.detail / (16 * $userSettings.zoom);
 					lscache.set(fileWidthKey + branch.id, fileWidth, 7 * 1440); // 7 day ttl
@@ -151,7 +152,7 @@
 	}
 
 	.file-selected {
-		--selected-resize-shift: calc(var(--space-6) * -1);
+		--selected-resize-shift: calc((var(--space-6) + 0.0625rem) * -1);
 		--selected-target-branch-right-padding: calc(var(--space-4) * -1);
 		--selected-opacity: 0;
 	}
@@ -165,7 +166,7 @@
 		align-items: self-start;
 
 		padding: var(--space-12) var(--space-12) var(--space-12) 0;
-		border-right: 1px solid var(--clr-theme-container-outline-light);
+		/* border-right: 1px solid var(--clr-theme-container-outline-light); */
 		margin-left: var(--selected-target-branch-right-padding);
 	}
 </style>

gitbutler-ui/src/lib/components/Branches.svelte

@@ -147,6 +147,7 @@
 			viewport={rsViewport}
 			direction="up"
 			inside
+			defaultLineColor="var(--clr-theme-container-outline-light)"
 			minHeight={90}
 			on:height={(e) => {
 				$height = Math.min(maxHeight, e.detail / (16 * $userSettings.zoom));

gitbutler-ui/src/lib/components/BranchesHeader.svelte

@@ -51,7 +51,6 @@
 		width: 100%;
 		padding: var(--space-12);
 		gap: var(--space-8);
-		border-top: 1px solid var(--clr-theme-container-outline-light);
 		border-bottom: 1px solid transparent;
 		transition: border-bottom var(--transition-fast);
 		position: relative;

gitbutler-ui/src/lib/components/Navigation.svelte

@@ -72,7 +72,7 @@
 	</div>
 {:else}
 	<div
-		class="navigation relative flex w-80 shrink-0 flex-col border-r"
+		class="navigation relative"
 		style:width={$defaultTrayWidthRem ? $defaultTrayWidthRem + 'rem' : null}
 		bind:this={viewport}
 		role="menu"
@@ -89,9 +89,9 @@
 				on:click={toggleNavCollapse}
 			/>
 		</div>
-		<div class="domains">
+		<div class="navigation-top">
 			<ProjectSelector {project} {projectService} />
-			<div class="flex flex-col gap-1">
+			<div class="domains">
 				<BaseBranchCard {project} {baseBranchService} {githubService} {isNavCollapsed} />
 				<DomainButton
 					href={`/${project.id}/board`}
@@ -108,7 +108,8 @@
 		<Resizer
 			{viewport}
 			direction="right"
-			minWidth={320}
+			minWidth={280}
+			defaultLineColor="var(--clr-theme-container-outline-light)"
 			on:width={(e) => {
 				$defaultTrayWidthRem = e.detail / (16 * $userSettings.zoom);
 			}}
@@ -118,7 +119,10 @@
 
 <style lang="postcss">
 	.navigation {
-		border-right: 1px solid var(--clr-theme-container-outline-light);
+		display: flex;
+		flex-direction: column;
+		position: relative;
+		/* border-right: 1px solid var(--clr-theme-container-outline-light); */
 		background: var(--clr-theme-container-light);
 		max-height: 100%;
 		user-select: none;
@@ -127,15 +131,25 @@
 		flex-shrink: 0;
 		height: var(--space-24);
 	}
-	.domains {
+	.navigation-top {
+		display: flex;
+		flex-direction: column;
 		padding-bottom: var(--space-24);
 		padding-left: var(--space-12);
 		padding-right: var(--space-12);
 	}
+	.domains {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-4);
+	}
 	.hide-nav-button {
 		align-self: flex-end;
 		margin-right: var(--space-12);
 	}
+
+	/* COLLAPSED */
+
 	.collapsed-nav-wrapper {
 		padding: var(--space-12);
 		height: 100%;

gitbutler-ui/src/lib/components/Resizer.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { pxToRem } from '$lib/utils/pxToRem';
 	import { createEventDispatcher } from 'svelte';
 
 	// The element that is being resized
@@ -7,9 +8,13 @@
 	// Sets direction of resizing for viewport
 	export let direction: 'left' | 'right' | 'up' | 'down';
 
+	// Sets the color of the line
+	export let defaultLineColor: string = 'none';
+	export let defaultLineThickness: number = 1;
+	export let hoverLineThickness: number = 2;
+
 	// Needed when overflow is hidden
 	export let inside = false;
-
 	export let sticky = false;
 
 	//
@@ -71,10 +76,10 @@
 
 <div
 	on:mousedown={onMouseDown}
-	class="resizer"
 	tabindex="0"
 	role="slider"
 	aria-valuenow={viewport?.clientHeight}
+	class="resizer"
 	class:inside
 	class:dragging
 	class:vertical={orientation == 'vertical'}
@@ -84,68 +89,112 @@
 	class:left={direction == 'left'}
 	class:right={direction == 'right'}
 	class:sticky
-/>
+>
+	<div
+		class="resizer-line"
+		style="--resizer-default-line-color: {defaultLineColor}; --resizer-default-line-thickness: {pxToRem(
+			defaultLineThickness
+		)}; --resizer-hover-line-thickness: {pxToRem(hoverLineThickness)}"
+	/>
+</div>
 
 <style lang="postcss">
 	.resizer {
-		position: absolute;
+		--resizer-frame-thickness: var(--space-4);
-		transition: background-color 0.1s ease-out;
+		--resizer-default-line-thickness: var(--space-2);
-		/* background-color: var(--clr-theme-container-outline-light); */
+		--resizer-hover-line-thickness: var(--space-8);
-		&:hover {
+		--resizer-default-line-color: none;
-			transition-delay: 0.1s;
+
-		}
 		z-index: 40;
+		position: absolute;
+
 		&:hover,
 		&:focus,
 		&.dragging {
-			background-color: var(--clr-theme-container-outline-light);
 			outline: none;
+
+			& .resizer-line {
+				transition-delay: 0.1s;
+				background-color: var(--clr-theme-scale-ntrl-50);
+			}
 		}
 	}
+	.resizer-line {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: var(--resizer-default-line-color);
+		pointer-events: none;
+		transition:
+			background-color 0.1s ease-out,
+			width 0.1s ease-out,
+			height 0.1s ease-out;
+	}
+
 	.horizontal {
 		width: var(--space-4);
 		height: 100%;
 		cursor: col-resize;
 		top: 0;
+
+		& .resizer-line {
+			width: var(--resizer-default-line-thickness);
+		}
+
 		&:hover {
-			width: var(--space-4);
+			& .resizer-line {
+				width: var(--resizer-hover-line-thickness);
+			}
 		}
 	}
 	.vertical {
 		height: var(--space-4);
 		width: 100%;
 		cursor: row-resize;
+		left: 0;
+
+		& .resizer-line {
+			height: var(--resizer-default-line-thickness);
+		}
+
 		&:hover {
-			height: var(--space-4);
+			& .resizer-line {
+				height: var(--resizer-hover-line-thickness);
+			}
 		}
 	}
+
 	.right {
-		right: calc(-1 * var(--space-2));
+		right: 0;
-		&.inside {
+
-			right: 0;
+		& .resizer-line {
+			left: auto;
 		}
 	}
 	.left {
 		left: 0;
-		&:hover {
+
-			width: var(--space-4);
+		& .resizer-line {
+			right: auto;
 		}
 	}
 	.up {
 		top: 0;
-		&:hover {
+
-			height: var(--space-4);
+		& .resizer-line {
+			bottom: auto;
 		}
 	}
 	.down {
-		bottom: calc(-1 * var(--space-2));
+		bottom: 0;
-		&:hover {
+
-			height: var(--space-4);
+		& .resizer-line {
-		}
+			top: auto;
-		&.inside {
-			bottom: 0;
 		}
 	}
+
 	.sticky {
 		position: sticky;
 		top: 0;