Implemented new design (Wallet Detail Screen )

src/pages/wallet-detail/wallet-detail.html

@@ -1,30 +1,44 @@
 <ion-header no-border>
   <ion-navbar transparent mode="ios">
-    <ion-title mode="ios">My Wallet</ion-title>
+    <ion-title mode="ios">Personal Wallet</ion-title>
+    <ion-buttons end>
+        <button ion-button icon-only>
+          <ion-icon class="header-action-right" name="refresh"></ion-icon>
+        </button>
+      </ion-buttons>
   </ion-navbar>
 </ion-header>
 
 <ion-content id="pages-wallet-detail">
   <div class="-header primary-header-background">
-    <h1>{{ wallet.balance }} <span>sky</span></h1>
+    <h1>{{ wallet.balance || 0 }} <span>sky</span></h1>
+    <span class="first-subt">$0.00 ($0.00)</span>
+    <span class="second-subt">{{ wallet.hours || 0 }} SKY Hours</span>
+
   </div>
   <ion-list>
     <ion-item-divider>
       <div class="column-10">ID</div>
       <div class="column-40">Address</div>
-      <div class="column-25">Hours</div>
+      <div class="column-25">SKY Hours</div>
       <div class="column-25">Balance</div>
     </ion-item-divider>
-    <button ion-item mode="ios" *ngFor="let address of addresses; let i = index" (click)="open(address)">
-      <div class="column-10">{{ i + 1 }}</div>
-      <div class="column-40">{{ address.address | address }}</div>
-      <div class="column-25">{{ address.hours }}</div>
-      <div class="column-25">{{ address.balance }}</div>
-    </button>
-
+    <ion-item-sliding #slidingItem *ngFor="let address of addresses; let i = index">
+      <ion-item  (click)="open(address)">
+        <div class="column-10">{{ i + 1 }}</div>
+        <div class="column-40">
+          <img src="assets/img/qrcode.png" style="margin-bottom: -5px">
+          {{ address.address | address }}</div>
+        <div class="column-25 ">{{ address.hours }}</div>
+        <div class="column-25">{{ address.balance }}</div>
+      </ion-item>
+      <ion-item-options side="right">
+        <button class="redColor" (click)="delAddress(slidingItem)" ion-button>Delete</button>
+      </ion-item-options>
+    </ion-item-sliding>
     <div class="-action-buttons">
       <button ion-button round (click)="addAddress()">
-        <img src="assets/img/plus-gold.png"> Add Address
+        <img src="assets/img/plus-gold.png"> New Address
       </button>
     </div>
   </ion-list>

src/pages/wallet-detail/wallet-detail.scss

@@ -3,22 +3,40 @@
 
   .-header {
     min-height: 170px;
-    padding: 80px 0 0 0;
+    padding: 60px 0 0 0;
     width: 100%;
   }
 
   h1 span {
-    font-size: 20px;
+    font-size: 13px;
+    margin: 0 0 0 -10px;
+  }
+
+  .first-subt{
+    width: 100%;
+    font-size: 12px;
+    color: #FAFAFA;
+    float: left;
+    text-align: center;
+  }
+  .second-subt{
+    color: #171A1D;
+    font-size: 12px;
+    width: 100%;
+    float: left;
+    text-align: center;
+    margin-top: 16px;
   }
 
   ion-item-divider {
+    font-size: 12px;
+    line-height: 14px;
     min-height: 50px;
-    padding-right: 32px;
   }
 
-  button.item .item-inner {
+  ion-item {
     font-size: 13px;
-    min-height: 69px;
+    min-height: 70px;
   }
 
   .-action-buttons {
@@ -32,7 +50,7 @@
       color: $text-color-normal;
       font-size: 13px;
       margin: 0 5px;
-      min-width: 140px;
+      min-width: 160px;
 
       img {
         height: 28px;
@@ -75,3 +93,7 @@
   margin: 100px auto 0;
   background: #fff;
 }
+
+.redColor{
+  background-color: #FF004E;
+}

src/pages/wallet-detail/wallet-detail.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import {ModalController, NavParams, Platform, ToastController} from 'ionic-angular';
+import {ModalController, NavParams, Platform, ToastController, ItemSliding} from 'ionic-angular';
 import { WalletProvider } from '../../providers/wallet/wallet.provider';
 import { Subscription } from 'rxjs/Subscription';
 import { AddressModel } from '../../models/address.model';
@@ -61,4 +61,8 @@ export class WalletDetailPage implements OnInit, OnDestroy {
   addAddress() {
     this.walletProvider.addAddress(this.wallet);
   }
+
+  delAddress(slidingItem: ItemSliding) {
+    slidingItem.close();
+  }
 }