Tweak welcome design

Nate Butler and Mikayla Maki created 2 years ago

Co-Authored-By: Mikayla Maki <[e-mail]>

Change summary

crates/theme/src/theme.rs       | 14 +++++++++++
crates/welcome/src/welcome.rs   | 17 ++++++++++----
styles/src/styleTree/welcome.ts | 42 ++++++++++++++++++++++------------
3 files changed, 53 insertions(+), 20 deletions(-)

Detailed changes

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<ContainedText>,
@@ -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,

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()

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,