From 4620e5bf0cec186305039378850b861d3e6d81d2 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 icon to user typeahead.

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

diff --git a/web/styles/typeahead.css b/web/styles/typeahead.css
index c402d99352..060f2d71ab 100644
--- a/web/styles/typeahead.css
+++ b/web/styles/typeahead.css
@@ -51,17 +51,14 @@
                 outline: 0;
             }
 
-            /* styles defined for user_circle here only deal with positioning of user_presence_circle
-            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;
+                /* 8px at 16px/1em */
+                font-size: 0.5em;
                 align-self: center;
+                /* TODO: Revisit the use of flebox on these
+                   typeahead lines to make this fiddly adjustment
+                   unnecessary. */
+                margin-right: 1px;
             }
 
             .typeahead-text-container {
diff --git a/web/templates/typeahead_list_item.hbs b/web/templates/typeahead_list_item.hbs
index 80436af44b..80b8832208 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-status-tight {{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 9ebded8755..f316ca7753 100644
--- a/web/tests/composebox_typeahead.test.cjs
+++ b/web/tests/composebox_typeahead.test.cjs
@@ -1169,7 +1169,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_empty user_circle"></span>\n` +
+                    `    <span class="zulip-icon zulip-icon-user-status-tight user_circle_empty 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>' +