From 45cf03bf08971ee240efd7f20df490ec495b7635 Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Thu, 7 Nov 2024 13:11:25 -0600
Subject: [PATCH] user_circles: Introduce icons to Inbox, Recent conversations
 views.

---
 web/styles/app_variables.css           |  5 +----
 web/styles/inbox.css                   | 12 +++++++-----
 web/styles/recent_view.css             |  9 ---------
 web/templates/inbox_view/inbox_row.hbs |  4 ++--
 web/templates/recent_view_row.hbs      |  2 +-
 5 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index ba28390be8..3c52077bb8 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -504,9 +504,6 @@
     /* User circles. */
     /* 8px at 14px/1em */
     --length-user-status-circle: 0.5714em;
-    /* Shrink the user activity circle for the Recent Conversations context. */
-    /* 7px at 14px/1em */
-    --length-user-status-circle-recent-conversations: 0.5em;
 
     /* Overlay heights for streams modal */
     --overlay-container-height: 95vh;
@@ -1429,7 +1426,7 @@
     );
     --color-tab-picker-icon: hsl(0deg 0% 80%);
     --color-user-circle-active: hsl(137deg 47% 50%);
-    --color-user-circle-idle: hsl(55deg 41% 32%);
+    --color-user-circle-idle: hsl(28deg 41% 42%);
     --color-user-circle-empty: hsl(228deg 10% 70% / 22%);
     --color-user-circle-empty-no-alpha: color-mix(
         in srgb,
diff --git a/web/styles/inbox.css b/web/styles/inbox.css
index 0d548f0005..0d073b9aa6 100644
--- a/web/styles/inbox.css
+++ b/web/styles/inbox.css
@@ -257,12 +257,14 @@
             }
 
             .user_circle {
-                /* size of the user activity circle */
-                /* 6px at 15px/1em */
-                min-width: 0.4em;
-                height: 0.4em;
+                /* 8px at 16px/1em */
+                font-size: 0.5em;
+                /* TODO: Fix up inbox row layout so that
+                   this min-width value doesn't maintain
+                   lefthand alignment up and down the view. */
+                /* ~8.4px at 8px/1em */
+                min-width: 1.05em;
                 margin-right: 5px;
-                top: 0;
             }
 
             .zulip-icon-bot,
diff --git a/web/styles/recent_view.css b/web/styles/recent_view.css
index c864c29dfb..4328327639 100644
--- a/web/styles/recent_view.css
+++ b/web/styles/recent_view.css
@@ -514,15 +514,6 @@
             .zulip-icon.zulip-icon-bot {
                 opacity: 0.6;
             }
-
-            .user_circle {
-                min-width: var(
-                    --length-user-status-circle-recent-conversations
-                );
-                height: var(--length-user-status-circle-recent-conversations);
-                float: left;
-                position: unset;
-            }
         }
 
         .user_status_icon_wrapper {
diff --git a/web/templates/inbox_view/inbox_row.hbs b/web/templates/inbox_view/inbox_row.hbs
index 6a9fb465ef..7f159fb341 100644
--- a/web/templates/inbox_view/inbox_row.hbs
+++ b/web/templates/inbox_view/inbox_row.hbs
@@ -14,7 +14,7 @@
                                 {{else if is_group}}
                                 <span class="zulip-icon zulip-icon-triple-users" aria-hidden="true"></span>
                                 {{else}}
-                                <span class="{{user_circle_class}} user_circle" data-presence-indicator-user-id="{{user_ids_string}}"></span>
+                                <span class="zulip-icon zulip-icon-user-status-tight {{user_circle_class}} user_circle" data-presence-indicator-user-id="{{user_ids_string}}"></span>
                                 {{/if}}
                                 <span class="recipients_name">{{{rendered_dm_with}}}</span>
                             </span>
@@ -26,7 +26,7 @@
                         </div>
                     {{else if is_topic}}
                         {{!-- Invisible user circle element for alignment of topic text with DM user name --}}
-                        <span class="user_circle_green user_circle invisible"></span>
+                        <span class="zulip-icon zulip-icon-user-status user_circle_green user_circle invisible"></span>
                         <div class="inbox-topic-name">
                             <a tabindex="-1" href="{{topic_url}}">{{topic_name}}</a>
                         </div>
diff --git a/web/templates/recent_view_row.hbs b/web/templates/recent_view_row.hbs
index ed33e0fc82..07952bbc92 100644
--- a/web/templates/recent_view_row.hbs
+++ b/web/templates/recent_view_row.hbs
@@ -21,7 +21,7 @@
                     {{else if is_bot}}
                     <span class="zulip-icon zulip-icon-bot" aria-hidden="true"></span>
                     {{else}}
-                    <span class="{{user_circle_class}} user_circle" data-presence-indicator-user-id="{{user_ids_string}}"></span>
+                    <span class="zulip-icon zulip-icon-user-status {{user_circle_class}} user_circle" data-presence-indicator-user-id="{{user_ids_string}}"></span>
                     {{/if}}
                 </span>
             </div>