From 2db994038f20bc07d0d80f344166bf026d6b8efa Mon Sep 17 00:00:00 2001
From: Sayam Samal <sayam@zulip.com>
Date: Wed, 28 May 2025 16:23:37 +0530
Subject: [PATCH] message_header: Update legacy unresolve topic button to use
 icon button.

This commit is part of a series of commits aimed at updating the message
header buttons to use the new icon button component which has consistent
styling across the Web UI and offers a larger clickable area for the
users.

This commit also replaces the legacy font awesome check icon to the
newer "check-x" icon from the Zulip font icons.

Fixes part of #34477.
---
 web/src/click_handlers.ts       | 2 +-
 web/styles/message_header.css   | 1 -
 web/templates/recipient_row.hbs | 4 ++--
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/web/src/click_handlers.ts b/web/src/click_handlers.ts
index 193f4caabf..4733e2f5ef 100644
--- a/web/src/click_handlers.ts
+++ b/web/src/click_handlers.ts
@@ -408,7 +408,7 @@ export function initialize(): void {
         e.stopPropagation();
         const $recipient_row = $(e.target).closest(".recipient_row");
         const message_id = rows.id_for_recipient_row($recipient_row);
-        const topic_name = $(e.target).attr("data-topic-name")!;
+        const topic_name = $(e.target).closest(".message_header").attr("data-topic-name")!;
         message_edit.toggle_resolve_topic(message_id, topic_name, false, $recipient_row);
     });
 
diff --git a/web/styles/message_header.css b/web/styles/message_header.css
index cffc723e6f..a2a20dc0a0 100644
--- a/web/styles/message_header.css
+++ b/web/styles/message_header.css
@@ -283,7 +283,6 @@
     }
 }
 
-.on_hover_topic_unresolve,
 .on_hover_topic_resolve {
     opacity: 0.2;
 
diff --git a/web/templates/recipient_row.hbs b/web/templates/recipient_row.hbs
index 0c94255cfe..2b620cfa98 100644
--- a/web/templates/recipient_row.hbs
+++ b/web/templates/recipient_row.hbs
@@ -1,5 +1,5 @@
 {{#if is_stream}}
-<div class="message_header message_header_stream right_part" data-stream-id="{{stream_id}}">
+<div class="message_header message_header_stream right_part" data-stream-id="{{stream_id}}" {{#if topic}}data-topic-name="{{topic}}"{{/if}}>
     <div class="message-header-contents" style="background: {{recipient_bar_color}};">
         {{! stream link }}
         <a class="message_label_clickable narrows_by_recipient stream_label tippy-narrow-tooltip"
@@ -52,7 +52,7 @@
 
             {{#if (and user_can_resolve_topic (not is_empty_string_topic))}}
                 {{#if topic_is_resolved}}
-                    <i class="fa fa-check on_hover_topic_unresolve recipient-bar-control recipient_bar_icon hidden-for-spectators" data-topic-name="{{topic}}" data-tippy-content="{{t 'Mark as unresolved' }}" role="button" tabindex="0" aria-label="{{t 'Mark as unresolved' }}"></i>
+                    {{> components/icon_button icon="check-x" intent="neutral" custom_classes="on_hover_topic_unresolve recipient-bar-control recipient-bar-control-icon hidden-for-spectators" data-tippy-content=(t "Mark as unresolved") aria-label=(t "Mark as unresolved") }}
                 {{else}}
                     <i class="fa fa-check on_hover_topic_resolve recipient-bar-control recipient_bar_icon hidden-for-spectators" data-topic-name="{{topic}}" data-tippy-content="{{t 'Mark as resolved' }}" role="button" tabindex="0" aria-label="{{t 'Mark as resolved' }}"></i>
                 {{/if}}