organization-settings: Redesign the buttons in the Users tab of organization settings.

- Manage user button -> Neutral icon
- Deactivate user button -> Danger icon
- Reactivate user button -> Success icon

Fixes part of #34200.

web/src/settings_users.ts

@@ -123,14 +123,14 @@ export function update_view_on_deactivate(user_id: number, is_bot: boolean): voi
     const $button = $row.find("button.deactivate");
     $button.prop("disabled", false);
     $row.find("i.deactivated-user-icon").show();
-    $button.addClass("button-warning reactivate");
-    $button.removeClass("button-danger deactivate");
+    $button.addClass("icon-button-success reactivate");
+    $button.removeClass("icon-button-danger deactivate");
     if (is_bot) {
-        $button.addClass("reactivate-bot-tooltip");
-        $button.removeClass("deactivate-bot-tooltip");
+        $button.closest("span").addClass("reactivate-bot-tooltip");
+        $button.closest("span").removeClass("deactivate-bot-tooltip");
     } else {
-        $button.addClass("reactivate-user-tooltip");
-        $button.removeClass("deactivate-user-tooltip");
+        $button.closest("span").addClass("reactivate-user-tooltip");
+        $button.closest("span").removeClass("deactivate-user-tooltip");
     }
     $button
         .empty()
@@ -160,14 +160,14 @@ export function update_view_on_reactivate(user_id: number, is_bot: boolean): voi
 
     const $button = $row.find("button.reactivate");
     $row.find("i.deactivated-user-icon").hide();
-    $button.addClass("button-danger deactivate");
-    $button.removeClass("button-warning reactivate");
+    $button.addClass("icon-button-danger deactivate");
+    $button.removeClass("icon-button-success reactivate");
     if (is_bot) {
-        $button.addClass("deactivate-bot-tooltip");
-        $button.removeClass("reactivate-bot-tooltip");
+        $button.closest("span").addClass("deactivate-bot-tooltip");
+        $button.closest("span").removeClass("reactivate-bot-tooltip");
     } else {
-        $button.addClass("deactivate-user-tooltip");
-        $button.removeClass("reactivate-user-tooltip");
+        $button.closest("span").addClass("deactivate-user-tooltip");
+        $button.closest("span").removeClass("reactivate-user-tooltip");
     }
     $button
         .empty()
