comfirmation modal for deposit and refactoring

This commit is contained in:
Lea 2025-03-05 10:20:31 +01:00
parent 63db07b6ae
commit caf2794489
8 changed files with 74 additions and 32 deletions

View file

@ -1,13 +1,11 @@
<ng-container *ngIf="isOpen">
<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]"
>
<h2 class="text-xl section-heading">Guthaben aufladen</h2>
@if (isOpen){
<div class="modal-bg">
<div class="modal-card">
<h2 class="modal-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
(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>
<button (click)="closeModal()" class="button-secondary">Abbrechen</button>
<button (click)="submit()" class="button-primary w-full py-2">Einzahlen</button>
</div>
</div>
</div>
</ng-container>
}

View file

@ -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">

View file

@ -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,
})

View file

@ -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>