From 7929bd251f01ca9fe3263bdc8a5c5396905e0a6f Mon Sep 17 00:00:00 2001
From: Paul Mojica <paulmojicatech@gmail.com>
Date: Sun, 14 May 2023 09:25:33 -0400
Subject: [PATCH] update routing

---
 apps/fantalytic-public/src/app/app.config.ts  | 26 ++++--
 .../fantasy-football-sidebar.component.html   |  2 +-
 .../fantasy-football-sidebar.component.scss   |  3 +-
 .../components/scores/scores.component.html   |  1 +
 .../components/scores/scores.component.scss   |  0
 .../scores/scores.component.spec.ts           | 21 +++++
 .../components/scores/scores.component.ts     | 11 +++
 .../components/stats/stats.component.html     | 33 ++++++++
 .../components/stats/stats.component.scss     |  3 +
 .../components/stats/stats.component.spec.ts  | 21 +++++
 .../components/stats/stats.component.ts       | 83 +++++++++++++++++++
 .../const/fantasy-football-routes.const.ts    |  6 +-
 .../fantasy-football.component.html           | 37 ++-------
 .../fantasy-football.component.scss           | 35 --------
 .../fantasy-football.component.ts             | 77 ++---------------
 .../src/app/topics/topics.component.html      |  2 +-
 apps/fantalytic-public/src/styles.scss        |  7 ++
 17 files changed, 218 insertions(+), 150 deletions(-)
 create mode 100644 apps/fantalytic-public/src/app/fantasy-football/components/scores/scores.component.html
 create mode 100644 apps/fantalytic-public/src/app/fantasy-football/components/scores/scores.component.scss
 create mode 100644 apps/fantalytic-public/src/app/fantasy-football/components/scores/scores.component.spec.ts
 create mode 100644 apps/fantalytic-public/src/app/fantasy-football/components/scores/scores.component.ts
 create mode 100644 apps/fantalytic-public/src/app/fantasy-football/components/stats/stats.component.html
 create mode 100644 apps/fantalytic-public/src/app/fantasy-football/components/stats/stats.component.scss
 create mode 100644 apps/fantalytic-public/src/app/fantasy-football/components/stats/stats.component.spec.ts
 create mode 100644 apps/fantalytic-public/src/app/fantasy-football/components/stats/stats.component.ts

