feat(cart-copia): enhance cart design with improved button styles and layout

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

@@ -4,7 +4,7 @@
 
     @if (showClose()) {
       <button
-        class="cart-copia__close-button"
+        class="btn btn-link p-0 border-0 d-inline-flex align-items-center justify-content-center cart-copia__close-button"
         type="button"
         aria-label="Cerrar carrito"
         (click)="closed.emit()"
@@ -55,7 +55,7 @@
             <div class="cart-copia__item-actions">
               <div class="cart-copia__quantity-selector" aria-label="Selector de cantidad">
                 <button
-                  class="cart-copia__quantity-button cart-copia__quantity-button--decrease"
+                  class="btn btn-sm p-0 border-0 d-inline-flex align-items-center justify-content-center cart-copia__quantity-button cart-copia__quantity-button--decrease"
                   type="button"
                   aria-label="Disminuir cantidad"
                   [disabled]="getItemQuantity(item) <= 1"
@@ -67,7 +67,7 @@
                 <span class="cart-copia__quantity-value">{{ getItemQuantity(item) }}</span>
 
                 <button
-                  class="cart-copia__quantity-button cart-copia__quantity-button--increase"
+                  class="btn btn-sm p-0 border-0 d-inline-flex align-items-center justify-content-center cart-copia__quantity-button cart-copia__quantity-button--increase"
                   type="button"
                   aria-label="Aumentar cantidad"
                   (click)="increaseItemQuantity(idx)"
@@ -77,7 +77,7 @@
               </div>
 
               <button
-                class="cart-copia__remove-button"
+                class="btn btn-link p-0 border-0 d-inline-flex align-items-center justify-content-center cart-copia__remove-button"
                 type="button"
                 aria-label="Eliminar producto"
                 (click)="onItemRemove(idx)"
@@ -110,22 +110,28 @@
     </div>
 
     @if (showActions()) {
-      <div class="cart-copia__footer-actions">
+      <div class="row g-2 mt-4 cart-copia__footer-actions">
-        <button
+        <div class="col-12 col-sm-6">
-          class="cart-copia__footer-button cart-copia__footer-button--secondary"
+          <app-button
-          type="button"
+            variant="secondary"
-          (click)="secondaryAction.emit()"
+            hostClass="w-100"
-        >
+            buttonClass="w-100 rounded-2 px-3 cart-copia__footer-app-button"
-          {{ secondaryActionLabel() }}
+            (click)="secondaryAction.emit()"
-        </button>
+          >
+            {{ secondaryActionLabel() }}
+          </app-button>
+        </div>
 
-        <button
+        <div class="col-12 col-sm-6">
-          class="cart-copia__footer-button cart-copia__footer-button--primary"
+          <app-button
-          type="button"
+            variant="primary"
-          (click)="primaryAction.emit()"
+            hostClass="w-100"
-        >
+            buttonClass="w-100 rounded-2 px-3 cart-copia__footer-app-button"
-          {{ primaryActionLabel() }}
+            (click)="primaryAction.emit()"
-        </button>
+          >
+            {{ primaryActionLabel() }}
+          </app-button>
+        </div>
       </div>
     }
   </footer>

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

@@ -34,14 +34,8 @@
 }
 
 .cart-copia__close-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   width: 24px;
   height: 24px;
-  padding: 0;
-  border: 0;
-  background: transparent;
   color: #ababab;
   font-size: 16px;
   transition: color 0.2s ease;
@@ -81,13 +75,14 @@
   grid-template-columns: 88px minmax(0, 1fr);
   gap: 14px;
   padding-bottom: 18px;
-  border-bottom: 1px solid #ececec;
+  border-bottom: 1px solid #ffffff;
 }
 
 .cart-copia__media {
   position: relative;
   width: 88px;
   height: 98px;
+  border-radius: 5px 0 0 5px;
   overflow: hidden;
   background: #d8d8d8;
 
@@ -113,7 +108,7 @@
   left: 0;
   z-index: 1;
   padding: 4px 8px 3px;
-  background: #6173ff;
+  background: var(--tenant-primary);
   color: #ffffff;
   font-size: 8px;
   font-weight: 500;
@@ -202,13 +197,8 @@
 }
 
 .cart-copia__quantity-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   width: 100%;
   height: 100%;
-  padding: 0;
-  border: 0;
   background: transparent;
   color: #6f6f6f;
   font-size: 12px;
@@ -231,14 +221,8 @@
 }
 
 .cart-copia__remove-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   width: 18px;
   height: 18px;
-  padding: 0;
-  border: 0;
-  background: transparent;
   color: #aaaaaa;
   font-size: 14px;
   transition: color 0.2s ease;
@@ -297,31 +281,9 @@
   line-height: 1.2;
 }
 
-.cart-copia__footer-actions {
+.cart-copia__footer-app-button {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px;
-  margin-top: 20px;
-}
-
-.cart-copia__footer-button {
   min-height: 42px;
-  border-radius: 8px;
-  border: 1px solid transparent;
   font-size: 14px;
-  font-weight: 700;
-  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
-}
-
-.cart-copia__footer-button--secondary {
-  border-color: #6173ff;
-  background: #ffffff;
-  color: #6173ff;
-}
-
-.cart-copia__footer-button--primary {
-  background: #6173ff;
-  color: #ffffff;
 }
 
 @media (max-width: 520px) {
@@ -344,8 +306,4 @@
     width: 76px;
     height: 88px;
   }
-
-  .cart-copia__footer-actions {
-    grid-template-columns: minmax(0, 1fr);
-  }
 }

src/app/shared/components/cart-copia/cart-copia.component.ts

@@ -4,6 +4,7 @@ import { Subject, EMPTY } from 'rxjs';
 import { catchError, debounceTime, groupBy, mergeMap, switchMap, tap } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import type { CartItemAttribute } from '../cart-item/cart-item.component';
+import { ButtonComponent } from '../button/button.component';
 import { ModalService } from '../../../core/services/modal.service';
 import { CartService } from '../../../core/services/cart/cart.service';
 import { ToastService } from '../../../core/services/toast.service';
@@ -22,7 +23,7 @@ export interface CartCopiaItemMock {
 @Component({
   selector: 'app-cart-copia',
   standalone: true,
-  imports: [],
+  imports: [ButtonComponent],
   templateUrl: './cart-copia.component.html',
   styleUrl: './cart-copia.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush