UX: Reduce the number of columns on invite page (#12891)

We used to have different columns for invite type, groups and topics,
which sometimes introduced a lot of whitespace or distorted the other
columns.

app/assets/javascripts/discourse/app/templates/user-invited-show.hbs

@@ -90,10 +90,6 @@
               <thead>
                 <tr>
                   <th>{{i18n "user.invited.invited_via"}}</th>
-                  {{#if currentUser.staff}}
-                    <th>{{i18n "user.invited.groups"}}</th>
-                    <th>{{i18n "user.invited.topic"}}</th>
-                  {{/if}}
                   <th>{{i18n "user.invited.sent"}}</th>
                   <th>{{i18n "user.invited.expires_at"}}</th>
                   <th></th>
@@ -105,33 +101,25 @@
                     <td class="invite-type">
                       <div class="label">{{i18n "user.invited.invited_via"}}</div>
                       {{#if invite.email}}
-                        {{invite.email}}
+                        {{d-icon "envelope"}} {{invite.email}}
                       {{else}}
-                        {{i18n "user.invited.invited_via_link" key=invite.shortKey count=invite.redemption_count max=invite.max_redemptions_allowed}}
+                        {{d-icon "link"}} {{i18n "user.invited.invited_via_link" key=invite.shortKey count=invite.redemption_count max=invite.max_redemptions_allowed}}
+                      {{/if}}
+
+                      {{#each invite.groups as |g|}}
+                        <p class="invite-extra"><a href="/g/{{g.name}}">{{d-icon "users"}} {{g.name}}</a></p>
+                      {{/each}}
+
+                      {{#if invite.topic}}
+                        <p class="invite-extra"><a href={{invite.topic.url}}>{{d-icon "file"}} {{invite.topic.title}}</a></p>
                       {{/if}}
                     </td>
-                    {{#if currentUser.staff}}
-                      <td class="invite-groups">
-                        <div class="label">{{i18n "user.invited.groups"}}</div>
-                        {{#each invite.groups as |g|}}
-                          <a href="/g/{{g.name}}">{{g.name}}</a>
-                        {{else}}
-                          &mdash;
-                        {{/each}}
-                      </td>
-                      <td class="invite-topic">
-                        <div class="label">{{i18n "user.invited.topic"}}</div>
-                        {{#if invite.topic}}
-                          <a href={{invite.topic.url}}>{{invite.topic.title}}</a>
-                        {{else}}
-                          &mdash;
-                        {{/if}}
-                      </td>
-                    {{/if}}
+
                     <td class="invite-updated-at">
                       <div class="label">{{i18n "user.invited.sent"}}</div>
                       {{format-date invite.updated_at}}
                     </td>
+
                     <td class="invite-expires-at">
                       <div class="label">{{i18n "user.invited.expires_at"}}</div>
                       {{#if inviteExpired}}
@@ -142,6 +130,7 @@
                         {{raw-date invite.expires_at}}
                       {{/if}}
                     </td>
+
                     <td class="invite-actions">
                       {{d-button icon="pencil-alt" action=(action "editInvite" invite) title="user.invited.edit"}}
                       {{d-button icon="trash-alt" class="cancel" action=(action "destroyInvite" invite) title=(if invite.destroyed "user.invited.removed" "user.invited.remove")}}

app/assets/stylesheets/common/base/user.scss

@@ -789,9 +789,31 @@
 }
 
 .user-invites-page {
+  .user-invite-search {
+    clear: both;
+    margin: 15px 0px -15px 0px;
+  }
+
   .invite-error {
     grid-column: 1 / span 2;
   }
+
+  table.user-invite-list {
+    .invite-type {
+      .d-icon {
+        color: var(--primary-medium);
+      }
+    }
+
+    .invite-extra {
+      font-size: $font-down-1;
+      margin: 0.25em 0;
+
+      a {
+        color: var(--primary-medium);
+      }
+    }
+  }
 }
 
 .notification-schedule {

app/assets/stylesheets/desktop/user.scss

@@ -104,11 +104,6 @@ table.user-invite-list {
   }
 }
 
-.user-invite-search {
-  clear: both;
-  margin: 15px 0px -15px 0px;
-}
-
 .user-invite-none {
   padding: 15px 0;
 }

app/assets/stylesheets/mobile/user.scss

@@ -307,12 +307,16 @@
 }
 
 .user-invites-page {
+  .user-invite-search input {
+    width: 100%;
+  }
+
   .admin-controls {
     flex-wrap: wrap;
     .pull-right {
       flex: 1 1 100%;
       font-size: $font-down-1;
-      padding: 0;
+      padding: 5px 0;
     }
   }
 
@@ -323,7 +327,7 @@
 
     tr {
       display: grid;
-      grid-template-columns: repeat(2, 1fr);
+      grid-template-columns: repeat(4, 1fr);
       padding: 0.25em;
     }
 
@@ -345,15 +349,21 @@
       order: 2;
       align-self: center;
       text-align: right;
+
+      button {
+        margin: 0.25em;
+      }
     }
 
-    td.invite-groups,
-    td.invite-topic {
+    td.invite-updated-at {
+      grid-column-start: 1;
+      grid-column-end: 3;
       order: 3;
     }
 
-    td.invite-updated-at,
     td.invite-expires-at {
+      grid-column-start: 3;
+      grid-column-end: -1;
       order: 4;
     }
   }