feature(#60): add create tournament button

frontend/src/app/components/tournaments/tournaments.component.html

@@ -1,4 +1,14 @@
-<h1>Tournaments</h1>
+<mat-card>
+  <div class="top-bar">
+    <div class="row">
+      <div class="title">Tournament Overview</div>
+      <button mat-raised-button color="primary">
+        <a [routerLink]="'/tournaments/create'" class="no-decoration">Create Tournament</a>
+      </button>
+    </div>
+    <!-- <mat-divider></mat-divider> -->
+  </div>
+</mat-card>
 @for (tournament of getTournaments(); track tournament.name) {
   <app-tournament-card [tournament]="tournament" data-cy="tournaments-list"></app-tournament-card>
 }

frontend/src/app/components/tournaments/tournaments.component.scss

@@ -0,0 +1,20 @@
+.top-bar {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 10px;
+  width: 100%;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: normal;
+}

frontend/src/app/layouts/main-layout/main-layout.component.html

@@ -1,12 +1,8 @@
-<mat-drawer-container class="sidenav-container" autosize>
+<mat-drawer-container class="sidenav-container">
   <mat-drawer class="sidenav" mode="side" opened>
     <app-sidebar></app-sidebar>
   </mat-drawer>
-  <mat-drawer-content>
-    <div class="main">
-      <div class="container">
-        <router-outlet></router-outlet>
-      </div>
-    </div>
+  <mat-drawer-content class="container">
+    <router-outlet></router-outlet>
   </mat-drawer-content>
 </mat-drawer-container>

frontend/src/app/layouts/main-layout/main-layout.component.scss

@@ -7,19 +7,13 @@
 .sidenav {
   width: 250px;
   background-color: #2196f3;
-}
-
-.spacer {
-  flex: 1 1 auto;
-}
-
-.container {
-  max-width: 1200px;
   flex: 1;
 }
 
-.main {
+.container {
+  width: 100%;
+  max-width: 100vw;
+  flex: 1;
   display: flex;
-  justify-content: center;
-  margin: 1rem;
+  flex-direction: column;
 }