From a393d9d4956e0a2dc67ae49b31d19d267aedfb7c Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Thu, 13 Mar 2025 06:05:33 +0000
Subject: [PATCH] user_group: Use double user icon instead of tripe user icon.

---
 web/shared/icons/user-group.svg                    | 3 +++
 web/styles/input_pill.css                          | 2 +-
 web/styles/popovers.css                            | 2 +-
 web/styles/typeahead.css                           | 2 +-
 web/templates/popovers/user_group_info_popover.hbs | 4 ++--
 web/templates/typeahead_list_item.hbs              | 4 ++--
 web/templates/user_group_display_only_pill.hbs     | 2 +-
 web/tests/composebox_typeahead.test.cjs            | 2 +-
 8 files changed, 12 insertions(+), 9 deletions(-)
 create mode 100644 web/shared/icons/user-group.svg

diff --git a/web/shared/icons/user-group.svg b/web/shared/icons/user-group.svg
new file mode 100644
index 0000000000..6d9294291d
--- /dev/null
+++ b/web/shared/icons/user-group.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16">
+  <path fill="#000" d="M10 1.335a3.332 3.332 0 1 1 0 6.663 3.332 3.332 0 0 1 0-6.663Zm2.002 3.332a2.002 2.002 0 1 0-4.004 0 2.002 2.002 0 0 0 4.004 0ZM12 9.335a3.332 3.332 0 0 1 3.332 3.332V14a.665.665 0 0 1-1.33 0v-1.333A2.002 2.002 0 0 0 12 10.665H8a2.002 2.002 0 0 0-2.002 2.002V14a.665.665 0 0 1-1.33 0v-1.333A3.332 3.332 0 0 1 8 9.335h4Zm-8.023.585a.665.665 0 0 1-.477.81 2.002 2.002 0 0 0-1.502 1.937V14a.665.665 0 1 1-1.33 0v-1.334a3.332 3.332 0 0 1 2.5-3.223.665.665 0 0 1 .81.477Zm1.191-8.478a.665.665 0 1 1 .33 1.289 2.002 2.002 0 0 0 0 3.878.665.665 0 0 1-.33 1.288 3.332 3.332 0 0 1 0-6.455Z"/>
+</svg>
diff --git a/web/styles/input_pill.css b/web/styles/input_pill.css
index c19374fbdf..84128da04d 100644
--- a/web/styles/input_pill.css
+++ b/web/styles/input_pill.css
@@ -322,7 +322,7 @@
     }
 }
 
