From 3bd8c28fca4e0bed948be9aec03ce43233bb4115 Mon Sep 17 00:00:00 2001
From: Maneesh Shukla <shuklamaneesh24@gmail.com>
Date: Fri, 4 Jul 2025 15:45:00 +0530
Subject: [PATCH] buttons: Redesign some old-style buttons with rounded class.

Fixes part of #35006.
---
 web/styles/subscriptions.css                     | 14 ++++++++++----
 web/styles/zulip.css                             | 16 ++++++++++++----
 web/templates/draft_table_body.hbs               |  4 ++--
 web/templates/feedback_container.hbs             | 10 ++++++----
 .../add_new_custom_profile_field_form.hbs        |  7 ++++++-
 .../settings/edit_custom_profile_field_form.hbs  |  7 ++++++-
 .../settings/generate_integration_url_modal.hbs  |  4 ++--
 .../stream_settings/stream_settings.hbs          |  2 +-
 8 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/web/styles/subscriptions.css b/web/styles/subscriptions.css
index a5821d23b6..2e601f3cb6 100644
--- a/web/styles/subscriptions.css
+++ b/web/styles/subscriptions.css
@@ -1337,17 +1337,23 @@ div.settings-radio-input-parent {
 }
 
 .stream-settings-color-selector {
+    border: 1px solid var(--color-border-zulip-button);
     display: flex;
     align-items: center;
     gap: 10px;
     overflow: hidden;
+
+    &.action-button-quiet-neutral {
+        box-shadow: none;
+    }
 }
 
 .stream-settings-color-preview {
-    /* 33px at 12.8 font size (from .button.small) at 14px em */
-    width: 2.5781em;
-    height: 2.5781em;
-    margin: -6px 0 -6px -10px;
+    /* 28px at 16px font size */
+    width: 1.75em;
+    height: 1.75em;
+    /* -6px 0 -6px 10px at 16px font size. */
+    margin: -0.375em 0 -0.375em -0.625em;
 }
 
 #subscription_overlay .channel-folder-widget-container {
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 53650bffde..7e5fd83db5 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -331,10 +331,18 @@ p.n-margin {
     }
 
     .exit-me {
-        font-size: 20pt;
-        font-weight: 200;
-        margin: 0 0 0 10px;
-        cursor: pointer;
+        margin: 0 0 0 5px;
+    }
+
+    .float-header {
+        display: flex;
+        align-items: center;
+    }
+
+    .feedback-button-container {
+        display: flex;
+        align-items: center;
+        margin-left: auto;
     }
 }
 
diff --git a/web/templates/draft_table_body.hbs b/web/templates/draft_table_body.hbs
index 861b98104e..82fc226587 100644
--- a/web/templates/draft_table_body.hbs
+++ b/web/templates/draft_table_body.hbs
@@ -21,9 +21,9 @@
                         <div class="delete-selected-drafts-button-container">
                             {{> ./components/icon_button intent="danger" custom_classes="delete-selected-drafts-button" icon="trash" disabled=true  }}
                         </div>
-                        <button class="button small rounded select-drafts-button" role="checkbox" aria-checked="false">
+                        <button class="action-button action-button-quiet-neutral select-drafts-button" role="checkbox" aria-checked="false">
                             <span>{{t "Select all drafts" }}</span>
-                            <i class="fa fa-square-o fa-lg select-state-indicator" aria-hidden="true"></i>
+                            <i class="fa fa-square-o select-state-indicator" aria-hidden="true"></i>
                         </button>
                     </div>
                 </div>
diff --git a/web/templates/feedback_container.hbs b/web/templates/feedback_container.hbs
index fcc296ec7b..41bf80a03e 100644
--- a/web/templates/feedback_container.hbs
+++ b/web/templates/feedback_container.hbs
@@ -1,9 +1,11 @@
 <div class="float-header">
     <h3 class="light no-margin small-line-height float-left feedback_title"></h3>
