From dfe455b054b88063b9194a93176941ae52ae6b29 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 11 Dec 2024 12:07:41 -0300
Subject: [PATCH] zeta: Improve UI for feedback instructions (#21857)

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
---
 crates/zeta/src/rate_completion_modal.rs | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/crates/zeta/src/rate_completion_modal.rs b/crates/zeta/src/rate_completion_modal.rs
index 4a2e622a68..d096fca855 100644
--- a/crates/zeta/src/rate_completion_modal.rs
+++ b/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(