From f57a3abd83c64f34935a6663ffc92ec0f4b7ca1d Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Thu, 6 Mar 2025 04:35:49 +0000
Subject: [PATCH] recent_view: Make icon change on hover for visibility
 indicator robust.

Using character index for changing icon is not reliable, so
we use `background-image` to change the icon being displayed here.
---
 web/styles/dark_theme.css  |  6 ++++++
 web/styles/recent_view.css | 14 ++++++++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index f29ce75b0d..68995522fe 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -484,6 +484,12 @@
         }
     }
 
+    #recent_view
+        .change_visibility_policy
+        .visibility-status-icon:not(.recent-view-row-topic-menu):hover {
+        filter: invert(1);
+    }
+
     .drafts-container .header-body .delete-drafts-group > *:focus {
         background-color: hsl(228deg 11% 17%);
     }
diff --git a/web/styles/recent_view.css b/web/styles/recent_view.css
index 22f1838cdb..d788edf412 100644
--- a/web/styles/recent_view.css
+++ b/web/styles/recent_view.css
@@ -60,9 +60,19 @@
             }
         }
 
-        &.change_visibility_policy .visibility-status-icon:hover::before {
+        &.change_visibility_policy
+            .visibility-status-icon:not(.recent-view-row-topic-menu):hover {
             /* Show vertical ellipsis when user hovers over visibility indicator icon. */
-            content: "\f155";
+            background-image: url("../shared/icons/more-vertical.svg");
+            background-repeat: no-repeat;
+            background-position: left bottom;
+            background-size: contain;
+            width: var(--base-font-size-px);
+            height: var(--base-font-size-px);
+
+            &::before {
+                content: "";
+            }
         }
 
         &.change_visibility_policy .recent-view-row-topic-menu {