From 604d593fdcbbf67104354ca9ecf6870b91a4a628 Mon Sep 17 00:00:00 2001
From: Lea <lea.z4@schule.bremen.de>
Date: Wed, 26 Feb 2025 12:41:35 +0100
Subject: [PATCH 1/5] feature: removed angular materials and implemented new
 deposit modal

---
 frontend/bun.lock                             |  3 --
 frontend/package.json                         |  3 +-
 frontend/src/app/app.config.ts                |  2 +-
 .../feature/deposit/deposit.component.html    | 52 ++++++++++++-------
 .../app/feature/deposit/deposit.component.ts  | 20 ++-----
 .../src/app/feature/home/home.component.html  | 10 +++-
 .../src/app/feature/home/home.component.ts    | 14 ++++-
 .../components/navbar/navbar.component.ts     |  1 -
 frontend/src/index.html                       |  6 ++-
 frontend/src/styles.css                       |  3 ++
 10 files changed, 66 insertions(+), 48 deletions(-)

diff --git a/frontend/bun.lock b/frontend/bun.lock
index 91de068..f5631b4 100644
--- a/frontend/bun.lock
+++ b/frontend/bun.lock
@@ -10,7 +10,6 @@
         "@angular/compiler": "^18.2.0",
         "@angular/core": "^18.2.0",
         "@angular/forms": "^18.2.0",
-        "@angular/material": "~18.2.14",
         "@angular/platform-browser": "^18.2.0",
         "@angular/platform-browser-dynamic": "^18.2.0",
         "@angular/router": "^18.2.0",
@@ -93,8 +92,6 @@
 
     "@angular/forms": ["@angular/forms@18.2.13", "", { "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/common": "18.2.13", "@angular/core": "18.2.13", "@angular/platform-browser": "18.2.13", "rxjs": "^6.5.3 || ^7.4.0" } }, "sha512-A67D867fu3DSBhdLWWZl/F5pr7v2+dRM2u3U7ZJ0ewh4a+sv+0yqWdJW+a8xIoiHxS+btGEJL2qAKJiH+MCFfg=="],
 
-    "@angular/material": ["@angular/material@18.2.14", "", { "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/animations": "^18.0.0 || ^19.0.0", "@angular/cdk": "18.2.14", "@angular/common": "^18.0.0 || ^19.0.0", "@angular/core": "^18.0.0 || ^19.0.0", "@angular/forms": "^18.0.0 || ^19.0.0", "@angular/platform-browser": "^18.0.0 || ^19.0.0", "rxjs": "^6.5.3 || ^7.4.0" } }, "sha512-28pxzJP49Mymt664WnCtPkKeg7kXUsQKTKGf/Kl95rNTEdTJLbnlcc8wV0rT0yQNR7kXgpfBnG7h0ETLv/iu5Q=="],
-
     "@angular/platform-browser": ["@angular/platform-browser@18.2.13", "", { "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/animations": "18.2.13", "@angular/common": "18.2.13", "@angular/core": "18.2.13" }, "optionalPeers": ["@angular/animations"] }, "sha512-tu7ZzY6qD3ATdWFzcTcsAKe7M6cJeWbT/4/bF9unyGO3XBPcNYDKoiz10+7ap2PUd0fmPwvuvTvSNJiFEBnB8Q=="],
 
     "@angular/platform-browser-dynamic": ["@angular/platform-browser-dynamic@18.2.13", "", { "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/common": "18.2.13", "@angular/compiler": "18.2.13", "@angular/core": "18.2.13", "@angular/platform-browser": "18.2.13" } }, "sha512-kbQCf9+8EpuJC7buBxhSiwBtXvjAwAKh6MznD6zd2pyCYqfY6gfRCZQRtK59IfgVtKmEONWI9grEyNIRoTmqJg=="],
diff --git a/frontend/package.json b/frontend/package.json
index c79aae0..646c8a4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,7 +19,6 @@
     "@angular/compiler": "^18.2.0",
     "@angular/core": "^18.2.0",
     "@angular/forms": "^18.2.0",
