comfirmation modal for deposit and refactoring

frontend/src/app/feature/deposit/deposit.component.html

@@ -1,13 +1,11 @@
-<ng-container *ngIf="isOpen">
+@if (isOpen){
-  <div class="fixed inset-0 bg-black/70 z-50 focus:outline-none focus:ring-2 focus:purple">
+  <div class="modal-bg">
-    <div
+    <div class="modal-card">
-      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="modal-heading">Guthaben aufladen</h2>
-    >
-      <h2 class="text-xl section-heading">Guthaben aufladen</h2>
       <form [formGroup]="form">
-        <div *ngIf="errorMsg">
+        @if (errorMsg){
           {{ errorMsg }}
-        </div>
+        }
         <div class="mb-2">
           <label for="amount">Betrag</label>
           <input
@@ -19,14 +17,9 @@
         </div>
       </form>
       <div class="my-1">
-        <button
+        <button (click)="closeModal()" class="button-secondary">Abbrechen</button>
-          (click)="closeModal()"
+        <button (click)="submit()" class="button-primary w-full py-2">Einzahlen</button>
-          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>
-</ng-container>
+}

frontend/src/app/feature/home/home.component.html

@@ -28,7 +28,7 @@
               >
                 <div class="absolute bottom-4 left-4 right-4">
                   <h4 class="game-heading">{{ game.name }}</h4>
-                  <button class="button-base w-full py-2">Jetzt Spielen</button>
+                  <button class="button-primary w-full py-2">Jetzt Spielen</button>
                 </div>
               </div>
             </div>
@@ -47,7 +47,7 @@
               >
                 <div class="absolute bottom-4 left-4 right-4">
                   <h4 class="game-heading">{{ game.name }}</h4>
-                  <button class="button-base w-full py-2">Jetzt Spielen</button>
+                  <button class="button-primary w-full py-2">Jetzt Spielen</button>
                 </div>
               </div>
             </div>
@@ -60,7 +60,7 @@
       <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-primary 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
@@ -71,6 +71,8 @@
         </div>
       </div>
 
+      <app-confirmation></app-confirmation>
+
       <div class="card p-4">
         <h3 class="section-heading text-xl mb-4">Letzte Transaktionen</h3>
         <div class="space-y-3">

frontend/src/app/feature/home/home.component.ts

@@ -4,11 +4,12 @@ import { CurrencyPipe, NgFor } from '@angular/common';
 import { Game } from '../../model/Game';
 import { Transaction } from '../../model/Transaction';
 import { DepositComponent } from '../deposit/deposit.component';
