distinct style for rows of banned users in listing, saving space

3 files changed, 14 insertions, 5 deletions

diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index e0022d2ba..ea5aca024 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/users/user-list/user-list.component.html
@@ -14,6 +14,7 @@
   [showCurrentPageReport]="true" i18n-currentPageReportTemplate
   currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} users"
   (onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
+  [rowStyleClass]="getRowClasses"
 >
   <ng-template pTemplate="caption">
     <div class="caption">
@@ -48,7 +49,7 @@
       <th style="width: 120px;" i18n>Role</th>
       <th style="width: 140px;" pResizableColumn i18n>Auth plugin</th>
       <th style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
-      <th style="width: 50px;"></th>
+      <th style="width: 60px;"></th>
     </tr>
   </ng-template>
 
@@ -75,11 +76,13 @@
               alt="Avatar"
             >
             <div>
-              {{ user.account.displayName }}
+              <span>
+                <span *ngIf="user.blocked" i18n-title title="The user was banned" class="glyphicon glyphicon-ban-circle"></span>
+                {{ user.account.displayName }}
+              </span>
               <span class="text-muted">{{ user.username }}</span>
             </div>
           </div>
-          <span i18n *ngIf="user.blocked" class="banned-info">(banned)</span>
         </a>
       </td>
 
diff --git a/client/src/app/+admin/users/user-list/user-list.component.scss b/client/src/app/+admin/users/user-list/user-list.component.scss
index 99b22aaea..697b2c11b 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.scss
+++ b/client/src/app/+admin/users/user-list/user-list.component.scss
@@ -5,8 +5,8 @@
   @include create-button;
 }
 
-tr.banned {
-  color: red;
+tr.banned > td {
+  background-color: lighten($color: $red, $amount: 40) !important;
 }
 
 .banned-info {
diff --git a/client/src/app/+admin/users/user-list/user-list.component.ts b/client/src/app/+admin/users/user-list/user-list.component.ts
index 8f01c7d51..e167d1432 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.ts
+++ b/client/src/app/+admin/users/user-list/user-list.component.ts
@@ -87,6 +87,12 @@ export class UserListComponent extends RestTable implements OnInit {
     return 'UserListComponent'
   }
 
+  getRowClasses (rowData: User) {
+    return {
+      banned: rowData.blocked
+    }
+  }
+
   openBanUserModal (users: User[]) {
     for (const user of users) {
       if (user.username === 'root') {