comfirmation modal for deposit and refactoring

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

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