Refactor participant room component (view)

Add some more demo room data
Use Material's Card for room view
Add some more buttons
Add some simple stylings

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

-<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
+<div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px" fxFill>
   <div fxLayout="row" fxLayoutAlign="center">
-    <div fxLayoutGap="20px">
-    <mat-list fxLayout="column" fxLayoutGap="10px" fxLayoutAlign="center">
-    <mat-list-item>Room: {{roomId}}</mat-list-item>
-    <mat-list-item>
-      <button mat-fab color="primary" routerLink="/room/{{roomId}}/create-comment">
-        <mat-icon>question_answer</mat-icon>
-      </button>
-      <button mat-fab color="primary">
-        <mat-icon>feedback</mat-icon>
-      </button>
-    </mat-list-item>
-    <mat-list-item>
-      <button mat-raised-button color="primary">Contents</button>
-    </mat-list-item>
-    <mat-list-item>
-      <button mat-raised-button color="primary">Comments</button>
-    </mat-list-item>
-  </mat-list>
-      </div>
-    </div>
+    <mat-card>
+      <mat-card-header>
+        <mat-card-title><h3 class="subheading-2">{{ roomName }}</h3></mat-card-title>
+        <mat-card-subtitle>{{ roomId }}</mat-card-subtitle>
+      </mat-card-header>
+      <mat-divider></mat-divider>
+      <mat-card-content>
+        <p>
+          {{ roomDescription }}
+        </p>
+      </mat-card-content>
+      <mat-divider></mat-divider>
+      <mat-card-actions>
+        <button mat-icon-button color="primary" matTooltip="Ask something" routerLink="/room/{{roomId}}/create-comment">
+          <mat-icon>question_answer</mat-icon>
+        </button>
+        <button mat-icon-button color="primary" matTooltip="Give feedback">
+          <mat-icon>feedback</mat-icon>
+        </button>
+        <button mat-button color="primary" matTooltip="Join question round">
+          Questions
+        </button>
+        <button mat-button color="primary" matTooltip="See room comments">
+          Comments
+        </button>
+        <button mat-button color="primary" matTooltip="Start personal question round">
+          Learn
+        </button>
+      </mat-card-actions>
+    </mat-card>
+  </div>
 </div>

src/app/participant-room/participant-room.component.scss

+mat-card {
+  max-width: 800px;
+}
+
+mat-card-content>:first-child {
+  margin-top: 16px;
+}

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

@@ -6,7 +6,15 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./participant-room.component.scss']
 })
 export class ParticipantRoomComponent implements OnInit {
-  roomId = '1';
+
+  roomId = '12 34 56 78';
+  roomName = 'Test Room';
+  roomDescription = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore ' +
+    'magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea ' +
+    'takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod ' +
+    'tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea ' +
+    'rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
+
   constructor() {
   }