Titlebar cleanup (#3675)

Nate Butler created 2 years ago

[[PR Description]]

Clean up titlebar design nits

- Remove red borders
- Update menu button styles
- Adjust padding
- Improve tooltips with keybindings

Release Notes:

- N/A

Change summary

crates/collab_ui2/src/collab_titlebar_item.rs | 22 +++++++++++---------
crates/project_panel2/src/project_panel.rs    |  6 +++-
crates/ui2/src/components/tooltip.rs          |  4 +-
3 files changed, 18 insertions(+), 14 deletions(-)

Detailed changes

crates/collab_ui2/src/collab_titlebar_item.rs

@@ -74,12 +74,16 @@ impl Render for CollabTitlebarItem {
             // Set a non-scaling min-height here to ensure the titlebar is
             // always at least the height of the traffic lights.
             .min_h(px(32.))
-            .when(
-                !matches!(cx.window_bounds(), WindowBounds::Fullscreen),
-                // Use pixels here instead of a rem-based size because the macOS traffic
-                // lights are a static size, and don't scale with the rest of the UI.
-                |s| s.pl(px(68.)),
-            )
+            .pl_2()
+            .map(|this| {
+                if matches!(cx.window_bounds(), WindowBounds::Fullscreen) {
+                    this.pl_2()
+                } else {
+                    // Use pixels here instead of a rem-based size because the macOS traffic
+                    // lights are a static size, and don't scale with the rest of the UI.
+                    this.pl(px(72.))
+                }
+            })
             .bg(cx.theme().colors().title_bar_background)
             .on_click(|event, cx| {
                 if event.up.click_count == 2 {
@@ -165,6 +169,7 @@ impl Render for CollabTitlebarItem {
             .child(
                 h_stack()
                     .gap_1()
+                    .pr_1()
                     .when_some(room, |this, room| {
                         let room = room.read(cx);
                         let is_shared = self.project.read(cx).is_shared();
@@ -325,8 +330,6 @@ impl CollabTitlebarItem {
         let name = util::truncate_and_trailoff(name, MAX_PROJECT_NAME_LENGTH);
 
         div()
-            .border()
-            .border_color(gpui::red())
             .child(
                 Button::new("project_name_trigger", name)
                     .style(ButtonStyle::Subtle)
@@ -365,10 +368,9 @@ impl CollabTitlebarItem {
 
         Some(
             div()
-                .border()
-                .border_color(gpui::red())
                 .child(
                     Button::new("project_branch_trigger", branch_name)
+                        .color(Color::Muted)
                         .style(ButtonStyle::Subtle)
                         .tooltip(move |cx| {
                             Tooltip::with_meta(

crates/project_panel2/src/project_panel.rs

@@ -1389,7 +1389,9 @@ impl ProjectPanel {
                     entry_id: *entry_id,
                 })
             })
-            .drag_over::<ProjectEntryId>(|style| style.bg(cx.theme().colors().ghost_element_hover))
+            .drag_over::<ProjectEntryId>(|style| {
+                style.bg(cx.theme().colors().drop_target_background)
+            })
             .on_drop(cx.listener(move |this, dragged_id: &ProjectEntryId, cx| {
                 this.move_entry(*dragged_id, entry_id, kind.is_file(), cx);
             }))
@@ -1399,7 +1401,7 @@ impl ProjectPanel {
                     .indent_step_size(px(settings.indent_size))
                     .selected(is_selected)
                     .child(if let Some(icon) = &icon {
-                        div().child(IconElement::from_path(icon.to_string()))
+                        div().child(IconElement::from_path(icon.to_string()).color(Color::Muted))
                     } else {
                         div()
                     })

crates/ui2/src/components/tooltip.rs

@@ -78,13 +78,13 @@ impl Render for Tooltip {
                 v_stack()
                     .elevation_2(cx)
                     .font(ui_font)
-                    .text_ui_sm()
+                    .text_ui()
                     .text_color(cx.theme().colors().text)
                     .py_1()
                     .px_2()
                     .child(
                         h_stack()
-                            .gap_2()
+                            .gap_4()
                             .child(self.title.clone())
                             .when_some(self.key_binding.clone(), |this, key_binding| {
                                 this.justify_between().child(key_binding)