Customized Team Buttons

src/app/overview/overview.component.html

 <div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;">
   <mat-card class="transparent">
     <h2>{{membership}}</h2>
-    <button class = "red" (click)="joinTeam('red')">
+    <button mat-raised-button class = "{{red}}" (click)="joinTeam('red')">
       <mat-icon color = "warn" aria-hidden="false" aria-label="home icon red">home</mat-icon>
     </button>
-    <button class = "blue" (click)="joinTeam('blue')">
+    <button mat-raised-button class = "{{blue}}" (click)="joinTeam('blue')">
       <mat-icon style="color: darkblue" aria-hidden="false" aria-label="home icon blue">home</mat-icon>
     </button>
 

src/app/overview/overview.component.scss

@@ -9,19 +9,16 @@ table {
 }
 
 .blue{
-  border-color: darkblue;
   margin: 5px;
-  cursor: pointer;
+  background-color: rgba(0,0,139,0.5);
 }
 
 .red{
-  border-color: red;
   margin: 5px;
-  cursor: pointer;
+  background-color: rgba(200, 0, 0, 0.3);
 }
 
-.button:active
-{
-  background-color:darkred;
+.choose{
+  margin: 5px;
+  cursor: pointer;
 }
-

src/app/overview/overview.component.ts

@@ -9,6 +9,8 @@ import {GameStatus} from '../interface/gameStatus';
   styleUrls: ['./overview.component.scss']
 })
 export class OverviewComponent implements OnInit {
+  red = 'choose';
+  blue = 'choose';
   nextTeam = '';
   team = '';
   buttonPlayDisabled = true;
@@ -35,10 +37,14 @@ export class OverviewComponent implements OnInit {
       if (this.team === 'red'){
         this.membership = 'Du gehörst zu Team rot!';
         this.buttonPlayDisabled = false;
+        this.red = 'red';
+        this.blue = 'choose';
       }
       else if (this.team === 'blue'){
         this.membership = 'Du gehörst zu Team blau!';
         this.buttonPlayDisabled = false;
+        this.blue = 'blue';
+        this.red = 'choose';
       }
       else if (this.team === 'null'){
         this.membership = 'Wähle dein Team';