-    "@angular/material": "~18.2.14",
     "@angular/platform-browser": "^18.2.0",
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@angular/router": "^18.2.0",
@@ -53,4 +52,4 @@
     "typescript": "~5.5.2",
     "typescript-eslint": "8.23.0"
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/app/app.config.ts b/frontend/src/app/app.config.ts
index 217efd4..d7b84bd 100644
--- a/frontend/src/app/app.config.ts
+++ b/frontend/src/app/app.config.ts
@@ -54,6 +54,6 @@ export const appConfig: ApplicationConfig = {
       useClass: KeycloakBearerInterceptor,
       multi: true,
     },
-    provideAnimationsAsync(),
+    provideAnimationsAsync(), provideAnimationsAsync(),
   ],
 };
diff --git a/frontend/src/app/feature/deposit/deposit.component.html b/frontend/src/app/feature/deposit/deposit.component.html
index 707d145..06e1b72 100644
--- a/frontend/src/app/feature/deposit/deposit.component.html
+++ b/frontend/src/app/feature/deposit/deposit.component.html
@@ -1,21 +1,33 @@
-<h2 mat-dialog-title class="text-xl font-semibold">Guthaben aufladen</h2>
-<mat-dialog-content>
-  <form [formGroup]="form">
-    <div *ngIf="errorMsg">
-      {{ errorMsg }}
+<ng-container
+  *ngIf="isOpen"
+>
+  <div class="fixed inset-0 bg-black/70 z-50" (click)="closeModal()">
+    <div
+      *ngIf="isOpen"
+      class="card p-4 fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded-lg shadow-lg z-50 min-w-[300px]"
+    >
+      <h2 class="text-xl section-heading">Guthaben aufladen</h2>
+      <form [formGroup]="form">
+        <div *ngIf="errorMsg">
+          {{ errorMsg }}
+        </div>
+        <div class="mb-2">
+          <label for="amount">Betrag</label>
+          <input
+            type="number"
+            id="amount"
+            formControlName="amount"
+            class="w-full px-2 py-1 bg-deep-blue-light text-white rounded my-1"
+          />
+        </div>
+      </form>
+      <div class="my-1">
+        <button (click)="closeModal()" class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded my-2">
+          Abbrechen
+        </button>
+        <button (click)="submit()" class="button-base w-full py-2">Einzahlen</button>
+      </div>
     </div>
-    <div class="mb-2">
-      <label for="amount">Betrag</label>
-      <input
-        type="number"
-        id="amount"
-        formControlName="amount"
-        class="w-full px-2 py-1 bg-white text-black"
-      />
-    </div>
-  </form>
-</mat-dialog-content>
-<mat-dialog-actions>
-  <button mat-flat-button (click)="closeDialog()">Abbrechen</button>
-  <button mat-flat-button (click)="submit()">Einzahlen</button>
-</mat-dialog-actions>
+  </div>
+</ng-container>
+
diff --git a/frontend/src/app/feature/deposit/deposit.component.ts b/frontend/src/app/feature/deposit/deposit.component.ts
index 36ec63f..e6545e5 100644
--- a/frontend/src/app/feature/deposit/deposit.component.ts
+++ b/frontend/src/app/feature/deposit/deposit.component.ts
@@ -1,17 +1,10 @@
-import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
+import {ChangeDetectionStrategy, Component, EventEmitter, inject, Input, OnInit, Output} from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { loadStripe, Stripe } from '@stripe/stripe-js';
 import { DepositService } from '../../service/deposit.service';
 import { debounceTime } from 'rxjs';
 import { environment } from '../../../environments/environment';
 import { NgIf } from '@angular/common';
