Replace signed out silhouette with a "Sign in" label

Antonio Scandurra created 4 years ago

Change summary

crates/theme/src/lib.rs             |  2 +
crates/workspace/src/lib.rs         | 45 +++++++++++++++++-------------
crates/zed/assets/themes/_base.toml | 10 ++++++
3 files changed, 38 insertions(+), 19 deletions(-)

Detailed changes

crates/theme/src/lib.rs

@@ -47,6 +47,8 @@ pub struct Titlebar {
     pub offline_icon: OfflineIcon,
     pub icon_color: Color,
     pub avatar: ImageStyle,
+    pub sign_in_prompt: ContainedText,
+    pub hovered_sign_in_prompt: ContainedText,
     pub outdated_warning: ContainedText,
 }
 

crates/workspace/src/lib.rs

@@ -953,36 +953,43 @@ impl Workspace {
 
     fn render_avatar(&self, cx: &mut RenderContext<Self>) -> ElementBox {
         let theme = &self.settings.borrow().theme;
-        let avatar = if let Some(avatar) = self
+        if let Some(avatar) = self
             .user_store
             .read(cx)
             .current_user()
             .and_then(|user| user.avatar.clone())
         {
-            Image::new(avatar)
-                .with_style(theme.workspace.titlebar.avatar)
-                .boxed()
+            ConstrainedBox::new(
+                Align::new(
+                    ConstrainedBox::new(
+                        Image::new(avatar)
+                            .with_style(theme.workspace.titlebar.avatar)
+                            .boxed(),
+                    )
+                    .with_width(theme.workspace.titlebar.avatar_width)
+                    .boxed(),
+                )
+                .boxed(),
+            )
+            .with_width(theme.workspace.right_sidebar.width)
+            .boxed()
         } else {
-            MouseEventHandler::new::<Authenticate, _, _, _>(0, cx, |_, _| {
-                Svg::new("icons/signed-out-12.svg")
-                    .with_color(theme.workspace.titlebar.icon_color)
+            MouseEventHandler::new::<Authenticate, _, _, _>(0, cx, |state, _| {
+                let style = if state.hovered {
+                    &theme.workspace.titlebar.hovered_sign_in_prompt
+                } else {
+                    &theme.workspace.titlebar.sign_in_prompt
+                };
+                Label::new("Sign in".to_string(), style.text.clone())
+                    .contained()
+                    .with_style(style.container)
                     .boxed()
             })
             .on_click(|cx| cx.dispatch_action(Authenticate))
             .with_cursor_style(CursorStyle::PointingHand)
+            .aligned()
             .boxed()
-        };
-
-        ConstrainedBox::new(
-            Align::new(
-                ConstrainedBox::new(avatar)
-                    .with_width(theme.workspace.titlebar.avatar_width)
-                    .boxed(),
-            )
-            .boxed(),
-        )
-        .with_width(theme.workspace.right_sidebar.width)
-        .boxed()
+        }
     }
 }
 

crates/zed/assets/themes/_base.toml

@@ -13,6 +13,16 @@ icon_color = "$text.2.color"
 avatar = { corner_radius = 10, border = { width = 1, color = "#00000088" } }
 outdated_warning = { extends = "$text.2", size = 13 }
 
+[workspace.titlebar.sign_in_prompt]
+extends = "$text.2"
+size = 13
+underline = true
+padding = { right = 12 }
+
+[workspace.titlebar.hovered_sign_in_prompt]
+extends = "$workspace.titlebar.sign_in_prompt"
+color = "$text.1.color"
+
 [workspace.titlebar.offline_icon]
 padding = { right = 4 }
 width = 16