diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index 8fc6db3e5bfdaf2730670168a0e63821b0962ecd..13546b40cd958f6ff3c75513e4a9689aaa7526c1 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -855,6 +855,7 @@ pub struct FeedbackStyle { #[derive(Clone, Deserialize, Default)] pub struct WelcomeStyle { pub page_width: f32, + pub logo: IconStyle, pub logo_subheading: ContainedText, pub checkbox: CheckboxStyle, pub button: Interactive, @@ -863,6 +864,19 @@ pub struct WelcomeStyle { pub checkbox_group: ContainerStyle, } +#[derive(Clone, Deserialize, Default)] +pub struct IconStyle { + pub color: Color, + pub icon: String, + pub dimensions: Dimensions, +} + +#[derive(Clone, Deserialize, Default)] +pub struct Dimensions { + pub width: f32, + pub height: f32, +} + #[derive(Clone, Deserialize, Default)] pub struct CheckboxStyle { pub check_icon: String, diff --git a/crates/welcome/src/welcome.rs b/crates/welcome/src/welcome.rs index d5431e5108ca77d7856fff529122085ce74c581d..246ff267171887ad11dbb802222663bbe289e91e 100644 --- a/crates/welcome/src/welcome.rs +++ b/crates/welcome/src/welcome.rs @@ -3,7 +3,7 @@ mod base_keymap_picker; use std::borrow::Cow; use gpui::{ - elements::{Empty, Flex, Image, Label, MouseEventHandler, ParentElement, Svg}, + elements::{Empty, Flex, Label, MouseEventHandler, ParentElement, Svg}, Action, Element, ElementBox, Entity, MouseButton, MutableAppContext, RenderContext, Subscription, View, ViewContext, }; @@ -56,10 +56,11 @@ impl View for WelcomePage { .with_children([ Flex::column() .with_children([ - Image::new("images/zed-logo-90x90.png") + Svg::new(theme.welcome.logo.icon.clone()) + .with_color(theme.welcome.logo.color) .constrained() - .with_width(90.) - .with_height(90.) + .with_width(theme.welcome.logo.dimensions.width) + .with_height(theme.welcome.logo.dimensions.height) .aligned() .contained() .aligned() @@ -75,8 +76,10 @@ impl View for WelcomePage { ]) .contained() .with_style(theme.welcome.heading_group) + .constrained() + .with_width(width) .boxed(), - Flex::row() + Flex::column() .with_children([ self.render_cta_button( "Choose a theme", @@ -99,6 +102,8 @@ impl View for WelcomePage { ]) .contained() .with_style(theme.welcome.button_group) + .constrained() + .with_width(width) .boxed(), Flex::column() .with_children([ @@ -119,6 +124,8 @@ impl View for WelcomePage { ]) .contained() .with_style(theme.welcome.checkbox_group) + .constrained() + .with_width(width) .boxed(), ]) .constrained() diff --git a/styles/src/styleTree/welcome.ts b/styles/src/styleTree/welcome.ts index 2dc0f59b2e5a432251e630cdd60342807cffd158..137c6df11177f8fed9a156acc8b6a5a49d62017d 100644 --- a/styles/src/styleTree/welcome.ts +++ b/styles/src/styleTree/welcome.ts @@ -1,5 +1,6 @@ import { ColorScheme } from "../themes/common/colorScheme"; +import { withOpacity } from "../utils/color"; import { border, background, foreground, text, TextProperties } from "./components"; @@ -27,50 +28,61 @@ export default function welcome(colorScheme: ColorScheme) { return { pageWidth: 320, + logo: { + color: foreground(layer, "default"), + icon: "icons/logo_96.svg", + dimensions: { + width: 64, + height: 64, + } + }, logoSubheading: { - ...text(layer, "sans", { size: "lg" }), + ...text(layer, "sans", "variant", { size: "md" }), margin: { top: 10, bottom: 7, }, }, buttonGroup: { - border: border(layer, "active"), margin: { top: 8, - bottom: 7 + bottom: 16 }, }, headingGroup: { margin: { top: 8, - bottom: 7 + bottom: 12 }, }, checkboxGroup: { - margin: { - top: 8, - bottom: 7 + border: border(layer, "variant"), + background: withOpacity(background(layer, "hovered"), 0.25), + cornerRadius: 4, + padding: { + left: 12, + top: 2, + bottom: 2 }, }, button: { background: background(layer), - border: border(layer, "default"), + border: border(layer, "active"), cornerRadius: 4, margin: { - top: 8, - bottom: 7 + top: 4, + bottom: 4 }, padding: { - top: 1, - bottom: 1, + top: 3, + bottom: 3, left: 7, right: 7, }, ...text(layer, "sans", "default", interactive_text_size), hover: { ...text(layer, "sans", "default", interactive_text_size), - background: background(layer, "default"), + background: background(layer, "hovered"), border: border(layer, "active"), }, }, @@ -81,7 +93,7 @@ export default function welcome(colorScheme: ColorScheme) { }, container: { margin: { - top: 5, + top: 4, }, }, width: 12, @@ -101,7 +113,7 @@ export default function welcome(colorScheme: ColorScheme) { hovered: { ...checkboxBase, background: background(layer, "hovered"), - border: border(layer, "hovered") + border: border(layer, "active") }, hoveredAndChecked: { ...checkboxBase,