-.display_only_group_pill .zulip-icon-triple-users {
+.display_only_group_pill .zulip-icon-user-group {
     font-size: 1.3571em; /* 19px at 14px / em */
 }
 
diff --git a/web/styles/popovers.css b/web/styles/popovers.css
index f8ac73f398..747dddbe95 100644
--- a/web/styles/popovers.css
+++ b/web/styles/popovers.css
@@ -314,7 +314,7 @@ ul.popover-group-menu-member-list {
 }
 
 .popover-group-menu-member {
-    .zulip-icon-triple-users {
+    .zulip-icon-user-group {
         color: var(--color-icon-purple);
     }
 }
diff --git a/web/styles/typeahead.css b/web/styles/typeahead.css
index 6de2d59e13..1cf7800cfe 100644
--- a/web/styles/typeahead.css
+++ b/web/styles/typeahead.css
@@ -197,7 +197,7 @@
 
     text-align: center;
 
-    &.zulip-icon-triple-users {
+    &.zulip-icon-user-group {
         font-size: 1.3571em; /* 19px at 14px em */
     }
 
diff --git a/web/templates/popovers/user_group_info_popover.hbs b/web/templates/popovers/user_group_info_popover.hbs
index db4c1b40b2..cc80177d97 100644
--- a/web/templates/popovers/user_group_info_popover.hbs
+++ b/web/templates/popovers/user_group_info_popover.hbs
@@ -3,7 +3,7 @@
         <li role="none" class="link-item popover-menu-list-item">
             <div class="popover-group-menu-info">
                 <div class="popover-group-menu-name-container">
-                    <i class="popover-menu-icon zulip-icon zulip-icon-triple-users" aria-hidden="true"></i>
+                    <i class="popover-menu-icon zulip-icon zulip-icon-user-group" aria-hidden="true"></i>
                     <span class="popover-group-menu-name">{{group_name}}</span>
                 </div>
                 {{#if group_description}}
@@ -29,7 +29,7 @@
                 <ul class="popover-menu-list popover-group-menu-member-list" data-simplebar data-simplebar-tab-index="-1" data-simplebar-auto-hide="false">
                     {{#each displayed_subgroups}}
                         <li class="popover-group-menu-member">
-                            <i class="popover-group-member-icon popover-menu-icon zulip-icon zulip-icon-triple-users" aria-hidden="true"></i>
+                            <i class="popover-group-member-icon popover-menu-icon zulip-icon zulip-icon-user-group" aria-hidden="true"></i>
                             <span class="popover-group-menu-member-name">{{name}}</span>
                         </li>
                     {{/each}}
diff --git a/web/templates/typeahead_list_item.hbs b/web/templates/typeahead_list_item.hbs
index df085ed5d2..c18684ef76 100644
--- a/web/templates/typeahead_list_item.hbs
+++ b/web/templates/typeahead_list_item.hbs
@@ -11,10 +11,10 @@
     {{#if has_image}}
     <img class="typeahead-image" src="{{ img_src }}" />
     {{else}}
-    <i class='typeahead-image zulip-icon zulip-icon-triple-users no-presence-circle'></i>
+    <i class='typeahead-image zulip-icon zulip-icon-user-group no-presence-circle'></i>
     {{/if}}
 {{else if is_user_group}}
-    <i class="typeahead-image zulip-icon zulip-icon-triple-users no-presence-circle" aria-hidden="true"></i>
+    <i class="typeahead-image zulip-icon zulip-icon-user-group no-presence-circle" aria-hidden="true"></i>
 {{/if}}
 {{#if is_stream_topic}}
 <div class="typeahead-text-container">
diff --git a/web/templates/user_group_display_only_pill.hbs b/web/templates/user_group_display_only_pill.hbs
index f0a6598bbb..144db0128e 100644
--- a/web/templates/user_group_display_only_pill.hbs
+++ b/web/templates/user_group_display_only_pill.hbs
@@ -1,6 +1,6 @@
 <span class="pill-container display_only_group_pill">
     <a data-user-group-id="{{group_id}}" class="view_user_group pill" tabindex="0">
-        <i class="zulip-icon zulip-icon-triple-users no-presence-circle" aria-hidden="true"></i>
+        <i class="zulip-icon zulip-icon-user-group no-presence-circle" aria-hidden="true"></i>
         <span class="pill-label {{#if strikethrough}} strikethrough {{/if}}" >
             <span class="pill-value">{{display_value}}</span>
         </span>
diff --git a/web/tests/composebox_typeahead.test.cjs b/web/tests/composebox_typeahead.test.cjs
index b8193f1ab7..7b53d7b193 100644
--- a/web/tests/composebox_typeahead.test.cjs
+++ b/web/tests/composebox_typeahead.test.cjs
@@ -1454,7 +1454,7 @@ test("initialize", ({override, override_rewire, mock_template}) => {
                 ct.get_or_set_token_for_testing("hamletcharacters");
                 actual_value = options.highlighter_html(hamletcharacters);
                 expected_value =
-                    '    <i class="typeahead-image zulip-icon zulip-icon-triple-users no-presence-circle" aria-hidden="true"></i>\n' +
+                    '    <i class="typeahead-image zulip-icon zulip-icon-user-group no-presence-circle" aria-hidden="true"></i>\n' +
                     '<div class="typeahead-text-container">\n' +
                     '    <strong class="typeahead-strong-section">hamletcharacters</strong>    <span class="autocomplete_secondary">Characters of Hamlet</span>' +
                     "</div>\n";