Add stray UI polish to the SSH flow (#17798)

Some super subtle refinement opportunities I spotted while playing
around with this flow. There are mostly copywriting tweaks and some UI
tweaks here and there (including editing the modal horizontal padding).

--- 

Release Notes:

- N/A

crates/recent_projects/src/dev_servers.rs

@@ -929,7 +929,7 @@ impl DevServerProjects {
                                 .on_click(
                                     cx.listener(move |this, _, cx| this.delete_ssh_server(ix, cx)),
                                 )
-                                .tooltip(|cx| Tooltip::text("Remove dev server", cx))
+                                .tooltip(|cx| Tooltip::text("Remove Dev Server", cx))
                         })),
                 ),
             )
@@ -1162,9 +1162,10 @@ impl DevServerProjects {
             })
         });
 
-        const MANUAL_SETUP_MESSAGE: &str = "Click create to generate a token for this server. The next step will provide instructions for setting zed up on that machine.";
+        const MANUAL_SETUP_MESSAGE: &str =
+            "Generate a token for this server and follow the steps to set Zed up on that machine.";
         const SSH_SETUP_MESSAGE: &str =
-            "Enter the command you use to ssh into this server.\nFor example: `ssh me@my.server` or `ssh me@secret-box:2222`.";
+            "Enter the command you use to SSH into this server.\nFor example: `ssh me@my.server` or `ssh me@secret-box:2222`.";
 
         Modal::new("create-dev-server", Some(self.scroll_handle.clone()))
             .header(
@@ -1191,6 +1192,7 @@ impl DevServerProjects {
                     .child(
                         v_flex()
                             .w_full()
+                            .px_2()
                             .gap_y(Spacing::Large.rems(cx))
                             .when(ssh_prompt.is_none(), |el| {
                                 el.child(
@@ -1346,9 +1348,9 @@ impl DevServerProjects {
     ) -> Div {
         self.markdown.update(cx, |markdown, cx| {
             if kind == NewServerKind::Manual {
-                markdown.reset(format!("Please log into '{}'. If you don't yet have zed installed, run:\n```\ncurl https://zed.dev/install.sh | bash\n```\nThen to start zed in headless mode:\n```\nzed --dev-server-token {}\n```", dev_server_name, access_token), cx);
+                markdown.reset(format!("Please log into '{}'. If you don't yet have Zed installed, run:\n```\ncurl https://zed.dev/install.sh | bash\n```\nThen, to start Zed in headless mode:\n```\nzed --dev-server-token {}\n```", dev_server_name, access_token), cx);
             } else {
-                markdown.reset("Please wait while we connect over SSH.\n\nIf you run into problems, please [file a bug](https://github.com/zed-industries/zed), and in the meantime try using manual setup.".to_string(), cx);
+                markdown.reset("Please wait while we connect over SSH.\n\nIf you run into problems, please [file a bug](https://github.com/zed-industries/zed), and in the meantime try using the manual setup.".to_string(), cx);
             }
         });
 
@@ -1420,15 +1422,14 @@ impl DevServerProjects {
             )
             .when(is_signed_out, |modal| {
                 modal
-                    .section(Section::new().child(v_flex().mb_4().child(Label::new(
+                    .section(Section::new().child(div().child(Label::new(
-                        "You are not currently signed in to Zed. Currently the remote development features are only available to signed in users. Please sign in to continue.",
+                        "To continue with the remote development features, you need to sign in to Zed.",
                     ))))
                     .footer(
                         ModalFooter::new().end_slot(
-                            Button::new("sign_in", "Sign in")
+                            Button::new("sign_in", "Sign in with GitHub")
                                 .icon(IconName::Github)
                                 .icon_position(IconPosition::Start)
-                                .style(ButtonStyle::Filled)
                                 .full_width()
                                 .on_click(cx.listener(|_, _, cx| {
                                     let client = Client::global(cx).clone();
@@ -1447,17 +1448,15 @@ impl DevServerProjects {
             .when(!is_signed_out, |modal| {
                 modal.section(
                     Section::new().child(
-                        div().mb_4().child(
+                        div().child(
                             List::new()
-                                .empty_message("No dev servers registered.")
+                                .empty_message("No dev servers registered yet.")
                                 .header(Some(
                                     ListHeader::new("Connections").end_slot(
-                                        Button::new("register-dev-server-button", "Connect")
+                                        Button::new("register-dev-server-button", "Connect New Server")
                                             .icon(IconName::Plus)
                                             .icon_position(IconPosition::Start)
-                                            .tooltip(|cx| {
+                                            .icon_color(Color::Muted)
-                                                Tooltip::text("Connect to a new server", cx)
-                                            })
                                             .on_click(cx.listener(|this, _, cx| {
                                                 this.mode = Mode::CreateDevServer(
                                                     CreateDevServer {
@@ -1524,6 +1523,7 @@ impl Render for DevServerProjects {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
         div()
             .track_focus(&self.focus_handle)
+            .p_2()
             .elevation_3(cx)
             .key_context("DevServerModal")
             .on_action(cx.listener(Self::cancel))
@@ -1590,7 +1590,7 @@ pub fn reconnect_to_dev_server(
     cx: &mut WindowContext,
 ) -> Task<Result<()>> {
     let Some(ssh_connection_string) = dev_server.ssh_connection_string else {
-        return Task::ready(Err(anyhow!("can't reconnect, no ssh_connection_string")));
+        return Task::ready(Err(anyhow!("Can't reconnect, no ssh_connection_string")));
     };
     let dev_server_store = dev_server_projects::Store::global(cx);
     let get_access_token = dev_server_store.update(cx, |store, cx| {

crates/ui/src/components/modal.rs

@@ -1,6 +1,6 @@
 use crate::{
-    h_flex, rems_from_px, v_flex, Clickable, Color, Headline, HeadlineSize, IconButton,
+    h_flex, v_flex, Clickable, Color, Headline, HeadlineSize, IconButton, IconButtonShape,
-    IconButtonShape, IconName, Label, LabelCommon, LabelSize, Spacing,
+    IconName, Label, LabelCommon, LabelSize, Spacing,
 };
 use gpui::{prelude::FluentBuilder, *};
 use smallvec::SmallVec;
@@ -210,7 +210,7 @@ impl ParentElement for ModalRow {
 
 impl RenderOnce for ModalRow {
     fn render(self, _cx: &mut WindowContext) -> impl IntoElement {
-        h_flex().w_full().px_2().py_1().children(self.children)
+        h_flex().w_full().py_1().children(self.children)
     }
 }
 
@@ -326,7 +326,6 @@ impl RenderOnce for Section {
                     .border_color(cx.theme().colors().border)
                     .bg(section_bg)
                     .py(Spacing::Medium.rems(cx))
-                    .px(Spacing::Large.rems(cx) - rems_from_px(1.0))
                     .gap_y(Spacing::Small.rems(cx))
                     .child(div().flex().flex_1().size_full().children(self.children)),
             )
@@ -334,7 +333,7 @@ impl RenderOnce for Section {
             v_flex()
                 .w_full()
                 .gap_y(Spacing::Small.rems(cx))
-                .px(Spacing::Large.rems(cx) + Spacing::Large.rems(cx))
+                .px(Spacing::Medium.rems(cx) + Spacing::Medium.rems(cx))
                 .children(self.children)
         };