From 6e3d8c77330fd5a86b1f2a2bdc6285cbee79f87f Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Wed, 9 Nov 2022 12:30:08 +0000
Subject: [PATCH] recent_topics_row: Let pm status icons have its own class.

Some additional changes to make align them correctly after
the assigning the new class.
---
 static/styles/recent_topics.css       | 41 +++++++++++++++++----------
 static/templates/recent_topic_row.hbs |  2 +-
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/static/styles/recent_topics.css b/static/styles/recent_topics.css
index 8a9e181671..119d2d6ac3 100644
--- a/static/styles/recent_topics.css
+++ b/static/styles/recent_topics.css
@@ -70,13 +70,6 @@
             padding-right: 3px;
         }
 
-        .fa-group {
-            font-size: 0.8rem;
-            margin-left: 5px;
-            /* color: hsl(105, 2%, 50%); */
-            opacity: 0.6;
-        }
-
         .fa-envelope {
             font-size: 0.7rem;
             margin-right: 2px;
@@ -173,14 +166,6 @@
             visibility: hidden;
         }
 
-        .user_circle {
-            /* Shrink the user activity circle for the recent topics context. */
-            min-width: 7px;
-            height: 7px;
-            margin-left: 8px;
-            top: 0;
-        }
-
         .flex_container_pm {
             /* Flex container to fit in user circle and group icon */
             display: flex;
@@ -396,6 +381,32 @@
                 font-size: 15px;
             }
         }
+
+        .pm_status_icon {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            /* Increasing vertical padding any further will increase
+               the height of the row. */
+            padding: 5px 0 5px 8px;
+            /* To accommodate fa-group icon */
+            width: 14px;
+            height: 14px;
+
+            .fa-group {
+                font-size: 0.8rem;
+                /* color: hsl(105, 2%, 50%); */
+                opacity: 0.6;
+            }
+
+            .user_circle {
+                /* Shrink the user activity circle for the recent topics context. */
+                width: 7px;
+                height: 7px;
+                float: left;
+                position: unset;
+            }
+        }
     }
 
     #recent_topics_bottom_whitespace {
diff --git a/static/templates/recent_topic_row.hbs b/static/templates/recent_topic_row.hbs
index b90abdd3fa..155a5b082b 100644
--- a/static/templates/recent_topic_row.hbs
+++ b/static/templates/recent_topic_row.hbs
@@ -15,7 +15,7 @@
             {{!-- For presence/group indicator --}}
             {{#if is_private}}
             <div class="right_part">
-                <span class="stream-privacy filter-icon">
+                <span class="pm_status_icon">
                     {{#if is_group}}
                     <span class="fa fa-group"></span>
                     {{else}}