try out mdb ui kit

angular.json

@@ -7,7 +7,7 @@
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
-          "style": "less"
+          "style": "scss"
         }
       },
       "root": "",
@@ -24,14 +24,14 @@
               "zone.js"
             ],
             "tsConfig": "tsconfig.app.json",
-            "inlineStyleLanguage": "less",
+            "inlineStyleLanguage": "scss",
             "assets": [
               "src/favicon.ico",
               "src/assets"
             ],
             "styles": [
               "@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.less"
+              "src/styles.scss"
             ],
             "scripts": []
           },
@@ -88,14 +88,14 @@
               "zone.js/testing"
             ],
             "tsConfig": "tsconfig.spec.json",
-            "inlineStyleLanguage": "less",
+            "inlineStyleLanguage": "scss",
             "assets": [
               "src/favicon.ico",
               "src/assets"
             ],
             "styles": [
               "@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.less"
+              "src/styles.scss"
             ],
             "scripts": []
           }

package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser": "^16.2.0",
     "@angular/platform-browser-dynamic": "^16.2.0",
     "@angular/router": "^16.2.0",
+    "@fortawesome/fontawesome-free": "^6.4.2",
     "@types/jwt-decode": "^3.1.0",
     "better-sqlite3": "^9.1.1",
     "camo": "^0.12.4",
@@ -29,11 +30,14 @@
     "express": "^4.18.2",
     "jsonwebtoken": "^9.0.2",
     "jwt-decode": "^4.0.0",
+    "mdb-angular-ui-kit": "^5.1.0",
     "moment": "^2.29.4",
     "multer": "^1.4.5-lts.1",
     "nedb": "^1.8.0",
+    "node-sass": "^9.0.0",
     "nodemon": "^3.0.1",
     "rxjs": "~7.8.0",
+    "sass-loader": "^13.3.2",
     "tslib": "^2.3.0",
     "zone.js": "~0.13.0"
   },

src/app/app.component.ts

@@ -4,7 +4,7 @@ import { ApiService } from './services/api.service';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.less']
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
   title = 'Bridge';

src/app/components/admin/admin.component.ts

