Merge pull request #6863 from JDonadio/home/ref-style

ref home style

src/assets/icon/icon-wallet.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Wallet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFFFFF;}
+</style>
+<path id="Icon" class="st0" d="M6.5,26.9c0,1.6,1.3,2.9,3.1,2.9h20.8c1.7,0,3.1-1.2,3.1-2.9V13.3H6.5V26.9L6.5,26.9z M26.7,13.3
+	v-3.1H6.5v3.1H26.7z M28.5,24.3c0.9,0,1.7-0.7,1.7-1.6c0-0.9-0.7-1.6-1.7-1.6s-1.7,0.7-1.7,1.6C26.7,23.6,27.5,24.3,28.5,24.3z"/>
+</svg>

src/pages/home/home.html

@@ -13,12 +13,22 @@
     </ion-card>
   </div>
 
-  <ion-card *ngFor="let wallet of wallets">
-    <ion-card-header>
-      {{wallet.credentials.walletName}} {{wallet.credentials.m}}-{{wallet.credentials.n}}
-    </ion-card-header>
-    <ion-card-content>
-      {{wallet.credentials.coin}} - {{wallet.credentials.walletId}}
-    </ion-card-content>
+  <ion-card>
+    <ion-item>
+      Wallets
+      <button ion-button outline item-end icon-left (click)="goToAddView()">
+        <ion-icon name="md-add"></ion-icon>
+      </button>
+    </ion-item>
+
+    <ion-list *ngIf="wallets && wallets[0]">
+      <button ion-item *ngFor="let wallet of wallets">
+        <ion-icon item-start>
+          <img src="../../assets/icon/icon-wallet.svg" class="icon-wallet">
+        </ion-icon>
+        <h2>{{wallet.credentials.walletName}} {{wallet.credentials.m}}-{{wallet.credentials.n}}</h2>
+        <p>{{wallet.credentials.coin}} - 10 BTC</p>
+      </button>
+    </ion-list>
   </ion-card>
 </ion-content>

src/pages/home/home.scss

@@ -1,3 +1,15 @@
-page-home {
-
+img {
+  &.icon-wallet {
+    width: 35px !important;
+    background-color: #647ce8;
+  } 
+}
+
+.button-outline-md {
+  margin-right: auto !important;
+  border: none;
+  color: #488aff;
+  background-color: transparent;
+  -webkit-box-shadow: none;
+  box-shadow: none;
 }