From 1d3dd28b1afa5adf05d8db358f9c989a02d45720 Mon Sep 17 00:00:00 2001
From: Jamal Jackson <jamal@bitpay.com>
Date: Mon, 3 Oct 2016 14:16:15 -0400
Subject: [PATCH] updated list view on send tab

---
 public/views/tab-send.html   | 45 +++++++++++++++++++++---------------
 src/sass/views/tab-send.scss | 43 ++++++++++++++++++++++++++++++++++
 2 files changed, 69 insertions(+), 19 deletions(-)

diff --git a/public/views/tab-send.html b/public/views/tab-send.html
index 963c7e094..691ca080e 100644
--- a/public/views/tab-send.html
+++ b/public/views/tab-send.html
@@ -22,30 +22,37 @@
         <span translate>Contacts</span>
         <a ng-show="hasContacts" ui-sref="tabs.send.addressbook"><i class="icon ion-ios-plus-empty list-add-button"></i></a>
       </div>
-      <a class="item item-icon-left item-icon-right ng-hide" ng-show="!hasContacts" ui-sref="tabs.send.addressbook">
-        <gravatar class="send-gravatar" name="" width="30" email=""></gravatar>
-        <span translate>Add a Contact</span>
-        <i class="icon nav-item-arrow-right"></i>
-      </a>
-      <a class="item item-icon-left item-icon-right ng-hide" ng-repeat="item in list" ng-show="hasContacts && !item.isWallet" ng-click="goToAmount(item)">
-        <gravatar class="send-gravatar" name="{{item.name}}" width="30" email="{{item.email}}"></gravatar>
-        {{item.name}}
-        <i class="icon nav-item-arrow-right"></i>
-      </a>
-      <div class="show-more" ng-show="contactsShowMore" ng-click="showMore()" translate>
-        Show more
+      <div class="list">
+        <a class="item item-icon-left item-icon-right ng-hide" ng-show="!hasContacts" ui-sref="tabs.send.addressbook">
+          <gravatar class="send-gravatar" name="" width="30" email=""></gravatar>
+          <span translate>Add a Contact</span>
+          <i class="icon nav-item-arrow-right"></i>
+        </a>
+        <a class="item item-icon-left item-icon-right ng-hide" ng-repeat="item in list" ng-show="hasContacts && !item.isWallet" ng-click="goToAmount(item)">
+          <gravatar class="send-gravatar" name="{{item.name}}" width="30" email="{{item.email}}"></gravatar>
+          {{item.name}}
+          <i class="icon nav-item-arrow-right"></i>
+        </a>
+        <div class="show-more" ng-show="contactsShowMore" ng-click="showMore()" translate>
+          Show more
+        </div>
       </div>
     </div>
 
     <div class="card" ng-show="hasWallets && !oneWallet">
-      <div class="item item-heading">
-        <span translate>Transfer to Wallet</span>
+      <div class="list">
+        <div class="item item-heading">
+          <span translate>Transfer to Wallet</span>
+        </div>
+        <a class="item item-icon-left item-icon-right ng-hide" ng-repeat="item in list" ng-show="hasWallets && item.isWallet" ng-click="goToAmount(item)">
+          <!-- <i ng-show="item.isWallet" class="icon ion-briefcase size-21" ng-style="{'color':item.color}"></i> -->
+          <i class="icon big-icon-svg" ng-show="item.isWallet">
+            <img src="img/icon-wallet.svg" ng-style="{'background-color': item.color}" class="bg"/>
+          </i>
+          {{item.name}}
+          <i class="icon nav-item-arrow-right"></i>
+        </a>
       </div>
-      <a class="item item-icon-left item-icon-right ng-hide" ng-repeat="item in list" ng-show="hasWallets && item.isWallet" ng-click="goToAmount(item)">
-        <i ng-show="item.isWallet" class="icon ion-briefcase size-21" ng-style="{'color':item.color}"></i>
-        {{item.name}}
-        <i class="icon nav-item-arrow-right"></i>
-      </a>
     </div>
   </ion-content>
 </ion-view>
diff --git a/src/sass/views/tab-send.scss b/src/sass/views/tab-send.scss
index bd0f19a99..20ced3169 100644
--- a/src/sass/views/tab-send.scss
+++ b/src/sass/views/tab-send.scss
@@ -23,4 +23,47 @@
     color: #387ef5;
     font-weight: bold;
   }
+  .list {
+    .item {
+      color: #444;
+      border-top: none;
+      padding-top: 1.5rem;
+      padding-bottom: 1.5rem;
+      .big-icon-svg {
+        left:5px;
+       & > .bg{
+        width:30px;
+        height:30px;
+        box-shadow: none;
+       }
+      }
+      &:before {
+        display: block;
+        position: absolute;
+        width: 80%;
+        height: 1px;
+        background: rgba(221, 221, 221, 0.3);
+        top: 0;
+        right: 0;
+        content: '';
+      }
+      &.item-divider {
+        color: rgba(74, 74, 74, .8);
+      }
+      &.item-heading {
+        &:before {
+          top: 99%;
+          width:100%;
+        }
+      }
+      &:nth-child(2) {
+        &:before {
+          width: 0;
+        }
+      }
+      .item-note {
+        color: rgb(58, 58, 58);
+      }
+    }
+  }
 }