feat: enhance return details UI with improved styling and conditional rendering

libs/feature/return/containers/src/lib/return-details-data/return-details-data.component.html

@@ -2,15 +2,13 @@
   <ui-item-row-data-row>
     <ui-item-row-data-label>Email:</ui-item-row-data-label>
     <ui-item-row-data-value>
-      <span class="isa-text-body-2-bold">{{ communicationDetails().email }}</span>
+      <span class="">{{ communicationDetails().email }}</span>
     </ui-item-row-data-value>
   </ui-item-row-data-row>
   <ui-item-row-data-row>
     <ui-item-row-data-label>Belegart:</ui-item-row-data-label>
     <ui-item-row-data-value>
-      <span class="isa-text-body-2-bold">{{
-        receipt().receiptType | omsReceiptTypeTranslation
-      }}</span>
+      <span>{{ receipt().receiptType | omsReceiptTypeTranslation }}</span>
     </ui-item-row-data-value>
   </ui-item-row-data-row>
 </ui-item-row-data>

libs/feature/return/containers/src/lib/return-details-header/return-details-header.component.html

@@ -3,5 +3,5 @@
     <ng-icon uiInfoButtonLabel name="isaNavigationKunden"></ng-icon>
     <ng-icon uiInfoButtonIcon name="isaActionChevronDown"></ng-icon>
   </button>
-  <h3 class="isa-text-subtitle-1-regular">{{ name() }}</h3>
+  <h3 class="isa-text-subtitle-1-regular text-isa-neutral-900">{{ name() }}</h3>
 </div>

libs/feature/return/containers/src/lib/return-details-order-group-item/return-details-order-group-item.component.html

@@ -12,7 +12,7 @@
   </div>
   <div class="text-isa-neutral-900 flex flex-col gap-2" uiItemRowProdcutTitle>
     <h4 class="isa-text-body-2-bold">{{ item().product.contributors }}</h4>
-    <h3 class="isa-text-subtitle-1-bold">{{ item().product.name }}</h3>
+    <h3 class="isa-text-subtitle-1-regular text-isa-neutral-900">{{ item().product.name }}</h3>
     <div class="flex flex-row justify-start items-center gap-2">
       <span class="isa-text-body-2-bold text-isa-secondary-900">
         {{ item().price.value.value | currency: item().price.value.currency }}
@@ -29,10 +29,14 @@
         {{ item().product.formatDetail }}
       </span>
     </div>
-    <div>{{ item().product.manufacturer }} | {{ item().product.ean }}</div>
-    <div>{{ item().product.publicationDate | date: 'dd. MMM yyyy' }}</div>
+    <div class="text-isa-neutral-600 isa-text-body-2-regular">
+      {{ item().product.manufacturer }} | {{ item().product.ean }}
+    </div>
+    <div class="text-isa-neutral-600 isa-text-body-2-regular">
+      {{ item().product.publicationDate | date: 'dd. MMM yyyy' }}
+    </div>
   </div>
-  <div uiItemRowProdcutCheckbox>
+  <div uiItemRowProdcutCheckbox class="flex justify-center items-center">
     <ui-checkbox appearance="bullet">
       <input type="checkbox" />
     </ui-checkbox>

libs/feature/return/containers/src/lib/return-details-order-group/return-details-order-group.component.html

@@ -1,5 +1,5 @@
 <ui-toolbar size="small" class="justify-self-stretch">
-  <div class="isa-text-body-2-bold">{{ items().length }} Artikel</div>
+  <div class="isa-text-body-2-bold text-isa-neutral-900">{{ items().length }} Artikel</div>
   <div class="flex-grow"></div>
   <button type="button" uiTextButton color="strong" size="small">Alles auswählen</button>
 </ui-toolbar>

libs/feature/return/pages/src/lib/details/details-page.component.html

@@ -3,40 +3,39 @@
 @if (receipt) {
   <lib-return-details-header [buyer]="receipt.buyer"></lib-return-details-header>
 
-  <div class="flex flex-col gap-3 justify-start items-start w-full">
+  @if (showMore()) {
+    <lib-return-details-order-group-data [receipt]="receipt"></lib-return-details-order-group-data>
+    <button
+      class="-ml-3"
+      uiTextButton
+      type="button"
+      color="strong"
+      size="small"
+      (click)="showMore.set(false)"
+    >
+      <ng-icon name="isaActionMinus"></ng-icon>
+      Weniger anzeigen
+    </button>
+  } @else {
     <lib-return-details-data [receipt]="receipt"></lib-return-details-data>
-    @if (showMore()) {
-      <lib-return-details-order-group-data
-        [receipt]="receipt"
-      ></lib-return-details-order-group-data>
-      <button
-        class="-ml-3"
-        uiTextButton
-        type="button"
-        color="strong"
-        size="small"
-        (click)="showMore.set(false)"
-      >
-        <ng-icon name="isaActionMinus"></ng-icon>
-        Weniger anzeigen
-      </button>
-    } @else {
-      <button
-        class="-ml-3"
-        uiTextButton
-        type="button"
-        color="strong"
-        size="small"
-        (click)="showMore.set(true)"
-      >
-        <ng-icon name="isaActionPlus"></ng-icon>
-        Mehr anzeigen
-      </button>
-    }
-  </div>
-
+    <button
+      class="-ml-3"
+      uiTextButton
+      type="button"
+      color="strong"
+      size="small"
+      (click)="showMore.set(true)"
+    >
+      <ng-icon name="isaActionPlus"></ng-icon>
+      Bestelldetails anzeigen
+    </button>
+  }
+  <div></div>
   <lib-return-details-order-group [items]="receipt.items"></lib-return-details-order-group>
-  @for (item of receipt.items; track item.id) {
-    <lib-return-details-order-group-item [item]="item.data"></lib-return-details-order-group-item>
+  @for (item of receipt.items; track item.id; let last = $last) {
+    <lib-return-details-order-group-item
+      class="border-b border-solid border-isa-neutral-300 last:border-none"
+      [item]="item.data"
+    ></lib-return-details-order-group-item>
   }
 }