Merged PR 1953: feat(reward-customer-card): improve styling and user experience

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

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;
 }

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>

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();