Merge pull request #2579 from gitbutlerapp/refactor-tag-component-and-status-tag

Refactor Tag component and status-tag

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

@@ -130,46 +130,44 @@
 			<div class="header__remote-branch">
 				{#if !branch.upstream}
 					{#if !branch.active}
-						<div
+						<Tag
-							class="status-tag text-base-11 text-semibold unapplied"
+							icon="virtual-branch-small"
-							use:tooltip={'These changes are stashed away from your working directory.'}
+							color="light"
+							help="These changes are stashed away from your working directory."
+							reversedDirection>unapplied</Tag
 						>
-							<Icon name="removed-branch-small" /> unapplied
-						</div>
 					{:else if hasIntegratedCommits}
-						<div
+						<Tag
-							class="status-tag text-base-11 text-semibold integrated"
+							icon="removed-branch-small"
-							use:tooltip={'These changes have been integrated upstream, update your workspace to make this lane disappear.'}
+							color="success"
+							help="These changes have been integrated upstream, update your workspace to make this lane disappear."
+							reversedDirection>integrated</Tag
 						>
-							<Icon name="removed-branch-small" /> integrated
-						</div>
 					{:else}
-						<div
+						<Tag
-							class="status-tag text-base-11 text-semibold pending"
+							icon="virtual-branch-small"
-							use:tooltip={'These changes are in your working directory.'}
+							color="light"
+							help="These changes are in your working directory."
+							reversedDirection>virtual</Tag
 						>
-							<Icon name="virtual-branch-small" /> virtual
-						</div>
 					{/if}
 					{#if !isUnapplied}
-						<div
+						<Tag
-							class="pending-name"
+							disabled
-							use:tooltip={'Branch name that will be used when pushing. You can change it from the lane menu.'}
+							help="Branch name that will be used when pushing. You can change it from the lane menu."
+						>
+							origin/{branch.upstreamName
+								? branch.upstreamName
+								: normalizeBranchName(branch.name)}</Tag
 						>
-							<span class="text-base-11 text-semibold">
-								origin/{branch.upstreamName
-									? branch.upstreamName
-									: normalizeBranchName(branch.name)}
-							</span>
-						</div>
 					{/if}
 				{:else}
-					<div
+					<Tag
-						class="status-tag text-base-11 text-semibold remote"
+						color="dark"
-						use:tooltip={'At least some of your changes have been pushed'}
+						icon="remote-branch-small"
+						help="At least some of your changes have been pushed"
+						reversedDirection>remote</Tag
 					>
-						<Icon name="remote-branch-small" /> remote
-					</div>
 					<Tag
 						icon="open-link"
 						color="ghost"
@@ -462,56 +460,6 @@
 		align-items: center;
 	}
 
-	.status-tag {
-		cursor: default;
-		display: flex;
-		align-items: center;
-		gap: var(--space-2);
-		padding: var(--space-2) var(--space-6) var(--space-2) var(--space-4);
-		border-radius: var(--radius-m);
-	}
-
-	.pending {
-		color: var(--clr-theme-scale-pop-30);
-		background: var(--clr-theme-scale-pop-80);
-	}
-
-	.pending-name {
-		background: color-mix(in srgb, var(--clr-theme-scale-ntrl-50) 10%, transparent);
-		border-radius: var(--radius-m);
-		line-height: 120%;
-		height: var(--space-20);
-		display: flex;
-		align-items: center;
-		padding: 0 var(--space-6);
-		overflow: hidden;
-
-		& span {
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-	}
-
-	.pending {
-		color: var(--clr-theme-scale-ntrl-30);
-		background: color-mix(in srgb, var(--clr-theme-scale-ntrl-50) 20%, transparent);
-	}
-
-	.integrated {
-		color: var(--clr-theme-succ-on-element);
-		background: var(--clr-theme-succ-element);
-	}
-
-	.remote {
-		color: var(--clr-theme-scale-ntrl-100);
-		background: var(--clr-theme-scale-ntrl-40);
-	}
-
-	.unapplied {
-		color: var(--clr-theme-scale-ntrl-30);
-		background: var(--clr-theme-scale-ntrl-80);
-	}
-
 	.pr-status {
 		cursor: default;
 	}

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

@@ -77,7 +77,7 @@
 	}
 	.clickable {
 		cursor: default;
-		&:hover {
+		&:not(.not-button):hover {
 			background: var(--clr-theme-container-sub);
 		}
 	}
@@ -86,7 +86,7 @@
 
 	.ghost {
 		color: var(--clr-theme-scale-ntrl-40);
-		&:hover {
+		&:not(.not-button):hover {
 			background: color-mix(in srgb, var(--clr-core-ntrl-50), transparent 85%);
 		}
 		&.tag-border {
@@ -97,7 +97,7 @@
 	.light {
 		color: var(--clr-theme-scale-ntrl-40);
 		background: color-mix(in srgb, var(--clr-core-ntrl-50), transparent 85%);
-		&:hover {
+		&:not(.not-button):hover {
 			background: color-mix(in srgb, var(--clr-core-ntrl-50), transparent 75%);
 		}
 		&.tag-border {
@@ -108,7 +108,7 @@
 	.dark {
 		color: var(--clr-theme-scale-ntrl-100);
 		background: var(--clr-theme-scale-ntrl-40);
-		&:hover {
+		&:not(.not-button):hover {
 			background: var(--clr-theme-scale-ntrl-30);
 		}
 	}
@@ -116,7 +116,7 @@
 	.success {
 		color: var(--clr-theme-scale-succ-20);
 		background: color-mix(in srgb, var(--clr-core-succ-50), transparent 80%);
-		&:hover {
+		&:not(.not-button):hover {
 			background: color-mix(in srgb, var(--clr-core-succ-50), transparent 70%);
 		}
 		&.tag-border {
@@ -125,7 +125,7 @@
 		&.filled {
 			color: var(--clr-theme-succ-on-element);
 			background: var(--clr-theme-succ-element);
-			&:hover {
+			&:not(.not-button):hover {
 				background: var(--clr-theme-succ-element-dim);
 			}
 		}
@@ -134,7 +134,7 @@
 	.error {
 		color: var(--clr-theme-scale-err-20);
 		background: color-mix(in srgb, var(--clr-core-err-50), transparent 80%);
-		&:hover {
+		&:not(.not-button):hover {
 			background: color-mix(in srgb, var(--clr-core-err-50), transparent 70%);
 		}
 		&.tag-border {
@@ -143,7 +143,7 @@
 		&.filled {
 			color: var(--clr-theme-err-on-element);
 			background: var(--clr-theme-err-element);
-			&:hover {
+			&:not(.not-button):hover {
 				background: var(--clr-theme-err-element-dim);
 			}
 		}
@@ -152,7 +152,7 @@
 	.warning {
 		color: var(--clr-theme-scale-warn-20);
 		background: color-mix(in srgb, var(--clr-core-warn-50), transparent 80%);
-		&:hover {
+		&:not(.not-button):hover {
 			background: color-mix(in srgb, var(--clr-core-warn-50), transparent 70%);
 		}
 		&.tag-border {
@@ -161,7 +161,7 @@
 		&.filled {
 			color: var(--clr-theme-warn-on-element);
 			background: var(--clr-theme-warn-element);
-			&:hover {
+			&:not(.not-button):hover {
 				background: var(--clr-theme-warn-element-dim);
 			}
 		}
@@ -170,7 +170,7 @@
 	.purple {
 		color: var(--clr-theme-scale-purple-20);
 		background: color-mix(in srgb, var(--clr-core-purple-50), transparent 80%);
-		&:hover {
+		&:not(.not-button):hover {
 			background: color-mix(in srgb, var(--clr-core-purple-50), transparent 70%);
 		}
 		&.tag-border {
@@ -179,7 +179,7 @@
 		&.filled {
 			color: var(--clr-theme-purple-on-element);
 			background: var(--clr-theme-purple-element);
-			&:hover {
+			&:not(.not-button):hover {
 				background: var(--clr-theme-purple-element-dim);
 			}
 		}
@@ -188,7 +188,7 @@
 	.pop {
 		color: var(--clr-theme-scale-pop-20);
 		background: color-mix(in srgb, var(--clr-core-pop-50), transparent 80%);
-		&:hover {
+		&:not(.not-button):hover {
 			background: color-mix(in srgb, var(--clr-core-pop-50), transparent 70%);
 		}
 		&.tag-border {
@@ -197,7 +197,7 @@
 		&.filled {
 			color: var(--clr-theme-pop-on-element);
 			background: var(--clr-theme-pop-element);
-			&:hover {
+			&:not(.not-button):hover {
 				background: var(--clr-theme-pop-element-dim);
 			}
 		}
@@ -206,11 +206,10 @@
 	/* modifiers */
 
 	.not-button {
-		pointer-events: none;
+		user-select: none;
 	}
 
 	.disabled {
-		pointer-events: none;
 		background-color: color-mix(in srgb, var(--clr-theme-scale-ntrl-50) 10%, transparent);
 		color: var(--clr-core-ntrl-50);
 	}