Tweak git blame tooltip design (#17517)

Danilo Leal created 1 year ago

This PR adds some tiny design tweaks to the git blame tooltip. I guess
the most "notable", so to speak, thing is the addition of a divider
between the pull request and commit hash buttons. I was motivated to do
that because, at first, I was unsure what the copy button would copy
(the PR number or the hash?). From the position only, you eventually
figure out, but hopefully, the divider will help bumping this affordance
a bit more. I experimented with adding a labeled "Copy commit hash"
button, but that'd clutter the design too much. Additionally, the top
border on the footer should also slightly help indicating the commit
message area is scrollable.

| Before | After |
|--------|--------|
| <img width="518" alt="Screenshot 2024-09-06 at 4 54 41 PM"
src="https://github.com/user-attachments/assets/68d8335d-946d-4149-b241-6892c0b9577e">
| <img width="513" alt="Screenshot 2024-09-06 at 4 55 26 PM"
src="https://github.com/user-attachments/assets/1dc1b47c-1b7f-4e94-a2c1-7e54b9940689">
|

---

Release Notes:

- N/A

Change summary

crates/editor/src/blame_entry_tooltip.rs | 17 ++++++++++++-----
1 file changed, 12 insertions(+), 5 deletions(-)

Detailed changes

crates/editor/src/blame_entry_tooltip.rs

@@ -9,7 +9,7 @@ use settings::Settings;
 use std::hash::Hash;
 use theme::ThemeSettings;
 use time::UtcOffset;
-use ui::{prelude::*, tooltip_container, Avatar};
+use ui::{prelude::*, tooltip_container, Avatar, Divider, IconButtonShape};
 use workspace::Workspace;
 
 use crate::git::blame::{CommitDetails, GitRemote};
@@ -160,6 +160,7 @@ impl Render for BlameEntryTooltip {
                         .gap_4()
                         .child(
                             h_flex()
+                                .pb_1p5()
                                 .gap_x_2()
                                 .overflow_x_hidden()
                                 .flex_wrap()
@@ -173,7 +174,7 @@ impl Render for BlameEntryTooltip {
                                     )
                                 })
                                 .border_b_1()
-                                .border_color(cx.theme().colors().border),
+                                .border_color(cx.theme().colors().border_variant),
                         )
                         .child(
                             div()
@@ -189,10 +190,13 @@ impl Render for BlameEntryTooltip {
                                 .text_color(cx.theme().colors().text_muted)
                                 .w_full()
                                 .justify_between()
+                                .pt_1p5()
+                                .border_t_1()
+                                .border_color(cx.theme().colors().border_variant)
                                 .child(absolute_timestamp)
                                 .child(
                                     h_flex()
-                                        .gap_2()
+                                        .gap_1p5()
                                         .when_some(pull_request, |this, pr| {
                                             this.child(
                                                 Button::new(
@@ -203,19 +207,20 @@ impl Render for BlameEntryTooltip {
                                                 .icon(IconName::PullRequest)
                                                 .icon_color(Color::Muted)
                                                 .icon_position(IconPosition::Start)
-                                                .style(ButtonStyle::Transparent)
+                                                .style(ButtonStyle::Subtle)
                                                 .on_click(move |_, cx| {
                                                     cx.stop_propagation();
                                                     cx.open_url(pr.url.as_str())
                                                 }),
                                             )
                                         })
+                                        .child(Divider::vertical())
                                         .child(
                                             Button::new(
                                                 "commit-sha-button",
                                                 short_commit_id.clone(),
                                             )
-                                            .style(ButtonStyle::Transparent)
+                                            .style(ButtonStyle::Subtle)
                                             .color(Color::Muted)
                                             .icon(IconName::FileGit)
                                             .icon_color(Color::Muted)
@@ -239,6 +244,8 @@ impl Render for BlameEntryTooltip {
                                         )
                                         .child(
                                             IconButton::new("copy-sha-button", IconName::Copy)
+                                                .shape(IconButtonShape::Square)
+                                                .icon_size(IconSize::Small)
                                                 .icon_color(Color::Muted)
                                                 .on_click(move |_, cx| {
                                                     cx.stop_propagation();