Change the style of the header

src/app/account/account.component.html

-<p class="mat-body-1">
-You can delete your account. All deployments will be withdrawn if you choose to do so.
-</p>
-<p class="mat-body-2">
-<mat-checkbox [(ngModel)]="sure" style="margin-right: 8px" [checked]="sure">
-</mat-checkbox>
-I'm sure I want to delete all my data on the server.
-<p>
-<button mat-raised-button mat-dialog-close color="primary" (click)="delete()" [disabled]="!sure">
-	Delete
-</button>
-</p>
+<div class="mat-typography">
+	<h3>Account Management</h3>
+	<p class="mat-body-1">
+	You can delete your account. All deployments will be withdrawn if you choose to do so.
+	</p>
+	<p class="mat-body-2">
+	<mat-checkbox [(ngModel)]="sure" style="margin-right: 8px" [checked]="sure">
+	</mat-checkbox>
+	I'm sure I want to delete all my data from the server.
+	<p>
+	<button mat-raised-button mat-dialog-close color="primary" (click)="delete()" [disabled]="!sure">
+		Delete
+	</button>
+	</p>
+</div>

src/app/login/login.component.css

+
+:host {
+	width: 100%;
+}
+
+:host>* {
+	float: right;
+}

src/app/login/login.component.html

-<span class=".row-fill-remaining-space"></span>
-<span>
+<div>
 	<span *ngIf="userService.loggedIn ? false : true">
 		<form *ngIf="idps"
 			(ngSubmit)="userService.login(selectedIdP)" #loginForm="ngForm">
@@ -25,4 +24,4 @@
 		</button>
 		<button mat-raised-button color="accent" (click)="userService.logout()">Logout</button>
 	</span>
-</span>
+</div>

src/app/mgmt/mgmt.component.html

@@ -12,6 +12,7 @@
 		This is due services requiring users to be member of a certain group.
 		</p>
 	</div>
+	<!--
 	<div *ngIf="userService.user.deployment_tasks.length > 0">
 		<h3>Uncompleted tasks</h3>
 		<div>
@@ -28,4 +29,5 @@
 			</p>
 		</div>
 	</div>
+	-->
 </div>

src/app/profile/profile.component.html

-<div>
+<div class="mat-typography">
+	<h3>User Info</h3>
 	<mat-table [dataSource]="userService.userInfoData">
 		<ng-container matColumnDef="name">
 			<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>

src/app/ssh-keys/ssh-keys.component.html

-<div style="margin-bottom: 25px;">
-	<div *ngIf="userService.user.ssh_keys.length > 0; then key_list else upload_note"></div>
+<div class="mat-typography">
+	<h3>Key Management</h3>
+	<div style="margin-bottom: 25px;">
+		<div *ngIf="userService.user.ssh_keys.length > 0; then key_list else upload_note"></div>
+	</div>
+	<div *ngIf="upload; then uploading else not_uploading"></div>
 </div>
-<div *ngIf="upload; then uploading else not_uploading"></div>
 <ng-template #key_list>
 	<mat-table [dataSource]="userService.sshKeyData">
 		<ng-container matColumnDef="name">
@@ -10,12 +13,12 @@
 		</ng-container>
 		<ng-container matColumnDef="key">
 			<mat-header-cell *matHeaderCellDef>Key</mat-header-cell>
-			<mat-cell *matCellDef="let element">{{ element.key }}</mat-cell>
+			<mat-cell style="font-size: 11px;" *matCellDef="let element">{{ element.key }}</mat-cell>
 		</ng-container>
 		<ng-container matColumnDef="action">
 			<mat-header-cell *matHeaderCellDef>Action</mat-header-cell>
 			<mat-cell *matCellDef="let element">
-				<button mat-icon-button (click)="deleteKey(element)">
+				<button mat-icon-button matTooltip="Delete key" (click)="deleteKey(element)">
 					<mat-icon>delete_forever</mat-icon>
 				</button>
 			</mat-cell>
@@ -26,7 +29,7 @@
 </ng-template>
 <ng-template #upload_note>
 	<p>
-	You have no uploaded keys.
+	You have no uploaded keys. Please upload an SSH public key.
 	</p>
 </ng-template>
 <ng-template #uploading>

src/styles.css

@@ -9,17 +9,17 @@ body {
 }
 
 .outer {
-    display: table;
-    position: absolute;
-    width: 100%;
+	display: table;
+	position: absolute;
+	width: 100%;
 	margin-top: 2%;
 	margin-bottom: 2%;
 }
 
 .inner {
-    margin-left: auto;
-    margin-right: auto;
-    width: 75%;
+	margin-left: auto;
+	margin-right: auto;
+	width: 75%;
 }
 
 .mat-column-name {
@@ -32,10 +32,14 @@ body {
 }
 
 .form-container {
-  display: flex;
-  flex-direction: column;
+	display: flex;
+	flex-direction: column;
 }
 
 .form-container > * {
-  width: 50%;
+	width: 50%;
+}
+
+.mat-form-field {
+	margin-right: 15px;
 }