From 91549cfba02d3dd9d05d1cfb982dae661dba6978 Mon Sep 17 00:00:00 2001
From: Sayam Samal <sayam@zulip.com>
Date: Sat, 22 Mar 2025 08:52:30 +0530
Subject: [PATCH] settings: Update remove/unsubscribe buttons to action button
 component.

This commit updates the remove and unsubscribe buttons in channel
settings and user group settings to use the action button component.
---
 web/src/stream_edit_subscribers.ts               |  4 ++--
 web/src/user_group_edit_members.ts               |  8 ++++----
 web/styles/subscriptions.css                     | 11 -----------
 .../stream_settings/stream_member_list_entry.hbs | 16 +++++-----------
 .../user_group_subgroup_entry.hbs                |  8 +-------
 5 files changed, 12 insertions(+), 35 deletions(-)

diff --git a/web/src/stream_edit_subscribers.ts b/web/src/stream_edit_subscribers.ts
index 11a278b425..dd81b84cfb 100644
--- a/web/src/stream_edit_subscribers.ts
+++ b/web/src/stream_edit_subscribers.ts
@@ -466,8 +466,8 @@ export function initialize(): void {
     });
 
     $("#channels_overlay_container").on(
-        "submit",
-        ".edit_subscribers_for_stream .subscriber_list_remove form",
+        "click",
+        ".edit_subscribers_for_stream .remove-subscriber-button",
         function (this: HTMLElement, e): void {
             e.preventDefault();
 
diff --git a/web/src/user_group_edit_members.ts b/web/src/user_group_edit_members.ts
index 10d340a561..405a598fc4 100644
--- a/web/src/user_group_edit_members.ts
+++ b/web/src/user_group_edit_members.ts
@@ -509,8 +509,8 @@ export function initialize(): void {
     });
 
     $("#groups_overlay_container").on(
-        "submit",
-        ".edit_members_for_user_group .subscriber_list_remove form",
+        "click",
+        ".edit_members_for_user_group .remove-subscriber-button",
         function (this: HTMLElement, e): void {
             e.preventDefault();
 
@@ -523,8 +523,8 @@ export function initialize(): void {
     );
 
     $("#groups_overlay_container").on(
-        "submit",
-        ".edit_members_for_user_group .subgroup_list_remove form",
+        "click",
+        ".edit_members_for_user_group .remove-subgroup-button",
         function (this: HTMLElement, e): void {
             e.preventDefault();
 
diff --git a/web/styles/subscriptions.css b/web/styles/subscriptions.css
index 8441da6dbb..481ed0d776 100644
--- a/web/styles/subscriptions.css
+++ b/web/styles/subscriptions.css
@@ -178,12 +178,6 @@ h4.user_group_setting_subsection_title {
                 }
             }
 
-            .subscriber_list_remove,
-            .subgroup-list-remove {
-                padding-right: 16px;
-                display: inline-block;
-            }
-
             & thead th {
                 &:first-of-type {
                     border-top-left-radius: 4px;
@@ -274,11 +268,6 @@ h4.user_group_setting_subsection_title {
     display: inline;
 }
 
-.remove-subscriber-form,
-.remove-subgroup-form {
-    margin: 0;
-}
-
 .subscriptions-container .subscriptions-header .fa-chevron-left,
 .user-groups-container .user-groups-header .fa-chevron-left {
     position: relative;
diff --git a/web/templates/stream_settings/stream_member_list_entry.hbs b/web/templates/stream_settings/stream_member_list_entry.hbs
index 89215c52e8..e70a9cb270 100644
--- a/web/templates/stream_settings/stream_member_list_entry.hbs
+++ b/web/templates/stream_settings/stream_member_list_entry.hbs
@@ -9,17 +9,11 @@
     {{/if}}
     {{#if can_remove_subscribers}}
     <td class="unsubscribe">
-        <div class="subscriber_list_remove">
-            <form class="remove-subscriber-form">
-                <button type="submit" name="unsubscribe" class="remove-subscriber-button button small rounded button-danger">
-                    {{#if for_user_group_members}}
-                    {{t 'Remove'}}
-                    {{else}}
-                    {{t 'Unsubscribe' }}
-                    {{/if}}
-                </button>
-            </form>
-        </div>
+        {{#if for_user_group_members}}
+            {{> ../components/action_button label=(t "Remove") custom_classes="remove-subscriber-button" attention="quiet" intent="danger" aria-label=(t "Remove") }}
+        {{else}}
+            {{> ../components/action_button label=(t "Unsubscribe") custom_classes="remove-subscriber-button" attention="quiet" intent="danger" aria-label=(t "Unsubscribe") }}
+        {{/if}}
     </td>
     {{/if}}
 </tr>
diff --git a/web/templates/user_group_settings/user_group_subgroup_entry.hbs b/web/templates/user_group_settings/user_group_subgroup_entry.hbs
index 7b5d4def47..4af18ecfb2 100644
--- a/web/templates/user_group_settings/user_group_subgroup_entry.hbs
+++ b/web/templates/user_group_settings/user_group_subgroup_entry.hbs
@@ -5,13 +5,7 @@
     <td class="empty-email-col-for-user-group"></td>
     {{#if can_remove_members}}
     <td class="remove">
-        <div class="subgroup_list_remove">
-            <form class="remove-subgroup-form">
-                <button type="submit" name="remove" class="remove-subgroup-button button small rounded button-danger">
-                    {{t 'Remove'}}
-                </button>
-            </form>
-        </div>
+        {{> ../components/action_button custom_classes="remove-subgroup-button" label=(t "Remove") attention="quiet" intent="danger" aria-label=(t "Remove") }}
     </td>
     {{/if}}
 </tr>