@@ -4,7 +4,7 @@ import { AuthService } from 'src/app/services/auth-service';
 @Component({
   selector: 'app-admin',
   templateUrl: './admin.component.html',
-  styleUrls: ['./admin.component.less']
+  styleUrls: ['./admin.component.scss']
 })
 export class AdminComponent {
 

src/app/components/login/login.component.ts

@@ -6,7 +6,7 @@ import { AuthService } from '../../services/auth-service';
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
-  styleUrls: ['./login.component.less']
+  styleUrls: ['./login.component.scss']
 })
 export class LoginComponent {
 

src/app/components/new-race-dialog/new-race-dialog.component.ts

@@ -5,7 +5,7 @@ import { ApiService } from 'src/app/services/api.service';
 @Component({
   selector: 'app-new-race-dialog',
   templateUrl: './new-race-dialog.component.html',
-  styleUrls: ['./new-race-dialog.component.less']
+  styleUrls: ['./new-race-dialog.component.scss']
 })
 export class NewRaceDialogComponent {
   constructor(

src/app/components/new-season-card/new-season-card.component.ts

@@ -5,7 +5,7 @@ import { NewSeasonDialogComponent } from '../new-season-dialog/new-season-dialog
 @Component({
   selector: 'app-new-season-card',
   templateUrl: './new-season-card.component.html',
-  styleUrls: ['./new-season-card.component.less']
+  styleUrls: ['./new-season-card.component.scss']
 })
 export class NewSeasonCardComponent {
   newSeasonDetails = {

src/app/components/new-season-dialog/new-season-dialog.component.ts

@@ -5,7 +5,7 @@ import { ApiService } from 'src/app/services/api.service';
 @Component({
   selector: 'app-new-season-dialog',
   templateUrl: './new-season-dialog.component.html',
-  styleUrls: ['./new-season-dialog.component.less']
+  styleUrls: ['./new-season-dialog.component.scss']
 })
 export class NewSeasonDialogComponent {
 

src/app/components/replay-upload/replay-upload.component.ts

@@ -5,7 +5,7 @@ import { ApiService } from '../../services/api.service';
 @Component({
   selector: 'app-replay-upload',
   templateUrl: './replay-upload.component.html',
-  styleUrls: ['./replay-upload.component.less']
+  styleUrls: ['./replay-upload.component.scss']
 })
 export class ReplayUploadComponent {
 

src/app/components/season-card/season-card.component.ts

@@ -4,7 +4,7 @@ import { Season } from '../../models/season';
 @Component({
   selector: 'app-season-card',
   templateUrl: './season-card.component.html',
-  styleUrls: ['./season-card.component.less']
+  styleUrls: ['./season-card.component.scss']
 })
 export class SeasonCardComponent {
   @Input() season?: Season;

src/app/components/season-details/season-details.component.ts

@@ -10,7 +10,7 @@ import { UploadReplayDialogComponent } from '../upload-replay-dialog/upload-repl
 @Component({
   selector: 'app-season-details',
   templateUrl: './season-details.component.html',
-  styleUrls: ['./season-details.component.less']
+  styleUrls: ['./season-details.component.scss']
 })
 export class SeasonDetailsComponent {
   seasonInfo?: Season;

src/app/components/season-list/season-list.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-season-list',
   templateUrl: './season-list.component.html',
-  styleUrls: ['./season-list.component.less']
+  styleUrls: ['./season-list.component.scss']
 })
 export class SeasonListComponent {
 

src/app/components/season-standings-table/season-standings-table.component.ts

@@ -4,7 +4,7 @@ import { SeasonStandingsEntry } from '../../models/season';
 @Component({
   selector: 'app-season-standings-table',
   templateUrl: './season-standings-table.component.html',
-  styleUrls: ['./season-standings-table.component.less']
+  styleUrls: ['./season-standings-table.component.scss']
 })
 export class SeasonStandingsTableComponent {
   

src/app/components/seasons/seasons.component.ts

@@ -6,7 +6,7 @@ import { AuthService } from 'src/app/services/auth-service';
 @Component({
   selector: 'app-seasons',
   templateUrl: './seasons.component.html',
-  styleUrls: ['./seasons.component.less']
+  styleUrls: ['./seasons.component.scss']
 })
 
 export class SeasonsComponent 

src/app/components/top-bar/top-bar.component.ts

@@ -5,7 +5,7 @@ import { AuthService } from 'src/app/services/auth-service';
 @Component({
   selector: 'app-top-bar',
   templateUrl: './top-bar.component.html',
-  styleUrls: ['./top-bar.component.less']
+  styleUrls: ['./top-bar.component.scss']
 })
 export class TopBarComponent {
   constructor(private authService: AuthService){}

src/app/components/upload-replay-dialog/upload-replay-dialog.component.ts

@@ -5,7 +5,7 @@ import { ApiService } from '../../services/api.service';
 @Component({
   selector: 'app-upload-replay-dialog',
   templateUrl: './upload-replay-dialog.component.html',
-  styleUrls: ['./upload-replay-dialog.component.less']
+  styleUrls: ['./upload-replay-dialog.component.scss']
 })
 export class UploadReplayDialogComponent {
   fileName = '';

src/app/components/weekly-standings-table/weekly-standings-table.component.ts

@@ -4,7 +4,7 @@ import { SeasonWeekEntry } from '../../models/season';
 @Component({
   selector: 'app-weekly-standings-table',
   templateUrl: './weekly-standings-table.component.html',
-  styleUrls: ['./weekly-standings-table.component.less']
+  styleUrls: ['./weekly-standings-table.component.scss']
 })
 export class WeeklyStandingsTableComponent {
   displayedColumns: string[] = ['position', 'name', 'gameHandle', 'runTime'];

src/index.html

@@ -7,7 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="preconnect" href="https://fonts.gstatic.com">
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body class="mat-typography">

src/styles.less

@@ -1,4 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

src/styles.scss

@@ -0,0 +1,11 @@
+/* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+@import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
+@import "@fortawesome/fontawesome-free/scss/solid.scss";
+@import "@fortawesome/fontawesome-free/scss/regular.scss";
+@import "@fortawesome/fontawesome-free/scss/brands.scss";
+
+@import "mdb-angular-ui-kit/assets/scss/mdb.scss";