Cancel Order Dialog updated to new Look&Feel

src/app/cancel/cancel.component.css

@@ -5,3 +5,12 @@
 mat-dialog-content {
 	max-width: 400px;
 }
+
+.cancelTitle {
+	font-family: 'Spartan', sans-serif;
+	background: #ff5722;
+	color: white;
+	font-size: 26px;
+	text-align: center;
+	padding: 5px;
+}

src/app/cancel/cancel.component.html

@@ -1,24 +1,28 @@
-<h3 mat-dialog-title class="text">{{title}}</h3>
+<div class="container" style="margin-top: 10px;">
 
-<mat-dialog-content>
-	<p class="text">{{msg}}</p>
-</mat-dialog-content>
+	<div class="cancelTitle">{{title}}</div>
 
-<mat-dialog-actions>
-	<table cellspacing="0" width="100%">
-		<tr>
-			<td>
-				<button mat-raised-button color="primary" (click)="confirm()">
-					Yes
-				</button>
+	<mat-dialog-content>
+		<p class="text">{{msg}}</p>
+	</mat-dialog-content>
 
-			</td>
-			<td align="right">
-				<button mat-raised-button (click)="close()">
-					No
-				</button>
+	<mat-dialog-actions>
+		<table cellspacing="0" width="100%">
+			<tr>
+				<td>
+					<button mat-raised-button color="primary" (click)="confirm()">
+						Yes
+					</button>
 
-			</td>
-		</tr>
-	</table>
-</mat-dialog-actions>
+				</td>
+				<td align="right">
+					<button mat-raised-button (click)="close()">
+						No
+					</button>
+
+				</td>
+			</tr>
+		</table>
+	</mat-dialog-actions>
+
+</div>

src/app/cancel/cancel.component.ts

@@ -1,6 +1,7 @@
 import { Inject, Component, OnInit, ViewEncapsulation} from '@angular/core';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
 
+
 @Component({
 	selector: 'app-cancel',
 	templateUrl: './cancel.component.html',

src/app/order/order.component.ts

@@ -17,6 +17,7 @@ import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
 import { faSignOut } from '@fortawesome/free-solid-svg-icons';
 
+import { NotifierService } from '../notifier.service';
 
 @Component({
 	selector: 'app-order',
@@ -66,8 +67,9 @@ export class OrderComponent implements OnInit{
 	constructor(
 		public fullnodeService: FullnodeService,
 		public orderService: OrderService,
-		private dialog: MatDialog
-	) {
+		private dialog: MatDialog,
+		private notifierService: NotifierService )
+	{
 		this.priceUpdate = fullnodeService.priceUpdate;
 		this.priceUpdate.subscribe((price) => {
 			this.price = price;
@@ -119,6 +121,9 @@ export class OrderComponent implements OnInit{
 				console.log('Canceling');
 				this.orderService.cancelOrder(this.order._id!).subscribe((response) => {
 					this.orderService.getOrder();
+				this.notifierService
+				    .showNotification("Order successfully cancelled!",
+			    	              "Close","success");
 				});;
 			} else {
 				console.log('Returning to page');