Use snackbars instead of alerts

src/app/components/match-sheets/match-sheets.component.html

@@ -3,10 +3,17 @@
     <div class="nobreak">
     <mat-card appearance="outlined">
       <mat-card-content>
-        <h6>{{ tournament.name }}</h6>
-        <br>
-        <br>
         <div class="row">
+          <div class="col-6">
+            <h5>{{ tournament.name }}</h5>
+          </div>
+          <div class="col-6 text-end">
+            {{ group.name }} {{ round.name }}
+          </div>
+        </div>
+        <br>
+        <br>
+        <div class="row align-middle">
           <div class="col-6">
             <b>
               <app-team-display
@@ -35,12 +42,14 @@
         </div>
         <div class="row">
           <div class="col-6">
-            <app-team-display
-              [team]="match.team2"
-              [event]="this.event"
-              [tournament]="this.tournament"
-              [inline]="true">
-            </app-team-display>
+            <b>
+              <app-team-display
+                [team]="match.team2"
+                [event]="this.event"
+                [tournament]="this.tournament"
+                [inline]="true">
+              </app-team-display>
+            </b>
           </div>
           <div class="col-2">
             <mat-form-field appearance="outline">
@@ -62,9 +71,6 @@
           <div class="col-6">
             <u>Graag de winnaar omcirkelen</u>
           </div>
-          <div class="col-6 text-end">
-            {{ group.name }} {{ round.name }}
-          </div>
         </div>
       </mat-card-content>
     </mat-card>

src/app/components/round-overview/round-overview.component.html

@@ -10,7 +10,7 @@
                 [team]="match.team1"
                 [event]="this.event"
                 [tournament]="this.tournament"
-                [inline]="false">
+                [inline]="true">
               </app-team-display>
             </td>
             <td class="align-middle w-sep">-</td>

src/app/components/tournament-manage/tournament-manage.component.ts

@@ -196,11 +196,11 @@ export class TournamentManageComponent implements OnInit, OnDestroy {
     const availableCourts = this.getAvailableCourts();
 
     if (availableCourts.length == 0) {
-      alert('Geen banen beschikbaar!');
+      this._snackBar.open('Geen banen beschikbaar.')
     } else if (this.matchContainsPlayersThatArePlaying(match)) {
-      alert('Deze wedstrijd bevat spelers die al aan het spelen zijn!');
+      this._snackBar.open('Deze wedstrijd bevat spelers die al aan het spelen zijn.')
     } else if (this.matchContainsPlayersThatAreCounting(match)) {
-      alert('Deze wedstrijd bevat spelers die aan het tellen zijn!');
+      this._snackBar.open('Deze wedstrijd bevat spelers die aan het tellen zijn.')
     } else {
       this.courtSelectionDialog.open(CourtSelectionComponent, {
         data: {