Merge pull request #13118 from gitbutlerapp/update-icons

fix(ui): normalize button sizing and update icons

Author: PavelLaptev

apps/desktop/src/components/branch/BranchHeaderIcon.svelte

@@ -13,7 +13,7 @@
 </script>
 
 <div class="stack__status--icon" style:--bg-color={color} class:small class:large>
-	<Icon name={iconName} size={15} />
+	<Icon name={iconName} size={14} />
 </div>
 
 <style>

apps/desktop/src/components/commit/CommitListItem.svelte

@@ -314,7 +314,7 @@
 		position: relative;
 		align-items: center;
 		width: 100%;
-		padding-right: 9px;
+		padding-right: 11px;
 		overflow: hidden;
 		gap: 4px;
 

apps/desktop/src/components/views/AppSidebar.svelte

@@ -398,6 +398,7 @@
 	:global(.sidebar .btn-square) {
 		aspect-ratio: 1 / 1;
 		height: unset;
+		padding: 0;
 		border-radius: var(--radius-ml);
 		/* codegen icon */
 		--clr-codegen-star: currentColor;

packages/ui/src/lib/components/Button.svelte

@@ -129,6 +129,7 @@
 	]);
 
 	const displayHotkey = $derived(hotkey ? formatHotkeyForPlatform(hotkey) : undefined);
+	const iconSize = $derived(size === "tag" ? 14 : 16);
 	let tooltipInstance = $state<Tooltip>();
 
 	function onmousedown(e: MouseEvent) {
@@ -196,13 +197,13 @@
 		{#if icon || loading || isDropdown}
 			<div class={["btn-icon", iconClass]}>
 				{#if loading}
-					<Icon name="spinner" />
+					<Icon name="spinner" size={iconSize} />
 				{:else if isDropdown}
 					<div class="btn-dropdown-chevron" class:open={dropdownOpen}>
-						<Icon name="chevron-down" />
+						<Icon name="chevron-down" size={iconSize} />
 					</div>
 				{:else if icon}
-					<Icon name={icon} />
+					<Icon name={icon} size={iconSize} />
 				{/if}
 			</div>
 		{/if}
@@ -229,17 +230,38 @@
 		background: var(--btn-bg);
 		color: var(--label-clr);
 		cursor: pointer;
-
 		transition:
 			background var(--transition-fast),
 			opacity var(--transition-fast),
 			color var(--transition-fast),
 			max-width var(--transition-medium);
 		user-select: none;
 
+		/* ---- Sizes ---- */
+		&.tag-size {
+			--btn-size: var(--size-tag);
+			--btn-padding: 2px 6px;
+			--btn-gap: 4px;
+		}
+
+		&.button-size {
+			--btn-size: var(--size-button);
+			--btn-padding: 4px 8px;
+			--btn-gap: 6px;
+		}
+
+		&[class*="-size"] {
+			height: var(--btn-size);
+			padding: var(--btn-padding);
+			gap: var(--btn-gap);
+		}
+
+		&.fixed-width[class*="-size"] {
+			width: var(--btn-size);
+		}
+
 		/* ---- Child elements ---- */
 		.btn-label {
-			padding: 0 3px;
 			overflow: hidden;
 			white-space: nowrap;
 			pointer-events: none;
@@ -382,29 +404,6 @@
 			outline-offset: -2px;
 		}
 
-		/* ---- Sizes ---- */
-		&.tag-size {
-			--btn-size: var(--size-tag);
-			--btn-padding: 2px 4px;
-			--btn-gap: 0;
-		}
-
-		&.button-size {
-			--btn-size: var(--size-button);
-			--btn-padding: 4px 6px;
-			--btn-gap: 2px;
-		}
-
-		&[class*="-size"] {
-			height: var(--btn-size);
-			padding: var(--btn-padding);
-			gap: var(--btn-gap);
-		}
-
-		&.fixed-width[class*="-size"] {
-			width: var(--btn-size);
-		}
-
 		/* ---- Dropdown split-button ---- */
 		&.is-dropdown:first-of-type {
 			flex: 1;

packages/ui/src/lib/components/KebabButton.svelte

@@ -109,7 +109,7 @@
 		data-testid={testId}
 		aria-label="Open context menu"
 	>
-		<Icon name={icon} />
+		<Icon name={icon} size={14} />
 	</button>
 {:else}
 	<Button

packages/ui/src/lib/components/segmentControl/Segment.svelte

@@ -20,6 +20,7 @@
 
 	const context = getContext<SegmentContext>("SegmentControl");
 	const selectedSegmentId = context.selectedSegmentId;
+	const iconSize = $derived(context.size === "small" ? 14 : 16);
 
 	let elRef = $state<HTMLButtonElement>();
 	let isFocused = $state(false);
@@ -67,7 +68,7 @@
 		{/if}
 		{#if icon}
 			<span class="segment-control-item__icon" aria-hidden="true">
-				<Icon name={icon} />
+				<Icon name={icon} size={iconSize} />
 			</span>
 		{/if}
 	</button>

packages/ui/src/lib/components/segmentControl/SegmentControl.svelte

@@ -34,6 +34,9 @@
 
 	const context: SegmentContext = {
 		selectedSegmentId,
+		get size() {
+			return size;
+		},
 		registerSegment: (id: string) => {
 			if (!registeredSegments.includes(id)) {
 				registeredSegments.push(id);

packages/ui/src/lib/components/segmentControl/segmentTypes.ts

@@ -2,6 +2,7 @@ import type { Writable } from "svelte/store";
 
 export interface SegmentContext {
 	selectedSegmentId: Writable<string | undefined>;
+	size: "default" | "small";
 	registerSegment(id: string): void;
 	selectSegment(id: string): void;
 }