-import {
-  MatDialogActions,
-  MatDialogContent,
-  MatDialogRef,
-  MatDialogTitle,
-} from '@angular/material/dialog';
-import { MatButton } from '@angular/material/button';
 
 @Component({
   selector: 'app-deposit',
@@ -19,20 +12,17 @@ import { MatButton } from '@angular/material/button';
   imports: [
     ReactiveFormsModule,
     NgIf,
-    MatDialogTitle,
-    MatDialogContent,
-    MatDialogActions,
-    MatButton,
   ],
   templateUrl: './deposit.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DepositComponent implements OnInit {
+  @Input() isOpen: boolean = false;
+  @Output() close = new EventEmitter<void>();
   protected form!: FormGroup;
   protected errorMsg = '';
   private stripe: Stripe | null = null;
   private service: DepositService = inject(DepositService);
-  public dialogRef: MatDialogRef<DepositComponent> = inject(MatDialogRef<DepositComponent>);
 
   async ngOnInit() {
     this.form = new FormGroup({
@@ -63,7 +53,7 @@ export class DepositComponent implements OnInit {
     });
   }
 
-  public closeDialog(): void {
-    this.dialogRef.close();
+  public closeModal() {
+    this.close.emit();
   }
 }
diff --git a/frontend/src/app/feature/home/home.component.html b/frontend/src/app/feature/home/home.component.html
index 56a49cf..011f236 100644
--- a/frontend/src/app/feature/home/home.component.html
+++ b/frontend/src/app/feature/home/home.component.html
@@ -22,7 +22,7 @@
         <div class="slider-grid">
           <div class="card group" *ngFor="let game of featuredGames">
             <div class="relative">
-              <img [src]="game.image" [alt]="game.name" class="w-full aspect-[4/3] object-cover" />
+              <img [src]="game.image" [alt]="game.name" class="w-full aspect-[4/3] object-cover"/>
               <div
                 class="absolute inset-0 bg-gradient-to-t from-deep-blue/90 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"
               >
@@ -41,7 +41,7 @@
         <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
           <div class="card group" *ngFor="let game of allGames">
             <div class="relative">
-              <img [src]="game.image" [alt]="game.name" class="w-full aspect-[4/3] object-cover" />
+              <img [src]="game.image" [alt]="game.name" class="w-full aspect-[4/3] object-cover"/>
               <div
                 class="absolute inset-0 bg-gradient-to-t from-deep-blue/90 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"
               >
@@ -56,10 +56,14 @@
       </div>
     </div>
 
+
     <div class="lg:col-span-1 space-y-6">
       <div class="card p-4">
         <h3 class="section-heading text-xl mb-4">Konto</h3>
         <div class="space-y-4">
+          <button class="button-base w-full py-2" (click)="openDepositModal()">
+            Einzahlen
+          </button>
           <button class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded">
             Transaktionen
           </button>
@@ -69,6 +73,8 @@
         </div>
       </div>
 
+    <app-deposit [isOpen]="isDepositModalOpen" (close)="closeDepositModal()"></app-deposit>
+
       <div class="card p-4">
         <h3 class="section-heading text-xl mb-4">Letzte Transaktionen</h3>
         <div class="space-y-3">
diff --git a/frontend/src/app/feature/home/home.component.ts b/frontend/src/app/feature/home/home.component.ts
index c28b698..a77109b 100644
--- a/frontend/src/app/feature/home/home.component.ts
+++ b/frontend/src/app/feature/home/home.component.ts
@@ -1,17 +1,20 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import { NavbarComponent } from '../../shared/components/navbar/navbar.component';
 import { CurrencyPipe, NgFor } from '@angular/common';
 import { Game } from '../../model/Game';
 import { Transaction } from '../../model/Transaction';
+import {DepositComponent} from "../deposit/deposit.component";
 
 @Component({
   selector: 'app-homepage',
   standalone: true,
-  imports: [NavbarComponent, CurrencyPipe, NgFor],
+  imports: [NavbarComponent, CurrencyPipe, NgFor, DepositComponent],
   templateUrl: './home.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export default class HomeComponent {
+  isDepositModalOpen = false;
+
   featuredGames: Game[] = [
     {
       id: '1',
@@ -67,4 +70,11 @@ export default class HomeComponent {
       date: '2024-03-18',
     },
   ];
+
+  openDepositModal(){
+    this.isDepositModalOpen = true;
+  }
+  closeDepositModal(){
+    this.isDepositModalOpen = false;
+  }
 }
diff --git a/frontend/src/app/shared/components/navbar/navbar.component.ts b/frontend/src/app/shared/components/navbar/navbar.component.ts
index 53d1dee..5014fec 100644
--- a/frontend/src/app/shared/components/navbar/navbar.component.ts
+++ b/frontend/src/app/shared/components/navbar/navbar.component.ts
@@ -12,7 +12,6 @@ import { KeycloakService } from 'keycloak-angular';
 export class NavbarComponent {
   isMenuOpen = false;
   private keycloakService: KeycloakService = inject(KeycloakService);
-
   isLoggedIn = this.keycloakService.isLoggedIn();
 
   login() {
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 8d60cc1..bd4ced1 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -6,8 +6,10 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
-  </head>
-  <body>
+      <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
+  <body class="mat-typography">
     <app-root></app-root>
   </body>
 </html>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index f78bf74..020d133 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -145,3 +145,6 @@ a {
   --mdc-dialog-supporting-text-color: var(--color-text-secondary) important;
   --mdc-dialog-container-shape: 6px important;
 }
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

From 25492f3e68dd5a5928a72d699cd546cb1dba35f2 Mon Sep 17 00:00:00 2001
From: Lea <lea.z4@schule.bremen.de>
Date: Wed, 26 Feb 2025 12:52:34 +0100
Subject: [PATCH 2/5] style: fixed prettier and hopefully eslint

---
 frontend/src/app/app.config.ts                    |  2 +-
 .../app/feature/deposit/deposit.component.html    | 11 +++++------
 .../src/app/feature/deposit/deposit.component.ts  | 15 ++++++++++-----
 frontend/src/app/feature/home/home.component.html | 11 ++++-------
 frontend/src/app/feature/home/home.component.ts   |  8 ++++----
 frontend/src/index.html                           |  9 ++++++---
 frontend/src/styles.css                           | 10 ++++++++--
 7 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/frontend/src/app/app.config.ts b/frontend/src/app/app.config.ts
index d7b84bd..217efd4 100644
--- a/frontend/src/app/app.config.ts
+++ b/frontend/src/app/app.config.ts
@@ -54,6 +54,6 @@ export const appConfig: ApplicationConfig = {
       useClass: KeycloakBearerInterceptor,
       multi: true,
     },
-    provideAnimationsAsync(), provideAnimationsAsync(),
+    provideAnimationsAsync(),
   ],
 };
diff --git a/frontend/src/app/feature/deposit/deposit.component.html b/frontend/src/app/feature/deposit/deposit.component.html
index 06e1b72..5375ff2 100644
--- a/frontend/src/app/feature/deposit/deposit.component.html
+++ b/frontend/src/app/feature/deposit/deposit.component.html
@@ -1,9 +1,6 @@
-<ng-container
-  *ngIf="isOpen"
->
+<ng-container *ngIf="isOpen">
   <div class="fixed inset-0 bg-black/70 z-50" (click)="closeModal()">
     <div
-      *ngIf="isOpen"
       class="card p-4 fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded-lg shadow-lg z-50 min-w-[300px]"
     >
       <h2 class="text-xl section-heading">Guthaben aufladen</h2>
@@ -22,7 +19,10 @@
         </div>
       </form>
       <div class="my-1">
-        <button (click)="closeModal()" class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded my-2">
+        <button
+          (click)="closeModal()"
+          class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded my-2"
+        >
           Abbrechen
         </button>
         <button (click)="submit()" class="button-base w-full py-2">Einzahlen</button>
@@ -30,4 +30,3 @@
     </div>
   </div>
 </ng-container>
-
diff --git a/frontend/src/app/feature/deposit/deposit.component.ts b/frontend/src/app/feature/deposit/deposit.component.ts
index e6545e5..a4c29b9 100644
--- a/frontend/src/app/feature/deposit/deposit.component.ts
+++ b/frontend/src/app/feature/deposit/deposit.component.ts
@@ -1,4 +1,12 @@
-import {ChangeDetectionStrategy, Component, EventEmitter, inject, Input, OnInit, Output} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  inject,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { loadStripe, Stripe } from '@stripe/stripe-js';
 import { DepositService } from '../../service/deposit.service';
@@ -9,10 +17,7 @@ import { NgIf } from '@angular/common';
 @Component({
   selector: 'app-deposit',
   standalone: true,
-  imports: [
-    ReactiveFormsModule,
-    NgIf,
-  ],
+  imports: [ReactiveFormsModule, NgIf],
   templateUrl: './deposit.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/frontend/src/app/feature/home/home.component.html b/frontend/src/app/feature/home/home.component.html
index 011f236..bbe04ae 100644
--- a/frontend/src/app/feature/home/home.component.html
+++ b/frontend/src/app/feature/home/home.component.html
@@ -22,7 +22,7 @@
         <div class="slider-grid">
           <div class="card group" *ngFor="let game of featuredGames">
             <div class="relative">
-              <img [src]="game.image" [alt]="game.name" class="w-full aspect-[4/3] object-cover"/>
+              <img [src]="game.image" [alt]="game.name" class="w-full aspect-[4/3] object-cover" />
               <div
                 class="absolute inset-0 bg-gradient-to-t from-deep-blue/90 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"
               >
@@ -41,7 +41,7 @@
         <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
           <div class="card group" *ngFor="let game of allGames">
             <div class="relative">
-              <img [src]="game.image" [alt]="game.name" class="w-full aspect-[4/3] object-cover"/>
+              <img [src]="game.image" [alt]="game.name" class="w-full aspect-[4/3] object-cover" />
               <div
                 class="absolute inset-0 bg-gradient-to-t from-deep-blue/90 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"
               >
@@ -56,14 +56,11 @@
       </div>
     </div>
 
-
     <div class="lg:col-span-1 space-y-6">
       <div class="card p-4">
         <h3 class="section-heading text-xl mb-4">Konto</h3>
         <div class="space-y-4">
-          <button class="button-base w-full py-2" (click)="openDepositModal()">
-            Einzahlen
-          </button>
+          <button class="button-base w-full py-2" (click)="openDepositModal()">Einzahlen</button>
           <button class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded">
             Transaktionen
           </button>
@@ -73,7 +70,7 @@
         </div>
       </div>
 
-    <app-deposit [isOpen]="isDepositModalOpen" (close)="closeDepositModal()"></app-deposit>
+      <app-deposit [isOpen]="isDepositModalOpen" (close)="closeDepositModal()"></app-deposit>
 
       <div class="card p-4">
         <h3 class="section-heading text-xl mb-4">Letzte Transaktionen</h3>
diff --git a/frontend/src/app/feature/home/home.component.ts b/frontend/src/app/feature/home/home.component.ts
index a77109b..1d16b90 100644
--- a/frontend/src/app/feature/home/home.component.ts
+++ b/frontend/src/app/feature/home/home.component.ts
@@ -1,9 +1,9 @@
-import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { NavbarComponent } from '../../shared/components/navbar/navbar.component';
 import { CurrencyPipe, NgFor } from '@angular/common';
 import { Game } from '../../model/Game';
 import { Transaction } from '../../model/Transaction';
-import {DepositComponent} from "../deposit/deposit.component";
+import { DepositComponent } from '../deposit/deposit.component';
 
 @Component({
   selector: 'app-homepage',
@@ -71,10 +71,10 @@ export default class HomeComponent {
     },
   ];
 
-  openDepositModal(){
+  openDepositModal() {
     this.isDepositModalOpen = true;
   }
-  closeDepositModal(){
+  closeDepositModal() {
     this.isDepositModalOpen = false;
   }
 }
diff --git a/frontend/src/index.html b/frontend/src/index.html
index bd4ced1..41fedf4 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -6,9 +6,12 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
-      <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-</head>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
+      rel="stylesheet"
+    />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+  </head>
   <body class="mat-typography">
     <app-root></app-root>
   </body>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 020d133..e2198bc 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -146,5 +146,11 @@ a {
   --mdc-dialog-container-shape: 6px important;
 }
 
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
+}

From 6c6e2b5cb58e91c6aa8ce86f8acd6a7a142b638e Mon Sep 17 00:00:00 2001
From: Lea <lea.z4@schule.bremen.de>
Date: Wed, 26 Feb 2025 13:09:49 +0100
Subject: [PATCH 3/5] style:fixed prettier and eslint

---
 frontend/src/app/feature/deposit/deposit.component.html | 2 +-
 frontend/src/app/feature/deposit/deposit.component.ts   | 2 +-
 frontend/src/app/feature/home/home.component.html       | 3 +--
 frontend/src/app/feature/home/home.component.ts         | 2 +-
 4 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/feature/deposit/deposit.component.html b/frontend/src/app/feature/deposit/deposit.component.html
index 5375ff2..91179a3 100644
--- a/frontend/src/app/feature/deposit/deposit.component.html
+++ b/frontend/src/app/feature/deposit/deposit.component.html
@@ -1,5 +1,5 @@
 <ng-container *ngIf="isOpen">
-  <div class="fixed inset-0 bg-black/70 z-50" (click)="closeModal()">
+  <div class="fixed inset-0 bg-black/70 z-50 focus:outline-none focus:ring-2 focus:purple">
     <div
       class="card p-4 fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded-lg shadow-lg z-50 min-w-[300px]"
     >
diff --git a/frontend/src/app/feature/deposit/deposit.component.ts b/frontend/src/app/feature/deposit/deposit.component.ts
index a4c29b9..7a45859 100644
--- a/frontend/src/app/feature/deposit/deposit.component.ts
+++ b/frontend/src/app/feature/deposit/deposit.component.ts
@@ -22,7 +22,7 @@ import { NgIf } from '@angular/common';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DepositComponent implements OnInit {
-  @Input() isOpen: boolean = false;
+  @Input() isOpen = false;
   @Output() close = new EventEmitter<void>();
   protected form!: FormGroup;
   protected errorMsg = '';
diff --git a/frontend/src/app/feature/home/home.component.html b/frontend/src/app/feature/home/home.component.html
index bbe04ae..cc1ed16 100644
--- a/frontend/src/app/feature/home/home.component.html
+++ b/frontend/src/app/feature/home/home.component.html
@@ -61,6 +61,7 @@
         <h3 class="section-heading text-xl mb-4">Konto</h3>
         <div class="space-y-4">
           <button class="button-base w-full py-2" (click)="openDepositModal()">Einzahlen</button>
+          <app-deposit [isOpen]="isDepositModalOpen" (close)="closeDepositModal()"></app-deposit>
           <button class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded">
             Transaktionen
           </button>
@@ -70,8 +71,6 @@
         </div>
       </div>
 
-      <app-deposit [isOpen]="isDepositModalOpen" (close)="closeDepositModal()"></app-deposit>
-
       <div class="card p-4">
         <h3 class="section-heading text-xl mb-4">Letzte Transaktionen</h3>
         <div class="space-y-3">
diff --git a/frontend/src/app/feature/home/home.component.ts b/frontend/src/app/feature/home/home.component.ts
index 1d16b90..6400d5a 100644
--- a/frontend/src/app/feature/home/home.component.ts
+++ b/frontend/src/app/feature/home/home.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { NavbarComponent } from '../../shared/components/navbar/navbar.component';
 import { CurrencyPipe, NgFor } from '@angular/common';
 import { Game } from '../../model/Game';

From a6e3ae1a337349dd78f1d64ce97fa55f1aa44dff Mon Sep 17 00:00:00 2001
From: Lea <lea.z4@schule.bremen.de>
Date: Wed, 26 Feb 2025 13:22:52 +0100
Subject: [PATCH 4/5] style: removed missed angular material lines

---
 frontend/src/index.html | 5 +----
 frontend/src/styles.css | 7 -------
 2 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/frontend/src/index.html b/frontend/src/index.html
index 41fedf4..79b9bc6 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -10,9 +10,6 @@
       href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
       rel="stylesheet"
     />
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
   </head>
-  <body class="mat-typography">
-    <app-root></app-root>
-  </body>
+  <app-root></app-root>
 </html>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index e2198bc..946eac6 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -139,13 +139,6 @@ a {
   @apply text-xs;
 }
 
-.mat-mdc-dialog-container {
-  --mdc-dialog-container-color: var(--color-deep-blue-light) important;
-  --mdc-dialog-subhead-color: var(--color-text-primary) important;
-  --mdc-dialog-supporting-text-color: var(--color-text-secondary) important;
-  --mdc-dialog-container-shape: 6px important;
-}
-
 html,
 body {
   height: 100%;

From 65ed49df2aad321f9934c4fa4564a2aa09148568 Mon Sep 17 00:00:00 2001
From: Lea <lea.z4@schule.bremen.de>
Date: Wed, 26 Feb 2025 13:26:51 +0100
Subject: [PATCH 5/5] style: removed angular material lines

---
 frontend/src/index.html | 8 +++-----
 frontend/src/styles.css | 9 ---------
 2 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/frontend/src/index.html b/frontend/src/index.html
index 79b9bc6..8d60cc1 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -6,10 +6,8 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
-      rel="stylesheet"
-    />
   </head>
-  <app-root></app-root>
+  <body>
+    <app-root></app-root>
+  </body>
 </html>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 946eac6..bfdb7fb 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -138,12 +138,3 @@ a {
 .footer-disclaimer {
   @apply text-xs;
 }
-
-html,
-body {
-  height: 100%;
-}
-body {
-  margin: 0;
-  font-family: Roboto, 'Helvetica Neue', sans-serif;
-}