settings ui: Add more UX improvements (#39700)

Release Notes:

- N/A

crates/ui/src/components/button/button.rs

@@ -474,7 +474,6 @@ impl RenderOnce for Button {
     }
 }
 
-// View this component preview using `workspace: open component-preview`
 impl Component for Button {
     fn scope() -> ComponentScope {
         ComponentScope::Input

crates/ui/src/components/button/button_like.rs

@@ -625,7 +625,13 @@ impl RenderOnce for ButtonLike {
                     |refinement: StyleRefinement| refinement.bg(hovered_style.background);
                 this.cursor(self.cursor_style)
                     .hover(focus_color)
-                    .focus(focus_color)
+                    .map(|this| {
+                        if matches!(self.style, ButtonStyle::Outlined) {
+                            this.focus(|s| s.border_color(cx.theme().colors().border_focused))
+                        } else {
+                            this.focus(focus_color)
+                        }
+                    })
                     .active(|active| active.bg(style.active(cx).background))
             })
             .when_some(

crates/ui/src/components/keybinding_hint.rs

@@ -1,5 +1,5 @@
 use crate::KeyBinding;
-use crate::{h_flex, prelude::*};
+use crate::prelude::*;
 use gpui::{AnyElement, App, BoxShadow, FontStyle, Hsla, IntoElement, Window, point};
 use theme::Appearance;
 
@@ -206,20 +206,23 @@ impl KeybindingHint {
 
 impl RenderOnce for KeybindingHint {
     fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
-        let colors = cx.theme().colors().clone();
+        let colors = cx.theme().colors();
         let is_light = cx.theme().appearance() == Appearance::Light;
 
         let border_color =
             self.background_color
                 .blend(colors.text.alpha(if is_light { 0.08 } else { 0.16 }));
-        let bg_color =
-            self.background_color
-                .blend(colors.text.alpha(if is_light { 0.06 } else { 0.12 }));
+
+        let bg_color = self
+            .background_color
+            .blend(colors.text_accent.alpha(if is_light { 0.05 } else { 0.1 }));
+
         let shadow_color = colors.text.alpha(if is_light { 0.04 } else { 0.08 });
 
         let size = self
             .size
             .unwrap_or(TextSize::Small.rems(cx).to_pixels(window.rem_size()));
+
         let kb_size = size - px(2.0);
 
         let mut base = h_flex();
@@ -228,15 +231,13 @@ impl RenderOnce for KeybindingHint {
             .get_or_insert_with(Default::default)
             .font_style = Some(FontStyle::Italic);
 
-        base.items_center()
-            .gap_0p5()
+        base.gap_1()
             .font_buffer(cx)
             .text_size(size)
             .text_color(colors.text_disabled)
             .children(self.prefix)
             .child(
                 h_flex()
-                    .items_center()
                     .rounded_sm()
                     .px_0p5()
                     .mr_0p5()

crates/ui/src/components/tree_view_item.rs

@@ -152,6 +152,7 @@ impl RenderOnce for TreeViewItem {
                     .when_some(self.tab_index, |this, index| this.tab_index(index))
                     .map(|this| {
                         let label = self.label;
+
                         if self.root_item {
                             this.h(item_size)
                                 .px_1()
@@ -159,11 +160,11 @@ impl RenderOnce for TreeViewItem {
                                 .gap_2p5()
                                 .rounded_sm()
                                 .border_1()
-                                .focus(|s| s.border_color(focused_border))
                                 .border_color(transparent_border)
                                 .when(self.selected, |this| {
                                     this.border_color(selected_border).bg(selected_bg)
                                 })
+                                .focus(|s| s.border_color(focused_border))
                                 .hover(|s| s.bg(cx.theme().colors().element_hover))
                                 .child(
                                     Disclosure::new("toggle", self.expanded)
@@ -190,11 +191,11 @@ impl RenderOnce for TreeViewItem {
                                     .rounded_sm()
                                     .border_1()
                                     .focusable()
-                                    .in_focus(|s| s.border_color(focused_border))
                                     .border_color(transparent_border)
                                     .when(self.selected, |this| {
                                         this.border_color(selected_border).bg(selected_bg)
                                     })
+                                    .in_focus(|s| s.border_color(focused_border))
                                     .hover(|s| s.bg(cx.theme().colors().element_hover))
                                     .child(
                                         Label::new(label)
@@ -211,10 +212,12 @@ impl RenderOnce for TreeViewItem {
                                 && let Some(on_toggle) = self.on_toggle.clone()
                             {
                                 this.on_click(move |event, window, cx| {
-                                    if !event.is_keyboard() {
+                                    if event.is_keyboard() {
+                                        on_click(event, window, cx);
+                                        on_toggle(event, window, cx);
+                                    } else {
                                         on_click(event, window, cx);
                                     }
-                                    on_toggle(event, window, cx);
                                 })
                             } else {
                                 this.on_click(on_click)