From 37ec0a7c0306a92dbbfc8a84edeab6e1458292e6 Mon Sep 17 00:00:00 2001
From: Maneesh Shukla <shuklamaneesh24@gmail.com>
Date: Fri, 7 Mar 2025 16:45:18 +0530
Subject: [PATCH] button_migration: Restyle buttons in channel and group
 settings.

Fixes part of #33130.
---
 web/src/add_subscribers_pill.ts               |  2 +-
 web/src/stream_ui_updates.ts                  |  4 +-
 web/src/user_group_edit.ts                    |  2 +-
 .../stream_settings/add_subscribers_form.hbs  | 10 +++--
 .../stream_settings/stream_creation_form.hbs  | 38 ++++++++++++++++---
 .../user_group_settings/add_members_form.hbs  | 11 ++++--
 .../new_user_group_users.hbs                  |  7 +++-
 .../user_group_creation_form.hbs              | 31 +++++++++++++--
 8 files changed, 84 insertions(+), 21 deletions(-)

diff --git a/web/src/add_subscribers_pill.ts b/web/src/add_subscribers_pill.ts
index 0a7829fd83..0367f63dde 100644
--- a/web/src/add_subscribers_pill.ts
+++ b/web/src/add_subscribers_pill.ts
@@ -101,7 +101,7 @@ export function set_up_handlers_for_add_button_state(
     $pill_container: JQuery,
 ): void {
     const $pill_widget_input = $pill_container.find(".input");
-    const $pill_widget_button = $pill_container.closest(".add-button-container").find(".button");
+    const $pill_widget_button = $pill_container.closest(".add-button-container").find("button");
     // Disable the add button first time the pill container is created.
     $pill_widget_button.prop("disabled", true);
 
diff --git a/web/src/stream_ui_updates.ts b/web/src/stream_ui_updates.ts
index f7e6c653a1..59c5429aa2 100644
--- a/web/src/stream_ui_updates.ts
+++ b/web/src/stream_ui_updates.ts
@@ -510,9 +510,7 @@ export function enable_or_disable_add_subscribers_elements(
                 .addClass("add_subscribers_disabled");
         }
     } else {
-        const $add_subscribers_button = $container_elem
-            .find('button[name="add_subscriber"]')
-            .expectOne();
+        const $add_subscribers_button = $container_elem.find(".add-subscriber-button").expectOne();
         $add_subscribers_button.prop("disabled", !enable_elem);
         if (enable_elem) {
             $add_subscribers_button.css("pointer-events", "");
diff --git a/web/src/user_group_edit.ts b/web/src/user_group_edit.ts
index 868c2b3692..362e1a80dc 100644
--- a/web/src/user_group_edit.ts
+++ b/web/src/user_group_edit.ts
@@ -129,7 +129,7 @@ function update_add_members_elements(group: UserGroup): void {
     // Otherwise, we adjust whether the widgets are disabled based on
     // whether this user is authorized to add members.
     const $input_element = $add_members_container.find(".input").expectOne();
-    const $button_element = $add_members_container.find('button[name="add_member"]').expectOne();
+    const $button_element = $add_members_container.find("#add_member").expectOne();
 
     if (settings_data.can_add_members_to_user_group(group.id)) {
         $input_element.prop("contenteditable", true);
diff --git a/web/templates/stream_settings/add_subscribers_form.hbs b/web/templates/stream_settings/add_subscribers_form.hbs
index 6ab0ad1ba8..9d0e1d75c6 100644
--- a/web/templates/stream_settings/add_subscribers_form.hbs
+++ b/web/templates/stream_settings/add_subscribers_form.hbs
@@ -7,9 +7,13 @@
     </div>
     {{#if (not hide_add_button)}}
         <div class="add_subscriber_button_wrapper inline-block">
-            <button type="submit" name="add_subscriber" class="button add-subscriber-button add-users-button small rounded sea-green" tabindex="0">
-                {{t 'Add' }}
-            </button>
+            {{> ../components/action_button
+              label=(t "Add")
+              custom_classes="add-subscriber-button add-users-button"
+              attention="quiet"
+              intent="brand"
+              type="submit"
+              }}
         </div>
     {{/if}}
 </div>
diff --git a/web/templates/stream_settings/stream_creation_form.hbs b/web/templates/stream_settings/stream_creation_form.hbs
index 3cf3b4d055..6c7db665c3 100644
--- a/web/templates/stream_settings/stream_creation_form.hbs
+++ b/web/templates/stream_settings/stream_creation_form.hbs
@@ -37,7 +37,12 @@
                             <h4 class="stream_setting_subsection_title">{{t "Choose subscribers" }}</h4>
                         </label>
                         <span class="add_all_users_to_stream_button_container">
-                            <button class="add_all_users_to_stream small button rounded sea-green">{{t 'Add all users'}}</button>
+                            {{> ../components/action_button
+                              label=(t "Add all users")
+                              custom_classes="add_all_users_to_stream inline-block"
+                              attention="quiet"
+                              intent="brand"
+                              }}
                         </span>
                         <div id="stream_subscription_error" class="stream_creation_error"></div>
                         <div class="controls" id="people_to_add"></div>
@@ -47,12 +52,35 @@
         </div>
         <div class="settings-sticky-footer">
             <div class="settings-sticky-footer-left">
-                <button id="stream_creation_go_to_configure_channel_settings" class="button small sea-green rounded hide">{{t "Back to settings" }}</button>
+                {{> ../components/action_button
+                  label=(t "Back to settings")
+                  custom_classes="hide"
+                  id="stream_creation_go_to_configure_channel_settings"
+                  attention="quiet"
+                  intent="brand"
+                  }}
             </div>
             <div class="settings-sticky-footer-right">
-                <button class="create_stream_cancel button small white rounded">{{t "Cancel" }}</button>
-                <button class="finalize_create_stream button small sea-green rounded hide" type="submit">{{t "Create" }}</button>
-                <button id="stream_creation_go_to_subscribers" class="button small sea-green rounded">{{t "Continue to add subscribers" }}</button>
+                {{> ../components/action_button
+                  label=(t "Cancel")
+                  custom_classes="create_stream_cancel inline-block"
+                  attention="quiet"
+                  intent="neutral"
+                  }}
+                {{> ../components/action_button
+                  label=(t "Create")
+                  custom_classes="finalize_create_stream hide"
+                  attention="quiet"
+                  intent="brand"
+                  type="submit"
+                  }}
+                {{> ../components/action_button
+                  label=(t "Continue to add subscribers")
+                  custom_classes="inline-block"
+                  id="stream_creation_go_to_subscribers"
+                  attention="quiet"
+                  intent="brand"
+                  }}
             </div>
         </div>
     </form>
diff --git a/web/templates/user_group_settings/add_members_form.hbs b/web/templates/user_group_settings/add_members_form.hbs
index bb41d0fe0e..bc642690ea 100644
--- a/web/templates/user_group_settings/add_members_form.hbs
+++ b/web/templates/user_group_settings/add_members_form.hbs
@@ -7,9 +7,14 @@
     </div>
     {{#if (not hide_add_button)}}
         <div class="add_member_button_wrapper inline-block">
-            <button type="submit" name="add_member" class="button add-member-button add-users-button small rounded sea-green" tabindex="0">
-                {{t 'Add' }}
-            </button>
+            {{> ../components/action_button
+              label=(t "Add")
+              custom_classes="add-member-button add-users-button"
+              id="add_member"
+              attention="quiet"
+              intent="brand"
+              type="submit"
+              }}
         </div>
     {{/if}}
 </div>
diff --git a/web/templates/user_group_settings/new_user_group_users.hbs b/web/templates/user_group_settings/new_user_group_users.hbs
index b3b0c4c8e8..8efb97c8b2 100644
--- a/web/templates/user_group_settings/new_user_group_users.hbs
+++ b/web/templates/user_group_settings/new_user_group_users.hbs
@@ -4,7 +4,12 @@
 <br />
 
 {{t "Do you want to add everyone?"}}
-<button class="add_all_users_to_user_group small button rounded sea-green">{{t 'Add all users'}}</button>
+{{> ../components/action_button
+  label=(t "Add all users")
+  custom_classes="add_all_users_to_user_group inline-block"
+  attention="quiet"
+  intent="brand"
+  }}
 
 <div class="create_member_list_header">
     <h4 class="user_group_setting_subsection_title">{{t 'Members preview' }}</h4>
diff --git a/web/templates/user_group_settings/user_group_creation_form.hbs b/web/templates/user_group_settings/user_group_creation_form.hbs
index 9f748afd35..baa35748f5 100644
--- a/web/templates/user_group_settings/user_group_creation_form.hbs
+++ b/web/templates/user_group_settings/user_group_creation_form.hbs
@@ -46,12 +46,35 @@
         </div>
         <div class="settings-sticky-footer">
             <div class="settings-sticky-footer-left">
-                <button id="user_group_go_to_configure_settings" class="button small sea-green rounded hide">{{t "Back to settings" }}</button>
+                {{> ../components/action_button
+                  label=(t "Back to settings")
+                  custom_classes="hide"
+                  attention="quiet"
+                  intent="brand"
+                  id="user_group_go_to_configure_settings"
+                  }}
             </div>
             <div class="settings-sticky-footer-right">
-                <button class="create_user_group_cancel button small white rounded">{{t "Cancel" }}</button>
-                <button class="finalize_create_user_group button small sea-green rounded hide" type="submit">{{t "Create" }}</button>
-                <button id="user_group_go_to_members" class="button small sea-green rounded">{{t "Continue to add members" }}</button>
+                {{> ../components/action_button
+                  label=(t "Cancel")
+                  custom_classes="create_user_group_cancel inline-block"
+                  attention="quiet"
+                  intent="neutral"
+                  }}
+                {{> ../components/action_button
+                  label=(t "Create")
+                  custom_classes="finalize_create_user_group hide"
+                  attention="quiet"
+                  intent="brand"
+                  type="submit"
+                  }}
+                {{> ../components/action_button
+                  label=(t "Continue to add members")
+                  id="user_group_go_to_members"
+                  custom_classes="inline-block"
+                  attention="quiet"
+                  intent="brand"
+                  }}
             </div>
         </div>
     </form>