Invoice format ready for user

src/app/invoice/invoice.component.css

@@ -1,52 +1,109 @@
-* {
-	font-family: 'Spartan', sans-serif;
-}
-
-.spacer{
-	flex: 1 1 auto;
-}
-.mat-card{
-	font-family: 'Spartan', sans-serif;
-	border: 1px solid #FF7522;
-	width: 80%;
-	text-align: left;
-	margin: 5px;
-	max-width: 500px;
-}
-.mat-card-title{
-	font-size: 16px;
-	font-weight: 700;
-}
-.mat-card-subtitle{
-	font-size: 12px;
-	font-weight: 200;
-}
-.mat-card-content{
-	font-size: 14px;
-	text-align: justify;
-}
-span.tt{
-	font-family: 'Roboto-Mono', monospace;
-}
-img.total{
-	margin-bottom:-2px;
-}
-.small{
-	font-size: 10px;
-}
 
 .invoice {
 	font-family:  Roboto Mono !important;
 }
 
-.invoice-title {
+.invoiceHeader {
-	font-size: 19px;
+	display: flex;
+	font-family:  Spartan;
 	font-weight: 700;
-	height: 20px;
+	font-size: 26px;
+	color: white;
+	justify-content: space-between;
+	line-height: 40px;
+	padding: 10px;
+	vertical-align: center;
+	max-width: 600px;
+    background: #ff5722;
 }
 
-.invoice-detail {
+.invoiceDetail {
-	font-size: 14px;
+	font-family:  Roboto Mono !important;
+	padding: 10px;
+	max-width: 600px;
+    background: #ebecf0;
+}
+
+.invoiceHdrTxt1 {
+	font-family: Spartan !important;
+	text-align: center; 
+	font-size:  30px;
+	font-weight: 700;
+}
+
+.invoiceHdrTxt2 {
+	font-family: Spartan !important;
+	text-align: center; 
+	font-size:  16px;
 	font-weight: 400;
 }
 
+.invoiceHdrTxt3 {
+	font-family: Spartan !important;
+	text-align: center; 
+	font-size:  12px;
+	font-weight: 300;
+}
+
+.detailTitle1 {
+	border-top: solid 2px;
+	border-bottom: solid 2px;
+    border-color: navy;
+    text-align: left;
+}
+
+.detailTitle2 {
+	border-top: solid 2px;
+	border-bottom: solid 2px;
+    border-color: navy;
+    text-align: right;
+}
+
+.detailLineRight {
+	border-top: solid 2px;
+	border-bottom: solid 2px;
+	border-color: navy;
+	text-align: right;
+}
+
+.detailLineLeft {
+	border-top: solid 2px;
+	border-bottom: solid 2px;
+	border-color: navy;
+	text-align: right;
+}
+
+.invoice-title {
+	font-size: 16px;
+	font-weight: 700;
+	background: lightcyan;
+	line-height: 30px;
+	padding: 5px;
+}
+
+.invoice-detail {
+	line-height: 20px;
+	font-size: 16px;
+	font-weight: 400;
+	padding-top: 4px;
+	padding-bottom: 4px;
+}
+
+.invoice-total {
+	margin-top: 40px;
+}
+
+.qrcode {
+	display: flex;
+	float: right;	
+}
+
+
+
+.zecData {
+	width: auto;
+	font-family: Spartan !important;
+	font-size: 16px;
+	font-weight: 700;
+	text-align: right;
+}

src/app/invoice/invoice.component.html

@@ -1,37 +1,35 @@
-<mat-toolbar color="primary">
+
-	<span align="center">
+<div class="invoiceHeader">
 		<img class="logo" src="/assets/logo-new-white.png" height="40px" />
-	</span>
+		{{name}}
-	<span class="spacer"></span>
+</div>
-	<span align="center">
+<div class="invoiceDetail"
-		<p class="text">{{name}}</p>
+	 *ngIf="!error" 
-	</span>
+	 id="invoice">
-</mat-toolbar>
+	<div class="invoiceHdrTxt1">Invoice</div>
-<div align="center" *ngIf="!error" id="invoice">
+	<div class="invoiceHdrTxt2">Order ID: {{orderId}}</div>
-<mat-card>
+	<div class="invoiceHdrTxt3">Date:{{order.timestamp | date}}
-	<mat-card-title>
+	</div>
-		Total: <img class="total" src="/assets/zec_rv.png" height="18px" />{{order.totalZec | number: '1.08'}}
+		<div style="height: 10px;"></div>
-	</mat-card-title>
+		<div class="zecData">Zcash Price: {{order.price | number: '1.02' | currency: order.currency.toUpperCase()}}</div>
-	<mat-card-subtitle>
+		<div style="height: 2px;"></div>
-		{{order.timestamp | date}}
+		<div class="zecData">Total: <img class="total" src="/assets/zec_rv.png" height="18px" />{{order.totalZec | number: '1.08'}}
-	</mat-card-subtitle>
+		</div>
-	<mat-card-content>
+	<div>
-		<p class="small">Order ID: {{orderId}}</p>
+		<div style="height: 10px;"></div>
-		<p class="small">Zcash Price: {{order.price | number: '1.02' | currency: order.currency.toUpperCase()}}</p>
-		<div class="invoice" align="center">
 		<table style="width: 100%;" 
 		       cellspacing="0">
 		    <tr class="invoice-title">
 				<th width="55%"
-						style="text-align: center;">
+					class="detailTitle1">
 					Item
 				</th>
 				<th width="15%"
-						style="text-align: center;">
+					class="detailTitle1">
 					Qty.
 				</th>
 				<th width="30%"
-						style="text-align: center;">
+					class="detailTitle2">
 					Price ({{order.currency.toUpperCase()}}) 
 				</th>
 			</tr>
@@ -50,26 +48,64 @@
 				   {{( item.qty * item.cost ) | number : '1.02' | currency: order.currency.toUpperCase()}} 
 				</td>
 			</tr>
+		    <tr class="invoice-title">
+				<th width="55%"
+				    class="detailLineRight">
+					Invoice Total:
+				</th>
+				<th width="15%"
+				    class="detailLineLeft">
+
+				</th>
+				<th width="30%"
+				    class="detailLineRight">
+				   {{ order.total | number : '1.02' | currency: order.currency.toUpperCase()}} 
+				</th>
+		    </tr>
 		</table>
-			<div class="qrcode" id="payment-qr" *ngIf="!order.paid"></div>
+		<div style="height: 15px;"></div>
-			<span *ngIf="order.paid"><fa-icon [icon]="faCheck" color="primary"></fa-icon>Payment confirmed</span>
+		<table>
-			<span *ngIf="!order.paid"><fa-icon [icon]="faHourglass" color="primary"></fa-icon>Payment pending</span>
+			<tr>
+				<td width="75%"
+				    style="font-size: 20px;
+						   font-weight: 700;
+						   font-style: italic;
+						   text-align: center;">		
+					<p *ngIf="order.paid">
+						<fa-icon [icon]="faCheck" 
+						         color="primary"></fa-icon>&nbsp;Payment confirmed</p>
+					<p *ngIf="!order.paid">
+						<fa-icon [style]="getIconStyle(order)"
+								 [icon]="faHourglass"></fa-icon>&nbsp;Payment pending!!</p>
+				</td>
+				<td width="25%">		
+					<div style="text-align: right;" 
+						 id="payment-qr" 
+						 *ngIf="!order.paid"></div>
+				</td>
+			</tr>
+		</table>	
+
 	</div>
-	</mat-card-content>
-</mat-card>
 </div>
+
 <div align="center" *ngIf="error">
-	<mat-card>
+	<div style="height: 10px;"></div>
-	<mat-card-title>
+	<div style="font-family: Spartan !important;
+				font-size: 20px;
+				padding: 4px;
+	            height: 24px;">
 		Incorrect Invoice ID.
-	</mat-card-title>
+	</div>	
-	<mat-card-content>
+	<div style="font-family: Spartan !important;
+				font-size: 16px;
+				padding: 4px;">
 		No information available.
-	</mat-card-content>
+	</div>
+	<div style="height: 10px;"></div>
 	<mat-card-actions>
 		<div align="center">
 		<button mat-raised-button [routerLink]="['/']" color="primary">OK</button>
 		</div>
 	</mat-card-actions>
-	</mat-card>
 </div>

src/app/invoice/invoice.component.ts

@@ -58,8 +58,11 @@ export class InvoiceComponent implements OnInit {
 				var qrcode = new QRCode(document.getElementById("payment-qr"), {
 		        text: this.codeString,
 						logo: "/assets/zcash.png",
-					logoWidth: 80,
+						width: 180,
-					logoHeight: 80
+						height: 180,
+						logoWidth: 50,
+						logoHeight: 50,
+		        correctLevel: QRCode.CorrectLevel.H
 				});
 			} else {
 				this.error = true;
@@ -77,4 +80,11 @@ export class InvoiceComponent implements OnInit {
 	ngOnInit(): void {
 	}
 
+	getIconStyle(order : Order) {
+		if( order.paid )
+		  return "font-size: 14px; color: #72cc50; margin-bottom: -2px;";
+		return "color: #FB4F14; margin-bottom: -2px; cursor: pointer;";
+
+	}
+
 }