Polish onboarding page (#35367)

- Added borders to the numeric stepper.
- Changed the hover mouse style for SwitchField.
- Made the edit page toggle buttons more responsive.

Release Notes:

- N/A

crates/ui/src/components/numeric_stepper.rs

@@ -1,6 +1,6 @@
 use gpui::ClickEvent;
 
-use crate::{IconButtonShape, prelude::*};
+use crate::{Divider, IconButtonShape, prelude::*};
 
 #[derive(IntoElement, RegisterComponent)]
 pub struct NumericStepper {
@@ -11,6 +11,7 @@ pub struct NumericStepper {
     /// Whether to reserve space for the reset button.
     reserve_space_for_reset: bool,
     on_reset: Option<Box<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>>,
+    border: bool,
 }
 
 impl NumericStepper {
@@ -25,6 +26,7 @@ impl NumericStepper {
             value: value.into(),
             on_decrement: Box::new(on_decrement),
             on_increment: Box::new(on_increment),
+            border: false,
             reserve_space_for_reset: false,
             on_reset: None,
         }
@@ -42,6 +44,11 @@ impl NumericStepper {
         self.on_reset = Some(Box::new(on_reset));
         self
     }
+
+    pub fn border(mut self) -> Self {
+        self.border = true;
+        self
+    }
 }
 
 impl RenderOnce for NumericStepper {
@@ -74,8 +81,11 @@ impl RenderOnce for NumericStepper {
             .child(
                 h_flex()
                     .gap_1()
+                    .when(self.border, |this| {
+                        this.border_1().border_color(cx.theme().colors().border)
+                    })
                     .px_1()
-                    .rounded_xs()
+                    .rounded_sm()
                     .bg(cx.theme().colors().editor_background)
                     .child(
                         IconButton::new("decrement", IconName::Dash)
@@ -83,7 +93,13 @@ impl RenderOnce for NumericStepper {
                             .icon_size(icon_size)
                             .on_click(self.on_decrement),
                     )
+                    .when(self.border, |this| {
+                        this.child(Divider::vertical().color(super::DividerColor::Border))
+                    })
                     .child(Label::new(self.value))
+                    .when(self.border, |this| {
+                        this.child(Divider::vertical().color(super::DividerColor::Border))
+                    })
                     .child(
                         IconButton::new("increment", IconName::Plus)
                             .shape(shape)
@@ -113,12 +129,27 @@ impl Component for NumericStepper {
 
     fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
         Some(
-            div()
-                .child(NumericStepper::new(
-                    "numeric-stepper-component-preview",
-                    "10",
-                    move |_, _, _| {},
-                    move |_, _, _| {},
+            v_flex()
+                .child(single_example(
+                    "Borderless",
+                    NumericStepper::new(
+                        "numeric-stepper-component-preview",
+                        "10",
+                        move |_, _, _| {},
+                        move |_, _, _| {},
+                    )
+                    .into_any_element(),
+                ))
+                .child(single_example(
+                    "Border",
+                    NumericStepper::new(
+                        "numeric-stepper-with-border-component-preview",
+                        "10",
+                        move |_, _, _| {},
+                        move |_, _, _| {},
+                    )
+                    .border()
+                    .into_any_element(),
                 ))
                 .into_any_element(),
         )

crates/ui/src/components/toggle.rs

@@ -1,6 +1,6 @@
 use gpui::{
-    AnyElement, AnyView, ClickEvent, ElementId, Hsla, IntoElement, Styled, Window, div, hsla,
-    prelude::*,
+    AnyElement, AnyView, ClickEvent, CursorStyle, ElementId, Hsla, IntoElement, Styled, Window,
+    div, hsla, prelude::*,
 };
 use std::sync::Arc;
 
@@ -609,6 +609,9 @@ impl RenderOnce for SwitchField {
     fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
         h_flex()
             .id(SharedString::from(format!("{}-container", self.id)))
+            .when(!self.disabled, |this| {
+                this.hover(|this| this.cursor(CursorStyle::PointingHand))
+            })
             .w_full()
             .gap_4()
             .justify_between()