WIP

Co-Authored-By: Mikayla Maki <mikayla.c.maki@gmail.com>

crates/theme/src/theme.rs

@@ -858,6 +858,9 @@ pub struct WelcomeStyle {
     pub logo_subheading: ContainedText,
     pub checkbox: CheckboxStyle,
     pub button: Interactive<ContainedText>,
+    pub button_group: ContainerStyle,
+    pub heading_group: ContainerStyle,
+    pub checkbox_group: ContainerStyle,
 }
 
 #[derive(Clone, Deserialize, Default)]

crates/welcome/src/welcome.rs

@@ -52,6 +52,8 @@ impl View for WelcomePage {
 
         PaneBackdrop::new(
             self_handle.id(),
+            Flex::column()
+                .with_children([
                     Flex::column()
                         .with_children([
                             Image::new("images/zed-logo-90x90.png")
@@ -70,9 +72,36 @@ impl View for WelcomePage {
                             .contained()
                             .with_style(theme.welcome.logo_subheading.container)
                             .boxed(),
-                    self.render_cta_button("Choose a theme", theme_selector::Toggle, width, cx),
+                        ])
-                    self.render_cta_button("Choose a keymap", ToggleBaseKeymapSelector, width, cx),
+                        .contained()
-                    self.render_cta_button("Install the CLI", install_cli::Install, width, cx),
+                        .with_style(theme.welcome.heading_group)
+                        .boxed(),
+                    Flex::row()
+                        .with_children([
+                            self.render_cta_button(
+                                "Choose a theme",
+                                theme_selector::Toggle,
+                                width,
+                                cx,
+                            ),
+                            self.render_cta_button(
+                                "Choose a keymap",
+                                ToggleBaseKeymapSelector,
+                                width,
+                                cx,
+                            ),
+                            self.render_cta_button(
+                                "Install the CLI",
+                                install_cli::Install,
+                                width,
+                                cx,
+                            ),
+                        ])
+                        .contained()
+                        .with_style(theme.welcome.button_group)
+                        .boxed(),
+                    Flex::column()
+                        .with_children([
                             self.render_settings_checkbox::<Metrics>(
                                 "Do you want to send telemetry?",
                                 &theme.welcome.checkbox,
@@ -88,6 +117,10 @@ impl View for WelcomePage {
                                 |content, checked| content.telemetry.set_diagnostics(checked),
                             ),
                         ])
+                        .contained()
+                        .with_style(theme.welcome.checkbox_group)
+                        .boxed(),
+                ])
                 .constrained()
                 .with_max_width(width)
                 .contained()

styles/src/styleTree/welcome.ts

@@ -14,7 +14,7 @@ export default function welcome(colorScheme: ColorScheme) {
             top: 3,
             bottom: 3,
         },
-    shadow: colorScheme.popoverShadow,
+        // shadow: colorScheme.popoverShadow,
         border: border(layer),
         margin: {
             right: 8,
@@ -23,10 +23,10 @@ export default function welcome(colorScheme: ColorScheme) {
         },
     };
 
-  let interactive_text_size: TextProperties = { size: "md" }
+    let interactive_text_size: TextProperties = { size: "sm" }
 
     return {
-    pageWidth: 450,
+        pageWidth: 320,
         logoSubheading: {
             ...text(layer, "sans", { size: "lg" }),
             margin: {
@@ -34,9 +34,28 @@ export default function welcome(colorScheme: ColorScheme) {
                 bottom: 7,
             },
         },
+        buttonGroup: {
+            border: border(layer, "active"),
+            margin: {
+                top: 8,
+                bottom: 7
+            },
+        },
+        headingGroup: {
+            margin: {
+                top: 8,
+                bottom: 7
+            },
+        },
+        checkboxGroup: {
+            margin: {
+                top: 8,
+                bottom: 7
+            },
+        },
         button: {
             background: background(layer),
-      border: border(layer, "active"),
+            border: border(layer, "default"),
             cornerRadius: 4,
             margin: {
                 top: 8,
@@ -48,11 +67,11 @@ export default function welcome(colorScheme: ColorScheme) {
                 left: 7,
                 right: 7,
             },
-      ...text(layer, "sans", "hovered", interactive_text_size),
+            ...text(layer, "sans", "default", interactive_text_size),
             hover: {
-        ...text(layer, "sans", "hovered", interactive_text_size),
+                ...text(layer, "sans", "default", interactive_text_size),
-        background: background(layer, "hovered"),
+                background: background(layer, "default"),
-        border: border(layer, "hovered"),
+                border: border(layer, "active"),
             },
         },
         checkbox: {