From c4ec18bc618afbccbca5b478e2715c0a040d6d3d Mon Sep 17 00:00:00 2001
From: Sahil Batra <sahil@zulip.com>
Date: Thu, 7 Dec 2023 09:39:52 +0530
Subject: [PATCH] popovers: Improve user group popovers.

This commit updates the user group popovers to change the icon
and text of ".manage-group" option to match what we have in
gear menu and also change the heading and ".manage-group"
option to be left-aligned.
---
 web/styles/popovers.css                       | 21 ++++++++++++++-----
 .../popovers/user_group_info_popover.hbs      |  3 +--
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/web/styles/popovers.css b/web/styles/popovers.css
index dac219e5ea..f7e22055c2 100644
--- a/web/styles/popovers.css
+++ b/web/styles/popovers.css
@@ -386,18 +386,29 @@ ul {
         padding: 5px 0;
     }
 
-    .manage-group a {
-        text-align: center;
-    }
-
     .group-info {
-        text-align: center;
+        padding-left: 11px;
+        padding-right: 11px;
 
         .group-name {
             font-weight: bold;
         }
     }
 
+    .manage-group {
+        a {
+            display: flex;
+            align-items: center;
+            padding-left: 11px;
+
+            .zulip-icon {
+                position: relative;
+                top: -1px;
+                margin-right: 5px;
+            }
+        }
+    }
+
     .member-list {
         position: relative;
         max-height: 300px;
diff --git a/web/templates/popovers/user_group_info_popover.hbs b/web/templates/popovers/user_group_info_popover.hbs
index 17d603fb52..65818f10e5 100644
--- a/web/templates/popovers/user_group_info_popover.hbs
+++ b/web/templates/popovers/user_group_info_popover.hbs
@@ -24,8 +24,7 @@
         <ul class="nav nav-list manage-group">
             <li>
                 <a href="{{group_edit_url}}">
-                    <i class="fa fa-cog" aria-hidden="true"></i>
-                    {{t 'Manage user groups' }}
+                    <i class="zulip-icon zulip-icon-user-cog" aria-hidden="true"></i>{{t 'Group settings' }}
                 </a>
             </li>
         </ul>