#1069 Update Button Sizing

apps/sales/src/app/modules/shelf/pages/shelf-order-details/shelf-order-details.component.html

@@ -1,8 +1,16 @@
 <div class="isa-card isa-border-bottom-radius-0">
-  <div class="isa-flex isa-align-items-center isa-justify-content-space-between">
-    <app-shelf-details-customer-features [customerNumber]="(orderDetailsCard$ | async)?.customerNumber">
+  <div
+    class="isa-flex isa-align-items-center isa-justify-content-space-between"
+  >
+    <app-shelf-details-customer-features
+      [customerNumber]="(orderDetailsCard$ | async)?.customerNumber"
+    >
     </app-shelf-details-customer-features>
-    <button type="button" class="isa-btn isa-btn-secondary isa-mr-n10" (click)="navigateToDetails()">
+    <button
+      type="button"
+      class="isa-btn isa-btn-secondary isa-mr-n10"
+      (click)="navigateToDetails()"
+    >
       Bearbeiten
     </button>
   </div>
@@ -13,8 +21,14 @@
     (changePickUpDeadline)="changePickupDeadline($event)"
   >
   </app-shelf-order-details-card>
-  <div class="isa-flex isa-flex-direction-row-reverse isa-mb-n10" *ngIf="partialPickup">
-    <div class="isa-flex isa-flex-direction-column" *ngIf="orderItems$ | async; let orderItems">
+  <div
+    class="isa-flex isa-flex-direction-row-reverse isa-mb-n10"
+    *ngIf="partialPickup"
+  >
+    <div
+      class="isa-flex isa-flex-direction-column"
+      *ngIf="orderItems$ | async; let orderItems"
+    >
       <button
         type="button"
         class="isa-btn isa-btn-secondary isa-mr-n10 isa-mb-7"
@@ -31,14 +45,20 @@
       >
         Alle entfernen
       </button>
-      <span class="isa-text-right"> {{ selectedForPartialPickup.size }} von {{ orderItems?.length }} Titel </span>
+      <span class="isa-text-right">
+        {{ selectedForPartialPickup.size }} von {{ orderItems?.length }} Titel
+      </span>
     </div>
   </div>
 </div>
 <ng-container *ngFor="let orderItem of orderItems$ | async">
   <div class="order-item-features" *ngIf="orderItem.features">
     <div class="order-item-feature" *ngIf="orderItem.features.prebooked">
-      <lib-icon *ngIf="orderItem.features?.prebooked" name="tag_icon_preorder" height="48px"></lib-icon>
+      <lib-icon
+        *ngIf="orderItem.features?.prebooked"
+        name="tag_icon_preorder"
+        height="48px"
+      ></lib-icon>
     </div>
   </div>
   <div class="isa-card isa-mt-2 isa-border-radius-0">
@@ -51,7 +71,10 @@
     >
     </app-shelf-order-item-details>
     <div class="isa-flex isa-justify-content-flex-end isa-mt-7">
-      <button class="isa-btn isa-btn-secondary isa-p-0" (click)="navigateToHistory(orderItem)">
+      <button
+        class="isa-btn isa-btn-secondary isa-p-0"
+        (click)="navigateToHistory(orderItem)"
+      >
         Historie
       </button>
     </div>
@@ -60,7 +83,9 @@
   <div
     class="isa-card isa-mt-2 isa-border-radius-0"
     [class.isa-border-radius-0]="showArrivedAndPrintCta$ | async"
-    [class.isa-border-top-radius-0]="(showArrivedAndPrintCta$ | async) === false"
+    [class.isa-border-top-radius-0]="
+      (showArrivedAndPrintCta$ | async) === false
+    "
   >
     <app-shelf-order-details-comment
       [comment]="orderItem.specialComment"
@@ -72,14 +97,19 @@
 <!-- CTAs für Bestellt -->
 <ng-container *ngIf="showArrivedAndPrintCta$ | async">
   <div class="isa-card isa-mt-2 isa-border-top-radius-0">
-    <app-shelf-order-details-shelf-tags #shelfDetailsTag></app-shelf-order-details-shelf-tags>
+    <app-shelf-order-details-shelf-tags
+      #shelfDetailsTag
+    ></app-shelf-order-details-shelf-tags>
   </div>
 
   <div class="cta-sticky isa-my-28 isa-text-center">
     <button
       type="button"
