refactor(checkout): update button sizes for consistent layout across checkout steps

src/app/core/layout/store-layout/store-layout.component.scss

@@ -24,7 +24,6 @@
   top: 76px;
   right: calc((100% - 1320px) / 2 + 1.5rem);
  
-  height: 520px;
   max-height: calc(100vh - 120px);
   z-index: 1050;
   background-color: #ffffff;

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html

@@ -454,6 +454,7 @@
           </div>
         }
       </div>
+
     </div>
   </section>
 
@@ -652,3 +653,4 @@
     </div>
   </app-store-section>
 </main>
+

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss

@@ -113,8 +113,8 @@ h1 {
 
 .cart-showcase__viewport {
   width: 100%;
-  max-width: 370px;
-  height: 360px;
+  max-width: 504px;
+  height: 640px;
 }
 
 .cart-showcase__header {

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts

@@ -257,3 +257,5 @@ export class ReutilizablesTestPageComponent {
     });
   }
 }
+
+

src/app/features/store/pages/checkout-page/checkout-data-step.component.scss

@@ -9,19 +9,18 @@
   }
 
   &__actions {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: wrap;
     gap: 1rem;
     margin-top: 0.5rem;
-
-    @media (max-width: 540px) {
-      grid-template-columns: 1fr;
-    }
   }
 
   &__action-btn {
     display: block;
     width: 100%;
+    flex: 1 1 290px;
+    max-width: 290px;
   }
 }
 
@@ -46,3 +45,4 @@
     color: var(--bs-danger, #dc3545);
   }
 }
+

src/app/features/store/pages/checkout-page/checkout-page.component.html

@@ -1,6 +1,6 @@
 <div class="container-xl px-3 px-md-4 py-4">
   <div class="checkout-page">
-    <div class="checkout-page__stepper-col">
+    <div class="checkout-page__stepper-col ">
       <app-stepper #stepper>
         <app-step label="Datos" [isValid]="isStep1Valid()">
           <app-checkout-data-step

src/app/features/store/pages/checkout-page/checkout-page.component.scss

@@ -1,7 +1,7 @@
 .checkout-page {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 420px;
-  gap: 2rem;
+  gap: 4rem;
   align-items: start;
   padding: 2rem 0;
 
@@ -16,9 +16,7 @@
   }
 
   &__cart-col {
-    border: 1px solid #ececec;
-    border-radius: 4px;
-    padding: 1.25rem 1.5rem;
+
     max-height: 80vh;
     overflow: hidden;
     display: flex;

src/app/features/store/pages/checkout-page/checkout-payment-step.component.html

@@ -34,7 +34,7 @@
       </div>
     </section>
 
-    <section class="payment-panel" aria-live="polite">
+    <section class="payment-panel d-flex justify-content-end" aria-live="polite">
       @if (isGeneratingIntent()) {
         <div class="payment-panel__card" style="text-align: center; padding: 2rem;">
           <h3 class="payment-panel__title">Cargando información de pago...</h3>
@@ -133,6 +133,8 @@
       type="button"
       variant="cancel"
       hostClass="checkout-payment__action-btn"
+      buttonClass="w-100"
+      [disabled]="true"
       (click)="cancelStep.emit()"
     >
       Cancelar
@@ -141,6 +143,7 @@
     <app-button
       type="button"
       hostClass="checkout-payment__action-btn"
+      buttonClass="w-100"
       [disabled]="isGeneratingIntent()"
       (click)="complete.emit()"
     >
@@ -148,3 +151,4 @@
     </app-button>
   </div>
 </div>
+

src/app/features/store/pages/checkout-page/checkout-payment-step.component.scss

@@ -14,17 +14,17 @@
   }
 
   &__actions {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: wrap;
     gap: 1rem;
     margin-top: 2rem;
-
-    @media (max-width: 540px) {
-      grid-template-columns: 1fr;
-    }
   }
 
   &__action-btn {
+    width: 100%;
+    flex: 1 1 290px;
+    max-width: 290px;
     display: block;
   }
 }
@@ -110,10 +110,9 @@
 
 .payment-panel {
   min-width: 0;
-
   &__card {
-    width: fit-content;
-    max-width: 100%;
+    width: 100%;
+    max-width: 290px;
     min-height: 269px;
     padding: 1.5rem 1.75rem;
     border-radius: 5px;
@@ -304,3 +303,4 @@
     }
   }
 }
+

src/app/shared/components/cart-item/cart-item.component.html

