From c2130a1c9757b91cf4f67e63aa0a298b68347bd8 Mon Sep 17 00:00:00 2001
From: Rene Vergara A <rvergara59@protonmail.com>
Date: Wed, 20 Jul 2022 20:00:06 -0500
Subject: [PATCH] User interface reviewed

---
 CHANGELOG.md                                  |  3 +
 src/app/checkout/checkout.component.html      |  9 +-
 .../items/item-list/item-list.component.css   |  2 +-
 .../items/item-list/item-list.component.html  | 99 ++++++++++---------
 src/app/order/order.component.css             |  2 +-
 src/app/settings/settings.component.css       |  2 +-
 src/app/viewer/viewer.component.css           |  1 +
 src/app/viewer/viewer.component.html          | 14 +--
 8 files changed, 75 insertions(+), 57 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index db96668..96f7431 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
     
 ### Changed
+- (2022-07-20) Buttons in Main form have been enclosed to display 
+               inside a fixed area.
+               On wide screens, new Order will display below main buttons.
 - (2022-07-19) Main form buttons redesigned
                Settings form redesigned - read/write data from database is  not working properly.
 
diff --git a/src/app/checkout/checkout.component.html b/src/app/checkout/checkout.component.html
index 3458441..6765d9d 100644
--- a/src/app/checkout/checkout.component.html
+++ b/src/app/checkout/checkout.component.html
@@ -1,12 +1,15 @@
 <div align="center" mat-dialog-title>
-<h4 class="text">Scan to make payment</h4>
+	<h4 class="text">Scan to make payment</h4>
 </div>
 
 <mat-dialog-content>
-	<div align="center" id="checkout-qr"></div>
+	<div align="center" 
+	     id="checkout-qr">   
+	</div>
 </mat-dialog-content>
 <mat-dialog-actions>
-	<table cellspacing="0" width="100%">
+	<table cellspacing="0" 
+	       width="100%">
 		<tr>
 			<td>
 				<button mat-raised-button color="primary" (click)="confirm()">
