Tighten up feedback modal design (#3960)

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.
This commit is contained in:
Marshall Bowers 2024-01-08 18:28:37 -05:00 committed by GitHub
parent 32cd95674f
commit 4007b2f72b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

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