Style avatar image with border and rounded corners

Co-Authored-By: Max Brunsfeld <maxbrunsfeld@gmail.com>

zed/assets/themes/_base.toml

@@ -8,8 +8,9 @@ pane_divider = { width = 1, color = "$border.0" }
 [workspace.titlebar]
 border = { width = 1, bottom = true, color = "$border.0" }
 title = "$text.0"
-icon_width = 16
+avatar_width = 20
 icon_signed_out = "$text.2.color"
+avatar = { corner_radius = 10, border = { width = 1, color = "#00000088" } }
 
 [workspace.tab]
 text = "$text.2"
@@ -28,7 +29,7 @@ background = "$surface.1"
 text = "$text.0"
 
 [workspace.sidebar]
-width = 36
+width = 38
 border = { right = true, width = 1, color = "$border.0" }
 
 [workspace.sidebar.resize_handle]
@@ -37,7 +38,7 @@ background = "$border.0"
 
 [workspace.sidebar.icon]
 color = "$text.2.color"
-height = 16
+height = 18
 
 [workspace.sidebar.active_icon]
 extends = "$workspace.sidebar.icon"

zed/src/theme.rs

@@ -4,7 +4,7 @@ mod theme_registry;
 use anyhow::Result;
 use gpui::{
     color::Color,
-    elements::{ContainerStyle, LabelStyle},
+    elements::{ContainerStyle, ImageStyle, LabelStyle},
     fonts::{HighlightStyle, TextStyle},
     Border,
 };
@@ -47,8 +47,9 @@ pub struct Titlebar {
     #[serde(flatten)]
     pub container: ContainerStyle,
     pub title: TextStyle,
-    pub icon_width: f32,
+    pub avatar_width: f32,
     pub icon_signed_out: Color,
+    pub avatar: ImageStyle,
 }
 
 #[derive(Clone, Deserialize)]

zed/src/workspace.rs

@@ -963,7 +963,9 @@ impl Workspace {
             .as_ref()
             .and_then(|user| user.avatar.clone())
         {
-            Image::new(avatar).boxed()
+            Image::new(avatar)
+                .with_style(theme.workspace.titlebar.avatar)
+                .boxed()
         } else {
             Svg::new("icons/signed-out-12.svg")
                 .with_color(theme.workspace.titlebar.icon_signed_out)
@@ -973,7 +975,7 @@ impl Workspace {
         ConstrainedBox::new(
             Align::new(
                 ConstrainedBox::new(avatar)
-                    .with_width(theme.workspace.titlebar.icon_width)
+                    .with_width(theme.workspace.titlebar.avatar_width)
                     .boxed(),
             )
             .boxed(),