add final style to the order page and no items style improved

src/app/app.scss

@@ -50,14 +50,14 @@ p {
 
 .no-items {
     width: 100%;
-    height: 100%;
+    height: 85%;
     display: flex;
     align-items: center;
     justify-content: center;  
 }
 
 .no-items > h2 {
-    font-size: 15pt;
+    font-size: 12pt;
     color: #d3d3d3;
 }
 

src/pages/order/order.html

@@ -48,6 +48,13 @@
 				    </button>
 			    </div>
             </ion-item>
+            <ion-item class="empty-cart" *ngIf="emptyCart()">
+                <h2>Sin productos</h2>
+                <button ion-button icon-left (click)="selectProduct()">
+                    <ion-icon name="add"></ion-icon>
+                    Agregar un producto
+                </button>
+            </ion-item>
         </ion-list>
         <ion-item-divider>
             Total

src/pages/order/order.scss

@@ -1,7 +1,22 @@
 page-order {
 
     ion-content > div:nth-child(2) {
-        
+        overflow-y: hidden;
+    }
+
+    form {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    ion-list {
+        overflow-x: hidden;
+        overflow-y: auto;
+        height: 100%;
+        flex-grow: 1;
     }
 
     ion-item {
@@ -15,7 +30,6 @@ page-order {
 
     form > ion-item > div, form > ion-item-divider {
         border-bottom: 0 !important;
-        
     }
 
     ion-list > ion-item > div > div:nth-child(2) {
@@ -24,7 +38,7 @@ page-order {
         align-content: center;
     }
 
-    ion-list > ion-item > div > div:nth-child(2) > button {
+    ion-list > ion-item > div > div:nth-last-child(1) > button {
         height: 24px !important;
         padding: 0 8px !important;
         border-radius: 12px !important;
@@ -51,4 +65,24 @@ page-order {
     ion-input > input {
         margin: 8px !important;
     }
+
+    form > ion-item:nth-last-child(1) {
+        padding-right: 65px;
+    }
+
+    .empty-cart {
+        height: 100%;
+    }
+
+    .empty-cart > div > div > ion-label {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .empty-cart > div > div > ion-label > h2 {
+        font-size: 10pt;
+        color: #d3d3d3;
+        padding-bottom: 25px;
+    }
 }

src/pages/order/order.ts

@@ -16,34 +16,62 @@ import { ProductSelectionPage } from "./product-selection/product-selection";
 export class OrderPage extends BaseDetailsView<SaleOrder> {
 
     cart = [
-        {
-            id: 1,
-            name: "Producto 001",
-            price: 2000,
-            qty: 1,
-            subtotal: 2000
-        },
-        {
-            id: 2,
-            name: "Producto 002",
-            price: 2000,
-            qty: 1,
-            subtotal: 2000
-        },
-        {
-            id: 3,
-            name: "Producto 003",
-            price: 2000,
-            qty: 1,
-            subtotal: 2000
-        },
-        {
-            id: 4,
-            name: "Producto 004",
-            price: 2000,
-            qty: 1,
-            subtotal: 2000
-        }
+        // {
+        //     id: 1,
+        //     name: "Producto 001",
+        //     price: 2000,
+        //     qty: 1,
+        //     subtotal: 2000
+        // },
+        // {
+        //     id: 2,
+        //     name: "Producto 002",
+        //     price: 2000,
+        //     qty: 1,
+        //     subtotal: 2000
+        // },
+        // {
+        //     id: 3,
+        //     name: "Producto 003",
+        //     price: 2000,
+        //     qty: 1,
+        //     subtotal: 2000
+        // },
+        // {
+        //     id: 4,
+        //     name: "Producto 004",
+        //     price: 2000,
+        //     qty: 1,
+        //     subtotal: 2000
+        // },
+        // {
+        //     id: 5,
+        //     name: "Producto 005",
+        //     price: 2000,
+        //     qty: 1,
+        //     subtotal: 2000
+        // },
+        // {
+        //     id: 6,
+        //     name: "Producto 006",
+        //     price: 2000,
+        //     qty: 1,
+        //     subtotal: 2000
+        // },
+        // {
+        //     id: 7,
+        //     name: "Producto 006",
+        //     price: 2000,
+        //     qty: 1,
+        //     subtotal: 2000
+        // },
+        // {
+        //     id: 8,
+        //     name: "Producto 006",
+        //     price: 2000,
+        //     qty: 1,
+        //     subtotal: 2000
+        // }
     ];
 
     constructor(
@@ -256,6 +284,13 @@ export class OrderPage extends BaseDetailsView<SaleOrder> {
         console.log(item);
     }
 
+    /**
+     * 
+     */
+    emptyCart(): boolean {
+        return this.getCart().length === 0;
+    }
+
     /**
      * 
      * @param data