diff --git a/src/app/items/item-list/item-list.component.css b/src/app/items/item-list/item-list.component.css
index 7cf4cfa..6be4e1b 100644
--- a/src/app/items/item-list/item-list.component.css
+++ b/src/app/items/item-list/item-list.component.css
@@ -36,7 +36,7 @@ p.price{
 }
 
 .buttons-class-cart{
-  background-color: #ff4722;
+  background-color: #ff5722;
   color: white;
   font-size: 18px;
   font-weight: 700;
diff --git a/src/app/items/item-list/item-list.component.html b/src/app/items/item-list/item-list.component.html
index 479a893..91751ff 100644
--- a/src/app/items/item-list/item-list.component.html
+++ b/src/app/items/item-list/item-list.component.html
@@ -1,38 +1,42 @@
 <div *ngIf="items.length > 0">
 	<div class="availableItems" >
-		 Available Items:
+		Available Items:
 	</div>
 	<div class="card" *ngFor="let item of itemsUpdate | async">
 		<mat-card>
-				<table cellspacing="0" width="100%" >
-					<tr>
-						<td style="font-family: Roboto Mono;
-				           		   font-size: 16px;
-				                   font-weight: 700;
-				                   height: 20px;">
-				             {{item.name}}
-				        </td>
-						
-						<td></td>	
-					</tr>
-					<tr>
-						<td style="font-family: Roboto Mono;
-				           		   font-size: 16px;
-				                   font-weight: 400;
-				                   height: 20px;">
-							{{item.description}}
-						</td>
-						<td>
-							<div class="rv_price" *ngIf="!owner.zats">
-								<img class="icon" 
-								     src="/assets/zec_rv.png" 
-								     height="16px">{{(item.cost/zecPrice) | number: '1.06'}}
-								[{{item.cost | number: '1.02' | currency: getCurrency() }}]    
-							</div>
-							<p class="price" *ngIf="owner.zats"> &#x24e9;(item.cost/zecPrice)*100000000 | number: '1.0-0'}}</p>
-						</td>
-					</tr>
-				</table>
+			<table cellspacing="0" width="100%" >
+				<tr>
+					<td style="font-family: Roboto Mono;
+							   font-size: 16px;
+							   font-weight: 700;
+							   height: 20px;">
+					{{item.name}}
+					</td>
+					<td></td>	
+				</tr>
+				<tr>
+					<td style="font-family: Roboto Mono;
+							   font-size: 16px;
+							   font-weight: 400;
+							   height: 20px;">
+					    {{item.description}}
+				    </td>
+				    <td>
+						<div class="rv_price" 
+						     *ngIf="!owner.zats">
+							<img class="icon" 
+								 src="/assets/zec_rv.png" 
+								 height="16px">
+							{{(item.cost/zecPrice) | number: '1.06'}}
+							[{{item.cost | number: '1.02' | currency: getCurrency() }}]    
+						</div>
+						<p class="price" 
+						   *ngIf="owner.zats"> 
+						   &#x24e9;(item.cost/zecPrice)*100000000 | number: '1.0-0'}}
+						</p>
+					</td>
+				</tr>
+			</table>
 			<mat-card-actions>
 				<table cellspacing="0" width="100%">
 					<tr>
@@ -45,17 +49,20 @@
 							</button>
 						</td>
 						<td align="right">
-<!--
-							<button class="btn">
-								<fa-icon  [icon]="getIcon(order)" >
-									
-								</fa-icon>
-							</button>	
--->
-							<button mat-raised-button color="primary" 
-							        class="buttons-class-cart" 
-							        (click)="addToOrder(item._id!)">
-								<mat-icon [inline]="true">shopping_cart</mat-icon>
+		<!--
+								<button class="btn">
+									<fa-icon  [icon]="getIcon(order)" >
+										
+									</fa-icon>
+								</button>	
+		-->
+							<button mat-raised-button 
+									color="primary" 
+									class="buttons-class-cart" 
+									(click)="addToOrder(item._id!)">
+								<mat-icon [inline]="true">
+									shopping_cart
+								</mat-icon>
 							</button>
 						</td>
 					</tr>
@@ -67,8 +74,10 @@
 <p *ngIf = "items.length <= 0">No items yet!</p>
 <br>
 <button class="text" 
-        mat-raised-button 
-        (click)="openDialog()">
-	<mat-icon class="icon">add</mat-icon>
-       Add item
+		mat-raised-button 
+		(click)="openDialog()">
+	<mat-icon class="icon">
+		add
+	</mat-icon>
+	Add item
 </button>
diff --git a/src/app/order/order.component.css b/src/app/order/order.component.css
index 3108256..ac3379b 100644
--- a/src/app/order/order.component.css
+++ b/src/app/order/order.component.css
@@ -52,7 +52,7 @@ img.icon{
 
 .buttons-class {
 	font-family: 'Spartan', sans-serif;
-	background-color: #ff4722;
+	background-color: #ff5722;
 	color: white;
 	font-weight: 500;
 	height: 25px !important;
diff --git a/src/app/settings/settings.component.css b/src/app/settings/settings.component.css
index f27b6b9..3f66cd2 100644
--- a/src/app/settings/settings.component.css
+++ b/src/app/settings/settings.component.css
@@ -4,7 +4,7 @@
 
 .settings-title {
 	font-family: 'Spartan', sans-serif;
-	background: #ff4722;
+	background: #ff5722;
 	color: white;
 	font-size: 30px;
 	text-align: center;
diff --git a/src/app/viewer/viewer.component.css b/src/app/viewer/viewer.component.css
index 87763db..76c6b4f 100644
--- a/src/app/viewer/viewer.component.css
+++ b/src/app/viewer/viewer.component.css
@@ -19,6 +19,7 @@
     margin-bottom: 12px;
     font-weight: 500;
     color: white;
+    max-width: 85%;
 }
 
 .small{
diff --git a/src/app/viewer/viewer.component.html b/src/app/viewer/viewer.component.html
index 2c79259..708939a 100644
--- a/src/app/viewer/viewer.component.html
+++ b/src/app/viewer/viewer.component.html
@@ -27,16 +27,18 @@
 	</div>
 </div>
 <div *ngIf="orientation">
-<app-order></app-order>
-<app-item-list [zecPrice]="price"></app-item-list>
+	<app-order></app-order>
+	<app-item-list [zecPrice]="price"></app-item-list>
 </div>
-<div *ngIf="!orientation" align="center">
-	<table cellspacing="0" width="75%">
+<div *ngIf="!orientation" 
+     align="center">
+	<table cellspacing="0" 
+	       width="85%" >
 		<tr>
-			<td>
+			<td width="50%">
 				<app-item-list [zecPrice]="price"></app-item-list>
 			</td>
-			<td>
+			<td style="vertical-align: top;" width="50%" >
 				<app-order></app-order>
 			</td>
 		</tr>