+import {ConfirmationComponent} from "../../shared/components/confirmation/confirmation.component";
 
 @Component({
   selector: 'app-homepage',
   standalone: true,
-  imports: [NavbarComponent, CurrencyPipe, NgFor, DepositComponent],
+  imports: [NavbarComponent, CurrencyPipe, NgFor, DepositComponent, ConfirmationComponent],
   templateUrl: './home.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

frontend/src/app/feature/landing/landing.component.html

@@ -10,7 +10,7 @@
         <div class="welcome-bonus">200% bis zu 500€</div>
         <p class="bonus-description">+ 200 Freispiele</p>
 
-        <button class="w-full sm:w-auto button-base px-6 sm:px-8 py-3 shadow-lg">
+        <button class="w-full sm:w-auto button-primary px-6 sm:px-8 py-3 shadow-lg">
           Bonus Sichern
         </button>
       </div>
@@ -28,21 +28,21 @@
                   <div class="game-card-content">
                     <h3 class="game-heading-sm">Slots</h3>
                     <p class="game-text">Klassische Spielautomaten</p>
-                    <button class="button-base w-full py-2">Jetzt Spielen</button>
+                    <button class="button-primary w-full py-2">Jetzt Spielen</button>
                   </div>
                 </div>
                 <div class="card">
                   <div class="game-card-content">
                     <h3 class="game-heading-sm">Plinko</h3>
                     <p class="game-text">Spannendes Geschicklichkeitsspiel</p>
-                    <button class="button-base w-full py-2">Jetzt Spielen</button>
+                    <button class="button-primary w-full py-2">Jetzt Spielen</button>
                   </div>
                 </div>
                 <div class="hidden lg:block card">
                   <div class="game-card-content">
                     <h3 class="game-heading-sm">Blackjack</h3>
                     <p class="game-text">Klassisches Kartenspiel</p>
-                    <button class="button-base w-full py-2">Jetzt Spielen</button>
+                    <button class="button-primary w-full py-2">Jetzt Spielen</button>
                   </div>
                 </div>
               </div>
@@ -52,21 +52,21 @@
                   <div class="game-card-content">
                     <h3 class="game-heading-sm">Poker</h3>
                     <p class="game-text">Texas Hold'em & mehr</p>
-                    <button class="button-base w-full py-2">Jetzt Spielen</button>
+                    <button class="button-primary w-full py-2">Jetzt Spielen</button>
                   </div>
                 </div>
                 <div class="card">
                   <div class="game-card-content">
                     <h3 class="game-heading-sm">Liars Dice</h3>
                     <p class="game-text">Würfelspiel mit Strategie</p>
-                    <button class="button-base w-full py-2">Jetzt Spielen</button>
+                    <button class="button-primary w-full py-2">Jetzt Spielen</button>
                   </div>
                 </div>
                 <div class="hidden lg:block card">
                   <div class="game-card-content">
                     <h3 class="game-heading-sm">Lootboxen</h3>
                     <p class="game-text">Überraschungskisten</p>
-                    <button class="button-base w-full py-2">Jetzt Spielen</button>
+                    <button class="button-primary w-full py-2">Jetzt Spielen</button>
                   </div>
                 </div>
               </div>

frontend/src/app/shared/components/confirmation/confirmation.component.html

@@ -0,0 +1,14 @@
+@if (successful) {
+  <div class="modal-bg">
+    <div class="modal-card">
+      <h2 class="modal-heading text-center">Bestätigung</h2>
+      <p class="py-2">Der Vorgang wurde erfolgreich abgeschlossen.</p>
+      <button
+        type="button"
+        class="button-primary w-full py-2 my-auto"
+        (click)="closeModal()"
+      >Schließen</button>
+    </div>
+  </div>
+
+}

frontend/src/app/shared/components/confirmation/confirmation.component.ts

@@ -0,0 +1,16 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+
+@Component({
+  selector: 'app-confirmation',
+  standalone: true,
+  imports: [],
+  templateUrl: './confirmation.component.html',
+})
+export class ConfirmationComponent {
+  @Input() successful: boolean = true;
+  @Output() close = new EventEmitter<void>();
+
+  public closeModal(){
+    this.close.emit();
+  }
+}

frontend/src/app/shared/components/navbar/navbar.component.html

@@ -12,10 +12,10 @@
 
       <div class="hidden md:flex items-center space-x-4">
         @if (!isLoggedIn) {
-          <button (click)="login()" class="button-base px-4 py-1.5">Anmelden</button>
+          <button (click)="login()" class="button-primary px-4 py-1.5">Anmelden</button>
         }
         @if (isLoggedIn) {
-          <button (click)="logout()" class="button-base px-4 py-1.5">Abmelden</button>
+          <button (click)="logout()" class="button-primary px-4 py-1.5">Abmelden</button>
         }
       </div>
 
@@ -58,10 +58,10 @@
         <a routerLink="/games" class="nav-mobile-link">Spiele</a>
         <div class="pt-2 space-y-2">
           @if (!isLoggedIn) {
-            <button (click)="login()" class="button-base w-full py-1.5">Anmelden</button>
+            <button (click)="login()" class="button-primary w-full py-1.5">Anmelden</button>
           }
           @if (isLoggedIn) {
-            <button (click)="logout()" class="button-base w-full py-1.5">Abmelden</button>
+            <button (click)="logout()" class="button-primary w-full py-1.5">Abmelden</button>
           }
         </div>
       </div>

frontend/src/styles.css

@@ -31,10 +31,14 @@ a {
   @apply bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300;
 }
 
-.button-base {
+.button-primary {
   @apply bg-emerald hover:bg-emerald-dark text-text-primary transition-all duration-300 active:scale-95 rounded;
 }
 
+.button-secondary {
+  @apply bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded my-2;
+}
+
 .game-card-content {
   @apply p-4;
 }
@@ -138,3 +142,15 @@ a {
 .footer-disclaimer {
   @apply text-xs;
 }
+
+.modal-bg {
+  @apply fixed inset-0 bg-black/70 z-50 focus:outline-none focus:ring-2 focus:ring-emerald-light;
+}
+
+.modal-card {
+  @apply bg-deep-blue-contrast overflow-hidden hover:shadow-xl transition-shadow duration-300 p-4 fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-6 rounded-lg shadow-lg z-50 min-w-[300px];
+}
+
+.modal-heading {
+  @apply text-xl font-bold text-text-primary;
+}