From 09677e8df8dd60885a4938cc054483b52ac53954 Mon Sep 17 00:00:00 2001
From: Nino <n.righi@paragon-data.de>
Date: Wed, 17 Sep 2025 15:09:51 +0200
Subject: [PATCH] feat(reward-customer-card): improve styling and user
 experience

Replace basic HTML elements with proper UI components and apply
consistent design system styling. Update layout spacing and add
proper typography classes for better visual hierarchy.

Changes:
- Replace button with TextButtonComponent for consistent styling
- Add proper typography classes (isa-text-body-1-regular/bold)
- Improve layout spacing and alignment
- Add text color for better contrast
- Add null safety operators for card properties

Ref: #5262
---
 .../reward-customer-card.component.css        |  2 +-
 .../reward-customer-card.component.html       | 24 ++++++++++++++-----
 .../reward-customer-card.component.ts         |  6 ++---
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/libs/checkout/feature/reward-catalog/src/lib/reward-header/reward-customer-card/reward-customer-card.component.css b/libs/checkout/feature/reward-catalog/src/lib/reward-header/reward-customer-card/reward-customer-card.component.css
index 1d9175437..e37c98ce2 100644
--- a/libs/checkout/feature/reward-catalog/src/lib/reward-header/reward-customer-card/reward-customer-card.component.css
+++ b/libs/checkout/feature/reward-catalog/src/lib/reward-header/reward-customer-card/reward-customer-card.component.css
@@ -1,3 +1,3 @@
 :host {
-  @apply h-32 w-full flex flex-row gap-20 rounded-2xl bg-isa-neutral-400 p-6;
+  @apply h-32 w-full flex flex-row gap-20 rounded-2xl bg-isa-neutral-400 p-6 text-isa-neutral-900;
 }
diff --git a/libs/checkout/feature/reward-catalog/src/lib/reward-header/reward-customer-card/reward-customer-card.component.html b/libs/checkout/feature/reward-catalog/src/lib/reward-header/reward-customer-card/reward-customer-card.component.html
index a9dad190b..2e0ff80d1 100644
--- a/libs/checkout/feature/reward-catalog/src/lib/reward-header/reward-customer-card/reward-customer-card.component.html
+++ b/libs/checkout/feature/reward-catalog/src/lib/reward-header/reward-customer-card/reward-customer-card.component.html
@@ -1,13 +1,25 @@
-<div class="flex flex-col gap-2">
+<div class="flex flex-col gap-[0.125rem]">
   <div class="flex flex-col gap-1">
-    <span>NAME {{ card().firstName }} - {{ card().lastName }} </span>
-    <span>{{ card().totalPoints }}</span>
+    <span class="isa-text-body-1-regular"
+      >{{ card()?.firstName }} {{ card()?.lastName }}
+    </span>
+    <span class="isa-text-body-1-bold"
+      >{{ card()?.totalPoints ?? 0 }} Lesepunkte</span
+    >
   </div>
 
-  <button (click)="resetCustomer()" linkButton>Zurücksetzen</button>
+  <ui-text-button
+    class="self-start -ml-[0.6rem]"
+    type="button"
+    color="subtle"
+    size="small"
+    (click)="resetCustomer()"
+  >
+    Zurücksetzen
+  </ui-text-button>
 </div>
 
 <div class="flex flex-col gap-2">
-  <span>Prämien ausgewählt</span>
-  <span>0</span>
+  <span class="isa-text-body-1-regular">Prämien ausgewählt</span>
+  <span class="isa-text-body-1-bold">0</span>
 </div>
diff --git a/libs/checkout/feature/reward-catalog/src/lib/reward-header/reward-customer-card/reward-customer-card.component.ts b/libs/checkout/feature/reward-catalog/src/lib/reward-header/reward-customer-card/reward-customer-card.component.ts
index f59bd97aa..b122da62a 100644
--- a/libs/checkout/feature/reward-catalog/src/lib/reward-header/reward-customer-card/reward-customer-card.component.ts
+++ b/libs/checkout/feature/reward-catalog/src/lib/reward-header/reward-customer-card/reward-customer-card.component.ts
@@ -1,12 +1,10 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  linkedSignal,
   inject,
   input,
 } from '@angular/core';
-import { ButtonComponent } from '@isa/ui/buttons';
-import { RouterLink } from '@angular/router';
+import { TextButtonComponent } from '@isa/ui/buttons';
 import { BonusCardInfo, SelectedCustomerFacade } from '@isa/crm/data-access';
 import { injectTabId } from '@isa/core/tabs';
 
@@ -15,7 +13,7 @@ import { injectTabId } from '@isa/core/tabs';
   templateUrl: './reward-customer-card.component.html',
   styleUrl: './reward-customer-card.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ButtonComponent, RouterLink],
+  imports: [TextButtonComponent],
 })
 export class RewardCustomerCardComponent {
   tabId = injectTabId();