Remove old deletion-view and implement it as matdialog-popup

src/app/creator-room/creator-room.component.html

 <div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px" fxFill>
   <div fxLayout="row" fxLayoutAlign="center">
-    <mat-card *ngIf="room && !modify && !deleteDialog" class="input-form">
+    <mat-card *ngIf="room && !modify" class="input-form">
       <mat-card-header>
         <mat-card-title>
           <h3 class="subheading-2">{{ room.name }}</h3>
@@ -70,18 +70,6 @@
         </button>
       </mat-card-actions>
     </mat-card>
-    <mat-card *ngIf="deleteDialog">
-      <mat-card-header><h3>Do you really want to delete this room?<br>This action can not be undone.</h3>
-      </mat-card-header>
-      <mat-card-content>
-        <button mat-raised-button color="warn" (click)="deleteRoom(room)">
-          Delete room
-        </button>
-        <button mat-raised-button color="primary" (click)="hideDeletionDialog()">
-          Leave
-        </button>
-      </mat-card-content>
-    </mat-card>
     <div *ngIf="!isLoading && !room">Error: room could not be found!</div>
   </div>
 </div>

src/app/creator-room/creator-room.component.ts

@@ -16,7 +16,6 @@ import { RoomDeletionComponent } from '../room-deletion/room-deletion.component'
 export class CreatorRoomComponent extends RoomComponent implements OnInit {
   room: Room;
   modify = false;
-  deleteDialog = false;
   roomName: string;
   roomShortId: string;
   roomDescription: string;
@@ -64,14 +63,6 @@ export class CreatorRoomComponent extends RoomComponent implements OnInit {
     }
   }
 
-  showDeletionDialog(): void {
-    this.deleteDialog = true;
-  }
-
-  hideDeletionDialog(): void {
-    this.deleteDialog = false;
-  }
-
   deleteRoom(room: Room): void {
     const msg = room.name + ' deleted';
     this.notification.show(msg);

src/app/room-deletion/room-deletion.component.html

-<mat-card>
-  <mat-card-header><h3>Do you really want to delete room<br>' {{room.name}} ' ?<br>This action can not be undone.</h3>
-  </mat-card-header>
-  <mat-card-content>
-    <button mat-raised-button color="warn" (click)="dialogRef.close('delete')">
-      Delete room
-    </button>
-    <button mat-raised-button color="primary" (click)="onNoClick()">
-      Leave
-    </button>
-  </mat-card-content>
-</mat-card>
+<h3>Are you sure?</h3>
+<p>Do you really want to delete room<br>' {{room.name}} ' ?<br>This action can not be undone.</p>
+<div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="10px">
+  <button mat-raised-button color="warn" (click)="dialogRef.close('delete')">
+    Delete room
+  </button>
+  <button mat-raised-button color="primary" (click)="onNoClick()">
+    Leave
+  </button>
+</div>
+