feat: UI finetunes and fixes

web/src/app/app.component.html

@@ -16,9 +16,9 @@
           <a class="nav-link" routerLink="/games" routerLinkActive="active">Games</a>
         </li>
 
-        <li class="nav-item">
+        <li *ngIf="this.isAuthenticated" class="nav-item">
             <a class="nav-link" routerLink="/team/manage" routerLinkActive="active">Manage Team</a>
-          </li>
+        </li>
       </ul>
       <div class="d-flex">
         <mat-action-row>
@@ -30,4 +30,6 @@
     </div>
   </div>
 </nav>
+
+<!--<h1 class="text-center mt-5 fw-bold fs-1">Welcome to Ice Hockey Manager</h1>-->
 <router-outlet></router-outlet>

web/src/app/components/delete-game-button/delete-game-button.component.html

-<button (click)="onDeleteClick()" class="button delete-button" type="button">Delete [{{id}}]</button>
+<button (click)="onDeleteClick()" class="btn btn-danger" type="button">X</button>

web/src/app/components/delete-game-button/delete-game-button.component.ts

@@ -6,6 +6,7 @@ import {GameService} from 'src/app/services/game.service';
   templateUrl: './delete-game-button.component.html',
   styleUrls: ['./delete-game-button.component.css']
 })
+
 export class DeleteGameButtonComponent implements OnInit {
 
   @Input() id!: number;

web/src/app/components/games/games.component.css

 
-.games {
-  margin: 0 0 2em 0;
-  list-style-type: none;
-  padding: 0;
-  width: 15em;
+.header{
+    width: fit-content;
+    height: fit-content;
+    align-items: center;
+    text-align: center;
+    vertical-align: middle;
+    white-space: nowrap;
+}
+
+td{
+    align-items: center;
+    text-align: center;
+    vertical-align: middle;
+    white-space: nowrap;
+}
+
+.games tr{
+    white-space: nowrap;
+    display: block;
+    padding-bottom: 10px;
 }
 
 .games li {
@@ -38,7 +53,7 @@
   color: white;
 }
 
-.games .badge {
+.badge {
   display: inline-block;
   font-size: small;
   color: white;

web/src/app/components/games/games.component.html

 <h2 class="fw-bold ms-4 mt-1 fs-2">Games</h2>
-<table class="games">
-  <tr *ngFor="let game of games">
-    <span class="badge">{{game.id}}</span>
-    <th>{{game.gameDateTime}}</th>
-    <th>{{game.homeTeam.name}}</th>
-    <th>{{game.awayTeam.name}}</th>
-    <th>{{game.homeTeamScore}}:{{game.awayTeamScore}}</th>
-    <th>
-      <app-delete-game-button (onDelete)="triggerRefreshEvent()" [id]=game.id></app-delete-game-button>
-    </th>
-  </tr>
+<table class="table">
+    <thead class="header bs-solid">
+        <tr class="pb-4">
+            <th>#</th>
+            <th scope="col">Date and Time</th>
+            <th scope="col">Home Team</th>
+            <th scope="col">Away Team</th>
+            <th scope="col">Score</th>
+          </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="let game of games let i = index" [attr.data-index]="i">
+            <td>{{i + 1}}</td>
+            <td>{{game.gameDateTime}}</td>
+            <td>{{game.homeTeam.name}}</td>
+            <td>{{game.awayTeam.name}}</td>
+            <td>{{game.homeTeamScore}}:{{game.awayTeamScore}}</td>
+            <td>
+              <app-delete-game-button (onDelete)="triggerRefreshEvent()" [id]=game.id></app-delete-game-button>
+            </td>
+          </tr>
+    </tbody>
 </table>
 <!-- 
 <h2 class="fw-bold ms-2 mt-1 fs-2">Games</h2>
@@ -35,3 +46,19 @@
   <tr *matHeaderRowDef="columnsToDisplay" mat-header-row></tr>
 </table>
 -->
+<!--
+<table #table [dataSource]="games" mat-table class="ms-4">
+    <ng-container matColumnDef="homeTeam">
+      <th *matHeaderCellDef mat-header-cell>Home Team</th>
+      <td *matCellDef="let game" mat-cell> {{game.homeTeam.name}} </td>
+    </ng-container>
+    <ng-container matColumnDef="awayTeam">
+        <th *matHeaderCellDef mat-header-cell>Away Team</th>
+        <td *matCellDef="let game" mat-cell> {{game.awayTeam.name}} </td>
+    </ng-container>
+    <tr *matHeaderRowDef="columnsToDisplay" mat-header-row></tr>
+    <tr (click)="highlight(row)" *matRowDef="let row; columns: columnsToDisplay"
+        [ngClass]="{'highlight': selectedRowIndex == row.id && highlightSelected}"
+        mat-row></tr>
+</table>-->
+  

web/src/app/components/log-in-form/log-in-form.component.html

@@ -19,28 +19,15 @@
         <input #password="ngModel" [(ngModel)]="model.password" class="form-control"
                id="password"
                name="password" required
-               type="text">
+               type="password">
         <div [hidden]="password.valid || password.pristine"
              class="alert alert-danger">
           Password is required
         </div>
       </div>
 
-      <button [disabled]="!logInForm.form.valid" class="btn btn-success" type="submit">Submit</button>
-      <button (click)="resetForm(); logInForm.reset()" class="btn btn-default" type="button">Reset Form</button>
+      <button [disabled]="!logInForm.form.valid" class="mt-2 btn btn-success" type="submit">Login</button>
+      <button (click)="resetForm(); logInForm.reset()" class="mt-2 ms-2 btn btn-danger" type="button">Reset Form</button>
     </form>
   </div>
-
-  <div [hidden]="!submitted">
-    <h2>You submitted the following:</h2>
-    <div class="row">
-      <div class="col-xs-3">Username</div>
-      <div class="col-xs-9">{{ model.username }}</div>
-    </div>
-    <br>
-    <div [hidden]="confirmed">
-      <button (click)="confirmSubmission()" class="btn btn-primary">Confirm</button>
-      <button (click)="submitted=false" class="btn btn-primary">Edit</button>
-    </div>
-  </div>
 </div>

web/src/app/components/log-in-form/log-in-form.component.ts

@@ -27,6 +27,7 @@ export class LogInFormComponent implements OnInit {
 
   onSubmit(): void {
     this.submitted = true;
+    this.confirmSubmission();
   }
 
   resetForm(): void {