organization-settings: Restyle "Resend" and "Revoke" buttons in Invitations panel.

Fixes part of #34200.

help/invite-new-users.md

@@ -94,17 +94,38 @@ Organization owners can revoke or resend any invitation or reusable
 invitation link. Organization administrators can do the same except
 for invitations for the organization owners role.
 
+### Revoke an invitation
+
 {start_tabs}
 
 {settings_tab|invitations}
 
 1. Select the **Invitations** tab.
 
-1. From there, you can view pending invitations, **Revoke** email
+2. Find the invitation you want to revoke.
-   invitations and invitation links, or **Resend** email invitations.
+
+3. Click the **Revoke** (<i class="zulip-icon zulip-icon-trash"></i>) icon next to the invitation.
 
 {end_tabs}
 
+### Resend an invitation
+
+{start_tabs}
+
+{settings_tab|invitations}
+
+1. Select the **Invitations** tab.
+
+2. Find the invitation you want to resend.
+
+3. Click the **Resend** (<i class="zulip-icon zulip-icon-send-dm"></i>) icon next to the invitation.
+
+{end_tabs}
+
+!!! warn ""
+    **Note:** You can **revoke** both email invitations and invitation links,
+    but you can **resend** only email invitations.
+
 ## Related articles
 
 * [Restrict account creation](/help/restrict-account-creation)

web/src/settings_invites.ts

@@ -196,6 +196,7 @@ function do_revoke_invite({
 function do_resend_invite({$row, invite_id}: {$row: JQuery; invite_id: string}): void {
     const modal_invite_id = $(".dialog_submit_button").attr("data-invite-id");
     const $resend_button = $row.find("button.resend");
+    const $check_button = $row.find("button.check");
 
     if (modal_invite_id !== invite_id) {
         blueslip.error("Invite resending canceled due to non-matching fields.");
@@ -224,9 +225,15 @@ function do_resend_invite({$row, invite_id}: {$row: JQuery; invite_id: string}):
         success() {
             dialog_widget.hide_dialog_spinner();
             dialog_widget.close();
-            $resend_button.prop("disabled", true);
+
-            $resend_button.text($t({defaultMessage: "Sent!"}));
+            $resend_button.hide();
-            $resend_button.removeClass("resend button-warning").addClass("sea-green");
+            $check_button.removeClass("hide");
+
+            // Showing a success checkmark for a short time (3 seconds).
+            setTimeout(() => {
+                $resend_button.show();
+                $check_button.addClass("hide");
+            }, 3000);
         },
     });
 }
@@ -266,8 +273,8 @@ export function on_load_success(
         const $row = $(this).closest(".invite_row");
         const email = $row.find(".email").text();
         const referred_by = $row.find(".referred_by").text();
-        const invite_id = $(this).attr("data-invite-id")!;
+        const invite_id = $(this).closest("tr").attr("data-invite-id")!;
-        const is_multiuse = $(this).attr("data-is-multiuse")!;
+        const is_multiuse = $(this).closest("tr").attr("data-is-multiuse")!;
         const ctx = {
             is_multiuse: is_multiuse === "true",
             email,
@@ -300,7 +307,7 @@ export function on_load_success(
 
         const $row = $(this).closest(".invite_row");
         const email = $row.find(".email").text();
-        const invite_id = $(this).attr("data-invite-id")!;
+        const invite_id = $(this).closest("tr").attr("data-invite-id")!;
         const html_body = render_settings_resend_invite_modal({email});
 
         confirm_dialog.launch({

web/styles/settings.css

@@ -1319,26 +1319,6 @@ label.preferences-radio-choice-label {
     align-items: center;
 }
 
-.invite-user-link {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    width: fit-content;
-    align-items: center;
-    text-decoration: none;
-
-    &:hover {
-        text-decoration: none;
-    }
-
-    .zulip-icon-user-plus {
-        margin-right: 5px;
-    }
-
-    &:hover .user-settings-invite-user-label {
-        text-decoration: underline;
-    }
-}
-
 /* -- new settings overlay -- */
 #settings_page {
     height: 95vh;
@@ -2273,6 +2253,22 @@ label.preferences-radio-choice-label {
     width: 110px;
 }
 
+#admin-user-list .tab-switcher {
+    margin-left: 0;
+}
+
 #data-exports .tab-switcher .ind-tab {
     width: 160px;
 }
+
+#admin_invites_table {
+    .check:disabled {
+        opacity: 1;
+    }
+
+    .check {
+        &.hide {
+            display: none;
+        }
+    }
+}

web/templates/settings/admin_invites_list.hbs

@@ -1,5 +1,5 @@
 {{#with invite}}
-<tr class="invite_row">
+<tr class="invite_row" data-invite-id="{{id}}" data-is-multiuse="{{#unless is_multiuse}}false{{else}}true{{/unless}}">
     <td>
         {{#if is_multiuse}}
         <span class="email">
@@ -32,14 +32,28 @@
         <span>{{invited_as_text}}</span>
     </td>
     <td class="actions">
+        {{> ../components/icon_button
+          icon="trash"
+          intent="danger"
+          custom_classes="revoke tippy-zulip-delayed-tooltip"
+          data-tippy-content=(t "Revoke")
+          disabled=disable_buttons
+          }}
         {{#unless is_multiuse}}
-        <button class="button rounded small resend button-warning" {{#if disable_buttons}}disabled="disabled"{{/if}} data-invite-id="{{id}}">
+        {{> ../components/icon_button
-            {{t "Resend" }}
+          icon="check"
-        </button>
+          intent="success"
+          custom_classes="check hide"
+          disabled=true
+          }}
+        {{> ../components/icon_button
+          icon="send-dm"
+          intent="neutral"
+          custom_classes="resend tippy-zulip-delayed-tooltip"
+          data-tippy-content=(t "Resend")
+          disabled=disable_buttons
+          }}
         {{/unless}}
-        <button class="button rounded small revoke button-danger" {{#if disable_buttons}}disabled="disabled"{{/if}} data-invite-id="{{id}}" data-is-multiuse="{{is_multiuse}}">
-            {{t "Revoke" }}
-        </button>
     </td>
 </tr>
 {{/with}}

web/templates/settings/invites_list_admin.hbs

@@ -3,11 +3,12 @@
     {{#unless is_admin }}
     <div class="tip">{{t "You can only view or manage invitations that you sent." }}</div>
     {{/unless}}
-    <a class="invite-user-link" role="button">
+    {{> ../components/action_button
-        <i class="zulip-icon zulip-icon-user-plus" aria-hidden="true"></i>
+      label=(t 'Invite users to organization')
-        <span class="user-settings-invite-user-label">{{t "Invite users to organization" }}</span>
+      attention="quiet"
-    </a>
+      intent="brand"
-
+      custom_classes="user-settings-invite-user-label invite-user-link"
+      }}
     <div class="settings_panel_list_header">
         <h3>{{t "Invitations "}}</h3>
         <div class="alert-notification" id="invites-field-status"></div>