Checkout dialog box working

CHANGELOG.md

@@ -13,8 +13,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
     
 ### Changed
-- (2022-07-22) Invoice dialog completed. Notifications to inform
-               successful/fail of  URL copy to clipboard added. 
+- (2022-07-23) - Checkout dialog with QR image redesigned.
+               - Invoice dialog completed. Notifications to inform
+                 successful/failed URL-copy-to-clipboard added. 
 - (2022-07-22) Notifier service created - replaces snackbar used for
                reporting invalid viewing key.
                Notifier component created - used to apply custom style to message sent by Notifier service.

src/app/checkout/checkout.component.css

@@ -1,3 +1,14 @@
 .text {
 	font-family: 'Spartan', sans-serif;
 }
+
+.askPayment {
+	font-family: "Spartan";
+	background: #ff5722;
+	font-weight: 700;
+	font-size: 18px;
+	text-align: center;
+	color: white;
+    line-height: 20px;
+    padding: 10px;        
+}

src/app/checkout/checkout.component.html

@@ -1,13 +1,20 @@
-<div align="center" mat-dialog-title>
-	<h4 class="text">Scan to make payment</h4>
-</div>
+<div class="container" style="margin-top: 10px;">
 
-<mat-dialog-content>
-	<div align="center" 
-	     id="checkout-qr">   
+	<div class="askPayment">
+		Scan to make payment
 	</div>
-</mat-dialog-content>
-<mat-dialog-actions>
+	<pre></pre>
+	<table style="align-content: center;">
+		<tr>
+			<td width="10%"></td>
+			<td width="80%">
+				<div id="checkout-qr"></div>
+			</td>
+			<td width="10%"></td>
+		</tr>
+    </table>
+
+	<mat-dialog-actions>
 		<table cellspacing="0" 
 		       width="100%">
 			<tr>
@@ -25,4 +32,6 @@
 				</td>
 			</tr>
 		</table>
-</mat-dialog-actions>
+	</mat-dialog-actions>
+
+</div>

src/app/checkout/checkout.component.ts

@@ -32,12 +32,18 @@ export class CheckoutComponent implements OnInit{
 	}
 
 	ngOnInit() {
-		var qrcode = new QRCode(document.getElementById("checkout-qr"), {
+		var qrcode = new QRCode(document.getElementById("checkout-qr"),
+			{ 
 		        text: this.codeString,
 				logo: "/assets/zcash.png",
-			logoWidth: 80,
-			logoHeight: 80
+				width: 220,
+				height: 220,
+				logoWidth: 60,
+				logoHeight: 60,
+		        correctLevel: QRCode.CorrectLevel.H
 	    	});
+	    console.log(">>> " + qrcode);
+
 	}
 
 	confirm() {

src/app/prompt-invoice/prompt-invoice.component.css

@@ -40,3 +40,10 @@
 	cursor:  pointer;
 }
 
+.qr-code{
+    border-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
+    border-bottom-right-radius: 0.5rem;
+}
+
+

src/app/receipt-qr/receipt-qr.component.css

@@ -2,3 +2,21 @@
 .text {
 	font-family: 'Spartan', sans-serif;
 }
+
+.receipt {
+	font-family: "Spartan";
+	background: #ff5722;
+	font-weight: 700;
+	font-size: 18px;
+	text-align: center;
+	color: white;
+    line-height: 20px;
+    padding: 10px;        
+}
+
+.qrbody {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #e8eaf0;
+}

src/app/receipt-qr/receipt-qr.component.html

@@ -1,13 +1,18 @@
-<div align="center" mat-dialog-title>
-	<h4 class="text">Scan for your Receipt</h4>
-</div>
+<div class="container" style="margin-top: 10px;">
 
-<mat-dialog-content>
-	<div class="qrcode" id="receipt-qr"> </div>
-</mat-dialog-content>
+	<div class="receipt">
+		Scan for your Receipt
+	</div>
 
-<mat-dialog-actions>
+	<div class="qrbody">
+		<div id="receipt-qr"> </div>
+	</div>
+
+	<mat-dialog-actions>
 		<button mat-raised-button class="text" (click)="close()">
 			<mat-icon class="icon">close</mat-icon>Close
 		</button>
-</mat-dialog-actions>
+	</mat-dialog-actions>
+
+
+</div>