@@ -749,7 +749,7 @@ function handle_edit_form($tbody: JQuery): void {
         e.stopPropagation();
         e.preventDefault();
 
-        const user_id = Number.parseInt($(this).attr("data-user-id")!, 10);
+        const user_id = Number.parseInt($(this).closest("tr").attr("data-user-id")!, 10);
         if (people.is_my_user_id(user_id)) {
             browser_history.go_to_location("#settings/profile");
             return;

web/src/tippyjs.ts

@@ -507,16 +507,16 @@ export function initialize(): void {
         target: ".user_row .actions button",
         trigger: "mouseenter",
         onShow(instance) {
-            if ($(instance.reference).hasClass("deactivate-user-tooltip")) {
+            if ($(instance.reference).closest("span").hasClass("deactivate-user-tooltip")) {
                 instance.setContent($t({defaultMessage: "Deactivate user"}));
                 return undefined;
-            } else if ($(instance.reference).hasClass("reactivate-user-tooltip")) {
+            } else if ($(instance.reference).closest("span").hasClass("reactivate-user-tooltip")) {
                 instance.setContent($t({defaultMessage: "Reactivate user"}));
                 return undefined;
-            } else if ($(instance.reference).hasClass("deactivate-bot-tooltip")) {
+            } else if ($(instance.reference).closest("span").hasClass("deactivate-bot-tooltip")) {
                 instance.setContent($t({defaultMessage: "Deactivate bot"}));
                 return undefined;
-            } else if ($(instance.reference).hasClass("reactivate-bot-tooltip")) {
+            } else if ($(instance.reference).closest("span").hasClass("reactivate-bot-tooltip")) {
                 instance.setContent($t({defaultMessage: "Reactivate bot"}));
                 return undefined;
             }

web/styles/settings.css

@@ -1310,14 +1310,6 @@ label.preferences-radio-choice-label {
     margin-right: 1px;
 }
 
-.manage-user-button,
-.deactivate-user-button,
-.reactivate-user-button {
-    display: inline-flex;
-    align-items: center;
-    min-height: 35px;
-}
-
 .download_bot_zuliprc,
 .copy_zuliprc,
 .open_bots_subscribed_streams,

web/templates/components/icon_button.hbs

@@ -1,5 +1,6 @@
 <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}}
+  {{#if disabled}}disabled{{/if}}
   >
     <i class="zulip-icon zulip-icon-{{icon}}" aria-hidden="true"></i>
 </button>

web/templates/settings/settings_user_list_row.hbs

@@ -39,21 +39,37 @@
     {{#if can_modify}}
     <td class="actions">
         <span class="user-status-settings">
-            <span {{#if (and is_bot cannot_edit)}}class="tippy-zulip-tooltip"{{/if}} {{#if (and is_bot cannot_edit)}}data-tippy-content="{{t 'This bot cannot be edited.'}}"{{/if}}>
-                <button class="button rounded small button-warning open-user-form tippy-zulip-delayed-tooltip manage-user-button" data-tippy-content="{{#if is_bot}}{{#unless cannot_edit}}{{t 'Manage bot' }}{{/unless}}{{else}}{{t 'Manage user' }}{{/if}}" data-user-id="{{user_id}}" {{#if cannot_edit}}disabled="disabled"{{/if}}>
-                    <i class="zulip-icon zulip-icon-user-cog" aria-hidden="true"></i>
-                </button>
+            <span class="{{#if (and is_bot cannot_edit)}}tippy-zulip-tooltip{{else}}tippy-zulip-delayed-tooltip{{/if}}"
+              {{#if (and is_bot cannot_edit)}}
+              data-tippy-content="{{t 'This bot cannot be managed.'}}"
+              {{else}}
+              data-tippy-content="{{#if is_bot}}{{#unless cannot_edit}}{{t 'Manage bot'}}{{/unless}}{{else}}{{t 'Manage user'}}{{/if}}"
+              {{/if}}>
+                {{> ../components/icon_button
+                  icon="user-cog"
+                  intent="neutral"
+                  custom_classes="open-user-form manage-user-button"
+                  disabled=cannot_edit
+                  }}
             </span>
             {{#if is_active}}
-            <span {{#if cannot_deactivate}}class="tippy-zulip-tooltip"{{/if}} {{#if (and is_bot cannot_deactivate)}}data-tippy-content="{{t 'This bot cannot be deactivated.'}}"{{else if cannot_deactivate}}data-tippy-content="{{t 'This user cannot be deactivated.'}}"{{/if}}>
-                <button class="button rounded small button-danger deactivate deactivate-user-button {{#if is_bot}}deactivate-bot-tooltip{{else}}deactivate-user-tooltip{{/if}}" {{#if cannot_deactivate}}disabled="disabled"{{/if}}>
-                    <i class="zulip-icon zulip-icon-user-x" aria-hidden="true"></i>
-                </button>
+            <span class="{{#if is_bot}}deactivate-bot-tooltip{{else}}deactivate-user-tooltip{{/if}} {{#if cannot_deactivate}}tippy-zulip-tooltip{{/if}}"
+              {{#if (and is_bot cannot_deactivate)}}data-tippy-content="{{t 'This bot cannot be deactivated.'}}"{{else if cannot_deactivate}}data-tippy-content="{{t 'This user cannot be deactivated.'}}"{{/if}}>
+                {{> ../components/icon_button
+                  icon="user-x"
+                  intent="danger"
+                  custom_classes="deactivate deactivate-user-button"
+                  disabled=cannot_deactivate
+                  }}
             </span>
             {{else}}
-            <button class="button rounded small button-warning reactivate reactivate-user-button {{#if is_bot}}reactivate-bot-tooltip{{else}}reactivate-user-tooltip{{/if}}">
-                <i class="zulip-icon zulip-icon-user-plus" aria-hidden="true"></i>
-            </button>
+            <span class="{{#if is_bot}}reactivate-bot-tooltip{{else}}reactivate-user-tooltip{{/if}}">
+                {{> ../components/icon_button
+                  icon="user-plus"
+                  intent="success"
+                  custom_classes="reactivate reactivate-user-button"
+                  }}
+            </span>
             {{/if}}
         </span>
     </td>