From b5dec3258fd58bacf13436e30bf8fad6a8f24157 Mon Sep 17 00:00:00 2001
From: Maneesh Shukla <shuklamaneesh24@gmail.com>
Date: Fri, 31 Jan 2025 18:35:22 +0530
Subject: [PATCH] personal_settings: Restyle the profile, account & privacy
 settings btns.

This commit restyles the profile, account and privacy settings buttons
as follows:

- "Preview profile": action-button-quiet-brand
- Pencil for email editing: icon-button-brand
- "Change your password": action-button-quiet-brand
- "Deactivate account": action-button-quiet-danger
- "Manage your API key": action-button-quiet-brand

Fixes part of #33130.
---
 web/styles/settings.css                     |  5 +++
 web/templates/components/action_button.hbs  |  4 +-
 web/templates/components/icon_button.hbs    |  4 +-
 web/templates/settings/account_settings.hbs | 43 +++++++++++++++------
 web/templates/settings/profile_settings.hbs | 12 ++++--
 5 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/web/styles/settings.css b/web/styles/settings.css
index eb6d0153d7..9a377ae140 100644
--- a/web/styles/settings.css
+++ b/web/styles/settings.css
@@ -119,6 +119,11 @@ h3,
     min-width: 0;
 }
 
+.change-email {
+    display: flex;
+    gap: 0.5rem;
+}
+
 .admin-realm-description {
     height: 16em;
     width: 100%;
diff --git a/web/templates/components/action_button.hbs b/web/templates/components/action_button.hbs
index 186b64b472..f535cc3121 100644
--- a/web/templates/components/action_button.hbs
+++ b/web/templates/components/action_button.hbs
@@ -1,4 +1,6 @@
-<button type="button" {{#if id}}id="{{id}}"{{/if}} class="{{#if custom_classes}}{{custom_classes}} {{/if}}action-button action-button-{{type}}-{{intent}} {{#if hidden}}hide{{/if}}" {{#if data-tooltip-template-id}}data-tooltip-template-id="{{data-tooltip-template-id}}"{{/if}} tabindex="0" {{#if aria-label}}aria-label="{{aria-label}}"{{/if}}>
+<button type="button" {{#if id}}id="{{id}}"{{/if}} class="{{#if custom_classes}}{{custom_classes}} {{/if}}action-button action-button-{{type}}-{{intent}} {{#if hidden}}hide{{/if}}" {{#if data-tooltip-template-id}}data-tooltip-template-id="{{data-tooltip-template-id}}"{{/if}} tabindex="0" {{#if aria-label}}aria-label="{{aria-label}}"{{/if}}
+  {{#if disabled}}disabled{{/if}}
+  >
     {{#if icon}}
     <i class="zulip-icon zulip-icon-{{icon}}" aria-hidden="true"></i>
     {{/if}}
diff --git a/web/templates/components/icon_button.hbs b/web/templates/components/icon_button.hbs
index 6d8518c97a..025065316a 100644
--- a/web/templates/components/icon_button.hbs
+++ b/web/templates/components/icon_button.hbs
@@ -1,3 +1,5 @@
-<button type="button" class="{{#if custom_classes}}{{custom_classes}} {{/if}}icon-button {{#if squared}}icon-button-square {{/if}}icon-button-{{intent}}" {{#if data-tooltip-template-id}}data-tooltip-template-id="{{data-tooltip-template-id}}"{{/if}} tabindex="0" {{#if aria-label}}aria-label="{{aria-label}}"{{/if}}>
+<button type="button" {{#if id}}id="{{id}}"{{/if}} class="{{#if custom_classes}}{{custom_classes}} {{/if}}icon-button {{#if squared}}icon-button-square {{/if}}icon-button-{{intent}} {{#if hidden}}hide{{/if}}" {{#if data-tooltip-template-id}}data-tooltip-template-id="{{data-tooltip-template-id}}"{{/if}} tabindex="0" {{#if aria-label}}aria-label="{{aria-label}}"{{/if}}
+  {{#if data-tippy-content}}data-tippy-content="{{data-tippy-content}}"{{/if}}
+  >
     <i class="zulip-icon zulip-icon-{{icon}}" aria-hidden="true"></i>
 </button>
diff --git a/web/templates/settings/account_settings.hbs b/web/templates/settings/account_settings.hbs
index 769ae9a159..74e4292ef8 100644
--- a/web/templates/settings/account_settings.hbs
+++ b/web/templates/settings/account_settings.hbs
@@ -8,13 +8,20 @@
                 {{#if user_has_email_set}}
                 <div class="input-group">
                     <label class="settings-field-label {{#unless user_can_change_email}}cursor-text{{/unless}}" for="change_email_button">{{t "Email" }}</label>
-                    <div>
+                    <div class="change-email">
                         <div id="email_field_container" class="inline-block {{#unless user_can_change_email}}disabled_setting_tooltip{{/unless}}">
                             <input type="email" value="{{current_user.delivery_email}}" class="settings_text_input" disabled="disabled" />
                         </div>
-                        <button id="change_email_button" type="button" class="button rounded tippy-zulip-delayed-tooltip {{#unless user_can_change_email}}hide{{/unless}}" data-tippy-content="{{t 'Change your email' }}" aria-label="{{t 'Change your email' }}">
-                            <i class="fa fa-pencil" aria-hidden="true"></i>
-                        </button>
+                        {{> ../components/icon_button
+                          id="change_email_button"
+                          icon="edit"
+                          intent="brand"
+                          custom_classes="tippy-zulip-delayed-tooltip"
+                          hidden=(not user_can_change_email)
+                          aria-label=(t "Change your email")
+                          aria-hidden="true"
+                          data-tippy-content=(t "Change your email")
+                          }}
                     </div>
                     <div id="email-change-status"></div>
                 </div>
@@ -48,7 +55,12 @@
                 <div>
                     <label class="settings-field-label" for="change_password">{{t "Password" }}</label>
                     <div class="input-group">
-                        <button id="change_password" type="button" class="button rounded" data-dismiss="modal">{{t "Change your password" }}</button>
+                        {{> ../components/action_button
+                          label=(t "Change your password")
+                          type="quiet"
+                          intent="brand"
+                          id="change_password"
+                          }}
                     </div>
                 </div>
                 {{/if}}
@@ -56,10 +68,13 @@
 
             <div class="input-group">
                 <div id="deactivate_account_container" class="inline-block {{#if user_is_only_organization_owner}}disabled_setting_tooltip{{/if}}">
-                    <button type="submit" class="button rounded button-danger" id="user_deactivate_account_button"
-                      {{#if user_is_only_organization_owner}}disabled="disabled"{{/if}}>
-                        {{t 'Deactivate account' }}
-                    </button>
+                    {{> ../components/action_button
+                      label=(t "Deactivate account")
+                      type="quiet"
+                      intent="danger"
+                      id="user_deactivate_account_button"
+                      disabled=user_is_only_organization_owner
+                      }}
                 </div>
                 {{#if owner_is_only_user_in_organization}}
                     <button type="submit" class="button rounded button-danger deactivate_realm_button">
@@ -133,9 +148,13 @@
                     {{/tr}}
                 </p>
                 <div id="api_key_button_container" class="inline-block {{#unless user_has_email_set}}disabled_setting_tooltip{{/unless}}">
-                    <button class="button rounded" id="api_key_button" {{#unless user_has_email_set}}disabled="disabled"{{/unless}}>
-                        {{t "Manage your API key" }}
-                    </button>
+                    {{> ../components/action_button
+                      label=(t "Manage your API key")
+                      type="quiet"
+                      intent="brand"
+                      id="api_key_button"
+                      disabled=(not user_has_email_set)
+                      }}
                 </div>
             </div>
         </div>
diff --git a/web/templates/settings/profile_settings.hbs b/web/templates/settings/profile_settings.hbs
index d6d2b4bc0f..b65d229d5c 100644
--- a/web/templates/settings/profile_settings.hbs
+++ b/web/templates/settings/profile_settings.hbs
@@ -69,10 +69,14 @@
                     <span class="user-details-desc">{{date_joined_text}}</span>
                 </div>
             </div>
-            <button class="button rounded sea-green" id="show_my_user_profile_modal">
-                {{t 'Preview profile' }}
-                <i class="show-user-profile-icon fa fa-external-link" aria-hidden="true"></i>
-            </button>
+            {{> ../components/action_button
+              label=(t "Preview profile")
+              type="quiet"
+              intent="brand"
+              id="show_my_user_profile_modal"
+              icon="external-link"
+              aria-hidden="true"
+              }}
         </div>
     </div>
 </div>