From c949dea212da929123adf5d9c1962b53857d5963 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 338697be8a621e80099c308b3dda0a4e11fcfd61..e20013917d3c8b9d28f4fab631ae2fbd99b9297f 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 31547115bd547bbf945f466de232cb9e7dd7724e..a272ce20f70691f26c3fad0d8bb3e9c285918629 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, }; @@ -229,10 +229,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", @@ -418,27 +415,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 { @@ -462,6 +455,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() @@ -472,7 +468,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)) } @@ -485,5 +480,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 70e1524ab4e7d432a5fcbef1e18385bab1320d83..9273f0d7d87851b5118d7835244074502fc128c7 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() - .child( - Headline::new("Welcome to Zed") - .size(HeadlineSize::Small), - ) + h_flex() + .gap_4() + .child(Vector::square(VectorName::ZedLogo, rems(2.5))) .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 40c75f5918fe1e70c3d52374dce2a463314b5cc7..0c8893e2cccb64243f373126429a823b919bca42 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)) }