right_sidebar: Style presence icons for avatars showing.

web/styles/app_variables.css

@@ -872,6 +872,11 @@
     --color-user-circle-active: hsl(137deg 42% 47%);
     --color-user-circle-idle: hsl(45deg 56% 63%);
     --color-user-circle-empty: hsl(228deg 10% 50% / 25%);
+    --color-user-circle-empty-no-alpha: color-mix(
+        in srgb,
+        hsl(228deg 10% 50%) 50%,
+        hsl(0deg 100% 100%)
+    );
     /* hsl(229deg 9% 36%) corresponds to --grey-600.
        We use the hsl() equivalent directly since postcss-color-mix-function
        cannot dynamically resolve var() arguments. */
@@ -1426,6 +1431,11 @@
     --color-user-circle-active: hsl(137deg 47% 50%);
     --color-user-circle-idle: hsl(55deg 41% 32%);
     --color-user-circle-empty: hsl(228deg 10% 70% / 22%);
+    --color-user-circle-empty-no-alpha: color-mix(
+        in srgb,
+        hsl(228deg 10% 70%) 55%,
+        hsl(0deg 0% 0%)
+    );
     /* hsl(229deg 10% 70%) corresponds to --grey-400.
        We use the hsl() equivalent directly since postcss-color-mix-function
        cannot dynamically resolve var() arguments. */

web/styles/right_sidebar.css

@@ -144,8 +144,9 @@ $user_status_emoji_width: 24px;
             background-color: var(--color-buddy-list-highlighted-user);
             box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
 
-            .user_circle {
+            &.with_avatar .user_circle {
-                outline: 1px solid var(--color-buddy-list-highlighted-user);
+                -webkit-text-stroke: 1.5px
+                    var(--color-buddy-list-highlighted-user);
             }
         }
     }
@@ -156,20 +157,12 @@ $user_status_emoji_width: 24px;
     }
 
     .user_sidebar_entry.with_avatar .user_circle {
-        display: inline-block;
         position: absolute;
-        width: 0.5em;
+        /* 8px at 16px/1em */
-        height: 0.5em;
+        font-size: 0.5em;
-        top: 1.7em;
+        bottom: 0;
-        left: 1.7em;
+        right: 0;
-
+        -webkit-text-stroke: 1.5px var(--color-background);
-        &.user_circle_idle {
-            background: linear-gradient(
-                to bottom,
-                var(--color-background) 50%,
-                var(--color-user-circle-idle) 50%
-            );
-        }
 
         &.user_circle_empty {
             display: none;

web/styles/user_circles.css

@@ -1,7 +1,3 @@
-.user_sidebar_entry.with_avatar .user_circle {
-    outline: 1px solid var(--color-background);
-}
-
 .user_circle_green {
     color: var(--color-user-circle-active);
 }

web/styles/zulip.css

@@ -1025,6 +1025,7 @@ div.focused-message-list {
 
 .information-settings .user-profile-picture,
 .user_sidebar_entry.with_avatar .user-profile-picture {
+    position: relative;
     width: var(--right-sidebar-avatar-width);
     height: var(--right-sidebar-avatar-height);
 }

web/templates/presence_row.hbs

@@ -14,7 +14,7 @@
         {{else if user_list_style.WITH_AVATAR}}
             <div class="user-profile-picture avatar-preload-background">
                 <img loading="lazy" src="{{profile_picture}}"/>
-                <span class="zulip-icon zulip-icon-user-status {{user_circle_class}} user_circle"></span>
+                <span class="zulip-icon zulip-icon-user-status-tight {{user_circle_class}} user_circle"></span>
             </div>
             <a class="user-presence-link" href="{{href}}">
                 <div class="user-name-and-status-wrapper">