From 7550a16e9907b4d4fddd4e7111fbffe6d7e68a2f Mon Sep 17 00:00:00 2001
From: Loris Sauter <loris.sauter@unibas.ch>
Date: Tue, 9 Jul 2024 09:49:29 +0200
Subject: [PATCH] Finished frontend updates

---
 frontend/angular.json    |  4 ++--
 frontend/src/styles.scss | 17 +++++++++--------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/frontend/angular.json b/frontend/angular.json
index 93046453b..6b75e16c1 100644
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -20,7 +20,7 @@
             "outputPath": "dist/dres-frontend",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "aot": true,
             "assets": ["src/immutable", "src/config.json"],
@@ -90,7 +90,7 @@
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "assets": ["src/favicon.ico", "src/assets"],
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 0944abf6f..b27b61ba1 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -1,4 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
+@use '@angular/material' as mat;
+@include mat.core();
 
 html,
 body {
@@ -59,24 +61,23 @@ app-judgement-media-viewer .mat-progress-bar-buffer {
   background-color: #e1bee7 !important; /* Not sure why this has to be done manually: https://material.angular.io/components/progress-bar/overview */
 }
 
-@import '@angular/material/theming';
-@include mat-core();
 
-$primary: mat-palette($mat-purple);
-$accent: mat-palette($mat-green, A200);
-$warn: mat-palette($mat-red, 500);
+
+$primary: mat.define-palette(mat.$purple-palette);
+$accent: mat.define-palette(mat.$green-palette, A200);
+$warn: mat.define-palette(mat.$red-palette, 500);
 
 /* Having access to the color palette */
 .primary-color {
-  color: mat-color($primary) !important;
+  color: mat.get-color-from-palette($primary) !important;
 }
 
 .accent-color {
-  color: mat-color($accent) !important;
+  color: mat.get-color-from-palette($accent) !important;
 }
 
 .warn-color {
-  color: mat-color($warn) !important;
+  color: mat.get-color-from-palette($warn) !important;
 }
 
 .p1r {