From 28830c9371bfa010b7e6afc1c6e2808a7a3acccd Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Thu, 7 Nov 2024 12:08:52 -0600
Subject: [PATCH] right_sidebar: Style presence icons for avatars showing.

---
 web/shared/icons/user-status-tight.svg | Bin 0 -> 345 bytes
 web/styles/app_variables.css           |  10 ++++++++++
 web/styles/right_sidebar.css           |  23 ++++++++---------------
 web/styles/user_circles.css            |   4 ----
 web/styles/zulip.css                   |   1 +
 web/templates/presence_row.hbs         |   2 +-
 6 files changed, 20 insertions(+), 20 deletions(-)
 create mode 100644 web/shared/icons/user-status-tight.svg

diff --git a/web/shared/icons/user-status-tight.svg b/web/shared/icons/user-status-tight.svg
new file mode 100644
index 0000000000000000000000000000000000000000..881789826e43179587f2596e9fb52bef8a877186
GIT binary patch
literal 345
zcmYL^K~ID*5QXpjig7$sri(!^lub0zlL-gCcw?nPBin9Dv&Db!um_mK<Tc-$*O~gb
zoF}+yKO1KiN<j$Pe!Je-LE-1eYg*#5N$R^ag*R=r?}F~(^arh3^mOim^U!(+xhRB`
zkf!XNuLDHWhf!gPFlsZ5;U=#}$7i=FBp@h(A%AXXg<}Ypr!0#xikJ)MhwMN^83$pL
z09SqK!U(2U*s?(QG1H{*o=sc`bMWq0E40pP1a`f1`~$pjFT{Z=nOD15Ny$u#$BN2A
g@`H9tw>jGBW?KpI+?KfBu+cU33o|}{UAsyC0ooc^W&i*H

literal 0
HcmV?d00001

diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index b4817cb639..ba28390be8 100644
--- a/web/styles/app_variables.css
+++ b/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. */
diff --git a/web/styles/right_sidebar.css b/web/styles/right_sidebar.css
index f71cb2fc83..5465544eb9 100644
--- a/web/styles/right_sidebar.css
+++ b/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 {
-                outline: 1px solid var(--color-buddy-list-highlighted-user);
+            &.with_avatar .user_circle {
+                -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;
-        height: 0.5em;
-        top: 1.7em;
-        left: 1.7em;
-
-        &.user_circle_idle {
-            background: linear-gradient(
-                to bottom,
-                var(--color-background) 50%,
-                var(--color-user-circle-idle) 50%
-            );
-        }
+        /* 8px at 16px/1em */
+        font-size: 0.5em;
+        bottom: 0;
+        right: 0;
+        -webkit-text-stroke: 1.5px var(--color-background);
 
         &.user_circle_empty {
             display: none;
diff --git a/web/styles/user_circles.css b/web/styles/user_circles.css
index 737a2a82f4..6d0d8a7b7d 100644
--- a/web/styles/user_circles.css
+++ b/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);
 }
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 6029a52fe9..bb701cc17d 100644
--- a/web/styles/zulip.css
+++ b/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);
 }
diff --git a/web/templates/presence_row.hbs b/web/templates/presence_row.hbs
index c95df753a0..2ef18cfb28 100644
--- a/web/templates/presence_row.hbs
+++ b/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">