crates/device/src/lib.rs

@@ -15,7 +15,7 @@ use state::{Announcement, NostrRegistry, StateEvent, TIMEOUT, app_name};
 use theme::ActiveTheme;
 use ui::avatar::Avatar;
 use ui::button::{Button, ButtonVariants};
-use ui::notification::Notification;
+use ui::notification::{Notification, NotificationKind};
 use ui::{Disableable, IconName, Sizable, StyledExt, WindowExtension, h_flex, v_flex};
 
 const IDENTIFIER: &str = "coop:device";
@@ -597,8 +597,8 @@ impl DeviceRegistry {
         Notification::new()
             .type_id::<DeviceNotification>(key)
             .autohide(false)
-            .icon(IconName::UserKey)
-            .title(SharedString::from("New request"))
+            .with_kind(NotificationKind::Info)
+            .title("Encryption Key Request")
             .content(move |_this, _window, cx| {
                 v_flex()
                     .gap_2()
@@ -621,7 +621,7 @@ impl DeviceRegistry {
                                             .font_semibold()
                                             .text_xs()
                                             .text_color(cx.theme().text_muted)
-                                            .child(SharedString::from("Requester:")),
+                                            .child(SharedString::from("From:")),
                                     )
                                     .child(
                                         div()
@@ -668,8 +668,6 @@ impl DeviceRegistry {
 
                 Button::new("approve")
                     .label("Approve")
-                    .small()
-                    .primary()
                     .loading(loading.get())
                     .disabled(loading.get())
                     .on_click({

crates/relay_auth/src/lib.rs

@@ -16,8 +16,8 @@ use smallvec::{SmallVec, smallvec};
 use state::NostrRegistry;
 use theme::ActiveTheme;
 use ui::button::{Button, ButtonVariants};
-use ui::notification::Notification;
-use ui::{Disableable, IconName, Sizable, StyledExt, WindowExtension, v_flex};
+use ui::notification::{Notification, NotificationKind};
+use ui::{Disableable, IconName, Sizable, WindowExtension, v_flex};
 
 const AUTH_MESSAGE: &str =
     "Approve the authentication request to allow Coop to continue sending or receiving events.";
@@ -327,8 +327,8 @@ impl RelayAuth {
         Notification::new()
             .type_id::<AuthNotification>(challenge)
             .autohide(false)
-            .icon(IconName::Warning)
-            .title(SharedString::from("Authentication Required"))
+            .with_kind(NotificationKind::Info)
+            .title("Authentication Required")
             .content(move |_this, _window, cx| {
                 v_flex()
                     .gap_2()
@@ -344,7 +344,6 @@ impl RelayAuth {
                             .px_1p5()
                             .rounded_sm()
                             .text_xs()
-                            .font_semibold()
                             .bg(cx.theme().elevated_surface_background)
                             .text_color(cx.theme().text)
                             .child(url.clone()),
@@ -357,8 +356,6 @@ impl RelayAuth {
 
                 Button::new("approve")
                     .label("Approve")
-                    .small()
-                    .primary()
                     .loading(loading.get())
                     .disabled(loading.get())
                     .on_click({

crates/ui/src/notification.rs

@@ -295,10 +295,13 @@ impl Render for Notification {
             .clone()
             .map(|builder| builder(self, window, cx));
 
-        let action = self
-            .action_builder
-            .clone()
-            .map(|builder| builder(self, window, cx).small().mr_3p5());
+        let action = self.action_builder.clone().map(|builder| {
+            builder(self, window, cx)
+                .xsmall()
+                .primary()
+                .px_3()
+                .font_semibold()
+        });
 
         let icon = match self.kind {
             None => self.icon.clone(),
@@ -360,14 +363,8 @@ impl Render for Notification {
                     })
                     .when_some(content, |this, content| this.child(content))
                     .when_some(action, |this, action| {
-                        this.child(
-                            h_flex()
-                                .w_full()
-                                .flex_1()
-                                .gap_1()
-                                .justify_end()
-                                .child(action),
-                        )
+                        this.gap_2()
+                            .child(h_flex().w_full().flex_1().justify_end().child(action))
                     }),
             )
             .child(