fixing dependencies

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "npm i && ng serve",
+    "start": "ng serve --aot",
     "build": "ng build",
     "deploy": "ng build --prod && firebase deploy",
     "test": "ng test",
@@ -24,33 +24,38 @@
     "@angular/platform-browser-dynamic": "~9.1.2",
     "@angular/router": "~9.1.2",
     "@angular/service-worker": "~9.1.2",
-    "@fortawesome/angular-fontawesome": "^0.6.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.27",
-    "@fortawesome/free-solid-svg-icons": "^5.12.1",
-    "firebase": "^7.10.0",
-    "rxjs": "~6.5.4",
-    "tslib": "^1.11.1",
-    "zone.js": "~0.10.3"
+    "@fortawesome/angular-fontawesome": "^0.6.1",
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
+    "firebase": ">= 5.5.7 <8",
+    "rxjs": "~6.5.5",
+    "tslib": "^1.10.0",
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.901.1",
     "@angular/cli": "~9.1.1",
     "@angular/compiler-cli": "~9.1.2",
     "@angular/language-service": "~9.1.2",
-    "@types/jasmine": "~3.5.8",
-    "@types/jasminewd2": "~2.0.8",
-    "@types/node": "^13.9.0",
-    "codelyzer": "^5.2.1",
-    "jasmine-core": "~3.5.0",
+    "@types/node": "^12.11.1",
+    "@types/jasmine": "~3.3.8",
+    "@types/jasminewd2": "~2.0.3",
+    "codelyzer": "^5.1.2",
+    "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.4.1",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~2.1.1",
-    "karma-jasmine": "~3.1.1",
-    "karma-jasmine-html-reporter": "^1.5.2",
-    "protractor": "~5.4.3",
-    "ts-node": "~8.6.2",
-    "tslint": "~6.0.0",
-    "typescript": "^3.7.5"
+    "karma": "~4.1.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-jasmine": "~2.0.1",
+    "karma-jasmine-html-reporter": "^1.4.0",
+    "protractor": "~5.4.0",
+    "ts-node": "~7.0.0",
+    "tslint": "~5.15.0",
+    "typescript": "~3.8.3",
+    "@angular-devkit/architect": "<0.900 || ^0.900.0-0 || ^9.0.0-0",
+    "firebase-tools": "^7.12.0",
+    "fuzzy": "^0.1.3",
+    "inquirer": "^6.2.2",
+    "inquirer-autocomplete-prompt": "^1.0.1"
   }
 }

src/app/app.module.ts

@@ -14,6 +14,7 @@ import {AngularFireDatabaseModule} from '@angular/fire/database';
 import {AngularFireAuthModule} from '@angular/fire/auth';
 import {AngularFireAuthGuardModule} from '@angular/fire/auth-guard';
 import {MAT_DATE_LOCALE} from '@angular/material/core';
+import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 
 @NgModule({
   declarations: [
@@ -34,6 +35,7 @@ import {MAT_DATE_LOCALE} from '@angular/material/core';
     AngularFireDatabaseModule,
     AngularFireAuthModule,
     AngularFireAuthGuardModule,
+    FontAwesomeModule,
 
   ],
   providers: [

src/custom-theme.scss

@@ -1,3 +1,59 @@
+
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@import '~@angular/material/theming';
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat-core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$wgenerator-primary: mat-palette($mat-indigo);
+$wgenerator-accent: mat-palette($mat-pink, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$wgenerator-warn: mat-palette($mat-red);
+
+// Create the theme object (a Sass map containing all of the palettes).
+$wgenerator-theme: mat-light-theme($wgenerator-primary, $wgenerator-accent, $wgenerator-warn);
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include angular-material-theme($wgenerator-theme);
+
+
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@import '~@angular/material/theming';
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat-core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$wgenerator-primary: mat-palette($mat-indigo);
+$wgenerator-accent: mat-palette($mat-pink, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$wgenerator-warn: mat-palette($mat-red);
+
+// Create the theme object (a Sass map containing all of the palettes).
+$wgenerator-theme: mat-light-theme($wgenerator-primary, $wgenerator-accent, $wgenerator-warn);
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include angular-material-theme($wgenerator-theme);
+
 // Custom Theming for Angular Material
 // For more information: https://material.angular.io/guide/theming
 @import '~@angular/material/theming';

src/styles/styles.less

@@ -56,3 +56,12 @@ h1, h2, h3, h4 {
     opacity: 1;
   }
 }
+
+html, body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}