improve notification ui

crates/ui/src/notification.rs

@@ -14,7 +14,7 @@ use theme::{ActiveTheme, Anchor};
 
 use crate::animation::cubic_bezier;
 use crate::button::{Button, ButtonVariants as _};
-use crate::{Icon, IconName, Sizable as _, StyledExt, h_flex, v_flex};
+use crate::{Icon, IconName, Sizable as _, Size, StyledExt, h_flex, v_flex};
 
 #[derive(Debug, Clone, Copy, Default)]
 pub enum NotificationKind {
@@ -28,12 +28,18 @@ pub enum NotificationKind {
 impl NotificationKind {
     fn icon(&self, cx: &App) -> Icon {
         match self {
-            Self::Info => Icon::new(IconName::Info).text_color(cx.theme().icon),
+            Self::Info => Icon::new(IconName::Info)
-            Self::Success => Icon::new(IconName::CheckCircle).text_color(cx.theme().icon_accent),
+                .with_size(Size::Medium)
-            Self::Warning => Icon::new(IconName::Warning).text_color(cx.theme().text_warning),
+                .text_color(cx.theme().icon),
-            Self::Error => {
+            Self::Success => Icon::new(IconName::CheckCircle)
-                Icon::new(IconName::CloseCircle).text_color(cx.theme().danger_foreground)
+                .with_size(Size::Medium)
-            }
+                .text_color(cx.theme().icon_accent),
+            Self::Warning => Icon::new(IconName::Warning)
+                .with_size(Size::Medium)
+                .text_color(cx.theme().text_warning),
+            Self::Error => Icon::new(IconName::CloseCircle)
+                .with_size(Size::Medium)
+                .text_color(cx.theme().danger_foreground),
         }
     }
 }
@@ -284,9 +290,6 @@ impl Styled for Notification {
 }
 impl Render for Notification {
     fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
-        let closing = self.closing;
-        let placement = cx.theme().notification.placement;
-
         let content = self
             .content_builder
             .clone()
@@ -312,6 +315,11 @@ impl Render for Notification {
             _ => cx.theme().text,
         };
 
+        let closing = self.closing;
+        let has_title = self.title.is_some();
+        let only_message = !has_title && content.is_none() && action.is_none();
+        let placement = cx.theme().notification.placement;
+
         h_flex()
             .id("notification")
             .group("")
@@ -328,34 +336,40 @@ impl Render for Notification {
             .gap_2()
             .justify_start()
             .items_start()
+            .when(only_message, |this| this.items_center())
             .refine_style(&self.style)
             .when_some(icon, |this, icon| {
-                this.child(
+                this.child(div().flex_shrink_0().child(icon))
-                    div()
-                        .flex_shrink_0()
-                        .when(self.message.is_some(), |this| this.pt_0p5())
-                        .child(icon),
-                )
             })
             .child(
                 v_flex()
                     .flex_1()
                     .overflow_hidden()
                     .when_some(self.title.clone(), |this, title| {
-                        this.child(div().text_sm().font_semibold().child(title))
+                        this.child(h_flex().h_5().text_sm().font_semibold().child(title))
                     })
                     .when_some(self.message.clone(), |this, message| {
                         this.child(
                             div()
                                 .text_sm()
-                                .text_color(cx.theme().text_muted)
+                                .when(has_title, |this| {
+                                    this.mt_2().text_color(cx.theme().text_muted)
+                                })
                                 .line_height(relative(1.3))
                                 .child(message),
                         )
                     })
                     .when_some(content, |this, content| this.child(content))
                     .when_some(action, |this, action| {
-                        this.child(h_flex().flex_1().gap_1().justify_end().child(action))
+                        this.child(
+                            h_flex()
+                                .mt_2()
+                                .w_full()
+                                .flex_1()
+                                .gap_1()
+                                .justify_end()
+                                .child(action),
+                        )
                     }),
             )
             .child(