-    <div class="exit-me float-right">&#215;</div>
-    {{#if has_undo_button}}
-        <button class="button small rounded float-right feedback_undo" type="button" name="button"></button>
-    {{/if}}
+    <div class="feedback-button-container">
+        {{#if has_undo_button}}
+            {{> components/action_button intent="neutral" attention="quiet" custom_classes="feedback_undo"}}
+        {{/if}}
+        {{> ./components/icon_button intent="neutral" custom_classes="exit-me" icon="close"}}
+    </div>
     <div class="float-clear"></div>
 </div>
 <p class="n-margin feedback_content"></p>
diff --git a/web/templates/settings/add_new_custom_profile_field_form.hbs b/web/templates/settings/add_new_custom_profile_field_form.hbs
index d70bac07c6..c5e9c6cf64 100644
--- a/web/templates/settings/add_new_custom_profile_field_form.hbs
+++ b/web/templates/settings/add_new_custom_profile_field_form.hbs
@@ -31,7 +31,12 @@
             <table class="profile_field_choices_table">
                 <tbody id="profile_field_choices" class="profile-field-choices"></tbody>
             </table>
-            <button type="button" class="button white rounded alphabetize-choices-button">{{t "Alphabetize choices" }}</button>
+            {{> ../components/action_button
+              label=(t "Alphabetize choices")
+              custom_classes="alphabetize-choices-button"
+              intent="neutral"
+              attention="quiet"
+              }}
         </div>
         <div class="input-group" id="custom_external_account_url_pattern">
             <label for="custom_field_url_pattern" class="modal-field-label">{{t "URL pattern" }}</label>
diff --git a/web/templates/settings/edit_custom_profile_field_form.hbs b/web/templates/settings/edit_custom_profile_field_form.hbs
index 89d9935495..a478177abf 100644
--- a/web/templates/settings/edit_custom_profile_field_form.hbs
+++ b/web/templates/settings/edit_custom_profile_field_form.hbs
@@ -18,7 +18,12 @@
                 {{/each}}
             </div>
         </div>
-        <button type="button" class="button white rounded alphabetize-choices-button">{{t "Alphabetize choices" }}</button>
+        {{> ../components/action_button
+          label=(t "Alphabetize choices")
+          custom_classes="alphabetize-choices-button"
+          intent="neutral"
+          attention="quiet"
+          }}
     </div>
     {{else if is_external_account_field}}
     <div class="prop-element" id="id-custom-profile-field-field-data" data-setting-widget-type="field-data-setting">
diff --git a/web/templates/settings/generate_integration_url_modal.hbs b/web/templates/settings/generate_integration_url_modal.hbs
index c4c12a785f..6db1a3070f 100644
--- a/web/templates/settings/generate_integration_url_modal.hbs
+++ b/web/templates/settings/generate_integration_url_modal.hbs
@@ -40,8 +40,8 @@
 <div class="input-group hide" id="integrations-event-container">
     <label for="integrations-event-options">{{t "Events to include:"}}</label>
     <div class="integration-all-events-buttons">
-        <button class="button rounded" id="add-all-integration-events">{{t "Check all"}}</button>
-        <button class="button rounded" id="remove-all-integration-events">{{t "Uncheck all"}}</button>
+        {{> ../components/action_button attention="quiet" intent="neutral" id="add-all-integration-events" label=(t "Check all") }}
+        {{> ../components/action_button attention="quiet" intent="neutral" id="remove-all-integration-events" label=(t "Uncheck all") }}
     </div>
     <div id="integrations-event-options"></div>
 </div>
diff --git a/web/templates/stream_settings/stream_settings.hbs b/web/templates/stream_settings/stream_settings.hbs
index 46e4aead9d..d45fb6e70d 100644
--- a/web/templates/stream_settings/stream_settings.hbs
+++ b/web/templates/stream_settings/stream_settings.hbs
@@ -152,7 +152,7 @@
                 {{/each}}
                 <div class="input-group">
                     <label class="settings-field-label channel-color-label">{{t "Channel color" }}</label>
-                    <button class="button small rounded stream-settings-color-selector choose_stream_color" data-stream-id="{{ sub.stream_id }}">
+                    <button class="action-button action-button-quiet-neutral stream-settings-color-selector choose_stream_color" data-stream-id="{{ sub.stream_id }}">
                         <span class="stream-settings-color-preview" style="background: {{sub.color}};"></span>
                         <span class="stream-settings-color-selector-label">{{t "Change color"}}</span>
                     </button>