user_circles: Introduce icon to user card avatar.

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 {

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">