Tighten up feedback modal design (#3960)

Marshall Bowers created 2 years ago

This PR tightens up the design of the feedback dialog:

<img width="680" alt="Screenshot 2024-01-08 at 6 20 50 PM"
src="https://github.com/zed-industries/zed/assets/1486634/8dc0e687-2459-4ab3-b69f-b610ce067ef1">

<img width="682" alt="Screenshot 2024-01-08 at 6 21 24 PM"
src="https://github.com/zed-industries/zed/assets/1486634/f0730710-16e0-4d61-a919-60874442186a">

Release Notes:

- Improved the design of the feedback dialog.

Change summary

crates/feedback/src/feedback_modal.rs | 60 +++++++++++++---------------
1 file changed, 28 insertions(+), 32 deletions(-)

Detailed changes

crates/feedback/src/feedback_modal.rs

@@ -179,14 +179,13 @@ impl FeedbackModal {
             editor
         });
 
-        // Moved here because providing it inline breaks rustfmt
-        let placeholder_text =
-            "You can use markdown to organize your feedback with code and links.";
-
         let feedback_editor = cx.new_view(|cx| {
             let mut editor = Editor::for_buffer(buffer, Some(project.clone()), cx);
-            editor.set_placeholder_text(placeholder_text, cx);
-            // editor.set_show_gutter(false, cx);
+            editor.set_placeholder_text(
+                "You can use markdown to organize your feedback with code and links.",
+                cx,
+            );
+            editor.set_show_gutter(false, cx);
             editor.set_vertical_scroll_margin(5, cx);
             editor
         });
@@ -422,10 +421,6 @@ impl Render for FeedbackModal {
         let open_community_repo =
             cx.listener(|_, _, cx| cx.dispatch_action(Box::new(OpenZedCommunityRepo)));
 
-        // Moved this here because providing it inline breaks rustfmt
-        let provide_an_email_address =
-            "Provide an email address if you want us to be able to reply.";
-
         v_stack()
             .elevation_3(cx)
             .key_context("GiveFeedback")
@@ -434,11 +429,8 @@ impl Render for FeedbackModal {
             .max_w(rems(96.))
             .h(rems(32.))
             .p_4()
-            .gap_4()
-            .child(v_stack().child(
-                // TODO: Add Headline component to `ui2`
-                div().text_xl().child("Share Feedback"),
-            ))
+            .gap_2()
+            .child(Headline::new("Share Feedback"))
             .child(
                 Label::new(if self.character_count < *FEEDBACK_CHAR_LIMIT.start() {
                     format!(
@@ -468,17 +460,26 @@ impl Render for FeedbackModal {
                     .child(self.feedback_editor.clone()),
             )
             .child(
-                h_stack()
-                    .bg(cx.theme().colors().editor_background)
-                    .p_2()
-                    .border()
-                    .rounded_md()
-                    .border_color(if self.valid_email_address() {
-                        cx.theme().colors().border
-                    } else {
-                        cx.theme().status().error_border
-                    })
-                    .child(self.email_address_editor.clone()),
+                v_stack()
+                    .gap_1()
+                    .child(
+                        h_stack()
+                            .bg(cx.theme().colors().editor_background)
+                            .p_2()
+                            .border()
+                            .rounded_md()
+                            .border_color(if self.valid_email_address() {
+                                cx.theme().colors().border
+                            } else {
+                                cx.theme().status().error_border
+                            })
+                            .child(self.email_address_editor.clone()),
+                    )
+                    .child(
+                        Label::new("Provide an email address if you want us to be able to reply.")
+                            .size(LabelSize::Small)
+                            .color(Color::Muted),
+                    ),
             )
             .child(
                 h_stack()
@@ -515,12 +516,7 @@ impl Render for FeedbackModal {
                                         this.submit(cx).detach();
                                     }))
                                     .tooltip(move |cx| {
-                                        Tooltip::with_meta(
-                                            "Submit feedback to the Zed team.",
-                                            None,
-                                            provide_an_email_address,
-                                            cx,
-                                        )
+                                        Tooltip::text("Submit feedback to the Zed team.", cx)
                                     })
                                     .when(!self.can_submit(), |this| this.disabled(true)),
                             ),