feat: update modal and cart components for improved user feedback and layout adjustments

src/app/core/services/modal.service.spec.ts

@@ -163,6 +163,8 @@ describe('ModalService', () => {
     const activeModal = service.activeModal();
     const resultPromise = firstValueFrom(result$);
 
+    expect(activeModal?.config.size).toBe('sm');
+
     activeModal?.ref.dismiss('escape');
 
     await expect(resultPromise).resolves.toBe(false);

src/app/core/services/modal.service.ts

@@ -166,7 +166,10 @@ export class ModalService {
   }
 
   openConfirmDeleteRef(config: ConfirmModalConfig): ModalRef<boolean> {
-    return this.open(ConfirmDeleteModalComponent, this.buildConfirmModalConfig(config));
+    return this.open(
+      ConfirmDeleteModalComponent,
+      this.buildConfirmModalConfig({ size: 'sm', ...config }),
+    );
   }
 
   openSimple(config: SimpleModalConfig): Observable<void> {

src/app/features/store/pages/account-page/pages/tickets-page/components/ticket/ticket.component.scss

@@ -74,6 +74,7 @@
 
 .ticket__actions {
   display: flex;
+  grid-column: 4;
   align-items: center;
   gap: 8px;
 }
@@ -91,6 +92,10 @@
   color: #8a8a8a;
 }
 
+.ticket--disabled .ticket__actions {
+  grid-column: 3;
+}
+
 :host ::ng-deep .ticket--disabled button.ticket__qr-button:disabled {
   --bs-btn-disabled-bg: #8a8a8a;
   --bs-btn-disabled-border-color: #8a8a8a;

src/app/shared/components/cart/cart.component.spec.ts

@@ -115,7 +115,7 @@ describe('CartComponent', () => {
 
     expect(openConfirmDelete).toHaveBeenCalledWith({
       title: 'Eliminar producto',
-      content: 'Se eliminara "Producto de prueba" del carrito. Esta accion no se puede deshacer.',
+      content: 'Se eliminará “Producto de prueba” del carrito. Esta acción no se puede deshacer.',
       confirmLabel: 'Eliminar',
       cancelLabel: 'Cancelar',
     });

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

@@ -204,7 +204,7 @@ export class CartComponent {
     this.modalService
       .openConfirmDelete({
         title: 'Eliminar producto',
-        content: `Se eliminara "${target.productName}" del carrito. Esta accion no se puede deshacer.`,
+        content: `Se eliminará “${target.productName}” del carrito. Esta acción no se puede deshacer.`,
         confirmLabel: 'Eliminar',
         cancelLabel: 'Cancelar',
       })

src/app/shared/components/confirm-delete-modal/confirm-delete-modal.component.scss

@@ -1,19 +1,25 @@
 .confirm-modal {
   display: grid;
-  gap: 1.5rem;
+  width: 100%;
-  justify-items: center;
+  gap: 1.25rem;
   text-align: center;
 }
 
 .confirm-modal__content {
   margin: 0;
-  color: #666666;
+  color: #5f6368;
-  line-height: 1.5;
+  line-height: 1.55;
 }
 
 .confirm-modal__actions {
-  display: flex;
+  display: grid;
-  justify-content: center;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  width: 100%;
   gap: 0.75rem;
-  flex-wrap: wrap;
+}
+
+@media (max-width: 380px) {
+  .confirm-modal__actions {
+    grid-template-columns: 1fr;
+  }
 }