From 677537064ff6317255e0966a00f632c794dec61b Mon Sep 17 00:00:00 2001
From: Javier <javier@bitpay.com>
Date: Thu, 18 Aug 2016 17:45:59 -0300
Subject: [PATCH] Fix Home UI

---
 public/views/tab-home.html | 76 ++++++++++++++++++++------------------
 src/sass/main.scss         |  4 ++
 2 files changed, 44 insertions(+), 36 deletions(-)

diff --git a/public/views/tab-home.html b/public/views/tab-home.html
index 3191aaf27..09b5fb3ea 100644
--- a/public/views/tab-home.html
+++ b/public/views/tab-home.html
@@ -5,50 +5,55 @@
   </ion-nav-bar>
   <ion-content class="padding home" ng-controller="tabHomeController" cache-view="false">
 
-    <h2  class="title m0"   ng-if="txps[0]" translate>Payment Proposals</h2>
-    <div class="list card" ng-if="txps[0]">
-      <ul>
-        <li ng-repeat="tx in txps" class="item item-icon-left"
-        ng-click="openTxpModal(tx)">
-          <i class="icon ion-ios-circle-filled"  ng-show="tx.pendingForUs"  ng-style="{'color':tx.wallet.color}"></i>
-          <span ng-show="!tx.merchant">
-            <span ng-show="addressbook[tx.toAddress] && !tx.message">
-              {{addressbook[tx.toAddress]}}
+    <div ng-if="txps[0]">
+      <h3 class="title m0" translate>Payment Proposals</h3>
+      <div class="list card">
+        <ul>
+          <li ng-repeat="tx in txps" class="item item-icon-left"
+            ng-click="openTxpModal(tx)">
+            <i class="icon ion-ios-circle-filled" ng-show="tx.pendingForUs" ng-style="{'color':tx.wallet.color}"></i>
+            <span ng-show="!tx.merchant">
+              <span ng-show="addressbook[tx.toAddress] && !tx.message">
+                {{addressbook[tx.toAddress]}}
+              </span>
+              <span class="ellipsis" ng-show="!addressbook[tx.toAddress] && tx.message">
+                {{tx.message}}
+              </span>
+              <span ng-show="!addressbook[tx.toAddress] && !tx.message" translate>
+                Sending
+              </span>
             </span>
-            <span class="ellipsis" ng-show="!addressbook[tx.toAddress] && tx.message">
-              {{tx.message}}
+            <span ng-show="tx.merchant">
+              <span ng-show="tx.merchant.pr.ca"><i class="fi-lock"></i> {{tx.merchant.domain}}</span>
+              <span ng-show="!tx.merchant.pr.ca"><i class="fi-unlock"></i> {{tx.merchant.domain}}</span>
             </span>
-            <span ng-show="!addressbook[tx.toAddress] && !tx.message" translate>
-              Sending
-            </span>
-          </span>
-          <span ng-show="tx.merchant">
-            <span ng-show="tx.merchant.pr.ca"><i class="fi-lock"></i> {{tx.merchant.domain}}</span>
-            <span ng-show="!tx.merchant.pr.ca"><i class="fi-unlock"></i> {{tx.merchant.domain}}</span>
-          </span>
-          <span >
             <span>
               - {{tx.amountStr}}
             </span>
-          <div class="item item-divider">
-            {{tx.wallet.name}} &middot; <time>{{ (tx.ts || tx.createdOn ) * 1000 | amTimeAgo}}</time> 
-          </div>
-          </span>
-        </li>
-      </ul>
+            <div class="item item-divider">
+              {{tx.wallet.name}} &middot; <time>{{ (tx.ts || tx.createdOn ) * 1000 | amTimeAgo}}</time>
+            </div>
+          </li>
+        </ul>
 
-      <div ng-show="lockedBalanceSat">
-        <span translate>Total Locked Balance</span>:
-        <b>{{lockedBalanceStr}} </b>
-        <span> {{lockedBalanceAlternative}} {{alternativeIsoCode}} </span>
+        <div ng-show="lockedBalanceSat">
+          <span translate>Total Locked Balance</span>:
+          <b>{{lockedBalanceStr}} </b>
+          <span> {{lockedBalanceAlternative}} {{alternativeIsoCode}} </span>
+        </div>
       </div>
     </div>
 
+    <div class="row">
+      <div class="col col-90">
+        <h3>Wallets </h3>
+      </div>
 
+      <div class="col text-center">
+        <a href="#/add" class="add-icon"><i class="ion-plus size-21 right"></i></a>
+      </div>
+    </div>
 
-    <h2>Wallets 
-    <a href="#/add"><i class="ion-ios-plus-outline right"></i></a>
-</h2>
     <div class="list card">
       <ul class="pr">
 
@@ -71,8 +76,7 @@
       </ul>
     </div>
 
-
-    <h2>Next steps </h2>
+    <h3>Next steps </h3>
     <div class="list card">
       <ul class="pr">
       <li menu-toggle href ui-sref="bitpayCard" ng-show="bitpayCardEnabled" class="item item-icon-left">
@@ -87,7 +91,7 @@
         <i class="icon ion-ios-cart"></i>
         Gift Cards
         <span class="item-note">
-bla bla
+          bla bla
         </span>
       </li>
       </ul>
diff --git a/src/sass/main.scss b/src/sass/main.scss
index c0b3e914a..f6b3467b0 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -934,6 +934,10 @@ ul.wallet-selection.wallets {
   line-height: 45px;
 }
 
+.add-icon {
+  line-height: 33px;
+}
+
 .no-border {
   border-style: none;
 }