From 0f6631019204096702396ce2773ab444807978b3 Mon Sep 17 00:00:00 2001
From: Bartosz Kaszubowski <gosimek@gmail.com>
Date: Thu, 25 Sep 2025 02:39:29 +0200
Subject: [PATCH] git_ui: Tweak appearance of repo and branch separator
 (#38447)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Why

In Git Panel, it felt to me that repo and branch separator can be
slightly demphasized (since it is not-interactable) and separated a bit
more from the repo and branch popover triggers.

# How

Use `icon_muted` color for the separator (happy to know if this is an
abuse of the UI styleguide 😄), add one pixel horizontal spacing around
the `/` character.

Release Notes:

- Improved appearance of repo and branch separator in Git Commit Panel

# Test plan

I have tested the change locally and compared the UI before and after to
make sure it feels right.

### Before

<img width="466" height="196" alt="Screenshot 2025-09-18 at 20 25 46"
src="https://github.com/user-attachments/assets/7bfcd1a4-8d16-4e75-8660-9cbfa3952848"
/>

### After

<img width="466" height="196" alt="Screenshot 2025-09-18 at 20 25 12"
src="https://github.com/user-attachments/assets/100d3599-ecc6-473f-b270-a71005b41494"
/>

---------

Co-authored-by: Danilo Leal <daniloleal09@gmail.com>
---
 crates/git_ui/src/git_panel.rs                | 25 ++++++++-----------
 .../ui/src/components/button/button_like.rs   |  2 +-
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/crates/git_ui/src/git_panel.rs b/crates/git_ui/src/git_panel.rs
index e66da36576429e8a1d768681e35015db034dff39..6ab2b24e2ab4be9d7037d9b5f6d8a446048125d2 100644
--- a/crates/git_ui/src/git_panel.rs
+++ b/crates/git_ui/src/git_panel.rs
@@ -4550,7 +4550,6 @@ impl RenderOnce for PanelRepoFooter {
         };
 
         let repo_selector_trigger = Button::new("repo-selector", truncated_repo_name)
-            .style(ButtonStyle::Transparent)
             .size(ButtonSize::None)
             .label_size(LabelSize::Small)
             .color(Color::Muted);
@@ -4571,7 +4570,6 @@ impl RenderOnce for PanelRepoFooter {
             .into_any_element();
 
         let branch_selector_button = Button::new("branch-selector", truncated_branch_name)
-            .style(ButtonStyle::Transparent)
             .size(ButtonSize::None)
             .label_size(LabelSize::Small)
             .truncate(true)
@@ -4592,34 +4590,31 @@ impl RenderOnce for PanelRepoFooter {
             });
 
         h_flex()
+            .h(px(36.))
             .w_full()
             .px_2()
-            .h(px(36.))
-            .items_center()
             .justify_between()
             .gap_1()
             .child(
                 h_flex()
                     .flex_1()
                     .overflow_hidden()
-                    .items_center()
+                    .gap_px()
                     .child(
-                        div().child(
-                            Icon::new(IconName::GitBranchAlt)
-                                .size(IconSize::Small)
-                                .color(if single_repo {
-                                    Color::Disabled
-                                } else {
-                                    Color::Muted
-                                }),
-                        ),
+                        Icon::new(IconName::GitBranchAlt)
+                            .size(IconSize::Small)
+                            .color(if single_repo {
+                                Color::Disabled
+                            } else {
+                                Color::Muted
+                            }),
                     )
                     .child(repo_selector)
                     .when(show_separator, |this| {
                         this.child(
                             div()
-                                .text_color(cx.theme().colors().text_muted)
                                 .text_sm()
+                                .text_color(cx.theme().colors().icon_muted.opacity(0.5))
                                 .child("/"),
                         )
                     })
diff --git a/crates/ui/src/components/button/button_like.rs b/crates/ui/src/components/button/button_like.rs
index d38b919bffe3df2e918266d7d76dbb1e4f02bf97..fec5da57f3dd68295ca592a27777adfaa5406a34 100644
--- a/crates/ui/src/components/button/button_like.rs
+++ b/crates/ui/src/components/button/button_like.rs
@@ -596,7 +596,7 @@ impl RenderOnce for ButtonLike {
                 ButtonSize::Default | ButtonSize::Compact => {
                     this.px(DynamicSpacing::Base04.rems(cx))
                 }
-                ButtonSize::None => this,
+                ButtonSize::None => this.px_px(),
             })
             .border_color(style.enabled(self.layer, cx).border_color)
             .bg(style.enabled(self.layer, cx).background)