From 8da90b9f0b6a1ed81e9c3b66e74b254ee73e2237 Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Thu, 7 Nov 2024 14:44:28 -0600
Subject: [PATCH] user_circles: Introduce icon to personal menu avatar.

---
 web/styles/popovers.css                            | 14 ++++++--------
 .../navbar/navbar_personal_menu_popover.hbs        |  2 +-
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/web/styles/popovers.css b/web/styles/popovers.css
index 3fc646e95e..3b4722030e 100644
--- a/web/styles/popovers.css
+++ b/web/styles/popovers.css
@@ -1099,15 +1099,13 @@ ul.popover-group-menu-member-list {
     }
 
     .status-circle {
+        /* 10px at 16px/1em */
+        font-size: 0.625em;
+        line-height: 1;
         position: absolute;
-        width: var(--length-user-status-circle);
-        height: var(--length-user-status-circle);
-        top: unset;
-        left: unset;
-        right: -1px;
-        bottom: -1px;
-        border: solid 1px var(--color-background);
-        border-radius: 50%;
+        right: 0;
+        bottom: 0;
+        -webkit-text-stroke: 1.5px var(--color-background-popover-menu);
     }
 
     .user_circle_empty {
diff --git a/web/templates/popovers/navbar/navbar_personal_menu_popover.hbs b/web/templates/popovers/navbar/navbar_personal_menu_popover.hbs
index ba22f4a5a2..e31ad7b940 100644
--- a/web/templates/popovers/navbar/navbar_personal_menu_popover.hbs
+++ b/web/templates/popovers/navbar/navbar_personal_menu_popover.hbs
@@ -5,7 +5,7 @@
                 <img class="avatar-image{{#if user_is_guest}} guest-avatar{{/if}}" src="{{user_avatar}}"/>
 
                 {{#if is_active }}
-                <span class="status-circle {{user_circle_class}} user_circle hidden-for-spectators" data-tippy-placement="bottom" data-tippy-content="{{user_last_seen_time_status}}"></span>
+                <span class="zulip-icon zulip-icon-user-status-tight status-circle {{user_circle_class}} user_circle hidden-for-spectators" data-tippy-placement="bottom" data-tippy-content="{{user_last_seen_time_status}}"></span>
                 {{/if}}
 
             </div>