Detailed changes
@@ -1,9 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path opacity="0.6" d="M3.5 11V5.5L8.5 8L3.5 11Z" fill="black"/>
-<path opacity="0.4" d="M8.5 14L3.5 11L8.5 8V14Z" fill="black"/>
-<path opacity="0.6" d="M8.5 5.5H3.5L8.5 2.5L8.5 5.5Z" fill="black"/>
-<path opacity="0.8" d="M8.5 5.5V2.5L13.5 5.5H8.5Z" fill="black"/>
-<path opacity="0.2" d="M13.5 11L8.5 14L11 9.5L13.5 11Z" fill="black"/>
-<path opacity="0.5" d="M13.5 11L11 9.5L13.5 5V11Z" fill="black"/>
-<path d="M3.5 11V5L8.5 2.11325L13.5 5V11L8.5 13.8868L3.5 11Z" stroke="black"/>
+<path d="M13.2806 4.66818L8.26042 1.76982C8.09921 1.67673 7.9003 1.67673 7.73909 1.76982L2.71918 4.66818C2.58367 4.74642 2.5 4.89112 2.5 5.04785V10.8924C2.5 11.0489 2.58367 11.1938 2.71918 11.2721L7.73934 14.1704C7.90054 14.2635 8.09946 14.2635 8.26066 14.1704L13.2808 11.2721C13.4163 11.1938 13.5 11.0491 13.5 10.8924V5.04785C13.5 4.89136 13.4163 4.74642 13.2808 4.66818H13.2806ZM12.9653 5.28212L8.11901 13.676C8.08626 13.7326 7.99977 13.7095 7.99977 13.6439V8.14771C7.99977 8.03788 7.94107 7.9363 7.84586 7.88115L3.08613 5.13317C3.02957 5.10041 3.05266 5.0139 3.11818 5.0139H12.8106C12.9483 5.0139 13.0343 5.1631 12.9655 5.28236H12.9653V5.28212Z" fill="#C4CAD4"/>
</svg>
@@ -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 = <dyn 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))
}
@@ -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),
)
@@ -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))
}