SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts

@@ -7,6 +7,8 @@ import { SelectRoleComponent } from './components/select-role/select-role.compon
 import { MasterPageComponent } from './pages/master-page/master-page.component';
 import { appRoutingModule } from '../app.routing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
 
 @NgModule({
   declarations: [
@@ -20,6 +22,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
     FormsModule,
     appRoutingModule,
     BrowserAnimationsModule,
+    MatButtonModule,
+    MatCardModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.css

@@ -1,18 +1,49 @@
-a.navbar-brand {
+.container {
-  white-space: normal;
+  display: flex;
-  text-align: center;
+  justify-content: center;
-  word-break: break-all;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 10%;
 }
 
-html {
+.button {
-  font-size: 14px;
+  border-radius: 15px;
 }
+
+#player-button {
+  background-color: #2699fb;
+}
+
+#game-master-button {
+  background-color: #440505;
+}
+
+.font {
+  color: #ffffff;
+  font-weight: bold;
+  font-style: italic, oblique;
+}
+
+@media (max-width: 768px) {
+  .button {
+    margin: 10px;
+    padding: 10px;
+    width: 328px;
+    height: 101px;
+  }
+  .font {
+    font-size: 20px;
+  }
+}
+
 @media (min-width: 768px) {
-  html {
+  .button {
-    font-size: 16px;
+    margin: 20px;
+    padding: 20px;
+    width: 658px;
+    height: 202px;
+  }
+  .font {
+    font-size: 40px;
   }
 }
-
-.box-shadow {
-  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
-}

SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.html

@@ -1,2 +1,4 @@
-<button>Player</button>
+<div class="container font">
-<button>Gamme Master</button>
+  <button id="player-button" class="button font">Player</button>
+  <button id="game-master-button" class="button font">Game Master</button>
+</div>

SessionCompanion/SessionCompanion/ClientApp/src/app/pages/master-page/master-page.component.css

@@ -0,0 +1,5 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

SessionCompanion/SessionCompanion/ClientApp/src/app/pages/master-page/master-page.component.html

@@ -1,2 +1 @@
-<h1>Hello on the Session Companion</h1>
+<div class="container"></div>
-<h2>Choose your role</h2>