Rework overall visuals and the dialogues

src/app/body/body.component.css

-
-.body {
-	margin-top: 30px;
-	margin-bottom: 30px;
-	margin-left: 50px;
-	margin-right: 50px;
-}

src/app/body/body.component.html

 <div class="body" class="mat-typography" class="body" >
   <div *ngIf="(userService.subscribeUser() | async) as user" style="max-width: 800px; margin: auto;">
-	<mat-tab-group *ngIf="(userService.subscribeSSHKeys() | async)?.length > 0; else noCredentials">
-	  <mat-tab label="Your VOs">
-		<div class="mat-typography" class="body">
-		  <h3>Your Virtual Organisations</h3>
-		  <div>
-			<mat-accordion *ngIf="(userService.subscribeVOs() | async) as vos">
-			  <app-vo-data *ngFor="let vo of vos" [vo]="vo"></app-vo-data>
-			</mat-accordion>
-			<ng-template #noVOs>
-			  <p>
-			  You are not member in any Virtual Organisations.
-			  </p>
-			</ng-template>
-		  </div>
-		</div>
-	  </mat-tab>
-	  <!--
-	  <mat-tab label="Services">
-		<div class="mat-typography" class="body">
-		  <h2>Available Services</h2>
-		  <mat-accordion *ngIf="userService.services$ | async as services; else noServices">
-			<app-service *ngFor="let service of services" [deployment]="userService.getDeployment(service)" [service]="service"></app-service>
-		  </mat-accordion>
-		  <ng-template #noServices>
-			<p>
-			You have no available services.<br/>
-			This is due services requiring users to be member of a certain vo.
-			</p>
-		  </ng-template>
-		</div>
-	  </mat-tab>
-	  -->
-	</mat-tab-group>
+	<div *ngIf="(userService.subscribeSSHKeys() | async)?.length > 0; else noCredentials">
+	  <h3>Your Virtual Organisations</h3>
+	  <div>
+		<mat-accordion *ngIf="(userService.subscribeVOs() | async) as vos">
+		  <app-vo-data *ngFor="let vo of vos" [vo]="vo"></app-vo-data>
+		</mat-accordion>
+		<ng-template #noVOs>
+		  <p>
+		  You are not member in any Virtual Organisations.
+		  </p>
+		</ng-template>
+	  </div>
+	</div>
 	<ng-template #noCredentials>
 	  <div class="mat-typography">
 		<div style="margin-bottom: 50px;">

src/app/body/body.component.ts

 import { Component, OnInit } from '@angular/core';
 
-import { Observable } from 'rxjs';
-
 import { UserService } from '../user.service';
