From 9ea2229f5aa7871b0ff8acc3348041ad1945ee8e Mon Sep 17 00:00:00 2001
From: Bastian Wagner <bastian.wagner@softconcis.de>
Date: Mon, 16 Feb 2026 12:11:30 +0100
Subject: [PATCH] Logging & Styling

---
 api/src/modules/auth/auth.module.ts           |  2 +
 api/src/modules/auth/auth.service.ts          |  8 ++-
 api/src/modules/log/log.service.ts            | 10 +++-
 api/src/modules/mail/mail.service.ts          | 30 ++++++----
 api/src/modules/system/system.service.ts      |  4 +-
 .../src/app/core/layout/layout.component.html | 14 ++---
 .../modules/auth/login/login.component.html   |  2 +-
 .../create-cylinder.component.html            |  4 +-
 .../delete-cylinder.component.html            |  6 +-
 .../modules/cylinder/cylinder.component.html  |  2 +-
 .../dashboard/dashboard.component.html        |  8 +--
 .../components/archive/archive.component.html |  2 +-
 .../delete-key/delete-key.component.html      |  6 +-
 .../handover-dialog.component.html            |  9 ++-
 .../handover-dialog.component.ts              |  3 +-
 .../lost-key/lost-key.component.html          | 10 ++--
 .../lost-keys/lost-keys.component.html        |  2 +-
 .../modules/keys/create/create.component.html |  4 +-
 .../select-key-cylinder.component.html        |  4 +-
 .../src/app/modules/keys/keys.component.html  |  2 +-
 .../modules/settings/settings.component.html  | 14 +++--
 .../modules/settings/settings.component.scss  |  5 +-
 .../modules/settings/settings.component.ts    | 13 ++++-
 .../remove-manager-popup.component.html       |  6 +-
 .../system-manager.component.html             |  4 +-
 .../system-manager.component.scss             | 23 --------
 .../system/create/create.component.html       |  4 +-
 .../app/modules/system/system.component.html  |  2 +-
 client/src/styles.scss                        | 56 +++++++++++++++++++
 29 files changed, 169 insertions(+), 90 deletions(-)

diff --git a/api/src/modules/auth/auth.module.ts b/api/src/modules/auth/auth.module.ts
index 3cbdca8..38b17f9 100644
--- a/api/src/modules/auth/auth.module.ts
+++ b/api/src/modules/auth/auth.module.ts
@@ -5,6 +5,7 @@ import { DatabaseModule } from 'src/shared/database/database.module';
 import { ConfigModule, ConfigService } from '@nestjs/config';
 import { HttpModule } from '@nestjs/axios';
 import { JwtModule, JwtService } from '@nestjs/jwt';
+import { LogModule } from '../log/log.module';
 
 @Module({
   controllers: [AuthController],
@@ -21,6 +22,7 @@ import { JwtModule, JwtService } from '@nestjs/jwt';
         signOptions: { expiresIn: config.get('JWT_EXPIRES_IN') },
       }),
     }),
+    LogModule
   ],
   exports: [JwtModule, AuthService],
 })
diff --git a/api/src/modules/auth/auth.service.ts b/api/src/modules/auth/auth.service.ts
index 95e563f..702b4f3 100644
--- a/api/src/modules/auth/auth.service.ts
+++ b/api/src/modules/auth/auth.service.ts
@@ -7,6 +7,7 @@ import { ConfigService } from '@nestjs/config';
 import { JwtService } from '@nestjs/jwt';
 import { IExternalAccessPayload, IPayload } from 'src/model/interface';
 import { User } from 'src/model/entitites';
