Reformat participant home screen

Reformat join room component
Reformat participant home screen component
Add some basic scss formats

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

 <form>
-  <mat-form-field class="input-block">
-    <input matInput placeholder="Room-Id" />
-  </mat-form-field>
-  <button mat-raised-button color="primary">Join</button>
+  <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="10px">
+    <mat-form-field class="input-block">
+      <input matInput #roomId placeholder="Room-Id"/>
+    </mat-form-field>
+    <button mat-fab color="primary" routerLink="room/{{ roomId.value }}">
+      <mat-icon>send</mat-icon>
+    </button>
+  </div>
 </form>

src/app/participant-home-screen/participant-home-screen.component.html

-<app-join-room></app-join-room>
-<app-room-list></app-room-list>
+<div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px" fxFill>
+  <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px">
+    <app-join-room></app-join-room>
+  </div>
+  <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px">
+    <app-room-list></app-room-list>
+  </div>
+</div>
+

src/app/participant-home-screen/participant-home-screen.component.scss

+app-join-room {
+  max-width: 800px;
+}
+
+app-room-list {
+  width: 100%;
+  max-width: 800px;
+}