-import * as t from '../types/types.module';
 
 
 @Component({

src/app/dialogues/credentials/credentials.component.html

@@ -21,20 +21,20 @@
   <div>
 	<h2>Key Information</h2>
 	<p>
-	Here are the states of your keys at this service. The keys listed as "deployed" can be used to access the service via ssh.
+	 These are the current states of your keys at this service. The keys listed as "deployed" can be used to access the service via ssh.
 	</p>
-	<table style="margin: 30px auto 0px auto;">
+	<table>
 	  <thead>
 		<tr>
-		  <td style="min-width: 150px;">State</td>
-		  <td style="min-width: 200px;">Key</td>
+		  <td>State</td>
+		  <td>Key</td>
 		  <td></td>
 		</tr>
 	  </thead>
 	  <tbody>
 		<tr *ngFor="let state of stateItem.credential_states">
-		  <td class="childs-inline">
-			<span [ngSwitch]="state.state" style="margin-right: 10px;">
+		  <td>
+			<span [ngSwitch]="state.state" class="spaced">
 			  <mat-icon *ngSwitchCase="'deployed'">call_made</mat-icon>
 			  <mat-icon *ngSwitchCase="'questionnaire'">warning</mat-icon>
 			  <mat-progress-spinner *ngSwitchCase="'deployment_pending'" diameter="24" mode="indeterminate"></mat-progress-spinner>
@@ -49,11 +49,16 @@
 		  <td style="font-size: 110%;">
 			{{ state.credential.name }}
 		  </td>
-		  <td *ngIf="state.state_target !== state.state" class="childs-inline">
-			<span style="margin-right: 10px;">
+		  <td *ngIf="state.is_pending">
+			<span class="spaced">
 			  <mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
 			</span>
-			In transition to state {{ state.state_target }}
+			<span *ngIf="state.state_target === 'deployed'">
+			  Key is being deployed
+			</span>
+			<span *ngIf="state.state_target === 'not_deployed'">
+			  Key is being removed
+			</span>
 		  </td>
 		</tr>
 	  </tbody>

src/app/dialogues/dialog.service.ts

@@ -20,7 +20,6 @@ export class DialogService {
   messageDialog: MatDialogRef<any>;
 
 
-  defaultWidth = '70%';
 
   constructor(
     private dialog: MatDialog,
@@ -28,15 +27,9 @@ export class DialogService {
 
 
   settingsData(data?: any) {
-    if (data != undefined && data != null) {
-      return {
-        width: this.defaultWidth,
-        data: data,
-      }
-    } else {
-      return {
-        width: this.defaultWidth,
-      }
+    return {
+      panelClass: 'scrolling-dialog',
+      data: data,
     }
   }
 

src/app/vo-data/vo-data.component.html

@@ -10,7 +10,7 @@
 	  <p>
 	  These services are provided for members of this VO.
 	  </p>
-	  <table style="margin: 30px 0px 30px 30px;">
+	  <table>
 		<thead>
 		  <tr>
 			<td>Site</td>
@@ -20,7 +20,7 @@
 		</thead>
 		<tbody>
 		  <ng-container *ngFor="let site of sites$$ | async">
-			<tr *ngFor="let service of servicesAtSite(site) | async" class="padded">
+			<tr *ngFor="let service of servicesAtSite(site) | async">
 			  <td>
 				<span matTooltip="Site {{ site.name }} provides the service {{ service.name }} for members of {{ vo.name }}">
 				  <mat-icon>account_balance</mat-icon>
@@ -34,8 +34,8 @@
 				</span>
 			  </td>
 			  <ng-container *ngIf="(subscribeStateItem(site, service) | async) as stateItem; else noStateItem">
-				<td style="height: 42px;" class="childs-inline">
-				  <span [ngSwitch]="stateItem.state" style="margin-right: 5px;">
+				<td>
+				  <span [ngSwitch]="stateItem.state" class="spaced">
 					<mat-icon *ngSwitchCase="'deployed'" matTooltip="The credentials are deployed for the service {{ service.name }}. Click to see details.">call_made</mat-icon>
 					<mat-icon *ngSwitchCase="'questionnaire'" matTooltip="This site needs more data to deploy the keys. Please click to submit the data.">warning</mat-icon>
 					<mat-progress-spinner *ngSwitchCase="'deployment_pending'" diameter="24" mode="indeterminate" matTooltip="Waiting for the deployment of the credentials to the site {{ site.name }}"></mat-progress-spinner>
@@ -59,8 +59,8 @@
 				<td *ngIf="stateItem.state === 'rejected'">
 				  <button (click)="dialog.openMessage(stateItem)" mat-raised-button class="mat-elevation-z6"> Rejected </button>
 				</td>
-				<td *ngIf="stateItem.is_credential_pending" class="childs-inline">
-				  <span style="margin-right: 5px;">
+				<td *ngIf="stateItem.is_credential_pending">
+				  <span class="spaced">
 					<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
 				  </span>
 				  SSH Keys pending

src/styles.css

@@ -4,8 +4,33 @@ body {
 	margin: 0px;
 }
 
-.padded > * {
+.body {
+	margin: 50px;
+}
+
+table {
+	margin: 30px 0px 30px 30px;
+}
+
+tr > * {
 	padding-right: 15px;
+	height: 42px;
+}
+
+/* same as childs inline */
+td > * {
+	display: inline-block;
+	vertical-align: middle;
+}
+
+.childs-inline > * {
+	display: inline-block;
+	vertical-align: middle;
+}
+
+/* adds a small margin right to this object */
+.spaced {
+	margin-right: 10px;
 }
 
 .toolbar-spacer {
@@ -59,11 +84,6 @@ mat-checkbox {
 	width: 100%;
 }
 
-.childs-inline > * {
-	display: inline-block;
-	vertical-align: middle;
-}
-
 .form-vertical > button {
 	width: 25%;
 }
@@ -71,3 +91,8 @@ mat-checkbox {
 .mat-form-field {
 	margin-right: 15px;
 }
+
+.scrolling-dialog .mat-dialog-container {
+	margin: 70px 0px 6px 0px;
+	height: unset;
+}