Make follower avatars smaller (#6724)

Marshall Bowers and Conrad created

This PR makes the avatars of followers in a facepile smaller than the
leader's avatar.

<img width="227" alt="Screenshot 2024-01-25 at 1 42 14 PM"
src="https://github.com/zed-industries/zed/assets/1486634/defc22b4-4ae1-4d63-a0d8-53e3ca8cce04">

Release Notes:

- Adjusted the size of follower avatars to be smaller than the leader.

Co-authored-by: Conrad <conrad@zed.dev>

Change summary

crates/collab_ui/src/chat_panel.rs           |  8 +++++---
crates/collab_ui/src/collab_titlebar_item.rs |  4 +++-
crates/ui/src/components/avatar/avatar.rs    | 10 +++++-----
3 files changed, 13 insertions(+), 9 deletions(-)

Detailed changes

crates/collab_ui/src/chat_panel.rs 🔗

@@ -343,9 +343,11 @@ impl ChatPanel {
                 this.pt_3().child(
                     h_flex()
                         .text_ui_sm()
-                        .child(div().absolute().child(
-                            Avatar::new(message.sender.avatar_uri.clone()).size(cx.rem_size()),
-                        ))
+                        .child(
+                            div().absolute().child(
+                                Avatar::new(message.sender.avatar_uri.clone()).size(rems(1.)),
+                            ),
+                        )
                         .child(
                             div()
                                 .pl(cx.rem_size() + px(6.0))

crates/collab_ui/src/collab_titlebar_item.rs 🔗

@@ -542,7 +542,9 @@ impl CollabTitlebarItem {
                                     })?
                                     .clone();
 
-                                Some(Avatar::new(follower.avatar_uri.clone()))
+                                Some(div().mt(-px(4.)).child(
+                                    Avatar::new(follower.avatar_uri.clone()).size(rems(0.75)),
+                                ))
                             },
                         ))
                         .children(if extra_count > 0 {

crates/ui/src/components/avatar/avatar.rs 🔗

@@ -27,7 +27,7 @@ pub enum AvatarShape {
 #[derive(IntoElement)]
 pub struct Avatar {
     image: Img,
-    size: Option<Pixels>,
+    size: Option<AbsoluteLength>,
     border_color: Option<Hsla>,
     indicator: Option<AnyElement>,
 }
@@ -82,8 +82,8 @@ impl Avatar {
     }
 
     /// Size overrides the avatar size. By default they are 1rem.
-    pub fn size(mut self, size: impl Into<Option<Pixels>>) -> Self {
-        self.size = size.into();
+    pub fn size<L: Into<AbsoluteLength>>(mut self, size: impl Into<Option<L>>) -> Self {
+        self.size = size.into().map(Into::into);
         self
     }
 
@@ -105,8 +105,8 @@ impl RenderOnce for Avatar {
             px(0.)
         };
 
-        let image_size = self.size.unwrap_or_else(|| cx.rem_size());
-        let container_size = image_size + border_width * 2.;
+        let image_size = self.size.unwrap_or_else(|| rems(1.).into());
+        let container_size = image_size.to_pixels(cx.rem_size()) + border_width * 2.;
 
         div()
             .size(container_size)