Style project share notification (#3706)

Marshall Bowers created 2 years ago

This PR styles the project share notification, so we're not staring a
red rectangle.

<img width="425" alt="Screenshot 2023-12-18 at 6 06 14 PM"
src="https://github.com/zed-industries/zed/assets/1486634/7ae9a2d3-d5d9-427c-9125-3a47df5f6a2f">

Release Notes:

- N/A

Change summary

crates/collab_ui2/src/notifications/project_shared_notification.rs | 111 
1 file changed, 63 insertions(+), 48 deletions(-)

Detailed changes

crates/collab_ui2/src/notifications/project_shared_notification.rs

@@ -3,11 +3,12 @@ use call::{room, ActiveCall};
 use client::User;
 use collections::HashMap;
 use gpui::{
-    px, AppContext, Div, Element, ParentElement, Render, RenderOnce, Size, Styled, ViewContext,
-    VisualContext,
+    img, px, AppContext, Div, ParentElement, Render, Size, Styled, ViewContext, VisualContext,
 };
+use settings::Settings;
 use std::sync::{Arc, Weak};
-use ui::{h_stack, v_stack, Avatar, Button, Clickable, Label};
+use theme::ThemeSettings;
+use ui::{h_stack, prelude::*, v_stack, Button, Label};
 use workspace::AppState;
 
 pub fn init(app_state: &Arc<AppState>, cx: &mut AppContext) {
@@ -21,8 +22,8 @@ pub fn init(app_state: &Arc<AppState>, cx: &mut AppContext) {
             worktree_root_names,
         } => {
             let window_size = Size {
-                width: px(380.),
-                height: px(64.),
+                width: px(400.),
+                height: px(96.),
             };
 
             for screen in cx.displays() {
@@ -116,56 +117,70 @@ impl ProjectSharedNotification {
             });
         }
     }
-
-    fn render_owner(&self) -> impl Element {
-        h_stack()
-            .child(Avatar::new(self.owner.avatar_uri.clone()))
-            .child(
-                v_stack()
-                    .child(Label::new(self.owner.github_login.clone()))
-                    .child(Label::new(format!(
-                        "is sharing a project in Zed{}",
-                        if self.worktree_root_names.is_empty() {
-                            ""
-                        } else {
-                            ":"
-                        }
-                    )))
-                    .children(if self.worktree_root_names.is_empty() {
-                        None
-                    } else {
-                        Some(Label::new(self.worktree_root_names.join(", ")))
-                    }),
-            )
-    }
-
-    fn render_buttons(&self, cx: &mut ViewContext<Self>) -> impl Element {
-        let this = cx.view().clone();
-        v_stack()
-            .child(Button::new("open", "Open").render(cx).on_click({
-                let this = this.clone();
-                move |_, cx| {
-                    this.update(cx, |this, cx| this.join(cx));
-                }
-            }))
-            .child(
-                Button::new("dismiss", "Dismiss")
-                    .render(cx)
-                    .on_click(move |_, cx| {
-                        this.update(cx, |this, cx| this.dismiss(cx));
-                    }),
-            )
-    }
 }
 
 impl Render for ProjectSharedNotification {
     type Element = Div;
 
     fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+        // TODO: Is there a better place for us to initialize the font?
+        let (ui_font, ui_font_size) = {
+            let theme_settings = ThemeSettings::get_global(cx);
+            (
+                theme_settings.ui_font.family.clone(),
+                theme_settings.ui_font_size.clone(),
+            )
+        };
+
+        cx.set_rem_size(ui_font_size);
+
         h_stack()
+            .font(ui_font)
+            .text_ui()
+            .justify_between()
             .size_full()
-            .bg(gpui::red())
-            .child(self.render_owner())
-            .child(self.render_buttons(cx))
+            .elevation_3(cx)
+            .p_2()
+            .gap_2()
+            .child(
+                h_stack()
+                    .gap_2()
+                    .child(
+                        img(self.owner.avatar_uri.clone())
+                            .w_16()
+                            .h_16()
+                            .rounded_full(),
+                    )
+                    .child(
+                        v_stack()
+                            .child(Label::new(self.owner.github_login.clone()))
+                            .child(Label::new(format!(
+                                "is sharing a project in Zed{}",
+                                if self.worktree_root_names.is_empty() {
+                                    ""
+                                } else {
+                                    ":"
+                                }
+                            )))
+                            .children(if self.worktree_root_names.is_empty() {
+                                None
+                            } else {
+                                Some(Label::new(self.worktree_root_names.join(", ")))
+                            }),
+                    ),
+            )
+            .child(
+                v_stack()
+                    .child(Button::new("open", "Open").on_click(cx.listener(
+                        move |this, _event, cx| {
+                            this.join(cx);
+                        },
+                    )))
+                    .child(Button::new("dismiss", "Dismiss").on_click(cx.listener(
+                        move |this, _event, cx| {
+                            this.dismiss(cx);
+                        },
+                    ))),
+            )
     }
 }