Añadido color a los estados de los pedidos

src/app/mi-cuenta/perfil-cuenta/pedidos/card-pedido-resumen-perfil/card-pedido-resumen-perfil.component.html

 <div class="container card mb-4">
   <div class="row d-flex align-items-center m-2">
     <div class="text-end">
-      <h5>{{ pedido.estado }}</h5>
+      <h5 [ngStyle]="{ color: estadoColor }">{{ pedido.estado }}</h5>
     </div>
   </div>
   <div class="row">

src/app/mi-cuenta/perfil-cuenta/pedidos/card-pedido-resumen-perfil/card-pedido-resumen-perfil.component.ts

@@ -14,6 +14,7 @@ export class CardPedidoResumenPerfilComponent implements OnInit {
   pedido: Pedido = new Pedido();
   pedidoSubscription: Subscription;
   fechaPedido: string;
+  estadoColor = '';
   constructor(private databaseService: DatabaseService) {}
 
   ngOnInit(): void {
@@ -22,6 +23,21 @@ export class CardPedidoResumenPerfilComponent implements OnInit {
       .pipe(take(1))
       .subscribe((p: Pedido) => {
         this.pedido = p;
+        switch (p.estado) {
+          case 'Cancelado':
+            this.estadoColor = 'red';
+            break;
+          case 'En preparacion':
+            this.estadoColor = 'orange';
+            break;
+          case 'Enviado':
+            this.estadoColor = 'lightblue';
+            break;
+
+          default:
+            this.estadoColor = 'green';
+            break;
+        }
         this.fechaPedido = new Date(p.fechaPedido).toLocaleDateString('es-ES', {
           weekday: 'long',
           year: 'numeric',

src/app/mi-cuenta/perfil-cuenta/pedidos/pedido/pedido.component.css

+.aceptado {
+  color: green;
+}
+.cancelado {
+  color: red;
+}
+.enviado {
+  color: lightblue;
+}
+.enPreparacion {
+  color: orange;
+}

src/app/mi-cuenta/perfil-cuenta/pedidos/pedido/pedido.component.html

@@ -15,7 +15,7 @@
           </div>
           <div class="pt-3 pb-3 d-flex justify-content-between">
             <h5>Estado del pedido</h5>
-            <h5>{{ pedido.estado }}</h5>
+            <h5 [ngStyle]="{ color: estadoColor }">{{ pedido.estado }}</h5>
           </div>
         </div>
         <!-- Zona de carga de productos del pedido -->

src/app/mi-cuenta/perfil-cuenta/pedidos/pedido/pedido.component.ts

 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { ActivatedRoute, Params } from '@angular/router';
+import { ActivatedRoute, Params, Router } from '@angular/router';
 import { Subscription, take } from 'rxjs';
 import { Pedido } from 'src/app/shared/clases/pedido';
 import { DatabaseService } from 'src/app/shared/servicios/database.service';
@@ -16,10 +16,12 @@ export class PedidoComponent implements OnInit, OnDestroy {
   public numeroPedido: string;
   public imagen;
   fechaPedido: string;
+  estadoColor: string;
 
   constructor(
     private route: ActivatedRoute,
-    private databaseService: DatabaseService
+    private databaseService: DatabaseService,
+    private router: Router
   ) {}
   ngOnInit(): void {
     this.paramsSubscription = this.route.params.subscribe((params: Params) => {
@@ -29,6 +31,21 @@ export class PedidoComponent implements OnInit, OnDestroy {
         .subscribe((p: Pedido) => {
           this.numeroPedido = params['numeroPedido'];
           this.pedido = p;
+          switch (p.estado) {
+            case 'Cancelado':
+              this.estadoColor = 'red';
+              break;
+            case 'En preparacion':
+              this.estadoColor = 'orange';
+              break;
+            case 'Enviado':
+              this.estadoColor = 'lightblue';
+              break;
+
+            default:
+              this.estadoColor = 'green';
+              break;
+          }
           this.fechaPedido = new Date(p.fechaPedido).toLocaleDateString(
             'es-ES',
             {
@@ -46,9 +63,8 @@ export class PedidoComponent implements OnInit, OnDestroy {
     this.paramsSubscription.unsubscribe();
   }
   cancelarPedido(): void {
-    this.databaseService.cancelarPedidoInDatabase(
-      this.pedido,
-      this.numeroPedido
-    );
+    this.databaseService
+      .cancelarPedidoInDatabase(this.pedido, this.numeroPedido)
+      .then((res) => this.router.navigate(['/perfil/pedidos']));
   }
 }

src/app/tienda/producto/producto.component.ts

@@ -34,6 +34,7 @@ export class ProductoComponent implements OnInit, OnDestroy {
             this.images[index] = this.getImage(producto.imagenesPaths[index]);
             this.producto.productoID = this.route.snapshot.params['productoID'];
           }
+          this.images.push(this.getImage(producto.imagenIconoPath));
         });
     });
   }