From 36f807f1cc789367d17022524e4c1b601b8259fe Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Thu, 7 Nov 2024 15:02:55 -0600
Subject: [PATCH] user_circles: Introduce icon to user card avatar.

---
 web/styles/popovers.css                       | 21 +++++++++----------
 .../popovers/user_card/user_card_popover.hbs  |  2 +-
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/web/styles/popovers.css b/web/styles/popovers.css
index 3b4722030e..f6c8d9acf9 100644
--- a/web/styles/popovers.css
+++ b/web/styles/popovers.css
@@ -1009,13 +1009,17 @@ ul.popover-group-menu-member-list {
     }
 
     .popover-menu-user-presence {
+        /* 10px at 16px/1em */
+        font-size: 0.625em;
+        line-height: 1;
         position: absolute;
-        width: 8px;
-        height: 8px;
-        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 {
+            color: var(--color-user-circle-empty-no-alpha);
+        }
     }
 
     .popover-menu-user-info {
@@ -1048,11 +1052,6 @@ ul.popover-group-menu-member-list {
         text-overflow: ellipsis;
         white-space: nowrap;
     }
-
-    .user_circle_empty {
-        background-color: var(--color-background-popover-menu);
-        border-color: hsl(0deg 0% 50%);
-    }
 }
 
 .user-card-popover-email-field {
diff --git a/web/templates/popovers/user_card/user_card_popover.hbs b/web/templates/popovers/user_card/user_card_popover.hbs
index 5a6484d555..aceed534c5 100644
--- a/web/templates/popovers/user_card/user_card_popover.hbs
+++ b/web/templates/popovers/user_card/user_card_popover.hbs
@@ -3,7 +3,7 @@
         <div class="popover-menu-user-avatar-container">
             <img class="popover-menu-user-avatar{{#if user_is_guest}} guest-avatar{{/if}}" src="{{user_avatar}}" />
             {{#if (and is_active (not is_bot))}}
-                <div class="popover-menu-user-presence user_circle {{user_circle_class}} hidden-for-spectators" data-presence-indicator-user-id="{{user_id}}"></div>
+                <div class="popover-menu-user-presence zulip-icon zulip-icon-user-status-tight user_circle {{user_circle_class}} hidden-for-spectators" data-presence-indicator-user-id="{{user_id}}"></div>
             {{/if}}
         </div>
         <div class="popover-menu-user-info">