Improve `MessageNotification` design (#22829)

Danilo Leal created 1 year ago

Just fine-tuning some bits of the visual design.

| Before | After |
|--------|--------|
| <img width="1426" alt="Screenshot 2025-01-08 at 11 26 32 AM"
src="https://github.com/user-attachments/assets/9312d3e3-9f20-43c3-9e9d-19f557521b95"
/> | <img width="1426" alt="Screenshot 2025-01-08 at 11 27 13 AM"
src="https://github.com/user-attachments/assets/1521f019-c558-441d-b99a-68a7ff8a8d92"
/> |

Release Notes:

- N/A

Change summary

crates/extensions_ui/src/extension_suggest.rs |  4 +-
crates/workspace/src/notifications.rs         | 33 ++++++++++++--------
2 files changed, 21 insertions(+), 16 deletions(-)

Detailed changes

crates/extensions_ui/src/extension_suggest.rs

@@ -175,7 +175,7 @@ pub(crate) fn suggest(buffer: Model<Buffer>, cx: &mut ViewContext<Workspace>) {
                     "Do you want to install the recommended '{}' extension for '{}' files?",
                     extension_id, file_name_or_extension
                 ))
-                .with_click_message("Yes")
+                .with_click_message("Yes, install extension")
                 .on_click({
                     let extension_id = extension_id.clone();
                     move |cx| {
@@ -186,7 +186,7 @@ pub(crate) fn suggest(buffer: Model<Buffer>, cx: &mut ViewContext<Workspace>) {
                         });
                     }
                 })
-                .with_secondary_click_message("No")
+                .with_secondary_click_message("No, don't install it")
                 .on_secondary_click(move |cx| {
                     let key = language_extension_key(&extension_id);
                     db::write_and_log(cx, move || {

crates/workspace/src/notifications.rs

@@ -411,12 +411,10 @@ impl EventEmitter<DismissEvent> for ErrorMessagePrompt {}
 
 pub mod simple_message_notification {
     use gpui::{
-        div, DismissEvent, EventEmitter, InteractiveElement, ParentElement, Render, SharedString,
-        StatefulInteractiveElement, Styled, ViewContext,
+        div, DismissEvent, EventEmitter, ParentElement, Render, SharedString, Styled, ViewContext,
     };
     use std::sync::Arc;
     use ui::prelude::*;
-    use ui::{h_flex, v_flex, Button, Icon, IconName, Label, StyledExt};
 
     pub struct MessageNotification {
         message: SharedString,
@@ -482,36 +480,43 @@ pub mod simple_message_notification {
     impl Render for MessageNotification {
         fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
             v_flex()
+                .p_3()
+                .gap_2()
                 .elevation_3(cx)
-                .p_4()
                 .child(
                     h_flex()
+                        .gap_4()
                         .justify_between()
                         .child(div().max_w_80().child(Label::new(self.message.clone())))
                         .child(
-                            div()
-                                .id("cancel")
-                                .child(Icon::new(IconName::Close))
-                                .cursor_pointer()
+                            IconButton::new("close", IconName::Close)
                                 .on_click(cx.listener(|this, _, cx| this.dismiss(cx))),
                         ),
                 )
                 .child(
                     h_flex()
-                        .gap_3()
+                        .gap_2()
                         .children(self.click_message.iter().map(|message| {
-                            Button::new(message.clone(), message.clone()).on_click(cx.listener(
-                                |this, _, cx| {
+                            Button::new(message.clone(), message.clone())
+                                .label_size(LabelSize::Small)
+                                .icon(IconName::Check)
+                                .icon_position(IconPosition::Start)
+                                .icon_size(IconSize::Small)
+                                .icon_color(Color::Success)
+                                .on_click(cx.listener(|this, _, cx| {
                                     if let Some(on_click) = this.on_click.as_ref() {
                                         (on_click)(cx)
                                     };
                                     this.dismiss(cx)
-                                },
-                            ))
+                                }))
                         }))
                         .children(self.secondary_click_message.iter().map(|message| {
                             Button::new(message.clone(), message.clone())
-                                .style(ButtonStyle::Filled)
+                                .label_size(LabelSize::Small)
+                                .icon(IconName::Close)
+                                .icon_position(IconPosition::Start)
+                                .icon_size(IconSize::Small)
+                                .icon_color(Color::Error)
                                 .on_click(cx.listener(|this, _, cx| {
                                     if let Some(on_click) = this.secondary_on_click.as_ref() {
                                         (on_click)(cx)