diff --git a/apps/fantalytic-public/src/app/app.config.ts b/apps/fantalytic-public/src/app/app.config.ts
index a4f6944..5177063 100644
--- a/apps/fantalytic-public/src/app/app.config.ts
+++ b/apps/fantalytic-public/src/app/app.config.ts
@@ -25,17 +25,33 @@ const routes: Route[] = [
   },
   {
     path: 'fantasy-football',
-    loadChildren: () =>
-      import('../app/fantasy-football/const/fantasy-football-routes.const').then(
-        (m) => m.FANTASY_FOOTBALL_ROUTES
-      ),
+    loadComponent: () => import('../app/fantasy-football/fantasy-football.component').then((a) => a.FantasyFootballComponent),
     canActivate: [MobileCheckerService],
     providers: [
       importProvidersFrom(
-        StoreModule.forFeature('fantasyFootball', fantasyFootballReducer),
+        StoreModule.forFeature('fantasy-football', fantasyFootballReducer),
         EffectsModule.forFeature([FantasyFootballEffects]),
       )      
     ],
+    children: [
+    {
+        path: 'stats',
+        loadComponent: () => import('../app/fantasy-football/components/stats/stats.component').then(c => c.StatsComponent)
+      },
+      {
+        path: 'compare',
+        loadComponent: () => import('../app/fantasy-football/components/compare-players/compare-players.component').then(c => c.ComparePlayersComponent)
+      },
+      {
+        path: 'scores',
+        loadComponent: () => import('../app/fantasy-football/components/scores/scores.component').then(c => c.ScoresComponent)
+      },
+      {
+          path: '',
+          pathMatch: 'full',
+          redirectTo: 'stats'
+      }
+  ]
   },
   {
     path: '',
diff --git a/apps/fantalytic-public/src/app/fantasy-football/components/fantasy-football-sidebar/fantasy-football-sidebar.component.html b/apps/fantalytic-public/src/app/fantasy-football/components/fantasy-football-sidebar/fantasy-football-sidebar.component.html
index 628ad03..6fc79ba 100644
--- a/apps/fantalytic-public/src/app/fantasy-football/components/fantasy-football-sidebar/fantasy-football-sidebar.component.html
+++ b/apps/fantalytic-public/src/app/fantasy-football/components/fantasy-football-sidebar/fantasy-football-sidebar.component.html
@@ -1,3 +1,3 @@
 <div class="sidebar-container">
-    <button color="primary" *ngFor="let item of SIDEBAR_ITEM_MAP" mat-raised-button (click)="sideBarEvent.emit(item.path)">{{item.label}}</button>
+    <button class="pmt-white" color="primary" *ngFor="let item of SIDEBAR_ITEM_MAP" mat-raised-button (click)="sideBarEvent.emit(item.path)">{{item.label}}</button>
 </div>  
diff --git a/apps/fantalytic-public/src/app/fantasy-football/components/fantasy-football-sidebar/fantasy-football-sidebar.component.scss b/apps/fantalytic-public/src/app/fantasy-football/components/fantasy-football-sidebar/fantasy-football-sidebar.component.scss
index c1d11f6..3610072 100644
--- a/apps/fantalytic-public/src/app/fantasy-football/components/fantasy-football-sidebar/fantasy-football-sidebar.component.scss
+++ b/apps/fantalytic-public/src/app/fantasy-football/components/fantasy-football-sidebar/fantasy-football-sidebar.component.scss
@@ -5,4 +5,5 @@
     button {
         margin-bottom: 1rem;
     }
-}
\ No newline at end of file
+}
+
diff --git a/apps/fantalytic-public/src/app/fantasy-football/components/scores/scores.component.html b/apps/fantalytic-public/src/app/fantasy-football/components/scores/scores.component.html
new file mode 100644
index 0000000..e5361b2
--- /dev/null
+++ b/apps/fantalytic-public/src/app/fantasy-football/components/scores/scores.component.html
@@ -0,0 +1 @@
+<p>scores works!</p>
diff --git a/apps/fantalytic-public/src/app/fantasy-football/components/scores/scores.component.scss b/apps/fantalytic-public/src/app/fantasy-football/components/scores/scores.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/apps/fantalytic-public/src/app/fantasy-football/components/scores/scores.component.spec.ts b/apps/fantalytic-public/src/app/fantasy-football/components/scores/scores.component.spec.ts
new file mode 100644
index 0000000..037d0cc
--- /dev/null
+++ b/apps/fantalytic-public/src/app/fantasy-football/components/scores/scores.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ScoresComponent } from './scores.component';
+
+describe('ScoresComponent', () => {
+  let component: ScoresComponent;
+  let fixture: ComponentFixture<ScoresComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ScoresComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ScoresComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/fantalytic-public/src/app/fantasy-football/components/scores/scores.component.ts b/apps/fantalytic-public/src/app/fantasy-football/components/scores/scores.component.ts
new file mode 100644
index 0000000..804fd0a
--- /dev/null
+++ b/apps/fantalytic-public/src/app/fantasy-football/components/scores/scores.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'pmt-scores',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './scores.component.html',
+  styleUrls: ['./scores.component.scss'],
+})
+export class ScoresComponent {}
diff --git a/apps/fantalytic-public/src/app/fantasy-football/components/stats/stats.component.html b/apps/fantalytic-public/src/app/fantasy-football/components/stats/stats.component.html
new file mode 100644
index 0000000..b47ec0d
--- /dev/null
+++ b/apps/fantalytic-public/src/app/fantasy-football/components/stats/stats.component.html
@@ -0,0 +1,33 @@
+<section class="m-2" *ngIf="fantasyFootballState$ | async as state">
+  <mat-sidenav-container autosize >
+    <mat-sidenav-content>
+        <div class="filter-container">
+            <div class="position-container">
+                <span>Position</span>
+                <button [ngClass]="{'active': (currentPosition$ | async) === 'QB'}" (click)="updatePosition('QB')" mat-button>QB</button>
+                <button [ngClass]="{'active': (currentPosition$ | async) === 'RB'}" (click)="updatePosition('RB')" mat-button>RB</button>
+                <button [ngClass]="{'active': (currentPosition$ | async) === 'WR'}" (click)="updatePosition('WR')" mat-button>WR / TE</button>
+                <button [ngClass]="{'active': (currentPosition$ | async) === 'DEF'}" (click)="updatePosition('DEF')" mat-button>DEF</button>
+            </div>
+            <div class="year-container">
+                <span>Year</span>
+                <button [ngClass]="{'active': (currentYear$ | async) === year}" (click)="filterByYear(year)" mat-button *ngFor="let year of ALL_YEARS">{{year}}</button>
+            </div>
+        </div>
+        <div class="grid-container" *ngIf="state.gridConfig">
+            <ag-grid-angular #statGrid
+                class="ag-theme-alpine"
+                [columnDefs]="state.gridConfig.colDef"
+                [rowData]="state.selectedRowData"
+                rowSelection="multiple"
+                [defaultColDef]="DEFAULT_COL_DEF_SETTINGS"
+                (rowSelected)="handleUpdatedRowSelected()"></ag-grid-angular>
+            
+        </div>
+    </mat-sidenav-content>
+    <mat-sidenav #drawer mode="side" position="end">
+        <pmt-fantasy-football-sidebar (sideBarEvent)="handleSidebarEvent($event)"></pmt-fantasy-football-sidebar>
+    </mat-sidenav>
+  </mat-sidenav-container>
+</section>
+
diff --git a/apps/fantalytic-public/src/app/fantasy-football/components/stats/stats.component.scss b/apps/fantalytic-public/src/app/fantasy-football/components/stats/stats.component.scss
new file mode 100644
index 0000000..193ab89
--- /dev/null
+++ b/apps/fantalytic-public/src/app/fantasy-football/components/stats/stats.component.scss
@@ -0,0 +1,3 @@
+ag-grid-angular {
+  height: 50vh;
+}
\ No newline at end of file
diff --git a/apps/fantalytic-public/src/app/fantasy-football/components/stats/stats.component.spec.ts b/apps/fantalytic-public/src/app/fantasy-football/components/stats/stats.component.spec.ts
new file mode 100644
index 0000000..c6bdd8b
--- /dev/null
+++ b/apps/fantalytic-public/src/app/fantasy-football/components/stats/stats.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { StatsComponent } from './stats.component';
+
+describe('StatsComponent', () => {
+  let component: StatsComponent;
+  let fixture: ComponentFixture<StatsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [StatsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(StatsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/fantalytic-public/src/app/fantasy-football/components/stats/stats.component.ts b/apps/fantalytic-public/src/app/fantasy-football/components/stats/stats.component.ts
new file mode 100644
index 0000000..79c5f23
--- /dev/null
+++ b/apps/fantalytic-public/src/app/fantasy-football/components/stats/stats.component.ts
@@ -0,0 +1,83 @@
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { FantasyFootballState, PositionTypes } from '@pmt/fantalytic-shared';
+import { AgGridAngular, AgGridModule } from 'ag-grid-angular';
+import { Observable, Subject } from 'rxjs';
+import { DEFAULT_COL_DEF_SETTINGS } from '../../../const/grid.const';
+import { setPositionType, updateSelectedPlayers, updateYearFilter } from '../../ngrx/actions/fantasy-football.actions';
+import { getSelectedYear, getPosition, getFantasyFootballState } from '../../ngrx/selectors/fantasy-football.selectors';
+import { MatButtonModule } from '@angular/material/button';
+import { FantasyFootballSidebarComponent } from '../fantasy-football-sidebar/fantasy-football-sidebar.component';
+
+@Component({
+  selector: 'pmt-stats',
+  standalone: true,
+  imports: [ 
+    CommonModule,
+    AgGridModule,
+    MatButtonModule,
+    MatSidenavModule,
+    FantasyFootballSidebarComponent,
+  ],
+  templateUrl: './stats.component.html',
+  styleUrls: ['./stats.component.scss'],
+})
+export class StatsComponent implements OnInit, OnDestroy {
+
+  @ViewChild('statGrid')
+  statGrid!: AgGridAngular;
+
+  @ViewChild('drawer')
+  drawer!: MatSidenav;
+
+  fantasyFootballState$!: Observable<FantasyFootballState>;
+  currentYear$ = this._store.select(getSelectedYear);
+  currentPosition$ = this._store.select(getPosition);
+  
+  readonly DEFAULT_COL_DEF_SETTINGS = DEFAULT_COL_DEF_SETTINGS;
+  readonly ALL_YEARS = [2018,2019,2020,2021,2022];
+
+  private _compDestroyedSub$ = new Subject<void>();
+
+  constructor(private _store: Store<FantasyFootballState>, private _router: Router) {}
+  
+  ngOnInit(): void {
+      this._store.dispatch(setPositionType(PositionTypes.QB));
+      this.fantasyFootballState$ = this._store.select(getFantasyFootballState);
+  }
+
+  ngOnDestroy(): void {
+      this._compDestroyedSub$.next();
+  }
+
+  gridReady(): void {
+    this.statGrid.api.sizeColumnsToFit();
+  }
+
+  handleUpdatedRowSelected(): void {
+    const selectedPlayers = this.statGrid.api.getSelectedNodes().map(node => node.data.player);
+    this._store.dispatch(updateSelectedPlayers(selectedPlayers));
+    if (selectedPlayers.length) {
+      this.drawer.open();
+    } else {
+      this.drawer.close();
+    }
+    
+  }
+
+  updatePosition(position: string): void {
+    this.drawer.close();
+    this._store.dispatch(setPositionType(position as PositionTypes));
+  }
+
+  handleSidebarEvent(path: string): void {
+    this._router.navigate(['fantasy-football', path]);
+  }
+
+  filterByYear(year: number): void {
+    this._store.dispatch(updateYearFilter(year));
+  }
+}
diff --git a/apps/fantalytic-public/src/app/fantasy-football/const/fantasy-football-routes.const.ts b/apps/fantalytic-public/src/app/fantasy-football/const/fantasy-football-routes.const.ts
index a92e87c..630c9b1 100644
--- a/apps/fantalytic-public/src/app/fantasy-football/const/fantasy-football-routes.const.ts
+++ b/apps/fantalytic-public/src/app/fantasy-football/const/fantasy-football-routes.const.ts
@@ -1,10 +1,6 @@
 import { Route } from "@angular/router";
 
-export const FANTASY_FOOTBALL_ROUTES: Route[] = [
-    {
-        path: 'compare',
-        loadComponent: () => import('../components/compare-players/compare-players.component').then(c => c.ComparePlayersComponent)
-    },
+export const FANTASY_FOOTBALL_ROUTES: Route[] = [    
     {
         path: '',
         pathMatch: 'full',
diff --git a/apps/fantalytic-public/src/app/fantasy-football/fantasy-football.component.html b/apps/fantalytic-public/src/app/fantasy-football/fantasy-football.component.html
index 12aa0a0..d26521d 100644
--- a/apps/fantalytic-public/src/app/fantasy-football/fantasy-football.component.html
+++ b/apps/fantalytic-public/src/app/fantasy-football/fantasy-football.component.html
@@ -1,35 +1,10 @@
 
-<main class="main-container" *ngIf="fantasyFootballState$ | async as state">
-    <mat-sidenav-container autosize>
-        <mat-sidenav-content>
-            <div class="filter-container">
-                <div class="position-container">
-                    <span>Position</span>
-                    <button [ngClass]="{'active': (currentPosition$ | async) === 'QB'}" (click)="updatePosition('QB')" mat-button>QB</button>
-                    <button [ngClass]="{'active': (currentPosition$ | async) === 'RB'}" (click)="updatePosition('RB')" mat-button>RB</button>
-                    <button [ngClass]="{'active': (currentPosition$ | async) === 'WR'}" (click)="updatePosition('WR')" mat-button>WR / TE</button>
-                    <button [ngClass]="{'active': (currentPosition$ | async) === 'DEF'}" (click)="updatePosition('DEF')" mat-button>DEF</button>
-                </div>
-                <div class="year-container">
-                    <span>Year</span>
-                    <button [ngClass]="{'active': (currentYear$ | async) === year}" (click)="filterByYear(year)" mat-button *ngFor="let year of ALL_YEARS">{{year}}</button>
-                </div>
-            </div>
-            <div class="grid-container" *ngIf="state.gridConfig">
-                <ag-grid-angular #statGrid
-                    class="ag-theme-alpine"
-                    [columnDefs]="state.gridConfig.colDef"
-                    [rowData]="state.selectedRowData"
-                    rowSelection="multiple"
-                    [defaultColDef]="DEFAULT_COL_DEF_SETTINGS"
-                    (rowSelected)="handleUpdatedRowSelected()"></ag-grid-angular>
-                
-            </div>
-        </mat-sidenav-content>
-        <mat-sidenav #drawer mode="side" position="end">
-            <pmt-fantasy-football-sidebar (sideBarEvent)="handleSidebarEvent($event)"></pmt-fantasy-football-sidebar>
-        </mat-sidenav>
-    </mat-sidenav-container>
+<main class="main-container flex flex-col">
+    <div class="w-full inline-flex m-2">
+        <button mat-button routerLink="/fantasy-football/stats" routerLinkActive="underline" class="mr-2 cursor-pointer">Stats</button>
+        <button mat-button routerLink="/fantasy-football/scores" routerLinkActive="underline" class="cursor-pointer">Scores</button>
+    </div>
+    <router-outlet></router-outlet>
     
 </main>
 
diff --git a/apps/fantalytic-public/src/app/fantasy-football/fantasy-football.component.scss b/apps/fantalytic-public/src/app/fantasy-football/fantasy-football.component.scss
index ded0a54..e69de29 100644
--- a/apps/fantalytic-public/src/app/fantasy-football/fantasy-football.component.scss
+++ b/apps/fantalytic-public/src/app/fantasy-football/fantasy-football.component.scss
@@ -1,35 +0,0 @@
-.main-container {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    mat-sidenav-container {
-        width: 100vw;
-    }
-}
-
-.filter-container {
-    grid-column: 1 / 3;
-    display: inline-flex;
-    margin: 1rem;
-    .position-container, .year-container {
-        background-color: #ccc;
-        margin-right: 1rem;
-    }
-    span, div, a {
-        padding: 1.5rem;
-    }
-}
-
-.grid-container {
-    height: 70vh;
-    width: 90vw;
-    grid-column: 2 / 3;
-    margin: 1rem;
-    ag-grid-angular {
-        height: 100%;
-        width: 100%;
-    }
-}
-
-.active {
-    text-decoration: underline;
-}
\ No newline at end of file
diff --git a/apps/fantalytic-public/src/app/fantasy-football/fantasy-football.component.ts b/apps/fantalytic-public/src/app/fantasy-football/fantasy-football.component.ts
index cf28075..ceb2034 100644
--- a/apps/fantalytic-public/src/app/fantasy-football/fantasy-football.component.ts
+++ b/apps/fantalytic-public/src/app/fantasy-football/fantasy-football.component.ts
@@ -1,85 +1,20 @@
-import { CommonModule } from '@angular/common';
-import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
-
+import { Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
-import { Router } from '@angular/router';
-import { Store } from '@ngrx/store';
-import { getFantasyFootballState, getPosition, getSelectedYear } from './ngrx/selectors/fantasy-football.selectors';
-import {  setPositionType, updateSelectedPlayers, updateYearFilter } from './ngrx/actions/fantasy-football.actions';
-import { AgGridAngular, AgGridModule } from 'ag-grid-angular';
-import { Observable, Subject } from 'rxjs';
-import { DEFAULT_COL_DEF_SETTINGS } from '../const/grid.const';
-import { FantasyFootballSidebarComponent } from './components/fantasy-football-sidebar/fantasy-football-sidebar.component';
-import { FantasyFootballState, PositionTypes } from '@pmt/fantalytic-shared';
+
+import { RouterModule } from '@angular/router';
 @Component({
   selector: 'pmt-fantasy-football',
   standalone: true,
   imports: [
-    CommonModule,
-    AgGridModule,
-    MatButtonModule,
-    MatSidenavModule,
-    FantasyFootballSidebarComponent
+   RouterModule,
+   MatButtonModule
   ],
   templateUrl: './fantasy-football.component.html',
   styleUrls: ['./fantasy-football.component.scss']
 })
 
-export class FantasyFootballComponent implements OnInit, OnDestroy {
-
-  @ViewChild('statGrid')
-  statGrid!: AgGridAngular;
-
-  @ViewChild('drawer')
-  drawer!: MatSidenav;
-
-  fantasyFootballState$!: Observable<FantasyFootballState>;
-  currentYear$ = this._store.select(getSelectedYear);
-  currentPosition$ = this._store.select(getPosition);
-  
-  readonly DEFAULT_COL_DEF_SETTINGS = DEFAULT_COL_DEF_SETTINGS;
-  readonly ALL_YEARS = [2018,2019,2020,2021,2022];
-
-  private _compDestroyedSub$ = new Subject<void>();
+export class FantasyFootballComponent {
 
-  constructor(private _store: Store<FantasyFootballState>, private _router: Router) {}
   
-  ngOnInit(): void {
-      this._store.dispatch(setPositionType(PositionTypes.QB));
-      this.fantasyFootballState$ = this._store.select(getFantasyFootballState);
-  }
-
-  ngOnDestroy(): void {
-      this._compDestroyedSub$.next();
-  }
-
-  gridReady(): void {
-    this.statGrid.api.sizeColumnsToFit();
-  }
-
-  handleUpdatedRowSelected(): void {
-    const selectedPlayers = this.statGrid.api.getSelectedNodes().map(node => node.data.player);
-    this._store.dispatch(updateSelectedPlayers(selectedPlayers));
-    if (selectedPlayers.length) {
-      this.drawer.open();
-    } else {
-      this.drawer.close();
-    }
-    
-  }
-
-  updatePosition(position: string): void {
-    this.drawer.close();
-    this._store.dispatch(setPositionType(position as PositionTypes));
-  }
-
-  handleSidebarEvent(path: string): void {
-    this._router.navigate(['fantasy-football', path]);
-  }
-
-  filterByYear(year: number): void {
-    this._store.dispatch(updateYearFilter(year));
-  }
 
 }
diff --git a/apps/fantalytic-public/src/app/topics/topics.component.html b/apps/fantalytic-public/src/app/topics/topics.component.html
index bbfc689..f9b91b0 100644
--- a/apps/fantalytic-public/src/app/topics/topics.component.html
+++ b/apps/fantalytic-public/src/app/topics/topics.component.html
@@ -1,7 +1,7 @@
 <main class="w-[100vw]">
     <section class="flex flex-col m-2">
         <h3>RSS Feeds:</h3>
-        <select class="w-[25%]" (change)="updateRssFeed($event)">
+        <select class="lg:w-[25%]" (change)="updateRssFeed($event)">
             <option *ngFor="let rss of rssFeeds | keyvalue" [value]="rss.value">{{rss.value}}</option>
         </select>
     </section>
diff --git a/apps/fantalytic-public/src/styles.scss b/apps/fantalytic-public/src/styles.scss
index a7cfce6..5437e73 100644
--- a/apps/fantalytic-public/src/styles.scss
+++ b/apps/fantalytic-public/src/styles.scss
@@ -45,3 +45,10 @@ h3 {
 .mat-button-wrapper {
   color: unset;
 }
+
+// material overrides
+.mat-primary {
+  .mdc-button__label {
+    color: #fff;
+  }
+}
\ No newline at end of file