From 75a82fa8a27b0b147df57ad4a80b8e9681f57d0d Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Fri, 8 Nov 2024 14:41:39 -0600
Subject: [PATCH] user_circles: Introduce circle icons to typeahead.

---
 web/styles/typeahead.css                | 16 +++++++---------
 web/templates/typeahead_list_item.hbs   |  2 +-
 web/tests/composebox_typeahead.test.cjs |  2 +-
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/web/styles/typeahead.css b/web/styles/typeahead.css
index b03c6d59ff..6375996810 100644
--- a/web/styles/typeahead.css
+++ b/web/styles/typeahead.css
@@ -51,17 +51,15 @@
                 outline: 0;
             }
 
-            /* styles defined for user-circle here only deal with positioning of user presence circles
-            in typeahead list in order to ensure they are rendered correctly in in all screen sizes.
-            Most of the style rules related to color, gradient etc. which are generally common throughout
-            the app are defined in user_circles.css and are not overridden here. */
             .user-circle {
-                width: var(--length-user-status-circle);
-                height: var(--length-user-status-circle);
-                position: relative;
-                left: -2px;
-                flex-shrink: 0;
+                /* 11px at 16px/1em */
+                font-size: 0.6875em;
                 align-self: center;
+                /* TODO: A grid rewrite of typeahead rows
+                   should help to obviate these kinds of
+                   fiddly spacing hacks. */
+                margin-right: 2px;
+                margin-left: -2px;
             }
 
             .typeahead-text-container {
diff --git a/web/templates/typeahead_list_item.hbs b/web/templates/typeahead_list_item.hbs
index 203d4fed92..a3d5c4d23a 100644
--- a/web/templates/typeahead_list_item.hbs
+++ b/web/templates/typeahead_list_item.hbs
@@ -6,7 +6,7 @@
     {{/if}}
 {{else if is_person}}
     {{#if user_circle_class}}
-    <span class="{{user_circle_class}} user-circle"></span>
+    <span class="zulip-icon zulip-icon-{{user_circle_class}} {{user_circle_class}} user-circle"></span>
     {{/if}}
     {{#if has_image}}
     <img class="typeahead-image" src="{{ img_src }}" />
diff --git a/web/tests/composebox_typeahead.test.cjs b/web/tests/composebox_typeahead.test.cjs
index 571ddbdb8e..0bbaa96fc6 100644
--- a/web/tests/composebox_typeahead.test.cjs
+++ b/web/tests/composebox_typeahead.test.cjs
@@ -1190,7 +1190,7 @@ test("initialize", ({override, override_rewire, mock_template}) => {
                 ct.get_or_set_token_for_testing("othello");
                 actual_value = options.highlighter_html(othello_item);
                 expected_value =
-                    `    <span class="user-circle-offline user-circle"></span>\n` +
+                    `    <span class="zulip-icon zulip-icon-user-circle-offline user-circle-offline user-circle"></span>\n` +
                     `    <img class="typeahead-image" src="/avatar/${othello.user_id}" />\n` +
                     '<div class="typeahead-text-container">\n' +
                     '    <strong class="typeahead-strong-section">Othello, the Moor of Venice</strong>    <span class="autocomplete_secondary">othello@zulip.com</span>' +