git_ui: Tweak appearance of repo and branch separator (#38447)

Bartosz Kaszubowski and Danilo Leal created 1 month ago

# 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 <[e-mail]>

Change summary

crates/git_ui/src/git_panel.rs                 | 25 ++++++++------------
crates/ui/src/components/button/button_like.rs |  2 
2 files changed, 11 insertions(+), 16 deletions(-)

Detailed changes

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("/"),
                         )
                     })

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)