+import { LogService, LogType } from '../log/log.service';
 
 @Injectable()
 export class AuthService {
@@ -15,9 +16,12 @@ export class AuthService {
     private readonly http: HttpService,
     private configService: ConfigService,
     private jwt: JwtService,
+    private log: LogService
   ) {}
+
   register(register: CreateUserDto) {
-    return this.userRepo.createUser(register);
+    const user = this.userRepo.createUser(register);
+    this.log.log(LogType.Auth, user);
   }
 
   async registerOrLoginWithAuthCode(auth: AuthCodeDto): Promise<User> {
@@ -31,6 +35,7 @@ export class AuthService {
             return resolve(null);
           }
           this.generateTokens(user);
+          this.log.log(LogType.Auth, user);
           resolve(user);
         },
         error: () => {
@@ -116,6 +121,7 @@ export class AuthService {
   }
 
   getUserById(id: string): Promise<User> {
+    this.log.log(LogType.Auth, null);
     return this.userRepo.findById(id);
   }
 
diff --git a/api/src/modules/log/log.service.ts b/api/src/modules/log/log.service.ts
index d7b8eaa..d532239 100644
--- a/api/src/modules/log/log.service.ts
+++ b/api/src/modules/log/log.service.ts
@@ -1,4 +1,5 @@
 import { Injectable } from '@nestjs/common';
+import { User } from 'src/model/entitites';
 import { EmailLogRepository } from 'src/model/repositories/log';
 
 @Injectable()
@@ -11,6 +12,8 @@ export class LogService {
   log(type: LogType, data: any) {
     if (type == LogType.Mail) {
       return this.logEmail(data);
+    } else if (type == LogType.Auth) {
+      return this.logAuthEvent(data);
     }
   }
 
@@ -18,10 +21,15 @@ export class LogService {
     const log = this.emailLogRepo.create(data);
     const logEntry = await this.emailLogRepo.save(log);
   }
+
+  private async logAuthEvent(data: User) {
+    console.error("auth logging not implemented")
+  }
 }
 
 export enum LogType {
-  Mail
+  Mail,
+  Auth
 }
 
 export enum EmailEvent {
diff --git a/api/src/modules/mail/mail.service.ts b/api/src/modules/mail/mail.service.ts
index a68dfdc..b9d3417 100644
--- a/api/src/modules/mail/mail.service.ts
+++ b/api/src/modules/mail/mail.service.ts
@@ -2,6 +2,8 @@ import { MailerService } from "@nestjs-modules/mailer";
 import { Injectable } from "@nestjs/common";
 import { ConfigService } from "@nestjs/config";
 import { EmailEvent, LogService, LogType } from "../log/log.service";
+import { KeySystem } from "src/model/entitites/system.entity";
+import { User } from "src/model/entitites";
 
 @Injectable()
 export class MailService {
@@ -12,56 +14,60 @@ export class MailService {
   ) {
   }
 
-  async sendAccessGrantedMail({to, firstName, systemName}: {to: string, firstName: string, systemName: string}) {
+  async sendAccessGrantedMail({to, system}: {to: User, system: KeySystem}) {
     this.mailserService.sendMail({
       template: './access',
-      to: to,
+      to: to.username,
       from: this.configService.get<string>('MAILER_FROM'),
       subject: 'Zugriff gewährt',
       context: {
-        firstName,
-        systemName
+        firstName: to.firstName,
+        systemName: system.name
       }
     }).then(v => {
       this.logService.log(LogType.Mail, {
         to,
         success: true,
         message: v.response,
-        type: EmailEvent.GrantSystemAccess
+        type: EmailEvent.GrantSystemAccess,
+        system
       })
     }).catch(e => {
       this.logService.log(LogType.Mail, {
         to,
         success: false,
         message: e.response,
-        type: EmailEvent.GrantSystemAccess
+        type: EmailEvent.GrantSystemAccess,
+        system
       })
     })
   }
 
-  sendAccessRemovedMail({to, firstName, systemName}: {to: string, firstName: string, systemName: string}) {
+  sendAccessRemovedMail({to, system}: {to: User, system: KeySystem}) {
     this.mailserService.sendMail({
       template: './access-removed',
-      to: to,
+      to: to.username,
       from: this.configService.get<string>('MAILER_FROM'),
       subject: 'Zugriff entzogen',
       context: {
-        firstName,
-        systemName
+        firstName: to.firstName,
+        systemName: system.name
       }
     }).then(v => {
       this.logService.log(LogType.Mail, {
         to,
         success: true,
         message: v.response,
-        type: EmailEvent.RemoveSystemAccess
+        type: EmailEvent.RemoveSystemAccess,
+        system
       })
     }).catch(e => {
       this.logService.log(LogType.Mail, {
         to,
         success: false,
         message: e.response,
-        type: EmailEvent.RemoveSystemAccess
+        type: EmailEvent.RemoveSystemAccess,
+        system
       })
     })
   }
diff --git a/api/src/modules/system/system.service.ts b/api/src/modules/system/system.service.ts
index 7614122..23a9a7d 100644
--- a/api/src/modules/system/system.service.ts
+++ b/api/src/modules/system/system.service.ts
@@ -87,7 +87,7 @@ export class SystemService {
         relations: ['settings']
       });
       if (user.settings.sendSystemAccessMails) {
-        this.mailService.sendAccessRemovedMail({to: manageObject.email, firstName: manageObject.email, systemName: sys.name})
+        this.mailService.sendAccessRemovedMail({to: user, system: sys})
       }
       return sys.managers;
     }
@@ -107,7 +107,7 @@ export class SystemService {
     sys.managers.push(user);
     await this.systemRepo.save(sys);
     if (user.settings.sendSystemAccessMails) {
-      this.mailService.sendAccessGrantedMail({to: user.username, firstName: user.firstName, systemName: sys.name})
+      this.mailService.sendAccessGrantedMail({to: user, system: sys})
     }
     return sys.managers;
 
diff --git a/client/src/app/core/layout/layout.component.html b/client/src/app/core/layout/layout.component.html
index 57f2889..e0b488d 100644
--- a/client/src/app/core/layout/layout.component.html
+++ b/client/src/app/core/layout/layout.component.html
@@ -12,14 +12,14 @@
 
 <mat-drawer-container class="example-container" autosize>
   <mat-drawer #drawer class="main_sidenav" mode="side" opened="true" style="border-right: 1px solid #dfdfdf">
-    <button mat-button routerLink="/" routerLinkActive="mat-elevation-z1" [routerLinkActiveOptions]="{exact: true}">Home</button>
-    <button mat-button routerLink="/keys" routerLinkActive="mat-elevation-z1">Schlüssel</button>
-    <button mat-button routerLink="/cylinders" routerLinkActive="mat-elevation-z1">Zylinder</button>
-    <button mat-button routerLink="/systems" routerLinkActive="mat-elevation-z1">Schließanlagen</button>
+    <button matButton routerLink="/" routerLinkActive="mat-elevation-z1" [routerLinkActiveOptions]="{exact: true}">Home</button>
+    <button matButton routerLink="/keys" routerLinkActive="mat-elevation-z1">Schlüssel</button>
+    <button matButton routerLink="/cylinders" routerLinkActive="mat-elevation-z1">Zylinder</button>
+    <button matButton routerLink="/systems" routerLinkActive="mat-elevation-z1">Schließanlagen</button>
     @if (isAdmin) {
-      <button mat-button routerLink="/users" routerLinkActive="mat-elevation-z1">Alle User</button>
+      <button matButton routerLink="/users" routerLinkActive="mat-elevation-z1">Alle User</button>
     }
-    <button mat-button (click)="openSidebar()">Einstellungen</button>
+    <button matButton (click)="openSidebar()">Einstellungen</button>
     
   </mat-drawer>
 
@@ -27,7 +27,7 @@
   <router-outlet></router-outlet>
 
   <!-- <div class="example-sidenav-content">
-    <button type="button" mat-button (click)="drawer.toggle()">
+    <button type="button" matButton (click)="drawer.toggle()">
       Toggle sidenav
     </button>
   </div> -->
diff --git a/client/src/app/modules/auth/login/login.component.html b/client/src/app/modules/auth/login/login.component.html
index 8ad5d48..1d28120 100644
--- a/client/src/app/modules/auth/login/login.component.html
+++ b/client/src/app/modules/auth/login/login.component.html
@@ -3,6 +3,6 @@
     Du bist nicht eingeloggt. Logge dich ein um zu Beginnen.
   </p>
   <div>
-    <button mat-raised-button color="primary" (click)="authService.routeToLogin()">Einloggen!</button>
+    <button matButton="elevated" color="primary" (click)="authService.routeToLogin()">Einloggen!</button>
   </div>
 </div>
\ No newline at end of file
diff --git a/client/src/app/modules/cylinder/components/create-cylinder/create-cylinder.component.html b/client/src/app/modules/cylinder/components/create-cylinder/create-cylinder.component.html
index bf3ff14..e033519 100644
--- a/client/src/app/modules/cylinder/components/create-cylinder/create-cylinder.component.html
+++ b/client/src/app/modules/cylinder/components/create-cylinder/create-cylinder.component.html
@@ -25,8 +25,8 @@
     </form>
 </mat-dialog-content>
 <mat-dialog-actions>
-    <button mat-button mat-dialog-close color="warn">Abbrechen</button>
-    <button mat-raised-button (click)="save()" [disabled]="createForm.disabled || createForm.invalid" color="accent">
+    <button matButton mat-dialog-close>Abbrechen</button>
+    <button matButton="elevated" (click)="save()" [disabled]="createForm.disabled || createForm.invalid" class="btn-primary">
         <mat-icon>save</mat-icon>
         Speichern
     </button>
diff --git a/client/src/app/modules/cylinder/components/delete-cylinder/delete-cylinder.component.html b/client/src/app/modules/cylinder/components/delete-cylinder/delete-cylinder.component.html
index c1e6974..674f46f 100644
--- a/client/src/app/modules/cylinder/components/delete-cylinder/delete-cylinder.component.html
+++ b/client/src/app/modules/cylinder/components/delete-cylinder/delete-cylinder.component.html
@@ -1,7 +1,7 @@
 <h2 mat-dialog-title>Zylinder <u>{{cylinder.name}}</u> löschen?</h2>
 <mat-dialog-content>
     <div class="warning-message">
-        <mat-icon color="warn">warning</mat-icon>
+        <mat-icon>warning</mat-icon>
         <p>
             <b>{{cylinder.name}}</b> wirklich entfernen?
             Alle Schlüssel die nur diesen Zylinder haben werden ebenfalls entfernt.
@@ -13,8 +13,8 @@
     </div>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
-    <button mat-button [mat-dialog-close]="false">Abbrechen</button>
-    <button mat-raised-button color="warn" [mat-dialog-close]="true">
+    <button matButton [mat-dialog-close]="false">Abbrechen</button>
+    <button matButton="elevated" [mat-dialog-close]="true">
         <mat-icon>delete</mat-icon>
         Entfernen
     </button>
diff --git a/client/src/app/modules/cylinder/cylinder.component.html b/client/src/app/modules/cylinder/cylinder.component.html
index cb03be8..e4e1820 100644
--- a/client/src/app/modules/cylinder/cylinder.component.html
+++ b/client/src/app/modules/cylinder/cylinder.component.html
@@ -4,6 +4,6 @@
     [gridOptions]="gridOptions!"
 />
 <div class="floating-btn-container">
-    <button mat-flat-button class="btn-create mat-elevation-z8" (click)="openCreateCylinder()" color="accent" >Zylinder anlegen</button>
+    <button mat-flat-button class="btn-create mat-elevation-z8" (click)="openCreateCylinder()"  >Zylinder anlegen</button>
     <button mat-mini-fab disabled><mat-icon>inventory_2</mat-icon></button>
   </div>
\ No newline at end of file
diff --git a/client/src/app/modules/dashboard/dashboard.component.html b/client/src/app/modules/dashboard/dashboard.component.html
index 71b6458..0028544 100644
--- a/client/src/app/modules/dashboard/dashboard.component.html
+++ b/client/src/app/modules/dashboard/dashboard.component.html
@@ -17,7 +17,7 @@
                 <p>Aktive Schlüssel</p>
             </mat-card-content>
             <mat-card-actions>
-                <button mat-button routerLink="/keys">Verwalten</button>
+                <button matButton routerLink="/keys">Verwalten</button>
             </mat-card-actions>
         </mat-card>
 
@@ -31,7 +31,7 @@
                 <p>Registrierte Zylinder</p>
             </mat-card-content>
             <mat-card-actions>
-                <button mat-button routerLink="/cylinders">Verwalten</button>
+                <button matButton routerLink="/cylinders">Verwalten</button>
             </mat-card-actions>
         </mat-card>
 
@@ -45,7 +45,7 @@
                 <p>Aktive Schließanlagen</p>
             </mat-card-content>
             <mat-card-actions>
-                <button mat-button routerLink="/systems">Verwalten</button>
+                <button matButton routerLink="/systems">Verwalten</button>
             </mat-card-actions>
         </mat-card>
 
@@ -59,7 +59,7 @@
                 <p>Derzeit ausgegebene Schlüssel</p>
             </mat-card-content>
             <mat-card-actions>
-                <button mat-button routerLink="/keys">Verwalten</button>
+                <button matButton routerLink="/keys">Verwalten</button>
             </mat-card-actions>
         </mat-card>
     </div>
diff --git a/client/src/app/modules/keys/components/archive/archive.component.html b/client/src/app/modules/keys/components/archive/archive.component.html
index c27ca19..a42e2d7 100644
--- a/client/src/app/modules/keys/components/archive/archive.component.html
+++ b/client/src/app/modules/keys/components/archive/archive.component.html
@@ -8,5 +8,5 @@
 
 </mat-dialog-content>
 <mat-dialog-actions>
-  <button mat-button [mat-dialog-close]="dataChanged">Schließen</button>
+  <button matButton [mat-dialog-close]="dataChanged">Schließen</button>
 </mat-dialog-actions>
\ No newline at end of file
diff --git a/client/src/app/modules/keys/components/delete-key/delete-key.component.html b/client/src/app/modules/keys/components/delete-key/delete-key.component.html
index 878fad5..17ae829 100644
--- a/client/src/app/modules/keys/components/delete-key/delete-key.component.html
+++ b/client/src/app/modules/keys/components/delete-key/delete-key.component.html
@@ -1,7 +1,7 @@
 <h2 mat-dialog-title>Schlüssel <u>{{key.name}}</u> löschen?</h2>
 <mat-dialog-content>
     <div class="warning-message">
-        <mat-icon color="warn">warning</mat-icon>
+        <mat-icon>warning</mat-icon>
         <p>
             <b>{{key.name}}</b> wirklich entfernen?
         </p>
@@ -12,8 +12,8 @@
     </div>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
-    <button mat-button [mat-dialog-close]="false">Abbrechen</button>
-    <button mat-raised-button color="warn" [mat-dialog-close]="true">
+    <button matButton [mat-dialog-close]="false">Abbrechen</button>
+    <button matButton="elevated" [mat-dialog-close]="true" class="btn-warning">
         <mat-icon>delete</mat-icon>
         Entfernen
     </button>
diff --git a/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.html b/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.html
index 2ce6c44..22f68e6 100644
--- a/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.html
+++ b/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.html
@@ -43,8 +43,11 @@
     </form>
   </mat-dialog-content>
   <mat-dialog-actions>
-    <button mat-button mat-dialog-close color="warn" >Schließen</button>
-    <button mat-button (click)="save()" [disabled]="handoverForm.invalid">Speichern</button>
+    <button matButton mat-dialog-close class="btn-warning">Schließen</button>
+    <button matButton="elevated" (click)="save()" class="btn-primary" [disabled]="handoverForm.invalid || handoverForm.pristine">
+      <mat-icon>save</mat-icon>
+      Speichern
+    </button>
   </mat-dialog-actions>
   </mat-tab>
 
@@ -59,7 +62,7 @@
     </div>
   </mat-dialog-content>
   <mat-dialog-actions>
-    <button mat-button mat-dialog-close color="warn" >Schließen</button>
+    <button matButton mat-dialog-close >Schließen</button>
   </mat-dialog-actions>
   </mat-tab>
 </mat-tab-group> 
diff --git a/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.ts b/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.ts
index 5f5464c..a70fcc9 100644
--- a/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.ts
+++ b/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.ts
@@ -24,10 +24,11 @@ import {MatTabsModule} from '@angular/material/tabs';
 import { GridApi, GridOptions, GridReadyEvent } from 'ag-grid-community';
 import { AG_GRID_LOCALE_DE } from '@ag-grid-community/locale';
 import { AgGridAngular } from 'ag-grid-angular';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
     selector: 'app-handover-dialog',
-    imports: [FormsModule, MatTabsModule, AgGridAngular, ReactiveFormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatDialogModule, MatAutocompleteModule, MatProgressSpinnerModule, MatRadioModule, AsyncPipe],
+    imports: [FormsModule, MatTabsModule, AgGridAngular, ReactiveFormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatDialogModule, MatAutocompleteModule, MatProgressSpinnerModule, MatRadioModule, AsyncPipe, MatIconModule],
     providers: [
         provideNativeDateAdapter(),
         { provide: LOCALE_ID, useValue: 'de-DE' },
diff --git a/client/src/app/modules/keys/components/lost-key/lost-key.component.html b/client/src/app/modules/keys/components/lost-key/lost-key.component.html
index 0fe69da..0641aa2 100644
--- a/client/src/app/modules/keys/components/lost-key/lost-key.component.html
+++ b/client/src/app/modules/keys/components/lost-key/lost-key.component.html
@@ -6,7 +6,7 @@
 <mat-dialog-content>
     <div class="warning-message">
         @if(key.keyLost != null) {
-            <mat-icon color="accent">report</mat-icon>
+            <mat-icon >report</mat-icon>
             <p>
                 <b>{{key.name}}</b> wirklich als gefunden markieren?
             </p>
@@ -14,7 +14,7 @@
                 <small>Die Information, dass er am {{ key.keyLost| date:'shortDate' }} verloren wurde, wird gelöscht!</small>
             </p>
         } @else {
-            <mat-icon color="warn">warning</mat-icon>
+            <mat-icon>warning</mat-icon>
         <p>
             <b>{{key.name}}</b> wirklich als verloren markieren?
         </p>
@@ -25,15 +25,15 @@
     </div>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
-    <button mat-button [mat-dialog-close]="null">Abbrechen</button>
+    <button matButton [mat-dialog-close]="null">Abbrechen</button>
     
     @if(key.keyLost != null) {
-        <button mat-raised-button color="accent" (click)="closeFound()">
+        <button matButton="elevated"  (click)="closeFound()">
             <mat-icon>report</mat-icon>
             Als gefunden melden
         </button>
     } @else {
-        <button mat-raised-button color="warn" (click)="closeWithData()">
+        <button matButton="elevated" (click)="closeWithData()">
             <mat-icon>report_problem</mat-icon>
             Als verloren melden
         </button>
diff --git a/client/src/app/modules/keys/components/lost-keys/lost-keys.component.html b/client/src/app/modules/keys/components/lost-keys/lost-keys.component.html
index 8d7ca97..7e314d7 100644
--- a/client/src/app/modules/keys/components/lost-keys/lost-keys.component.html
+++ b/client/src/app/modules/keys/components/lost-keys/lost-keys.component.html
@@ -7,5 +7,5 @@
     />
 </mat-dialog-content>
 <mat-dialog-actions>
-    <button mat-button [mat-dialog-close]="dataChanged">Schließen</button>
+    <button matButton [mat-dialog-close]="dataChanged">Schließen</button>
 </mat-dialog-actions>
\ No newline at end of file
diff --git a/client/src/app/modules/keys/create/create.component.html b/client/src/app/modules/keys/create/create.component.html
index 532d667..30975e1 100644
--- a/client/src/app/modules/keys/create/create.component.html
+++ b/client/src/app/modules/keys/create/create.component.html
@@ -41,8 +41,8 @@
   </form>
 </mat-dialog-content>
 <mat-dialog-actions>
-  <button mat-button mat-dialog-close color="warn">Abbrechen</button>
-  <button (click)="save()" [disabled]="createForm.disabled || createForm.invalid" mat-raised-button color="accent">
+  <button matButton mat-dialog-close>Abbrechen</button>
+  <button (click)="save()" [disabled]="createForm.disabled || createForm.invalid" matButton="elevated" class="btn-primary">
     <mat-icon>save</mat-icon>
         Speichern
   </button>
diff --git a/client/src/app/modules/keys/create/select-key-cylinder/select-key-cylinder.component.html b/client/src/app/modules/keys/create/select-key-cylinder/select-key-cylinder.component.html
index 01d486e..7234b04 100644
--- a/client/src/app/modules/keys/create/select-key-cylinder/select-key-cylinder.component.html
+++ b/client/src/app/modules/keys/create/select-key-cylinder/select-key-cylinder.component.html
@@ -10,6 +10,6 @@
 
 </mat-dialog-content>
 <mat-dialog-actions>
-    <button mat-button color="warn" [mat-dialog-close]="null">Abbrechen</button>
-    <button mat-button color="accent" [mat-dialog-close]="selectedCylinders">Übernehmen</button>
+    <button matButton [mat-dialog-close]="null">Abbrechen</button>
+    <button matButton  [mat-dialog-close]="selectedCylinders">Übernehmen</button>
 </mat-dialog-actions>
\ No newline at end of file
diff --git a/client/src/app/modules/keys/keys.component.html b/client/src/app/modules/keys/keys.component.html
index e01d744..9e87b24 100644
--- a/client/src/app/modules/keys/keys.component.html
+++ b/client/src/app/modules/keys/keys.component.html
@@ -5,7 +5,7 @@
 />
 
 <div class="floating-btn-container">
-  <button mat-flat-button class="btn-create mat-elevation-z8" (click)="openCreateKey()" color="accent" >Schlüssel anlegen</button>
+  <button mat-flat-button class="btn-create mat-elevation-z8" (click)="openCreateKey()"  >Schlüssel anlegen</button>
   <button mat-mini-fab (click)="openArchive()" matTooltip="Archiv"><mat-icon>inventory_2</mat-icon></button>
   <button mat-mini-fab (click)="openLostKeys()" class="lost icon-btn-xs" style="background-repeat: no-repeat; background-position: center;" matTooltip="Verlorene Schlüssel"></button>
 </div>
diff --git a/client/src/app/modules/settings/settings.component.html b/client/src/app/modules/settings/settings.component.html
index 8f64559..2e31364 100644
--- a/client/src/app/modules/settings/settings.component.html
+++ b/client/src/app/modules/settings/settings.component.html
@@ -3,12 +3,16 @@
 }
 <div class="sidebar" [class.open]="isOpen">
   <div class="sidebar-header">
+    <div class="title_text">Einstellungen</div>
     <button class="close-btn" (click)="closeSidebar()">✕</button>
   </div>
   
   <div class="content" style="flex: 1 1 auto" >
 
-    <h4>Einstellungen</h4>
+    <div class="px-4">
+      <div class="text-2xl">Allgemeine Einstellungen</div>
+      <div>Name, Login...:</div>
+    </div>
 
     <form [formGroup]="userData" class="flex flex-col p-4">
       <mat-form-field appearance="outline">
@@ -23,12 +27,14 @@
       <mat-form-field appearance="outline">
         <mat-label>Email</mat-label>
         <input type="text" matInput formControlName="userName">
+        <mat-hint>Wird zum Login benötigt</mat-hint>
       </mat-form-field>
-      <button mat-button [disabled]="userData.invalid" (click)="saveUser()">Speichern</button>
+      <div class="spacer-y16"></div>
+      <button matButton="elevated" [disabled]="userData.invalid" (click)="saveUser()">Speichern</button>
     </form>
 
-
-    <div class=" px-4">
+<div class="spacer-y32"></div>
+    <div class="px-4">
       <div class="text-2xl">Emailbenachrichtigungen</div>
       <div>Sende Emails bei: </div>
     </div>
diff --git a/client/src/app/modules/settings/settings.component.scss b/client/src/app/modules/settings/settings.component.scss
index 6185ee9..902354b 100644
--- a/client/src/app/modules/settings/settings.component.scss
+++ b/client/src/app/modules/settings/settings.component.scss
@@ -35,7 +35,10 @@
 .sidebar-header {
   padding: 1rem;
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+  .title_text {
+    font-size: 2rem;
+  }
 }
 
 .close-btn {
diff --git a/client/src/app/modules/settings/settings.component.ts b/client/src/app/modules/settings/settings.component.ts
index 0661947..0589f3c 100644
--- a/client/src/app/modules/settings/settings.component.ts
+++ b/client/src/app/modules/settings/settings.component.ts
@@ -44,6 +44,9 @@ export class SettingsComponent {
   }
 
   closeSidebar() {
+    if (this.isDirty()) {
+      this.toast.warning('Ungespeicherte Änderungen wurden verworfen.');
+    }
     this.isOpen = false;
   }
 
@@ -83,11 +86,13 @@ export class SettingsComponent {
       next: () => {
         this.toast.success('Gespeichert')
         this.isLoading = false;
+        this.userSettings.markAsPristine();
       }
     });
   }
 
   saveUser() {
+    this.isDirty();
     const user = this.authService.user;
     user.firstName = this.$userData.firstName.value!;
     user.lastName = this.$userData.lastName.value!;
@@ -95,8 +100,14 @@ export class SettingsComponent {
 
     this.api.saveUser(user).subscribe({
       next: () => {
-        this.toast.success('Gespeichert')
+        this.toast.success('Gespeichert');
+        this.userSettings.markAsPristine()
       }
     })
   }
+
+  isDirty(): boolean {
+    
+    return this.userData.dirty || this.userSettings.dirty;
+  }
 }
diff --git a/client/src/app/modules/system/components/remove-manager-popup/remove-manager-popup.component.html b/client/src/app/modules/system/components/remove-manager-popup/remove-manager-popup.component.html
index f696395..009f8f2 100644
--- a/client/src/app/modules/system/components/remove-manager-popup/remove-manager-popup.component.html
+++ b/client/src/app/modules/system/components/remove-manager-popup/remove-manager-popup.component.html
@@ -2,7 +2,7 @@
 <h2 mat-dialog-title>Manager entfernen</h2>
 <mat-dialog-content>
     <div class="warning-message">
-        <mat-icon color="warn">warning</mat-icon>
+        <mat-icon>warning</mat-icon>
         <p>
             <b>{{ manager.firstName }} {{ manager.lastName }}</b> wirklich entfernen?
             Der Benutzer hat dann keinen Zugriff mehr auf diese Schließanlage mit allen ihren Daten.
@@ -14,8 +14,8 @@
     </div>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
-    <button mat-button [mat-dialog-close]="false">Abbrechen</button>
-    <button mat-raised-button color="warn" [mat-dialog-close]="true">
+    <button matButton [mat-dialog-close]="false">Abbrechen</button>
+    <button matButton="elevated" [mat-dialog-close]="true">
         <mat-icon>delete</mat-icon>
         Entfernen
     </button>
diff --git a/client/src/app/modules/system/components/system-manager/system-manager.component.html b/client/src/app/modules/system/components/system-manager/system-manager.component.html
index 0ffd5b1..541152d 100644
--- a/client/src/app/modules/system/components/system-manager/system-manager.component.html
+++ b/client/src/app/modules/system/components/system-manager/system-manager.component.html
@@ -18,7 +18,7 @@
       <mat-hint>Emailadresse des neuen Users eingeben</mat-hint>
       <mat-icon matPrefix class="text-gray-400 mr-2">email</mat-icon>
     </mat-form-field>
-    <button mat-raised-button 
+    <button matButton="elevated" 
             color="primary" 
             (click)="addManagerByEmail()" 
             [disabled]="email == '' || email == null">
@@ -29,5 +29,5 @@
 </div>
 </mat-dialog-content>
 <mat-dialog-actions>
-  <button mat-button [mat-dialog-close]="true">Schließen</button>
+  <button matButton [mat-dialog-close]="true">Schließen</button>
 </mat-dialog-actions>
\ No newline at end of file
diff --git a/client/src/app/modules/system/components/system-manager/system-manager.component.scss b/client/src/app/modules/system/components/system-manager/system-manager.component.scss
index 56afdbe..3d179ef 100644
--- a/client/src/app/modules/system/components/system-manager/system-manager.component.scss
+++ b/client/src/app/modules/system/components/system-manager/system-manager.component.scss
@@ -6,26 +6,3 @@
     --ag-selected-row-background-color: rgb(229 231 235);
 }
 
-.p-4 {
-    padding: 1rem;
-}
-
-.bg-gray-50 {
-    background-color: rgb(249 250 251);
-}
-
-.rounded-md {
-    border-radius: 0.375rem;
-}
-
-.shadow-sm {
-    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-}
-
-.text-gray-400 {
-    color: rgb(156 163 175);
-}
-
-.mr-2 {
-    margin-right: 0.5rem;
-}
\ No newline at end of file
diff --git a/client/src/app/modules/system/create/create.component.html b/client/src/app/modules/system/create/create.component.html
index 266e5b7..2f0a212 100644
--- a/client/src/app/modules/system/create/create.component.html
+++ b/client/src/app/modules/system/create/create.component.html
@@ -14,8 +14,8 @@
   </form>
 </mat-dialog-content>
 <mat-dialog-actions>
-  <button mat-button mat-dialog-close color="warn">Abbrechen</button>
-  <button mat-raised-button (click)="save()" [disabled]="createForm.disabled" color="accent">
+  <button matButton mat-dialog-close>Abbrechen</button>
+  <button matButton="elevated" (click)="save()" [disabled]="createForm.disabled" >
     <mat-icon>save</mat-icon>
     Speichern
   </button>
diff --git a/client/src/app/modules/system/system.component.html b/client/src/app/modules/system/system.component.html
index 819d61f..1e72ae7 100644
--- a/client/src/app/modules/system/system.component.html
+++ b/client/src/app/modules/system/system.component.html
@@ -5,5 +5,5 @@
 />
 
 <div class="floating-btn-container">
-    <button mat-flat-button class="btn-create mat-elevation-z8" (click)="openCreateSystem()" color="accent" >Schließanlage anlegen</button>
+    <button mat-flat-button class="btn-create mat-elevation-z8" (click)="openCreateSystem()"  >Schließanlage anlegen</button>
   </div>
\ No newline at end of file
diff --git a/client/src/styles.scss b/client/src/styles.scss
index 772b2af..042d5b4 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -157,4 +157,60 @@ div.ag-row {
 .mdc-notched-outline__notch
 {
   border-right: none;
+}
+
+
+.p-4 {
+    padding: 1rem;
+}
+
+.bg-gray-50 {
+    background-color: rgb(249 250 251);
+}
+
+.rounded-md {
+    border-radius: 0.375rem;
+}
+
+.shadow-sm {
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+
+.text-gray-400 {
+    color: rgb(156 163 175);
+}
+
+.mr-2 {
+    margin-right: 0.5rem;
+}
+
+.spacer-y8 {
+  height: 8px;
+}
+
+.spacer-y16 {
+  height: 16px;
+}
+
+.spacer-y32 {
+  height: 32px;
+}
+
+.mat-mdc-button, .mat-mdc-raised-button:not(.mat-mdc-button-disabled) {
+  .mdc-button__label, .mat-icon {
+    color: #000;
+  }
+}
+
+
+.btn-warning:not(.mat-mdc-button-disabled) {
+  .mdc-button__label, .mat-icon {
+    color: rgb(197, 0, 0);
+  }
+}
+
+.btn-primary:not(.mat-mdc-button-disabled).mat-mdc-raised-button {
+  .mdc-button__label, .mat-icon {
+    color: rgb(32, 100, 0);
+  }
 }
\ No newline at end of file