From 337b56258e8f4fba539527774e7f31aee43430c4 Mon Sep 17 00:00:00 2001
From: Jamal Jackson <jamal@bitpay.com>
Date: Wed, 12 Oct 2016 13:54:02 -0400
Subject: [PATCH] improved slider card design

---
 src/sass/views/includes/wallets.scss | 23 ++++++++++++++++++-----
 www/views/includes/wallets.html      |  7 +++++--
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/sass/views/includes/wallets.scss b/src/sass/views/includes/wallets.scss
index cf2626745..a9894ecf3 100644
--- a/src/sass/views/includes/wallets.scss
+++ b/src/sass/views/includes/wallets.scss
@@ -1,15 +1,12 @@
 .wallets {
   .slides {
     .swiper-container {
-      width: 75% !important;
+      width: 85% !important;
       overflow: visible;
     }
     .card {
-      padding: .7rem;
-      padding-left: .25rem;
-      padding-right: .25rem;
-      border-radius: .25rem;
       max-width: 350px;
+      box-shadow:$subtle-box-shadow;
       @media (min-width: 500px) {
         & {
           width: 350px;
@@ -17,6 +14,22 @@
           margin: 1.5rem auto 0;
         }
       }
+      .item{
+        padding:.7rem 1.5rem;
+        span{
+          clear:both;
+          width: 100%;
+          display: inline-block;
+          &.wallet-name{
+            margin-top:10px;
+            margin-bottom:5px;
+            font-size:14px;
+          }
+        }
+        .big-icon-svg{
+          & > .bg{padding:.3rem;width: 50px;height:50px;}
+        }
+      }
     }
     .swiper-slide {
       width: 100% !important;
diff --git a/www/views/includes/wallets.html b/www/views/includes/wallets.html
index ad96481e6..6de2c5a5b 100644
--- a/www/views/includes/wallets.html
+++ b/www/views/includes/wallets.html
@@ -1,12 +1,15 @@
 <div class="wallets" ng-show="wallets[0]">
-  <ion-slides class="slides" slider="data.slider">
+  <ion-slides class="slides" slider="data.slider" options="sliderOptions">
     <ion-slide-page ng-repeat="wallet in wallets track by $index">
       <div class="card" ng-click="slider.slideTo($index)">
         <div class="item item-icon-left text-right">
           <i class="icon big-icon-svg">
             <img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg"/>
           </i>
-          <span>{{wallet.name || wallet.id}}</span>
+          <span class="wallet-name">{{wallet.name || wallet.id}}</span>
+          <span class="item-note m10l">
+            {{wallet.status.availableBalanceStr}}
+          </span>
           <span class="item-note m10l" ng-show="wallet.n > 1 && wallet.isComplete()">
             {{wallet.m}}-of-{{wallet.n}}
           </span>