Enhance UI look and feel

.gitignore

@@ -45,3 +45,4 @@ testem.log
 Thumbs.db
 
 txs.json
+.angular

src/app/cancel/cancel.component.css

@@ -1,3 +1,3 @@
 .text {
-	font-family: "Roboto Mono", monospace;
+	font-family: 'Saira Semi Condensed', sans-serif;
 }

src/app/checkout/checkout.component.css

@@ -1,3 +1,3 @@
 .text {
-	font-family: "Roboto Mono", monospace;
+	font-family: 'Saira Semi Condensed', sans-serif;
 }

src/app/header/header.component.css

@@ -1,5 +1,5 @@
 .text {
-	font-family: 'Roboto Mono', monospace;
+	font-family: 'Saira Semi Condensed', sans-serif;
 }
 
 a{
@@ -18,9 +18,12 @@ ul{
 }
 
 .mini {
-	font-size: 9px;
+	font-size: 10px;
 	line-height: 0.8;
 }
 .icon {
 	font-family: "Material Icons";
 }
+.logo {
+	margin-top: 5px;
+}

src/app/header/header.component.html

@@ -1,6 +1,6 @@
 <mat-toolbar color="primary">
 	<span align="center">
-		<img src="/assets/logo.png" height="45px" />
+		<img class="logo" src="/assets/logo-new-white.png" height="40px" />
 	</span>
 	<span class="spacer"></span>
 	<span align="center">

src/app/items/item-add/item-add.component.css

@@ -1,5 +1,5 @@
 .text {
-	font-family: "Roboto Mono", monospace;
+	font-family: 'Saira Semi Condensed', sans-serif;
 }
 
 input[type=number]{

src/app/items/item-create/item-create.component.css

@@ -1,5 +1,5 @@
 .text {
-	font-family: 'Roboto Mono', monospace;
+	font-family: 'Saira Semi Condensed', sans-serif;
 }
 
 input[type=number]{

src/app/items/item-delete/item-delete.component.css

@@ -1,3 +1,3 @@
 .text {
-	font-family: 'Roboto Mono', monospace;
+	font-family: 'Saira Semi Condensed', sans-serif;
 }

src/app/items/item-list/item-list.component.css

@@ -1,9 +1,9 @@
 .card {
-	font-family: 'Roboto Mono', monospace;
+	font-family: 'Saira Semi Condensed', sans-serif;
 }
 
 .text {
-	font-family: 'Roboto Mono', monospace;
+	font-family: 'Saira Semi Condensed', sans-serif;
 }
 .small {
 	font-size: 75%;

src/app/listorders/listorders.component.css

@@ -1,4 +1,7 @@
 .text{
+	font-family: 'Saira Semi Condensed', sans-serif;
+}
+.number{
 	font-family: 'Roboto Mono', monospace;
 }
 img.icon{
@@ -19,6 +22,7 @@ img.icon{
 }
 .total{
 	font-size: large;
+	font-family: 'Roboto Mono', monospace;
 }
 img.total{
 	margin-bottom:-2px;

src/app/listorders/listorders.component.html

@@ -25,7 +25,7 @@
 	<mat-expansion-panel class="text" *ngFor = "let order of orders">
 		<mat-expansion-panel-header class="text" >
 			<mat-panel-title>
-				<span class="price"><img src="/assets/zec-roboto.png" height="50%" />{{order.totalZec}}</span>
+				<span class="price number"><img src="/assets/zec-roboto.png" height="50%" />{{order.totalZec}}</span>
 			</mat-panel-title>
 			<mat-panel-description>
 				{{order.timestamp | date: 'short'}}
@@ -39,3 +39,7 @@
 	</mat-expansion-panel>
 </mat-accordion>
 <p class="text" *ngIf = "orders.length <= 0">No orders</p>
+<mat-divider></mat-divider>
+<div align="center">
+	<p class="text"> <mat-icon class="icon" inline>copyright</mat-icon> 2021 ZGo </p>
+</div>

src/app/login/login.component.ts

@@ -8,6 +8,7 @@ import { ScanComponent} from '../scan/scan.component';
 import { Tx } from '../tx.model';
 import {User} from '../user.model';
 import { Subscription, Observable } from 'rxjs';
+import { take } from 'rxjs/operators';
 import { v4 as uuidv4 } from 'uuid';
 var QRCode = require('easyqrcodejs');
 var URLSafeBase64 = require('urlsafe-base64');
@@ -146,7 +147,7 @@ export class LoginComponent implements OnInit {
 		dialogRef.afterClosed().subscribe((val) => {
 			console.log('Awaiting confirmation');
 			this.confirmedMemo = val;
-			this.heightUpdate.subscribe((block) => {
+			this.heightUpdate.pipe(take(1)).subscribe(block => {
 				this.targetBlock = block + 10;
 			});
 		});

src/app/order/order.component.css

@@ -1,7 +1,10 @@
 .text {
-	font-family: "Roboto Mono", monospace;
+	font-family: 'Saira Semi Condensed', sans-serif;
 }
 
+.number{
+	font-family: 'Roboto Mono', monospace;
+}
 img.icon{
 	margin-bottom: -3px;
 }

src/app/order/order.component.html

@@ -8,8 +8,8 @@
 				<tr>
 					<td>Order Total:</td>
 					<td align="right">
-						<p class="text">{{total | currency: 'USD'}}</p>
+						<p class="number">{{total | currency: 'USD'}}</p>
-						<p class="text"><img class="icon" src="/assets/zec-roboto.png" width="14px" />{{(total/price) | number: '1.0-6'}}</p>
+						<p class="number"><img class="icon" src="/assets/zec-roboto.png" width="14px" />{{(total/price) | number: '1.0-6'}}</p>
 					</td>
 				</tr>
 			</table>

src/app/viewer/viewer.component.css

@@ -1,9 +1,13 @@
 * {
-	font-family: 'Roboto Mono', monospace;
+	font-family: 'Saira Semi Condensed', sans-serif;
 }
 .icon{
 	font-family: 'Material Icons';
 }
 .small{
 	font-size: x-small;
+	margin-top: 0px;
+}
+h3{
+	margin-bottom: 0px;
 }

src/app/viewer/viewer.component.html

@@ -3,11 +3,32 @@
 	<h3>{{(ownerUpdate | async)!.name}}</h3>
 	<p class="small">{{ shortenZaddr((ownerUpdate | async)!.address) }}</p>
 	<span align="center">
+		<button mat-raised-button [routerLink]="['/orders']">View Orders</button>
 		<button mat-raised-button class="text" (click)="openSettings()">
 			 <mat-icon class="icon">manage_accounts</mat-icon>
 		</button>
+		<a href="https://zgo.cash/" mat-raised-button target="_blank" rel="noopener noreferrer">
+			<mat-icon class="icon">help</mat-icon>
+		</a>
 	</span>
-	<button mat-raised-button [routerLink]="['/orders']">View Orders</button>
 </div>
+<div *ngIf="orientation">
 <app-order></app-order>
 <app-item-list></app-item-list>
+</div>
+<div *ngIf="!orientation" align="center">
+	<table cellspacing="0" width="75%">
+		<tr>
+			<td>
+				<app-item-list></app-item-list>
+			</td>
+			<td>
+				<app-order></app-order>
+			</td>
+		</tr>
+	</table>
+</div>
+<mat-divider></mat-divider>
+<div align="center">
+	<p> <mat-icon class="icon" inline>copyright</mat-icon> 2021 ZGo </p>
+</div>

src/app/viewer/viewer.component.ts

@@ -32,6 +32,7 @@ export class ViewerComponent implements OnInit {
 	public addrUpdate: Observable<string>;
 	public ownerUpdate: Observable<Owner>;
 	public userUpdate: Observable<User>;
+	orientation: boolean = false;
 
 	constructor(
 		public fullnodeService: FullnodeService,
@@ -51,6 +52,7 @@ export class ViewerComponent implements OnInit {
 	}
 
 	ngOnInit(){
+		this.orientation = (window.innerWidth <= 500);
 		this.ownerUpdate.subscribe((owner) => {
 			this.message = owner.name;
 		});
@@ -63,12 +65,17 @@ export class ViewerComponent implements OnInit {
 	ngOnDestroy(){
 	}
 
+	onResize(event: any){
+		this.orientation = (event.target.innerWidth <= 500);
+	}
+
 	shortenZaddr(address:string) {
 		var addr = address;
 		var end = addr.length;
 		var last = end - 5;
 		return addr.substring(0,5).concat('...').concat(addr.substring(last, end));
 	}
+
 	openSettings() {
 
 		const dialogConfig = new MatDialogConfig();
@@ -88,7 +95,7 @@ export class ViewerComponent implements OnInit {
 
 	loginCheck(){
 		var today = new Date().getTime() / 1000;
-		console.log('User check', this.user.validated);
+		//console.log('User check', this.user.validated);
 		if (this.user.expiration < today || !this.user.validated) {
 			console.log('Log in expired!');
 			this.router.navigate(['/login']);