From f212f783312f50ab81a77fe5023ee10f3b90765a Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Tue, 25 Feb 2025 16:14:45 -0600
Subject: [PATCH] help_center: Update presentation of user circles.

---
 help/deactivate-or-reactivate-a-user.md |  5 +-
 help/status-and-availability.md         |  9 ++-
 web/styles/portico/markdown.css         | 80 ++++++++++++++-----------
 3 files changed, 52 insertions(+), 42 deletions(-)

diff --git a/help/deactivate-or-reactivate-a-user.md b/help/deactivate-or-reactivate-a-user.md
index e9d1e511bd..b628e66b56 100644
--- a/help/deactivate-or-reactivate-a-user.md
+++ b/help/deactivate-or-reactivate-a-user.md
@@ -19,7 +19,10 @@ When you deactivate a user:
   user will be disabled.
 
 * Other users will be able to see that the user has been deactivated (e.g., on
-  their [user card](/help/user-cards)).
+  their [user card](/help/user-cards)). In sidebars and elsewhere, a user's
+  [availability](/help/status-and-availability) will be replaced with a
+  deactivated icon
+  (<span class="user-circle user-circle-deactivated zulip-icon zulip-icon-user-circle-deactivated"></span>).
 
 * Even if your organization [allows users to join without an
   invitation](/help/restrict-account-creation#set-whether-invitations-are-required-to-join),
diff --git a/help/status-and-availability.md b/help/status-and-availability.md
index 4e44797988..34188bc9c7 100644
--- a/help/status-and-availability.md
+++ b/help/status-and-availability.md
@@ -8,8 +8,7 @@ status might be "📅 In a meeting" or "🏠 Working remotely". To make it easy
 notice, the status emoji is shown next to your name in the sidebars, message
 feed, and compose box.
 
-Your **availability** is a colored dot (like <span class="indicator green
-solid"></span>) that indicates if you're currently active on Zulip, idle,
+Your **availability** is a colored dot (like <span class="user-circle user-circle-active zulip-icon zulip-icon-user-circle-active"></span>) that indicates if you're currently active on Zulip, idle,
 or offline. You can also [go invisible](#invisible-mode) to appear offline
 to other users.
 
@@ -132,14 +131,14 @@ With the compact option, only status emoji are shown.
 
 There are three availability states:
 
-* **Active** (<span class="indicator green solid"></span>): Zulip is
+* **Active** (<span class="user-circle user-circle-active zulip-icon zulip-icon-user-circle-active"></span>): Zulip is
   open and in focus on web, desktop or mobile, or was in the last 140
   seconds.
 
-* **Idle** (<span class="indicator orange"></span>): Zulip is open on
+* **Idle** (<span class="user-circle user-circle-idle zulip-icon zulip-icon-user-circle-idle"></span>): Zulip is open on
   your computer (either desktop or web), but you are not active.
 
-* **Offline** (<span class="indicator grey"></span>): Zulip is not open
+* **Offline** (<span class="user-circle user-circle-offline zulip-icon zulip-icon-user-circle-offline"></span>): Zulip is not open
   on your computer, or you have turned on invisible mode.
 
 You can see when someone offline was last active by hovering over their
diff --git a/web/styles/portico/markdown.css b/web/styles/portico/markdown.css
index fdc97c762c..cb4a12c6f4 100644
--- a/web/styles/portico/markdown.css
+++ b/web/styles/portico/markdown.css
@@ -12,6 +12,27 @@
         transparent
     );
     --color-copy-button-success: hsl(146deg 90% 27%);
+    /* User circles */
+    /* stylelint-disable color-no-hex */
+    --color-user-circle-active: light-dark(#43a35e, #4cdc75);
+    --color-user-circle-idle: light-dark(#f5b266, #ae640a);
+    --color-user-circle-offline: light-dark(#c1c6d7, #454854);
+    --color-user-circle-deactivated: hsl(0deg 0% 50%);
+    --gradient-user-circle-idle: linear-gradient(
+        to right,
+        var(--color-user-circle-idle) 5%,
+        light-dark(
+                color-mix(
+                    in srgb,
+                    var(--color-user-circle-idle) 78.9%,
+                    transparent
+                ),
+                var(--color-user-circle-idle)
+            )
+            25%,
+        transparent 100%
+    );
+    /* stylelint-enable color-no-hex */
 
     font-weight: 400;
     font-size: 1rem;
@@ -309,48 +330,35 @@
         font-weight: 600;
     }
 
-    .indicator {
-        position: relative;
+    .user-circle {
+        /* We make the circles slightly larger than in the
+           sidebar UI, so they look good next to the copy. */
+        font-size: 0.7em;
         display: inline-block;
-        top: 1px;
-        padding: 5px;
-        border-radius: 6px;
+        /* 1.5px at 11.2px/1em */
+        vertical-align: 0.1339em;
+    }
 
-        &.grey {
-            border: 1px solid hsl(0deg 0% 80%);
-        }
+    .user-circle-active {
+        color: var(--color-user-circle-active);
+    }
 
-        &.grey-line {
-            border: 1px solid hsl(0deg 0% 80%);
-            top: 2px;
+    .user-circle-idle {
+        background: var(--gradient-user-circle-idle);
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
 
-            &::after {
-                content: "";
-                background: hsl(0deg 0% 80%);
-                height: 1.5px;
-                width: 6px;
-                display: block;
-                margin: 0.5px -2px;
-            }
-        }
+    .with_avatar .user-circle-idle {
+        background: var(--gradient-user-circle-idle-avatar);
+    }
 
-        &.orange {
-            border: 1px solid hsl(29deg 84% 51%);
-            background: linear-gradient(
-                to bottom,
-                hsl(0deg 0% 100% / 0%) 50%,
-                hsl(29deg 84% 51%) 50%
-            );
-        }
+    .user-circle-offline {
+        color: var(--color-user-circle-offline);
+    }
 
-        &.green {
-            border: 1px solid hsl(106deg 74% 44%);
-            background-color: hsl(106deg 74% 44% / 30%);
-        }
-
-        &.green.solid {
-            background-color: hsl(106deg 74% 44%);
-        }
+    .user-circle-deactivated {
+        color: var(--color-user-circle-deactivated);
     }
 
     & kbd {