fix theming + ui improvements

packages/frontend/package.json

@@ -8,7 +8,8 @@
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
     "generate": "oazapfts --optimistic --useEnumType ./src/app/generated-api/swagger.json ./src/app/generated-api/api.ts",
-    "dev": "pnpm -w run dev"
+    "dev": "pnpm -w run dev",
+    "deploy": "ng build --aot --configuration production"
   },
   "prettier": {
     "printWidth": 100,

packages/frontend/src/app/app.html

@@ -1,14 +1,16 @@
 @if(this.auth.loggedIn()){
 <div class="no-print">
-    <button mat-flat-button color="accent" (click)="this.auth.logout()">
+    <button mat-flat-button class="secondary-btn" (click)="this.auth.logout()">
         Abmelden
     </button>
-    <button mat-stroked-button color="primary" [routerLink]="['/home']">
+    <button mat-flat-button class="primary-btn" [routerLink]="['/home']">
         Home
     </button>
-    <button mat-stroked-button color="primary" [routerLink]="['/profile']">
+    <button mat-flat-button class="tertiary-btn" (click)="gotoProfile()">
         Profil
     </button>
 </div>
 }
-<router-outlet></router-outlet>
+<div class="outlet">
+    <router-outlet></router-outlet>
+</div>

packages/frontend/src/app/app.routes.ts

@@ -11,7 +11,6 @@ import { AuthGuardData, createAuthGuard } from 'keycloak-angular';
 import { Login } from './components/login/login';
 import { MissingPage } from './components/missing-page/missing-page';
 import { Claim } from './generated-api/api';
-import { keycloakConfig } from './util/keycloak-config';
 
 export const roles = {
     UserAdmin: 'useradmin',
@@ -71,9 +70,5 @@ export const routes: Routes = [
             ),
         canActivate: [requireRoles([Claim.Memberadmin])],
     },
-    {
-        path: 'profile',
-        redirectTo: `${keycloakConfig.url}/realms/${keycloakConfig.realm}/account`,
-    },
     { path: '**', component: MissingPage },
 ];

packages/frontend/src/app/app.scss

@@ -1,10 +1,10 @@
-@media print {
+:host {
-    .no-print {
+    display: flex;
-        display: none;
+    flex-direction: column;
-        visibility: hidden;
+    height: 100%;
-    }
+    overflow: hidden;
-
+}
-    :not(.no-print) {
+
-        visibility: visible;
+.outlet {
-    }
+    overflow: auto;
 }

packages/frontend/src/app/app.ts

@@ -1,15 +1,29 @@
-import { Component, inject, signal } from '@angular/core';
+import { Component, effect, inject, signal } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule, RouterOutlet } from '@angular/router';
 import { Authentication } from './services/authentication';
+import { keycloakConfig } from './util/keycloak-config';
 
 @Component({
-  selector: 'app-root',
+    selector: 'app-root',
-  imports: [RouterOutlet, MatButtonModule, RouterModule],
+    imports: [RouterOutlet, MatButtonModule, RouterModule],
-  templateUrl: './app.html',
+    templateUrl: './app.html',
-  styleUrl: './app.scss',
+    styleUrl: './app.scss',
 })
 export class App {
-  protected readonly title = signal('frontend');
+    protected readonly title = signal('frontend');
-  protected readonly auth = inject(Authentication);
+    protected readonly auth = inject(Authentication);
+
+    protected gotoProfile() {
+        window.location.href = `${keycloakConfig.url}/realms/${keycloakConfig.realm}/account`;
+    }
+
+    constructor() {
+        effect(() => {
+            const loggedIn = this.auth.loggedIn();
+            if (!loggedIn) {
+                this.auth.login();
+            }
+        });
+    }
 }

packages/frontend/src/app/components/home/home.html

@@ -1,14 +1,26 @@
 <h1>Startseite</h1>
-<ul>
+<mat-list>
-    <!--TODO fix theming/colors-->
+    <mat-list-item [claimGuard]="Claim.Memberadmin">
-  <button matButton="outlined" class="warn-button" [routerLink]="['/test']">
+        <button matButton="filled" color="primary" [routerLink]="['/list']">
-    Entwichlungsinformationen
+            Mitgliederliste
-  </button>
+        </button>
-  <button matButton="filled" color="primary" [routerLink]="['/list']">Mitglieder</button>
+    </mat-list-item>
-  <button matButton="filled" color="warn" [routerLink]="['/manageUsers']">
+    <mat-list-item [claimGuard]="Claim.Useradmin">
-    Benutzer Verwalten
+        <button matButton="filled" color="warn" [routerLink]="['/manageUsers']">
-  </button>
+            Benutzer Verwalten
-  <button matButton="filled" color="primary" [routerLink]="['/exam']">
+        </button>
-    Prüfungsanmeldung
+    </mat-list-item>
-  </button>
+    <mat-list-item [claimGuard]="Claim.Memberadmin">
-</ul>
+        <button matButton="filled" color="primary" [routerLink]="['/exam']">
+            Prüfungsanmeldung
+        </button>
+    </mat-list-item>
+    <mat-list-item>
+        <button
+            matButton="outlined"
+            class="warn-button"
+            [routerLink]="['/test']">
+            Entwichlungsinformationen
+        </button>
+    </mat-list-item>
+</mat-list>