-      class="isa-btn isa-btn-primary isa-btn-pill isa-btn-medium"
-      [disabled]="shelfDetailsTag.selected === shelfDetailsTag.customValue.value && shelfDetailsTag.customValue.invalid"
+      class="isa-btn isa-btn-primary isa-btn-pill isa-btn-xl"
+      [disabled]="
+        shelfDetailsTag.selected === shelfDetailsTag.customValue.value &&
+        shelfDetailsTag.customValue.invalid
+      "
       (click)="
         changeProcessingStatus(128, {
           compartmentInfo: shelfDetailsTag.selected,
@@ -95,14 +125,19 @@
 <!-- CTAs für Eingetroffen  -->
 <ng-container *ngIf="showArrivedCta$ | async">
   <div class="isa-card isa-mt-2 isa-border-top-radius-0">
-    <app-shelf-order-details-shelf-tags #shelfDetailsTag></app-shelf-order-details-shelf-tags>
+    <app-shelf-order-details-shelf-tags
+      #shelfDetailsTag
+    ></app-shelf-order-details-shelf-tags>
   </div>
 
   <div class="cta-sticky isa-my-28 isa-text-center">
     <button
       type="button"
-      class="isa-btn isa-btn-primary isa-btn-pill isa-btn-medium"
-      [disabled]="shelfDetailsTag.selected === shelfDetailsTag.customValue.value && shelfDetailsTag.customValue.invalid"
+      class="isa-btn isa-btn-primary isa-btn-pill isa-btn-xl"
+      [disabled]="
+        shelfDetailsTag.selected === shelfDetailsTag.customValue.value &&
+        shelfDetailsTag.customValue.invalid
+      "
       (click)="
         changeProcessingStatus(128, {
           compartmentInfo: shelfDetailsTag.selected,
@@ -119,7 +154,7 @@
   <button
     *ngIf="(showPickUpPartialCollectCta$ | async) && !partialPickup"
     type="button"
-    class="isa-btn isa-btn-outline-primary isa-btn-pill isa-btn-medium isa-mr-10"
+    class="isa-btn isa-btn-outline-primary isa-btn-pill isa-btn-xl isa-mr-10"
     (click)="activatePartialPickup()"
   >
     Teilabholung
@@ -127,19 +162,19 @@
   <button
     *ngIf="showPickUpCta$ | async"
     type="button"
-    class="isa-btn isa-btn-primary isa-btn-pill isa-btn-medium"
+    class="isa-btn isa-btn-primary isa-btn-pill isa-btn-xl"
     (click)="changeProcessingStatus(256)"
   >
     abgeholt
   </button>
   <!-- <button *ngIf="showAddToRemissionListCta$ | async" type="button"
-        class="isa-btn isa-btn-outline-primary isa-btn-pill isa-btn-medium isa-mr-10" (click)="addToRemissionList()">
+        class="isa-btn isa-btn-outline-primary isa-btn-pill isa-btn-xl isa-mr-10" (click)="addToRemissionList()">
         Remissionsliste hinzufügen
     </button> -->
   <button
     *ngIf="showBackToStoreCta$ | async"
     type="button"
-    class="isa-btn isa-btn-primary isa-btn-pill isa-btn-medium"
+    class="isa-btn isa-btn-primary isa-btn-pill isa-btn-xl"
     (click)="changeProcessingStatus(262144)"
   >
     ans Lager
@@ -147,7 +182,7 @@
   <button
     *ngIf="showReOrderCta$ | async"
     type="button"
-    class="isa-btn isa-btn-primary isa-btn-pill isa-btn-medium"
+    class="isa-btn isa-btn-primary isa-btn-pill isa-btn-xl"
     (click)="changeProcessingStatus(8192)"
   >
     nachbestellen

apps/sales/src/scss/_variables.scss

@@ -74,8 +74,9 @@ $button-line-height-l: 21px;
 $button-line-height-xl: 21px;
 $button-padding: 0.25rem 0.5rem;
 $button-padding-l: 0.5rem 0.75rem;
-$button-padding-xl: 1rem 1.25rem;
+$button-padding-xl: 18px 27px 20px 27px;
 $button-border-radius: 5px;
+$button-border-radius-xl: 29px;
 $button-pill-radius: 50rem;
 $button-disabled-color: #89949e;
 

apps/sales/src/scss/modules/_button.scss

@@ -27,6 +27,7 @@
   font-size: $button-font-size-xl;
   line-height: $button-line-height-xl;
   padding: $button-padding-xl;
+  border-radius: $button-border-radius-xl;
 }
 
 .isa-btn-pill {