@@ -1,4 +1,4 @@
-<article class="w-100 rounded-0 cart-item">
+<article class="w-100 p-3 rounded-0 cart-item">
   <div class="position-relative overflow-hidden cart-item-media">
     @if (discountPercentage() && discountPercentage()! > 0) {
       <span class="position-absolute top-0 start-0 z-1 rounded-0 cart-item-discount-badge">-{{ discountPercentage() }}%</span>
@@ -17,10 +17,10 @@
 
       <div class="text-nowrap cart-item-prices">
         @if (formattedOriginalPrice(); as originalPrice) {
-          <span class="text-decoration-line-through fw-light cart-item-original-price">{{ originalPrice }}</span>
+          <span class="text-decoration-line-through mb-1 fw-light cart-item-original-price">{{ originalPrice }}</span>
         }
 
-        <span class="fw-normal cart-item-discounted-price">{{ formattedDiscountedPrice() }}</span>
+        <span class="fw-bold cart-item-discounted-price">{{ formattedDiscountedPrice() }}</span>
       </div>
     </div>
 

src/app/shared/components/cart-item/cart-item.component.scss

@@ -1,28 +1,43 @@
 :host {
   display: block;
-  --item-media-width: 64px;
-  --item-media-height: 72px;
+  --item-media-size: 90px;
+  --item-divider-inset: 1rem;
 }
 
-@media (max-width: 420px) {
-  :host {
-    --item-media-width: 56px;
-    --item-media-height: 64px;
-  }
+:host(:first-child) .cart-item,
+:host .cart-item {
+  position: relative;
+}
+
+:host(:first-child) .cart-item::before,
+:host .cart-item::after {
+  content: "";
+  position: absolute;
+  right: var(--item-divider-inset);
+  left: var(--item-divider-inset);
+  height: 1px;
+  background-color: #ffffff;
+}
+
+:host(:first-child) .cart-item::before {
+  top: 0;
+}
+
+:host .cart-item::after {
+  bottom: 0;
 }
 
 .cart-item {
   display: grid;
-  grid-template-columns: var(--item-media-width) minmax(0, 1fr);
+  grid-template-columns: var(--item-media-size) minmax(0, 1fr);
   gap: 0.75rem;
-  padding: 10px 12px;
   background-color: #f5f5f5;
 }
 
 .cart-item-media {
-  width: var(--item-media-width);
-  height: var(--item-media-height);
-  border-radius: 6px;
+  width: var(--item-media-size);
+  aspect-ratio: 1 / 1;
+  border-radius: 5px 0 0 5px;
   background-color: #ffffff;
   border: 1px solid #eaeaea;
   overflow: hidden;
@@ -30,14 +45,14 @@
   img {
     width: 100%;
     height: 100%;
-    object-fit: contain;
+    object-fit: cover;
   }
 }
 
 .cart-item-discount-badge {
   padding: 2px 5px;
   border-bottom-right-radius: 4px;
-  background-color: #6173ff;
+  background-color: var(--bs-primary);
   color: #ffffff;
   font-size: 8px;
   font-weight: 500;
@@ -45,6 +60,8 @@
 }
 
 .cart-item-placeholder {
+  width: 100%;
+  height: 100%;
   background: linear-gradient(135deg, #d2d2d2, #ececec);
 }
 
@@ -100,9 +117,6 @@
   gap: 0.125rem;
 }
 
-
-
-
 .cart-item-remove-btn {
   margin-left: 0.35rem;
 }

src/app/shared/components/cart/cart.component.html

@@ -1,5 +1,5 @@
 <section class="d-flex flex-column h-100 overflow-hidden text-secondary" [style.background-color]="backgroundColor()">
-  <header class="d-flex align-items-center justify-content-between bg-transparent cart-header">
+  <header class="d-flex align-items-center p-3 justify-content-between bg-transparent cart-header">
     <h2 class="m-0 text-uppercase fw-bold cart-title">{{ title() }}</h2>
 
     @if (showClose()) {
@@ -9,7 +9,7 @@
     }
   </header>
 
-  <div class="d-grid gap-2 flex-grow-1 overflow-y-auto cart-items-container">
+  <div class="d-grid w-100 flex-grow-1 overflow-y-auto cart-items-container">
     @for (item of items(); track item.productVariantId || item.product + item.discountedPrice; let idx = $index) {
       <app-cart-item
         [imageUrl]="item.imageUrl"
@@ -48,3 +48,4 @@
 </section>
 
 
+

src/app/shared/components/cart/cart.component.scss

@@ -23,10 +23,16 @@
 
 .cart-items-container {
   min-height: 0;
-  padding: 0 0 0 24px;
+  gap: 0;
   scrollbar-color: #d5d5d5 transparent;
   scrollbar-width: thin;
 
+  app-cart-item {
+    display: block;
+  }
+
+  
+
   &::-webkit-scrollbar {
     width: 6px;
   }