packages/frontend/src/app/components/home/home.ts

@@ -1,13 +1,21 @@
 import { Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { MatListModule } from '@angular/material/list';
 import { RouterModule } from '@angular/router';
+import { ClaimGuardDirective } from '../../directives/claim-guard.directive';
+import { Claim } from '../../generated-api/api';
 
 @Component({
-  selector: 'app-home',
+    selector: 'app-home',
-  imports: [RouterModule, MatButtonModule],
+    imports: [
-  templateUrl: './home.html',
+        RouterModule,
-  styleUrl: './home.scss',
+        MatButtonModule,
+        MatListModule,
+        ClaimGuardDirective,
+    ],
+    templateUrl: './home.html',
+    styleUrl: './home.scss',
 })
 export class Home {
-
+    protected Claim = Claim;
 }

packages/frontend/src/app/components/view-members/view-members.html

@@ -1,142 +1,180 @@
-<h1>Mitglieder & Sportlerübersicht</h1>
+<div>
-<button mat-raised-button color="accent" (click)="newMember()">
+    <h1>Mitglieder & Sportlerübersicht</h1>
-    Neues Mitglied
+</div>
-</button>
+<div>
-<div class="filter-container mat-elevation-z8">
+    <button matButton="filled" class="primary-btn" (click)="newMember()">
-    <div class="filter-header">
+        Neues Mitglied
-        <mat-form-field>
+    </button>
-            <label>Filter:</label>
+</div>
+<div class="filter-container">
+    <mat-form-field>
+        <label>Filter:</label>
+        <input matInput [formControl]="filterControl" placeholder="Filter" />
+    </mat-form-field>
+    <div class="status-filters">
+        <mat-radio-group [formControl]="statusControl">
+            <mat-radio-button [value]="MemberStatusFilter.ACTIVE"
+                >Aktiv</mat-radio-button
+            >
+            <mat-radio-button [value]="MemberStatusFilter.INACTIVE"
+                >Inaktiv</mat-radio-button
+            >
+            <mat-radio-button [value]="MemberStatusFilter.ALL"
+                >Alle</mat-radio-button
+            >
+        </mat-radio-group>
+        <mat-form-field
+            matTooltip="Zeigt nur Mitglieder, die zum angegebenen Datum den ausgewählten status hatten"
+            matTooltipPosition="above">
+            <label>Zum Datum:</label>
             <input
                 matInput
-                [formControl]="filterControl"
+                [matDatepicker]="picker"
-                placeholder="Filter" />
+                [formControl]="statusDateControl"
+                placeholder="Aktiv bis" />
+            <mat-hint>DD.MM.YYYY</mat-hint>
+            <mat-datepicker-toggle
+                matIconSuffix
+                [disabled]="statusControl.value===MemberStatusFilter.ALL"
+                [for]="picker"></mat-datepicker-toggle>
+            <mat-datepicker #picker></mat-datepicker>
         </mat-form-field>
-        <div class="status-filters">
-            <mat-radio-group [formControl]="statusControl">
-                <mat-radio-button [value]="MemberStatusFilter.ACTIVE"
-                    >Aktiv</mat-radio-button
-                >
-                <mat-radio-button [value]="MemberStatusFilter.INACTIVE"
-                    >Inaktiv</mat-radio-button
-                >
-                <mat-radio-button [value]="MemberStatusFilter.ALL"
-                    >Alle</mat-radio-button
-                >
-            </mat-radio-group>
-            <mat-form-field
-                matTooltip="Zeigt nur Mitglieder, die zum angegebenen Datum den ausgewählten status hatten"
-                matTooltipPosition="above">
-                <label>Zum Datum:</label>
-                <input
-                    matInput
-                    [matDatepicker]="picker"
-                    [formControl]="statusDateControl"
-                    [disabled]="statusControl.value===MemberStatusFilter.ALL"
-                    placeholder="Aktiv bis" />
-                <mat-hint>DD.MM.YYYY</mat-hint>
-                <mat-datepicker-toggle
-                    matIconSuffix
-                    [disabled]="statusControl.value===MemberStatusFilter.ALL"
-                    [for]="picker"></mat-datepicker-toggle>
-                <mat-datepicker #picker></mat-datepicker>
-            </mat-form-field>
-        </div>
-        <mat-checkbox [formControl]="onlyWithID"
-            >Nur mit Passnummer</mat-checkbox
-        >
     </div>
+    <mat-checkbox [formControl]="onlyWithID">Nur mit Passnummer</mat-checkbox>
 </div>
+<div class="table-container">
+    <!--TODO implement row count, selecting and alternating colors-->
+    <table
+        mat-table
+        [dataSource]="dataSource"
+        class="member-table"
+        matSort
+        matSortActive="vorname"
+        matSortDirection="asc"
+        matSortDisableClear>
+        <ng-container matColumnDef="edit">
+            <th mat-header-cell *matHeaderCellDef>Bearb.</th>
+            <td mat-cell *matCellDef="let element">
+                <button
+                    mat-mini-fab-button
+                    (click)="editMember(element.id)"
+                    aria-label="Edit Member">
+                    <mat-icon fontIcon="edit"></mat-icon>
+                </button>
+            </td>
+        </ng-container>
 
-<!--TODO implement row count, selecting and alternating colors-->
+        <ng-container matColumnDef="index" sticky>
-<table mat-table matSort [dataSource]="dataSource" class="mat-elevation-z8">
+            <th mat-header-cell *matHeaderCellDef>Nr.</th>
-    <ng-container matColumnDef="edit">
+            <td mat-cell *matCellDef="let element; let i=index">{{i+1}}</td>
-        <th mat-header-cell *matHeaderCellDef>Bearb.</th>
+        </ng-container>
-        <td mat-cell *matCellDef="let element">
-            <button
-                mat-mini-fab-button
-                (click)="editMember(element.id)"
-                aria-label="Edit Member">
-                <mat-icon fontIcon="edit"></mat-icon>
-            </button>
-        </td>
-    </ng-container>
-    <ng-container matColumnDef="delete">
-        <th mat-header-cell *matHeaderCellDef>Entf.</th>
-        <td mat-cell *matCellDef="let element">
-            <button
-                mat-mini-fab-button
-                (click)="deleteMember(element.id)"
-                aria-label="Delete Member">
-                <mat-icon fontIcon="delete"></mat-icon>
-            </button>
-        </td>
-    </ng-container>
-    <ng-container matColumnDef="vorname">
-        <th mat-header-cell mat-sort-header *matHeaderCellDef>Vorname</th>
-        <td mat-cell *matCellDef="let element">
-            <span [innerHTML]="element.vorname | stylizeNames"></span>
-        </td>
-    </ng-container>
-    <ng-container matColumnDef="nachname">
-        <th mat-header-cell mat-sort-header *matHeaderCellDef>Nachname</th>
-        <td mat-cell *matCellDef="let element">
-            <span [innerHTML]="element.nachname | stylizeNames"></span>
-        </td>
-    </ng-container>
-    <ng-container matColumnDef="geschlecht">
-        <th mat-header-cell mat-sort-header *matHeaderCellDef>Geschlecht</th>
-        <td mat-cell *matCellDef="let element">{{ element.geschlecht }}</td>
-    </ng-container>
-    <ng-container matColumnDef="passnummer">
-        <th mat-header-cell mat-sort-header *matHeaderCellDef>Passnummer</th>
-        <td mat-cell *matCellDef="let element">
-            {{ element.passnummer | nobreakHyphen }}
-        </td>
-    </ng-container>
-    <ng-container matColumnDef="geburtsdatum">
-        <th mat-header-cell mat-sort-header *matHeaderCellDef>Geburtsdatum</th>
-        <td mat-cell *matCellDef="let element">
-            {{ element.geburtsdatum | datePipe }}
-        </td>
-    </ng-container>
-    <ng-container matColumnDef="geburtsort">
-        <th mat-header-cell mat-sort-header *matHeaderCellDef>Geburtsort</th>
-        <td mat-cell *matCellDef="let element">{{ element.geburtsort }}</td>
-    </ng-container>
-    <ng-container matColumnDef="verein">
-        <th mat-header-cell mat-sort-header *matHeaderCellDef>
-            Vereinsmitgliedschaft
-        </th>
-        <td mat-cell *matCellDef="let element">
-            @if(element.verein){
-            <mat-icon
-                class="positive"
-                aria-label="Verein Check"
-                fontIcon="check"></mat-icon>
-            }@else {
 
-            <mat-icon
+        <ng-container matColumnDef="vorname">
-                class="negative"
+            <th mat-header-cell mat-sort-header *matHeaderCellDef>Vorname</th>
-                aria-label="Verein Cross"
+            <td mat-cell *matCellDef="let element">
-                fontIcon="close"></mat-icon>
+                <span [innerHTML]="element.vorname | stylizeNames"></span>
-            }
+            </td>
-        </td>
+        </ng-container>
-    </ng-container>
+        <ng-container matColumnDef="nachname">
+            <th mat-header-cell mat-sort-header *matHeaderCellDef>Nachname</th>
+            <td mat-cell *matCellDef="let element">
+                <span [innerHTML]="element.nachname | stylizeNames"></span>
+            </td>
+        </ng-container>
+        <ng-container matColumnDef="geschlecht">
+            <th mat-header-cell mat-sort-header *matHeaderCellDef>
+                Geschlecht
+            </th>
+            <td mat-cell *matCellDef="let element">{{ element.geschlecht }}</td>
+        </ng-container>
+        <ng-container matColumnDef="passnummer">
+            <th mat-header-cell mat-sort-header *matHeaderCellDef>
+                Passnummer
+            </th>
+            <td mat-cell *matCellDef="let element">
+                {{ element.passnummer | nobreakHyphen }}
+            </td>
+        </ng-container>
+        <ng-container matColumnDef="geburtsdatum">
+            <th mat-header-cell mat-sort-header *matHeaderCellDef>
+                Geburtsdatum
+            </th>
+            <td mat-cell *matCellDef="let element">
+                {{ element.geburtsdatum | datePipe }}
+            </td>
+        </ng-container>
+        <ng-container matColumnDef="geburtsort">
+            <th mat-header-cell mat-sort-header *matHeaderCellDef>
+                Geburtsort
+            </th>
+            <td mat-cell *matCellDef="let element">{{ element.geburtsort }}</td>
+        </ng-container>
+        <ng-container matColumnDef="verein">
+            <th mat-header-cell mat-sort-header *matHeaderCellDef>
+                Vereinsmitgliedschaft
+            </th>
+            <td mat-cell *matCellDef="let element">
+                @if(element.verein){
+                <mat-icon
+                    class="positive"
+                    aria-label="Verein Check"
+                    fontIcon="check"></mat-icon>
+                }@else {
 
-    <ng-container matColumnDef="kontakt">
+                <mat-icon
-        <th mat-header-cell *matHeaderCellDef>Kontakt</th>
+                    class="negative"
-        <td mat-cell *matCellDef="let element">{{ element.kontakt }}</td>
+                    aria-label="Verein Cross"
-    </ng-container>
+                    fontIcon="close"></mat-icon>
+                }
+            </td>
+        </ng-container>
 
-    <ng-container matColumnDef="kuendigungzum">
+        <ng-container matColumnDef="kontakt">
-        <th mat-header-cell mat-sort-header *matHeaderCellDef>
+            <th mat-header-cell *matHeaderCellDef>Kontakt</th>
-            K&uuml;ndigung zum
+            <td mat-cell *matCellDef="let element">{{ element.kontakt }}</td>
-        </th>
+        </ng-container>
-        <td mat-cell *matCellDef="let element">
-            {{ (element.kuendigungzum | datePipe) ?? "-" }}
-        </td>
-    </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <ng-container matColumnDef="kuendigungzum">
-    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <th mat-header-cell mat-sort-header *matHeaderCellDef>
-</table>
+                K&uuml;ndigung zum
+            </th>
+            <td mat-cell *matCellDef="let element">
+                {{ (element.kuendigungzum | datePipe) ?? "-" }}
+            </td>
+        </ng-container>
+
+        <ng-container matColumnDef="delete">
+            <th mat-header-cell *matHeaderCellDef>Entf.</th>
+            <td mat-cell *matCellDef="let element">
+                <button
+                    mat-mini-fab-button
+                    (click)="deleteMember(element.id)"
+                    aria-label="Delete Member">
+                    <mat-icon fontIcon="delete"></mat-icon>
+                </button>
+            </td>
+        </ng-container>
+
+        <ng-container matColumnDef="totalCount">
+            <td
+                colspan="100%"
+                mat-footer-cell
+                *matFooterCellDef
+                class="footer-entry">
+                Zeige {{dataSource.filteredData.length}} von
+                {{dataSource.data.length}} Mitgliedern
+                @if(dataSource.filteredData.length !== dataSource.data.length)
+                {(gefiltert) }
+            </td>
+        </ng-container>
+
+        <tr
+            mat-header-row
+            *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+        <tr
+            mat-row
+            *matRowDef="let row; columns: displayedColumns"
+            class="table-row"></tr>
+        <tr mat-footer-row *matFooterRowDef="['totalCount']; sticky: true"></tr>
+    </table>
+</div>

packages/frontend/src/app/components/view-members/view-members.scss

@@ -1,16 +1,33 @@
-mat-radio-group {
+@use "@angular/material" as mat;
+
+:host {
     display: flex;
-    flex-direction: column;
+    flex-flow: column;
+    height: 100%;
+    // overflow: auto;
 }
 
-.filter-header {
+.filter-container {
     display: flex;
     flex-direction: row;
-    justify-content: space-evenly;
+    justify-content: start;
+    gap: 5vw;
+    flex-wrap: wrap;
+}
+
+.table-container {
+    overflow: auto;
+    border: 1px solid var(--mat-sys-outline);
+    min-height: 400px;
 }
 
 mat-form-field {
-    height: 100%;
+    display: inline-block;
+}
+
+mat-radio-group {
+    display: flex;
+    flex-direction: column;
 }
 
 .status-filters {
@@ -19,3 +36,16 @@ mat-form-field {
     justify-content: center;
     gap: 1rem;
 }
+
+td {
+    border: 1px solid var(--mat-sys-outline-variant);
+    border-collapse: collapse;
+}
+
+.table-row:nth-child(even) {
+    background-color: var(--mat-sys-surface-variant);
+}
+
+.table-row:nth-child(odd) {
+    background-color: var(--mat-sys-surface);
+}

packages/frontend/src/app/components/view-members/view-members.ts

@@ -1,4 +1,5 @@
 import { AfterViewInit, Component, viewChild } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckbox } from '@angular/material/checkbox';
@@ -62,7 +63,7 @@ export class ViewMembers implements AfterViewInit {
 
     protected readonly displayedColumns: string[] = [
         'edit',
-        'delete',
+        'index',
         'vorname',
         'nachname',
         'geschlecht',
@@ -72,6 +73,7 @@ export class ViewMembers implements AfterViewInit {
         'verein',
         'kontakt',
         'kuendigungzum',
+        'delete',
     ];
 
     protected deleteMember(memberId: any) {
@@ -157,6 +159,7 @@ export class ViewMembers implements AfterViewInit {
             return originalFilterPredicate(
                 {
                     ...data,
+                    id: null,
                     geburtsdatum: this.datePipe.transform(
                         data.geburtsdatum ?? undefined,
                     ),
@@ -189,7 +192,22 @@ export class ViewMembers implements AfterViewInit {
                 const date = combined[2];
                 const onlyWithID = combined[3];
                 this.dataSource.filter = `${filter?.replaceAll(';', '') ?? ''};${status};${date?.toISOString()};${onlyWithID}`;
-                console.log('filter', this.dataSource.filter);
+            });
+
+        this.statusControl.valueChanges
+            .pipe(takeUntilDestroyed())
+            .subscribe(value => {
+                if (
+                    value === MemberStatusFilter.ALL &&
+                    this.statusDateControl.enabled
+                ) {
+                    return this.statusDateControl.disable();
+                } else if (
+                    value !== MemberStatusFilter.ALL &&
+                    this.statusDateControl.disabled
+                ) {
+                    return this.statusDateControl.enable();
+                }
             });
 
         this.updateData();
@@ -202,8 +220,6 @@ export class ViewMembers implements AfterViewInit {
 
     private async updateData(): Promise<void> {
         const members = await api.getMembers();
-        console.log('Members loaded');
-        console.dir(members);
         this.dataSource.data = members;
     }
 }

packages/frontend/src/app/directives/claim-guard.directive.ts

@@ -0,0 +1,27 @@
+import { Directive, effect, ElementRef, inject, input } from '@angular/core';
+import { Claim } from '../generated-api/api';
+import { Authentication } from '../services/authentication';
+
+@Directive({
+    selector: '[claimGuard]',
+})
+export class ClaimGuardDirective {
+    private readonly element = inject(ElementRef);
+    private readonly auth = inject(Authentication);
+
+    public readonly claimGuard = input.required<Claim>();
+    private readonly originalDisplay = this.element.nativeElement.style.display;
+
+    constructor() {
+        effect(() => {
+            const claims = this.auth.claims();
+            const requiredClaim = this.claimGuard();
+
+            if (!claims || !claims[requiredClaim]) {
+                this.element.nativeElement.style.display = 'none';
+            } else {
+                this.element.nativeElement.style.display = this.originalDisplay;
+            }
+        });
+    }
+}

packages/frontend/src/styles.colors.scss

@@ -1,205 +0,0 @@
-// This file was generated by running 'ng generate @angular/material:theme-color'.
-// Proceed with caution if making changes to this file.
-
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-// Note: Color palettes are generated from primary: #0047a0, secondary: #cc9c00, tertiary: #cd2e3a, error: #E63241
-$_palettes: (
-  primary: (
-    0: #000000,
-    10: #001a43,
-    20: #002d6c,
-    25: #003881,
-    30: #004397,
-    35: #134fa8,
-    40: #275bb5,
-    50: #4575cf,
-    60: #618feb,
-    70: #83aaff,
-    80: #afc6ff,
-    90: #d8e2ff,
-    95: #edf0ff,
-    98: #faf9ff,
-    99: #fefbff,
-    100: #ffffff,
-  ),
-  secondary: (
-    0: #000000,
-    10: #251a00,
-    20: #3f2e00,
-    25: #4c3800,
-    30: #5a4300,
-    35: #694f00,
-    40: #775a00,
-    50: #967200,
-    60: #b58a00,
-    70: #d5a411,
-    80: #f3bf33,
-    90: #ffdf99,
-    95: #ffefd2,
-    98: #fff8f2,
-    99: #fffbff,
-    100: #ffffff,
-  ),
-  tertiary: (
-    0: #000000,
-    10: #410007,
-    20: #680010,
-    25: #7d0016,
-    30: #92001b,
-    35: #a60a23,
-    40: #b81d2d,
-    50: #db3943,
-    60: #ff535a,
-    70: #ff8887,
-    80: #ffb3b0,
-    90: #ffdad8,
-    95: #ffedeb,
-    98: #fff8f7,
-    99: #fffbff,
-    100: #ffffff,
-  ),
-  neutral: (
-    0: #000000,
-    10: #191b21,
-    20: #2e3036,
-    25: #393b42,
-    30: #45464d,
-    35: #515259,
-    40: #5d5e65,
-    50: #75777e,
-    60: #8f9098,
-    70: #aaabb2,
-    80: #c5c6ce,
-    90: #e2e2ea,
-    95: #f0f0f8,
-    98: #faf9ff,
-    99: #fefbff,
-    100: #ffffff,
-    4: #0c0e14,
-    6: #111319,
-    12: #1d1f25,
-    17: #282a30,
-    22: #33353b,
-    24: #37393f,
-    87: #d9d9e1,
-    92: #e7e7f0,
-    94: #ededf5,
-    96: #f3f3fb,
-  ),
-  neutral-variant: (
-    0: #000000,
-    10: #171b25,
-    20: #2c303b,
-    25: #373b46,
-    30: #434752,
-    35: #4e525e,
-    40: #5a5e6a,
-    50: #737783,
-    60: #8d909d,
-    70: #a7abb8,
-    80: #c3c6d4,
-    90: #dfe2f0,
-    95: #edf0ff,
-    98: #faf9ff,
-    99: #fefbff,
-    100: #ffffff,
-  ),
-  error: (
-    0: #000000,
-    10: #410007,
-    20: #680011,
-    25: #7d0016,
-    30: #92001c,
-    35: #a90021,
-    40: #bd0b29,
-    50: #e12e3e,
-    60: #ff535a,
-    70: #ff8887,
-    80: #ffb3b1,
-    90: #ffdad8,
-    95: #ffedeb,
-    98: #fff8f7,
-    99: #fffbff,
-    100: #ffffff,
-  ),
-);
-
-$_rest: (
-  secondary: map.get($_palettes, secondary),
-  neutral: map.get($_palettes, neutral),
-  neutral-variant: map.get($_palettes,  neutral-variant),
-  error: map.get($_palettes, error),
-);
-
-$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
-$tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);
-
-@function _high-contrast-value($light, $dark, $theme-type) {
-  @if ($theme-type == light) {
-    @return $light;
-  }
-  @if ($theme-type == dark) {
-    @return $dark;
-  }
-  @if ($theme-type == color-scheme) {
-    @return light-dark(#{$light}, #{$dark});
-  }
-  
-  @error 'Unknown theme-type #{$theme-type}. Expected light, dark, or color-scheme';
-}
-
-@mixin high-contrast-overrides($theme-type) {
-  @include mat.theme-overrides((
-    primary: _high-contrast-value(#002963, #ecefff, $theme-type),
-    on-primary: _high-contrast-value(#ffffff, #000000, $theme-type),
-    primary-container: _high-contrast-value(#00459c, #a9c2ff, $theme-type),
-    on-primary-container: _high-contrast-value(#ffffff, #000a23, $theme-type),
-    inverse-primary: _high-contrast-value(#afc6ff, #00449a, $theme-type),
-    primary-fixed: _high-contrast-value(#00459c, #d8e2ff, $theme-type),
-    primary-fixed-dim: _high-contrast-value(#003070, #afc6ff, $theme-type),
-    on-primary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
-    on-primary-fixed-variant: _high-contrast-value(#ffffff, #00102f, $theme-type),
-    secondary: _high-contrast-value(#392a00, #ffeecf, $theme-type),
-    on-secondary: _high-contrast-value(#ffffff, #000000, $theme-type),
-    secondary-container: _high-contrast-value(#5d4600, #efbb2f, $theme-type),
-    on-secondary-container: _high-contrast-value(#ffffff, #110a00, $theme-type),
-    secondary-fixed: _high-contrast-value(#5d4600, #ffdf99, $theme-type),
-    secondary-fixed-dim: _high-contrast-value(#413000, #f3bf33, $theme-type),
-    on-secondary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
-    on-secondary-fixed-variant: _high-contrast-value(#ffffff, #181000, $theme-type),
-    tertiary: _high-contrast-value(#60000e, #ffecea, $theme-type),
-    on-tertiary: _high-contrast-value(#ffffff, #000000, $theme-type),
-    tertiary-container: _high-contrast-value(#97001c, #ffadab, $theme-type),
-    on-tertiary-container: _high-contrast-value(#ffffff, #220002, $theme-type),
-    tertiary-fixed: _high-contrast-value(#97001c, #ffdad8, $theme-type),
-    tertiary-fixed-dim: _high-contrast-value(#6c0011, #ffb3b0, $theme-type),
-    on-tertiary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
-    on-tertiary-fixed-variant: _high-contrast-value(#ffffff, #2d0003, $theme-type),
-    background: _high-contrast-value(#faf9ff, #111319, $theme-type),
-    on-background: _high-contrast-value(#191b21, #e2e2ea, $theme-type),
-    surface: _high-contrast-value(#faf9ff, #111319, $theme-type),
-    surface-dim: _high-contrast-value(#b8b8c0, #111319, $theme-type),
-    surface-bright: _high-contrast-value(#faf9ff, #4e5056, $theme-type),
-    surface-container-low: _high-contrast-value(#f0f0f8, #1d1f25, $theme-type),
-    surface-container-lowest: _high-contrast-value(#ffffff, #000000, $theme-type),
-    surface-container: _high-contrast-value(#e2e2ea, #2e3036, $theme-type),
-    surface-container-high: _high-contrast-value(#d3d4dc, #393b42, $theme-type),
-    surface-container-highest: _high-contrast-value(#c5c6ce, #45464d, $theme-type),
-    on-surface: _high-contrast-value(#000000, #ffffff, $theme-type),
-    shadow: _high-contrast-value(#000000, #000000, $theme-type),
-    scrim: _high-contrast-value(#000000, #000000, $theme-type),
-    surface-tint: _high-contrast-value(#275bb5, #afc6ff, $theme-type),
-    inverse-surface: _high-contrast-value(#2e3036, #e2e2ea, $theme-type),
-    inverse-on-surface: _high-contrast-value(#ffffff, #000000, $theme-type),
-    outline: _high-contrast-value(#282c37, #edeffe, $theme-type),
-    outline-variant: _high-contrast-value(#454954, #bfc2d0, $theme-type),
-    error: _high-contrast-value(#60000e, #ffecea, $theme-type),
-    on-error: _high-contrast-value(#ffffff, #000000, $theme-type),
-    error-container: _high-contrast-value(#97001d, #ffadab, $theme-type),
-    on-error-container: _high-contrast-value(#ffffff, #220002, $theme-type),
-    surface-variant: _high-contrast-value(#dfe2f0, #434752, $theme-type),
-    on-surface-variant: _high-contrast-value(#000000, #ffffff, $theme-type),
-  ))
- }

packages/frontend/src/styles.scss

@@ -1,47 +1,109 @@
-
 // Include theming for Angular Material with `mat.theme()`.
 // This Sass mixin will define CSS variables that are used for styling Angular Material
 // components according to the Material 3 design spec.
 // Learn more about theming and how to use it for your application's
 // custom components at https://material.angular.dev/guide/theming
-@use '@angular/material' as mat;
+
-@use './styles.colors.scss' as my-theme;
+@use "@angular/material" as mat;
+@use "./theme-colors.scss" as theme-colors;
 
 @include mat.core();
 
-@include mat.core-theme(my-theme.$primary-palette);
-@include mat.button-theme(my-theme.$primary-palette);
-
 html {
-  @include mat.theme((
+    // Default the application to a light color theme. This can be changed to
-    color: (
+    // `dark` to enable the dark color theme, or to `light dark` to defer to the
-      primary: my-theme.$primary-palette,
+    // user's system settings.
-      tertiary: my-theme.$tertiary-palette,
+    color-scheme: light;
-    ),
+
-    typography: Roboto,
+    @include mat.theme(
-    density: 0,
+        (
-  ));
+            color: (
-  @include mat.core-theme(my-theme.$primary-palette);
+                theme-type: light,
-  @include mat.button-theme(my-theme.$primary-palette);
+                primary: theme-colors.$primary-palette,
+                tertiary: theme-colors.$tertiary-palette,
+            ),
+            typography: (
+                plain-family: Roboto,
+                brand-family: Roboto,
+            ),
+            density: (
+                scale: 0,
+            ),
+        )
+    );
+
+    // Define css classes like .mat-text-on-surface
+    // @include mat.system-classes();
+
+    .primary-btn {
+        @include mat.button-overrides(
+            (
+                filled-container-color: var(--mat-sys-primary),
+                filled-label-text-color: var(--mat-sys-on-primary),
+                outlined-label-text-color: var(--mat-sys-primary),
+                outlined-outline-color: var(--mat-sys-primary),
+                protected-container-color: var(--mat-sys-primary),
+                protected-label-text-color: var(--mat-sys-on-primary),
+                text-label-text-color: var(--mat-sys-primary),
+                tonal-label-text-color: var(--mat-sys-primary),
+            )
+        );
+    }
+    .secondary-btn {
+        @include mat.button-overrides(
+            (
+                filled-container-color: var(--mat-sys-secondary),
+                filled-label-text-color: var(--mat-sys-on-secondary),
+                outlined-label-text-color: var(--mat-sys-secondary),
+                outlined-outline-color: var(--mat-sys-secondary),
+                protected-container-color: var(--mat-sys-secondary),
+                protected-label-text-color: var(--mat-sys-on-secondary),
+                text-label-text-color: var(--mat-sys-secondary),
+                tonal-label-text-color: var(--mat-sys-secondary),
+            )
+        );
+    }
+    .tertiary-btn {
+        @include mat.button-overrides(
+            (
+                filled-container-color: var(--mat-sys-tertiary),
+                filled-label-text-color: var(--mat-sys-on-tertiary),
+                outlined-label-text-color: var(--mat-sys-tertiary),
+                outlined-outline-color: var(--mat-sys-tertiary),
+                protected-container-color: var(--mat-sys-tertiary),
+                protected-label-text-color: var(--mat-sys-on-tertiary),
+                text-label-text-color: var(--mat-sys-tertiary),
+                tonal-label-text-color: var(--mat-sys-tertiary),
+            )
+        );
+    }
 }
 
 body {
-  // Default the application to a light color theme. This can be changed to
+    // Set a default background, font and text colors for the application using
-  // `dark` to enable the dark color theme, or to `light dark` to defer to the
+    // Angular Material's system-level CSS variables. Learn more about these
-  // user's system settings.
+    // variables at https://material.angular.dev/guide/system-variables
-  color-scheme: light;
+    background-color: var(--mat-sys-surface);
+    color: var(--mat-sys-on-surface);
+    // font: var(--mat-sys-body-medium);
 
-  // Set a default background, font and text colors for the application using
+    // Reset the user agent margin.
-  // Angular Material's system-level CSS variables. Learn more about these
+    margin: 0;
-  // variables at https://material.angular.dev/guide/system-variables
-  background-color: var(--mat-sys-surface);
-  color: var(--mat-sys-on-surface);
-  font: var(--mat-sys-body-medium);
-
-  // Reset the user agent margin.
-  margin: 0;
 }
 /* You can add global styles to this file, and also import other style files */
 
-html, body { height: 100%; }
+html,
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+body {
+    height: 100%;
+}
+
+@media print {
+    .no-print {
+        display: none;
+        visibility: hidden;
+    }
+
+    :not(.no-print) {
+        visibility: visible;
+    }
+}

packages/frontend/src/theme-colors.scss

@@ -0,0 +1,137 @@
+// This file was generated by running 'ng generate @angular/material:theme-color'.
+// Proceed with caution if making changes to this file.
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+// Note: Color palettes are generated from primary: #0047a0, secondary: #cd2e3a, tertiary: #673b6d
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #001a43,
+    20: #002d6c,
+    25: #003881,
+    30: #004397,
+    35: #134fa8,
+    40: #275bb5,
+    50: #4575cf,
+    60: #618feb,
+    70: #83aaff,
+    80: #afc6ff,
+    90: #d8e2ff,
+    95: #edf0ff,
+    98: #faf9ff,
+    99: #fefbff,
+    100: #ffffff,
+  ),
+  secondary: (
+    0: #000000,
+    10: #410007,
+    20: #680010,
+    25: #7d0016,
+    30: #92001b,
+    35: #a60a23,
+    40: #b81d2d,
+    50: #db3943,
+    60: #ff535a,
+    70: #ff8887,
+    80: #ffb3b0,
+    90: #ffdad8,
+    95: #ffedeb,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  tertiary: (
+    0: #000000,
+    10: #310839,
+    20: #491f50,
+    25: #552b5c,
+    30: #623668,
+    35: #6f4274,
+    40: #7c4e81,
+    50: #96669b,
+    60: #b27fb6,
+    70: #ce99d2,
+    80: #ecb4ef,
+    90: #ffd5ff,
+    95: #ffebfc,
+    98: #fff7fa,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    10: #191b21,
+    20: #2e3036,
+    25: #393b42,
+    30: #45464d,
+    35: #515259,
+    40: #5d5e65,
+    50: #75777e,
+    60: #8f9098,
+    70: #aaabb2,
+    80: #c5c6ce,
+    90: #e2e2ea,
+    95: #f0f0f8,
+    98: #faf9ff,
+    99: #fefbff,
+    100: #ffffff,
+    4: #0c0e14,
+    6: #111319,
+    12: #1d1f25,
+    17: #282a30,
+    22: #33353b,
+    24: #37393f,
+    87: #d9d9e1,
+    92: #e7e7f0,
+    94: #ededf5,
+    96: #f3f3fb,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #171b25,
+    20: #2c303b,
+    25: #373b46,
+    30: #434752,
+    35: #4e525e,
+    40: #5a5e6a,
+    50: #737783,
+    60: #8d909d,
+    70: #a7abb8,
+    80: #c3c6d4,
+    90: #dfe2f0,
+    95: #edf0ff,
+    98: #faf9ff,
+    99: #fefbff,
+    100: #ffffff,
+  ),
+  error: (
+    0: #000000,
+    10: #410002,
+    20: #690005,
+    25: #7e0007,
+    30: #93000a,
+    35: #a80710,
+    40: #ba1a1a,
+    50: #de3730,
+    60: #ff5449,
+    70: #ff897d,
+    80: #ffb4ab,
+    90: #ffdad6,
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+);
+
+$_rest: (
+  secondary: map.get($_palettes, secondary),
+  neutral: map.get($_palettes, neutral),
+  neutral-variant: map.get($_palettes,  neutral-variant),
+  error: map.get($_palettes, error),
+);
+
+$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
+$tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);