Match branch selector trigger to other outline buttons

Author: charlesvien

apps/code/src/renderer/components/ui/combobox/Combobox.css

@@ -381,7 +381,7 @@
 
 .combobox-trigger.size-1 {
   height: var(--space-5);
-  gap: var(--space-1);
+  gap: var(--space-2);
   font-size: var(--font-size-1);
   line-height: var(--line-height-1);
   letter-spacing: var(--letter-spacing-1);
@@ -586,7 +586,7 @@
 }
 
 .combobox-trigger.variant-outline {
-  color: var(--gray-11);
+  color: var(--gray-12);
   background-color: transparent;
   box-shadow: inset 0 0 0 1px var(--gray-a7);
 }
@@ -609,7 +609,7 @@
 }
 
 .combobox-trigger.variant-outline .combobox-trigger-icon {
-  color: var(--gray-11);
+  color: var(--gray-12);
 }
 
 .combobox-trigger:disabled .combobox-trigger-icon {

apps/code/src/renderer/components/ui/combobox/Combobox.tsx

@@ -1,5 +1,7 @@
-import { CaretDown, Check, MagnifyingGlass } from "@phosphor-icons/react";
-import { Popover } from "@radix-ui/themes";
+import { Check, MagnifyingGlass } from "@phosphor-icons/react";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import { Button, Flex, Popover } from "@radix-ui/themes";
+import type { Responsive } from "@radix-ui/themes/dist/esm/props/prop-def.js";
 import { Command as CmdkCommand } from "cmdk";
 import React, {
   createContext,
@@ -150,7 +152,7 @@ function ComboboxRoot({
 interface ComboboxTriggerProps {
   children?: React.ReactNode;
   className?: string;
-  variant?: ComboboxTriggerVariant;
+  variant?: "outline" | "ghost" | "surface" | "soft" | "classic";
   color?: string;
   placeholder?: string;
   style?: React.CSSProperties;
@@ -159,33 +161,33 @@ interface ComboboxTriggerProps {
 function ComboboxTrigger({
   children,
   className = "",
-  variant = "surface",
+  variant = "outline",
   placeholder = "Select...",
   style,
 }: ComboboxTriggerProps) {
   const { size, value, open, disabled, getItemLabel } = useComboboxContext();
 
   const displayValue =
     children ?? (getItemLabel(value) || value || placeholder);
-  const hasPlaceholder = !children && !value;
 
   return (
     <Popover.Trigger>
-      <button
-        type="button"
-        className={`combobox-trigger size-${size} variant-${variant} ${className}`}
-        data-state={open ? "open" : "closed"}
-        data-placeholder={hasPlaceholder ? "" : undefined}
+      <Button
+        color="gray"
+        variant={variant}
+        size={size as Responsive<"1" | "2" | "3">}
         disabled={disabled}
+        className={className}
+        data-state={open ? "open" : "closed"}
         style={style}
       >
-        <span className="combobox-trigger-inner">{displayValue}</span>
-        {!disabled && (
-          <span className="combobox-trigger-icon">
-            <CaretDown weight="bold" />
-          </span>
-        )}
-      </button>
+        <Flex justify="between" align="center" gap="2">
+          <Flex align="center" gap="2" style={{ minWidth: 0 }}>
+            {displayValue}
+          </Flex>
+          {!disabled && <ChevronDownIcon style={{ flexShrink: 0 }} />}
+        </Flex>
+      </Button>
     </Popover.Trigger>
   );
 }

apps/code/src/renderer/features/git-interaction/components/BranchSelector.tsx

@@ -122,7 +122,7 @@ export function BranchSelector({
     effectiveLoading || (isCloudMode && open && cloudBranchesFetchingMore);
 
   const triggerContent = (
-    <Flex align="center" gap="1" style={{ minWidth: 0 }}>
+    <Flex align="center" gap="2" style={{ minWidth: 0 }}>
       {showSpinner ? (
         <Spinner size="1" />
       ) : (