From b5a9aa9ad38951995f135dd8b1dc3d0d3ff2fc05 Mon Sep 17 00:00:00 2001
From: George Kalampokis <gkalampokis@cite.gr>
Date: Tue, 8 Dec 2020 16:25:55 +0200
Subject: [PATCH] Fix some styling issues with users listing

---
 .../role-editor/user-role-editor.component.scss      | 12 +++++++++---
 .../admin/user/listing/user-listing.component.html   |  2 +-
 .../ui/admin/user/listing/user-listing.component.ts  |  4 ++++
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.scss b/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.scss
index 515a63752..54a7a60bf 100644
--- a/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.scss
+++ b/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.scss
@@ -25,7 +25,7 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		width: 67px;
+		min-width: 67px;
 		height: 28px;
 		color: #00c4ff;
 		background: #d3f5ff 0% 0% no-repeat padding-box;
@@ -35,13 +35,15 @@
 		opacity: 1;
 		margin-top: 0.5em;
 		margin-bottom: 0.5em;
+		padding-left: 10px;
+		padding-right: 10px;
 	}
 
 	.manager {
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		width: 90px;
+		min-width: 90px;
 		height: 28px;
 		color: #568b5a;
 		background: #9dd1a1 0% 0% no-repeat padding-box;
@@ -51,13 +53,15 @@
 		opacity: 1;
 		margin-top: 0.5em;
 		margin-bottom: 0.5em;
+		padding-left: 10px;
+		padding-right: 10px;
 	}
 
 	.admin {
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		width: 77px;
+		min-width: 77px;
 		height: 28px;
 		color: #ff3d33;
 		background: #ffd5d3 0% 0% no-repeat padding-box;
@@ -67,6 +71,8 @@
 		opacity: 1;
 		margin-top: 0.5em;
 		margin-bottom: 0.5em;
+		padding-left: 10px;
+		padding-right: 10px;
 	}
 }
 
diff --git a/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.html b/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.html
index 9eab3147f..adaae2a42 100644
--- a/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.html
+++ b/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.html
@@ -15,7 +15,7 @@
 				<ng-container cdkColumnDef="avatar">
 					<mat-header-cell *matHeaderCellDef></mat-header-cell>
 					<mat-cell *matCellDef="let row">
-						<img mat-card-avatar *ngIf="row.avatarUrl" class="my-mat-card-avatar" [src]="row.avatarUrl">
+						<img mat-card-avatar *ngIf="row.avatarUrl" class="my-mat-card-avatar" [src]="row.avatarUrl" (error)="this.setDefaultAvatar($event)">
 						<img mat-card-avatar *ngIf="!row.avatarUrl" class="my-mat-card-avatar" [src]="'assets/images/profile-placeholder.png'">
 					</mat-cell>
 				</ng-container>
diff --git a/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.ts b/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.ts
index eea3d7036..fc19d0fc3 100644
--- a/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.ts
+++ b/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.ts
@@ -182,6 +182,10 @@ export class UserListingComponent extends BaseComponent implements OnInit, After
 		return filename;
 	}
 
+	public setDefaultAvatar(ev: Event) {
+		(ev.target as HTMLImageElement).src = 'assets/images/profile-placeholder.png';
+	}
+
 	// public principalHasAvatar(): boolean {
 	// 	return this.authentication.current().avatarUrl != null && this.authentication.current().avatarUrl.length > 0;
 	// }