From 6dc3e643b457b578ae4180f84c9fe887baa4d6ff Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Sat, 11 Oct 2025 10:32:20 -0300 Subject: [PATCH] onboarding: Add some UI improvements (#40016) Includes improvements in button padding, ways we space elements out, more consistent use of some components, and cleaning up redundant buttons styles. Pretty much nothing changes in the design, though. Release Notes: - N/A --- assets/icons/editor_cursor.svg | 8 +--- crates/onboarding/src/basics_page.rs | 48 +++++++++---------- crates/onboarding/src/onboarding.rs | 47 +++++++++--------- .../ui/src/components/button/button_like.rs | 41 ++-------------- 4 files changed, 49 insertions(+), 95 deletions(-) diff --git a/assets/icons/editor_cursor.svg b/assets/icons/editor_cursor.svg index 338697be8a..e20013917d 100644 --- a/assets/icons/editor_cursor.svg +++ b/assets/icons/editor_cursor.svg @@ -1,9 +1,3 @@ - - - - - - - + diff --git a/crates/onboarding/src/basics_page.rs b/crates/onboarding/src/basics_page.rs index 92e434176f..eaf9c41a53 100644 --- a/crates/onboarding/src/basics_page.rs +++ b/crates/onboarding/src/basics_page.rs @@ -9,7 +9,7 @@ use theme::{ ThemeSettings, }; use ui::{ - ButtonLike, ParentElement as _, StatefulInteractiveElement, SwitchField, TintColor, + Divider, ParentElement as _, StatefulInteractiveElement, SwitchField, TintColor, ToggleButtonGroup, ToggleButtonGroupSize, ToggleButtonSimple, ToggleButtonWithIcon, prelude::*, rems_from_px, }; @@ -221,10 +221,7 @@ fn render_telemetry_section(tab_index: &mut isize, cx: &App) -> impl IntoElement let fs = ::global(cx); v_flex() - .pt_6() .gap_4() - .border_t_1() - .border_color(cx.theme().colors().border_variant.opacity(0.5)) .child( SwitchField::new( "onboarding-telemetry-metrics", @@ -410,27 +407,23 @@ fn render_setting_import_button( imported: bool, ) -> impl IntoElement + 'static { let action = action.boxed_clone(); - h_flex().w_full().child( - ButtonLike::new(label.clone()) - .style(ButtonStyle::OutlinedTransparent) - .selected_style(ButtonStyle::Tinted(TintColor::Accent)) - .toggle_state(imported) - .size(ButtonSize::Medium) - .tab_index(tab_index) - .child( - h_flex() - .w_full() - .justify_between() - .when(imported, |this| { - this.child(Icon::new(IconName::Check).color(Color::Success)) - }) - .child(Label::new(label.clone()).mx_2().size(LabelSize::Small)), - ) - .on_click(move |_, window, cx| { - telemetry::event!("Welcome Import Settings", import_source = label,); - window.dispatch_action(action.boxed_clone(), cx); - }), - ) + + Button::new(label.clone(), label.clone()) + .style(ButtonStyle::OutlinedGhost) + .size(ButtonSize::Medium) + .label_size(LabelSize::Small) + .selected_style(ButtonStyle::Tinted(TintColor::Accent)) + .toggle_state(imported) + .tab_index(tab_index) + .when(imported, |this| { + this.icon(IconName::Check) + .icon_size(IconSize::Small) + .color(Color::Success) + }) + .on_click(move |_, window, cx| { + telemetry::event!("Welcome Import Settings", import_source = label,); + window.dispatch_action(action.boxed_clone(), cx); + }) } fn render_import_settings_section(tab_index: &mut isize, cx: &mut App) -> impl IntoElement { @@ -454,6 +447,9 @@ fn render_import_settings_section(tab_index: &mut isize, cx: &mut App) -> impl I }); h_flex() + .gap_2() + .flex_wrap() + .justify_between() .child( v_flex() .gap_0p5() @@ -464,7 +460,6 @@ fn render_import_settings_section(tab_index: &mut isize, cx: &mut App) -> impl I .color(Color::Muted), ), ) - .child(div().w_full()) .child(h_flex().gap_1().child(vscode).child(cursor)) } @@ -477,5 +472,6 @@ pub(crate) fn render_basics_page(cx: &mut App) -> impl IntoElement { .child(render_base_keymap_section(&mut tab_index, cx)) .child(render_import_settings_section(&mut tab_index, cx)) .child(render_vim_mode_switch(&mut tab_index, cx)) + .child(Divider::horizontal().color(ui::DividerColor::BorderVariant)) .child(render_telemetry_section(&mut tab_index, cx)) } diff --git a/crates/onboarding/src/onboarding.rs b/crates/onboarding/src/onboarding.rs index 70e1524ab4..9273f0d7d8 100644 --- a/crates/onboarding/src/onboarding.rs +++ b/crates/onboarding/src/onboarding.rs @@ -14,7 +14,7 @@ use serde::Deserialize; use settings::{SettingsStore, VsCodeSettingsSource}; use std::sync::Arc; use ui::{ - KeyBinding, ParentElement as _, StatefulInteractiveElement, Vector, VectorName, + Divider, KeyBinding, ParentElement as _, StatefulInteractiveElement, Vector, VectorName, WithScrollbar as _, prelude::*, rems_from_px, }; pub use ui_input::font_picker; @@ -294,44 +294,45 @@ impl Render for Onboarding { .child( div() .max_w(Rems(48.0)) - .w_full() - .mx_auto() .size_full() - .gap_6() + .mx_auto() .child( v_flex() - .m_auto() .id("page-content") - .gap_6() + .m_auto() + .p_12() .size_full() .max_w_full() .min_w_0() - .p_12() - .border_color(cx.theme().colors().border_variant.opacity(0.5)) + .gap_6() .overflow_y_scroll() .child( h_flex() .w_full() .gap_4() - .child(Vector::square(VectorName::ZedLogo, rems(2.5))) + .justify_between() .child( - v_flex() + h_flex() + .gap_4() + .child(Vector::square(VectorName::ZedLogo, rems(2.5))) .child( - Headline::new("Welcome to Zed") - .size(HeadlineSize::Small), - ) - .child( - Label::new("The editor for what's next") - .color(Color::Muted) - .size(LabelSize::Small) - .italic(), + v_flex() + .child( + Headline::new("Welcome to Zed") + .size(HeadlineSize::Small), + ) + .child( + Label::new("The editor for what's next") + .color(Color::Muted) + .size(LabelSize::Small) + .italic(), + ), ), ) - .child(div().w_full()) .child({ Button::new("finish_setup", "Finish Setup") .style(ButtonStyle::Filled) - .size(ButtonSize::Large) + .size(ButtonSize::Medium) .width(Rems(12.0)) .key_binding( KeyBinding::for_action_in( @@ -345,11 +346,9 @@ impl Render for Onboarding { .on_click(|_, window, cx| { window.dispatch_action(Finish.boxed_clone(), cx); }) - }) - .pb_6() - .border_b_1() - .border_color(cx.theme().colors().border_variant.opacity(0.5)), + }), ) + .child(Divider::horizontal().color(ui::DividerColor::BorderVariant)) .child(self.render_page(cx)) .track_scroll(&self.scroll_handle), ) diff --git a/crates/ui/src/components/button/button_like.rs b/crates/ui/src/components/button/button_like.rs index 40c75f5918..0c8893e2cc 100644 --- a/crates/ui/src/components/button/button_like.rs +++ b/crates/ui/src/components/button/button_like.rs @@ -135,9 +135,6 @@ pub enum ButtonStyle { /// a fully transparent button. Outlined, - /// Transparent button that always has an outline. - OutlinedTransparent, - /// A more de-emphasized version of the outlined button. OutlinedGhost, @@ -228,12 +225,6 @@ impl ButtonStyle { label_color: Color::Default.color(cx), icon_color: Color::Default.color(cx), }, - ButtonStyle::OutlinedTransparent => ButtonLikeStyles { - background: cx.theme().colors().ghost_element_background, - border_color: cx.theme().colors().border_variant, - label_color: Color::Default.color(cx), - icon_color: Color::Default.color(cx), - }, ButtonStyle::OutlinedGhost => ButtonLikeStyles { background: transparent_black(), border_color: cx.theme().colors().border_variant, @@ -285,14 +276,8 @@ impl ButtonStyle { label_color: Color::Default.color(cx), icon_color: Color::Default.color(cx), }, - ButtonStyle::OutlinedTransparent => ButtonLikeStyles { - background: cx.theme().colors().ghost_element_hover, - border_color: cx.theme().colors().border, - label_color: Color::Default.color(cx), - icon_color: Color::Default.color(cx), - }, ButtonStyle::OutlinedGhost => ButtonLikeStyles { - background: transparent_black(), + background: cx.theme().colors().ghost_element_hover, border_color: cx.theme().colors().border, label_color: Color::Default.color(cx), icon_color: Color::Default.color(cx), @@ -335,12 +320,6 @@ impl ButtonStyle { label_color: Color::Default.color(cx), icon_color: Color::Default.color(cx), }, - ButtonStyle::OutlinedTransparent => ButtonLikeStyles { - background: cx.theme().colors().ghost_element_active, - border_color: cx.theme().colors().border_variant, - label_color: Color::Default.color(cx), - icon_color: Color::Default.color(cx), - }, ButtonStyle::OutlinedGhost => ButtonLikeStyles { background: transparent_black(), border_color: cx.theme().colors().border_variant, @@ -380,12 +359,6 @@ impl ButtonStyle { label_color: Color::Default.color(cx), icon_color: Color::Default.color(cx), }, - ButtonStyle::OutlinedTransparent => ButtonLikeStyles { - background: cx.theme().colors().ghost_element_background, - border_color: cx.theme().colors().border, - label_color: Color::Default.color(cx), - icon_color: Color::Default.color(cx), - }, ButtonStyle::OutlinedGhost => ButtonLikeStyles { background: transparent_black(), border_color: cx.theme().colors().border, @@ -428,12 +401,6 @@ impl ButtonStyle { label_color: Color::Default.color(cx), icon_color: Color::Default.color(cx), }, - ButtonStyle::OutlinedTransparent => ButtonLikeStyles { - background: cx.theme().colors().ghost_element_disabled, - border_color: cx.theme().colors().border_disabled, - label_color: Color::Default.color(cx), - icon_color: Color::Default.color(cx), - }, ButtonStyle::OutlinedGhost => ButtonLikeStyles { background: transparent_black(), border_color: cx.theme().colors().border_disabled, @@ -690,9 +657,7 @@ impl RenderOnce for ButtonLike { .when( matches!( self.style, - ButtonStyle::Outlined - | ButtonStyle::OutlinedTransparent - | ButtonStyle::OutlinedGhost + ButtonStyle::Outlined | ButtonStyle::OutlinedGhost ), |this| this.border_1(), ) @@ -704,7 +669,7 @@ impl RenderOnce for ButtonLike { }) .gap(DynamicSpacing::Base04.rems(cx)) .map(|this| match self.size { - ButtonSize::Large | ButtonSize::Medium => this.px(DynamicSpacing::Base06.rems(cx)), + ButtonSize::Large | ButtonSize::Medium => this.px(DynamicSpacing::Base08.rems(cx)), ButtonSize::Default | ButtonSize::Compact => { this.px(DynamicSpacing::Base04.rems(cx)) }