zeta: Improve UI for feedback instructions (#21857)

Danilo Leal created 1 year ago

If the instructions are added as the input placeholder, when in a
smaller window size (like the one from the screenshot), scrolling is
needed to see them all. So, thought of extracting it out of there. Also
thought it looked more refined this way!

<img width="800" alt="Screenshot 2024-12-11 at 11 48 17"
src="https://github.com/user-attachments/assets/46974b94-6365-4a59-bf71-a6c0863aac68"
/>

Release Notes:

- N/A

Change summary

crates/zeta/src/rate_completion_modal.rs | 22 +++++++++++++++++++---
1 file changed, 19 insertions(+), 3 deletions(-)

Detailed changes

crates/zeta/src/rate_completion_modal.rs

@@ -275,7 +275,7 @@ impl RateCompletionModal {
                 editor.set_show_wrap_guides(false, cx);
                 editor.set_show_indent_guides(false, cx);
                 editor.set_show_inline_completions(Some(false), cx);
-                editor.set_placeholder_text("Add your feedback about this completion… (Negative feedback requires an explanation for why it was bad, and what you expected instead.)", cx);
+                editor.set_placeholder_text("Add your feedback…", cx);
                 if focus {
                     cx.focus_self();
                 }
@@ -369,12 +369,28 @@ impl RateCompletionModal {
                         .overflow_scroll()
                         .child(StyledText::new(diff).with_highlights(&text_style, diff_highlights)),
                 )
+                .child(
+                    h_flex()
+                        .p_2()
+                        .gap_2()
+                        .border_y_1()
+                        .border_color(border_color)
+                        .child(
+                            Icon::new(IconName::Info)
+                                .size(IconSize::XSmall)
+                                .color(Color::Muted)
+                        )
+                        .child(
+                            Label::new("Ensure you explain why this completion is negative or positive. In case it's negative, report what you expected instead.")
+                                .size(LabelSize::Small)
+                                .color(Color::Muted)
+                        )
+                )
                 .child(
                     div()
                         .h_40()
+                        .pt_1()
                         .bg(bg_color)
-                        .border_t_1()
-                        .border_color(border_color)
                         .child(active_completion.feedback_editor.clone()),
                 )
                 .child(