UI fixes 26 (#7894)

* Refactor commit header style prop

* typo fix

* refactor resizer

* rename things semantically

Update StackTabs.svelte

Update StackTabs.svelte

* fix: new branch empty state height

* fix: remove extra top border

* fix: remove debugging string

* fix: commit goes here

- overflow hidden
- last item too narrow

* plus button: remove unused props

* more contrast to the new stack button

Author: PavelLaptev

apps/desktop/src/components/v3/BranchCard.svelte

@@ -177,7 +177,6 @@
 						{#if isCommitting}
 							<!-- Only commits to the base can be `last`, see next `CommitGoesHere`. -->
 							<CommitGoesHere
-								{commitId}
 								{selected}
 								{first}
 								last={false}
@@ -228,7 +227,6 @@
 						</Dropzone>
 						{#if isCommitting && last && lastBranch}
 							<CommitGoesHere
-								{commitId}
 								{first}
 								{last}
 								selected={selectedCommitId === baseSha}
@@ -287,7 +285,6 @@
 		border: 1px solid var(--clr-border-2);
 		border-radius: var(--radius-ml);
 		background: var(--clr-bg-1);
-		overflow: hidden;
 	}
 
 	.branch-header__details {

apps/desktop/src/components/v3/BranchHeader.svelte

@@ -134,6 +134,7 @@
 		border-top-right-radius: var(--radius-ml);
 		border-top-left-radius: var(--radius-ml);
 		border-bottom: 1px solid var(--clr-border-2);
+		overflow: hidden;
 
 		&:before {
 			content: '';

apps/desktop/src/components/v3/BranchView.svelte

@@ -130,10 +130,10 @@
 
 	/* EMPTY STATE */
 	.branch-view__empty-state {
+		flex: 1;
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
-		height: 100%;
 		padding: 30px;
 		max-width: 540px;
 		margin: 0 auto;

apps/desktop/src/components/v3/CommitGoesHere.svelte

@@ -2,14 +2,13 @@
 	import Badge from '@gitbutler/ui/Badge.svelte';
 
 	type Props = {
-		commitId: string;
 		first: boolean;
 		last: boolean;
 		selected: boolean;
 		onclick: () => void;
 	};
 
-	const { commitId, first, last, selected, onclick }: Props = $props();
+	const { first, last, selected, onclick }: Props = $props();
 </script>
 
 {#snippet indicator(args?: { last: boolean; first: boolean })}
@@ -18,15 +17,15 @@
 			<div class="pin__line"></div>
 			<div class="pin__circle"></div>
 		</div>
-		<div>
-			<Badge size="tag" style="pop">Your commit goes here {last}</Badge>
-		</div>
+		<Badge size="tag" style="pop">Your commit goes here</Badge>
 	</div>
 {/snippet}
-{#snippet commitHere(args: { commitId: string; last?: boolean })}
-	<button class="commit-here" type="button" class:last={args.last} {onclick}>
+{#snippet commitHere(args: { last?: boolean })}
+	{@const last = args?.last}
+	<button class="commit-here" class:commit-here_last={last} type="button" {onclick}>
 		<div class="commit-here__circle"></div>
 		<div class="commit-here__line"></div>
+
 		<div class="commit-here__label text-11 text-semibold">Commit here</div>
 	</button>
 {/snippet}
@@ -35,7 +34,7 @@
 	{@render indicator({ first, last })}
 {/if}
 {#if !selected}
-	{@render commitHere({ commitId })}
+	{@render commitHere({ last })}
 {/if}
 
 <style lang="postcss">
@@ -46,9 +45,6 @@
 		align-items: center;
 		background-color: var(--clr-bg-1);
 		border-bottom: 1px solid var(--clr-border-2);
-		&.first {
-			border-top: 1px solid var(--clr-border-2);
-		}
 		&.last {
 			border-top: 1px solid var(--clr-border-2);
 			border-bottom: none;
@@ -86,6 +82,7 @@
 		align-items: center;
 		opacity: 0;
 		z-index: var(--z-lifted);
+		transition: height var(--transition-fast);
 
 		&:hover {
 			opacity: 1;
@@ -94,6 +91,11 @@
 				opacity: 1;
 				transform: translateY(-50%) translateX(0) scale(1);
 			}
+
+			&.commit-here_last {
+				height: 30px;
+				margin-bottom: 0;
+			}
 		}
 	}
 	.commit-here__circle {
@@ -126,4 +128,8 @@
 			opacity var(--transition-fast),
 			transform var(--transition-medium);
 	}
+
+	/* .commit-here_last {
+		margin-bottom: 0;
+	} */
 </style>

apps/desktop/src/components/v3/stackTabs/StackTabNew.svelte

@@ -84,22 +84,24 @@
 		}
 	}
 
-	let overflowed = $state(false);
-
 	// TODO: it would be nice to remember the last selected option for the next time the modal is opened
 </script>
 
 <button
 	aria-label="new stack"
 	type="button"
 	class="new-stack-btn"
-	class:overflow={overflowed}
 	onclick={() => createRefModal?.show()}
 	bind:this={el}
 	onkeydown={handleArrowNavigation}
 >
 	<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-		<path d="M0 10H20M10 0L10 20" stroke="currentColor" stroke-width="1.5" />
+		<path
+			d="M0 10H20M10 0L10 20"
+			stroke="currentColor"
+			opacity="var(--plus-icon-opacity)"
+			stroke-width="1.5"
+		/>
 	</svg>
 </button>
 
@@ -198,25 +200,25 @@
 		height: 100%;
 		padding: 0 15px;
 		background: var(--clr-stack-tab-inactive);
-		color: var(--clr-text-3);
+		color: var(--clr-text-2);
+		--plus-icon-opacity: 0.8;
 		transition:
 			color var(--transition-fast),
 			background var(--transition-fast);
 
+		&:hover,
+		&:focus {
+			--plus-icon-opacity: 1;
+		}
+
 		&:hover {
-			color: var(--clr-text-2);
 			background: var(--clr-stack-tab-inactive-hover);
 		}
 
 		&:focus {
 			outline: none;
-			color: var(--clr-text-2);
 			background: var(--clr-stack-tab-active);
 		}
-
-		&.overflow {
-			background-color: red;
-		}
 	}
 
 	/* MODAL WINDOW */