From fd16d9b5e0a2a71a71e51ba59cff0ac45bea6d3f Mon Sep 17 00:00:00 2001
From: Jason Dreyzehner <jason@dreyzehner.com>
Date: Mon, 3 Oct 2016 19:55:13 -0400
Subject: [PATCH] design(home): update amazon and bitcoin icons, polish home
 view

---
 public/img/icon-amazon.svg   | 20 +++++++++++++
 public/img/icon-bitcoin.svg  | 55 ++++++++++++++++++++----------------
 public/views/tab-home.html   | 38 ++++++++++++-------------
 src/sass/views/tab-home.scss | 20 ++++++-------
 4 files changed, 80 insertions(+), 53 deletions(-)
 create mode 100644 public/img/icon-amazon.svg
 mode change 100755 => 100644 public/img/icon-bitcoin.svg

diff --git a/public/img/icon-amazon.svg b/public/img/icon-amazon.svg
new file mode 100644
index 000000000..14a4778ea
--- /dev/null
+++ b/public/img/icon-amazon.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Card" 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:#221F1F;}
+	.st1{fill:#FF9900;}
+</style>
+<path id="a" class="st0" d="M26.4,23c-0.5-0.7-1-1.2-1-2.5v-4.2c0-1.8,0.1-3.4-1.2-4.7c-1-1-2.8-1.4-4.1-1.4c-2.6,0-5.5,1-6.1,4.2
+	c-0.1,0.3,0.2,0.5,0.4,0.6l2.6,0.3c0.2,0,0.4-0.3,0.5-0.5c0.2-1.1,1.1-1.6,2.2-1.6c0.6,0,1.2,0.2,1.5,0.7c0.4,0.6,0.3,1.3,0.3,2v0.4
+	c-1.6,0.2-3.6,0.3-5.1,0.9c-1.7,0.7-2.9,2.2-2.9,4.4c0,2.8,1.8,4.2,4.1,4.2c1.9,0,3-0.5,4.5-2c0.5,0.7,0.7,1.1,1.6,1.8
+	c0.2,0.1,0.5,0.1,0.6-0.1l0,0c0.5-0.5,1.5-1.3,2.1-1.8C26.6,23.6,26.5,23.3,26.4,23z M21,21.8c-0.4,0.8-1.1,1.2-1.9,1.2
+	c-1,0-1.7-0.8-1.7-2c0-2.3,2.1-2.7,4-2.7v0.6C21.5,20,21.5,20.9,21,21.8z"/>
+<g id="arrow">
+	<path id="path8" class="st1" d="M29.6,27.7c-2.6,1.9-6.4,3-9.7,3c-4.6,0-8.7-1.7-11.8-4.5c-0.2-0.2,0-0.5,0.3-0.4
+		c3.4,2,7.5,3.1,11.8,3.1c2.9,0,6.1-0.6,9-1.8C29.7,26.9,30.1,27.3,29.6,27.7"/>
+	<path id="path10" class="st1" d="M30.7,26.4c-0.3-0.4-2.2-0.2-3.1-0.1c-0.3,0-0.3-0.2-0.1-0.4c1.5-1.1,3.9-0.7,4.2-0.4
+		c0.3,0.4-0.1,2.8-1.5,4c-0.2,0.2-0.4,0.1-0.3-0.2C30.4,28.6,31.1,26.9,30.7,26.4"/>
+</g>
+</svg>
diff --git a/public/img/icon-bitcoin.svg b/public/img/icon-bitcoin.svg
old mode 100755
new mode 100644
index 42747c028..5c532c555
--- a/public/img/icon-bitcoin.svg
+++ b/public/img/icon-bitcoin.svg
@@ -1,24 +1,31 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="51px" height="51px" viewBox="0 0 51 51" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
-    <title>item-ico-bitcoin</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <linearGradient x1="63.5606697%" y1="66.5486774%" x2="29.0167968%" y2="6.87818453%" id="linearGradient-1">
-            <stop stop-color="#FFA24B" offset="0%"></stop>
-            <stop stop-color="#F7891C" offset="100%"></stop>
-        </linearGradient>
-        <path d="M25.1597034,50.388592 C39.0550239,50.388592 50.3194068,39.1087215 50.3194068,25.194296 C50.3194068,11.2798705 39.0550239,0 25.1597034,0 C11.2643829,0 0,11.2798705 0,25.194296 C0,39.1087215 11.2643829,50.388592 25.1597034,50.388592 Z" id="path-2"></path>
-    </defs>
-    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Wallet/Icon/Bitcoin" transform="translate(-1.000000, -1.000000)">
-            <g id="item-ico-bitcoin" transform="translate(1.000000, 1.000000)">
-                <mask id="mask-3" fill="white">
-                    <use xlink:href="#path-2"></use>
-                </mask>
-                <use id="Mask" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
-                <path d="M32.5251708,19.1369572 C31.8948853,16.0886456 29.257137,15.2921976 26.0055297,15.2593441 L25.5453174,11 L23.0555529,11.2090294 L23.5134657,15.373126 C22.8550964,15.4317519 22.1899109,15.4927249 21.5389325,15.5728157 L21.0810197,11.4087191 L18.5639908,11.6271364 L19.0242031,15.8864805 C18.491562,15.9338279 17.9619595,16.0121421 17.4293184,16.0594894 L17.4293184,16.0594894 L14,16.3519349 L14.3001563,19.1057521 C14.3001563,19.1057521 16.1464976,18.9101859 16.097471,18.9670835 C17.1082244,18.8911646 17.5047081,19.4669358 17.6381561,19.9652087 L18.1721961,24.815384 C18.2433956,24.8228812 18.3251888,24.7947176 18.4359709,24.8286017 C18.337507,24.8304924 18.2829782,24.8492682 18.1845144,24.8511589 L18.9620463,31.6263154 C18.9496461,31.9667227 18.8043732,32.4969407 18.1187395,32.5649545 C18.1558585,32.5841865 16.2873443,32.7153579 16.2873443,32.7153579 L16.1570191,35.8575 L19.3937622,35.5593341 C19.9976027,35.5194839 20.5915887,35.4510138 21.1638124,35.4300534 L21.636343,39.7251724 L24.1261075,39.516143 L23.6658952,35.2567989 C24.3681996,35.2150579 25.0290326,35.163587 25.6601376,35.1143489 L26.1104953,39.3450731 L28.6002598,39.1360437 L28.1277292,34.8409248 C32.2914614,34.2235708 35.0997752,32.8804369 34.9972849,28.7300142 C34.9241947,25.4178154 33.2949822,24.0740188 30.8224629,23.6688612 C32.2236222,22.7782364 32.9706,21.3605564 32.5251708,19.1369572 L32.5251708,19.1369572 Z M30.0403391,28.6601004 C30.3997054,31.8737265 25.0597443,31.9757118 23.3838054,32.1126037 L22.7467022,26.4095523 C24.4523691,26.2704275 29.6589641,25.2939871 30.0403391,28.6601004 L30.0403391,28.6601004 Z M22.4636273,23.7939125 L21.9147231,18.6127177 C23.3026612,18.5029629 27.6736684,17.6461697 28.0060987,20.6929985 C28.3307274,23.6064579 23.8812935,23.6819248 22.4636273,23.7939125 Z" id="Bitcoin_Symbol" fill="#FFFFFF" mask="url(#mask-3)"></path>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 51 51" style="enable-background:new 0 0 51 51;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#coin_1_);}
+	.st1{filter:url(#Adobe_OpacityMaskFilter);}
+	.st2{fill:#FFFFFF;}
+	.st3{mask:url(#mask-3);fill:#FFFFFF;}
+</style>
+<linearGradient id="coin_1_" gradientUnits="userSpaceOnUse" x1="-273.8224" y1="413.966" x2="-274.172" y2="414.57" gradientTransform="matrix(50.3194 0 0 -50.3886 13809.4346 20893.9863)">
+	<stop  offset="0" style="stop-color:#FFA24B"/>
+	<stop  offset="1" style="stop-color:#F7891C"/>
+</linearGradient>
+<path id="coin" class="st0" d="M25.5,51c14.1,0,25.5-11.4,25.5-25.5S39.5,0,25.5,0S0,11.4,0,25.5S11.4,51,25.5,51z"/>
+<defs>
+	<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="15" y="11" width="21" height="28.7">
+		<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
+	</filter>
+</defs>
+<mask maskUnits="userSpaceOnUse" x="15" y="11" width="21" height="28.7" id="mask-3">
+	<g class="st1">
+		<path id="path-2" class="st2" d="M26.2,50.4c13.9,0,25.2-11.3,25.2-25.2S40.1,0,26.2,0S1,11.3,1,25.2S12.3,50.4,26.2,50.4z"/>
+	</g>
+</mask>
+<path id="BitPay-Bitcoin_Symbol" class="st3" d="M33.5,19.1c-0.6-3-3.3-3.8-6.5-3.9L26.5,11l-2.5,0.2l0.5,4.2c-0.7,0.1-1.3,0.1-2,0.2
+	l-0.5-4.2l-2.5,0.2l0.5,4.3c-0.5,0-1.1,0.1-1.6,0.2l0,0L15,16.4l0.3,2.8c0,0,1.8-0.2,1.8-0.1c1-0.1,1.4,0.5,1.5,1l0.5,4.9
+	c0.1,0,0.2,0,0.3,0c-0.1,0-0.2,0-0.3,0l0.8,6.8c0,0.3-0.2,0.9-0.8,0.9c0,0-1.8,0.2-1.8,0.2l-0.1,3.1l3.2-0.3c0.6,0,1.2-0.1,1.8-0.1
+	l0.5,4.3l2.5-0.2l-0.5-4.3c0.7,0,1.4-0.1,2-0.1l0.5,4.2l2.5-0.2l-0.5-4.3c4.2-0.6,7-2,6.9-6.1c-0.1-3.3-1.7-4.7-4.2-5.1
+	C33.2,22.8,34,21.4,33.5,19.1L33.5,19.1z M31,28.7c0.4,3.2-5,3.3-6.7,3.5l-0.6-5.7C25.5,26.3,30.7,25.3,31,28.7L31,28.7z M23.5,23.8
+	l-0.5-5.2c1.4-0.1,5.8-1,6.1,2.1C29.3,23.6,24.9,23.7,23.5,23.8z"/>
+</svg>
diff --git a/public/views/tab-home.html b/public/views/tab-home.html
index 4ebf12c01..b43869c56 100644
--- a/public/views/tab-home.html
+++ b/public/views/tab-home.html
@@ -24,7 +24,7 @@
     <div class="list card" ng-hide="!txps[0]">
       <a class="item item-icon-right item-heading" ui-sref="tabs.proposals">
         {{'Payment Proposals'|translate}}
-        <i class="icon nav-item-arrow-right"></i>
+        <i class="icon bp-arrow-right"></i>
         <span class="badge badge-assertive m5t m10r" ng-show="txpsN>3"> {{txpsN}}</span>
       </a>
 
@@ -36,11 +36,11 @@
     <div class="list card" ng-if="notifications[0] && recentTransactionsEnabled">
       <a class="item item-icon-right item-heading" ui-sref="tabs.activity">
         <span translate>Recent Transactions</span>
-        <i class="icon nav-item-arrow-right"></i>
+        <i class="icon bp-arrow-right"></i>
       </a>
       <span ng-if="fetchingNotifications" class="item text-center">
         <ion-spinner icon="lines"></ion-spinner>
-        <div translate>Updating activity. Please stand by</div>
+        <div translate>Updating activity...</div>
       </span>
       <a class="item activity" ng-repeat="notification in notifications" ng-click="openNotificationModal(notification)">
         <span ng-include="'views/includes/walletActivity.html'"></span>
@@ -57,7 +57,7 @@
          <div class="bg icon-create-wallet"></div>
        </i>
         <span translate>Create a bitcoin wallet</span>
-        <i class="icon nav-item-arrow-right"></i>
+        <i class="icon bp-arrow-right"></i>
       </a>
       <a ng-repeat="wallet in wallets track by $index"
          class="item item-icon-left item-big-icon-left item-icon-right wallet"
@@ -65,12 +65,12 @@
         <i class="icon big-icon-svg">
           <img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg"/>
         </i>
-        <h2>
+        <span>
           {{wallet.name || wallet.id}}
           <span class="size-12 text-light" ng-if="wallet.n > 1">
             {{wallet.m}}-of-{{wallet.n}}
           </span>
-        </h2>
+        </span>
 
         <p>
         <span ng-if="!wallet.isComplete()" class="assertive" translate>
@@ -82,7 +82,7 @@
         </span>
         &nbsp;
         </p>
-        <i class="icon nav-item-arrow-right"></i>
+        <i class="icon bp-arrow-right"></i>
       </a>
       <a ui-sref="tabs.bitpayCard"
          ng-if="wallets[0] && externalServices.BitpayCard && bitpayCardEnabled"
@@ -93,7 +93,7 @@
         <h2>BitPay Card</h2>
         <p ng-if="!bitpayCard" translate>Add funds to get started</p>
         <span ng-if="bitpayCard">${{bitpayCard.balance}}</span>
-        <i class="icon nav-item-arrow-right"></i>
+        <i class="icon bp-arrow-right"></i>
       </a>
     </div>
 
@@ -104,7 +104,7 @@
       </div>
       <a ng-if="glideraEnabled" ui-sref="tabs.buyandsell.glidera" class="item item-icon-right">
         <img src="img/glidera-logo.png" width="90"/>
-        <i class="icon nav-item-arrow-right"></i>
+        <i class="icon bp-arrow-right"></i>
       </a>
       <!-- disable coinbase for this release -->
       <!-- <a ng-if="coinbaseEnabled" ui-sref="exchange.coinbase" class="item">
@@ -115,10 +115,10 @@
     <div class="list card" ng-if="wallets[0] && externalServices.AmazonGiftCards && amazonEnabled">
       <a class="item item-icon-left item-icon-right item-big-icon-left" ui-sref="tabs.giftcards.amazon">
         <i class="icon big-icon-svg">
-          <div class="bg icon-gift"></div>
+          <div class="bg icon-amazon"></div>
         </i>
-        <span translate>Buy Amazon.com Gift Card</span>
-        <i class="icon nav-item-arrow-right"></i>
+        <span translate>Amazon.com Gift Cards</span>
+        <i class="icon bp-arrow-right"></i>
       </a>
     </div>
 
@@ -126,8 +126,8 @@
          ng-show="nextStepEnabled && wallets[0]">
       <div class="item item-icon-right item-heading" ng-click="shouldHideNextSteps()" translate>
         Next steps
-        <i class="icon nav-item-arrow-down" ng-show="!hideNextSteps"></i>
-        <i class="icon nav-item-arrow-up" ng-show="hideNextSteps"></i>
+        <i class="icon bp-arrow-down" ng-show="!hideNextSteps"></i>
+        <i class="icon bp-arrow-up" ng-show="hideNextSteps"></i>
       </div>
       <div ng-show="!hideNextSteps">
         <a ui-sref="tabs.bitpayCard" ng-show="!externalServices.BitpayCard && bitpayCardEnabled" class="item item-icon-left item-big-icon-left item-icon-right next-step">
@@ -135,21 +135,21 @@
            <div class="bg icon-bitpay-card"></div>
          </i>
           <span translate>Add BitPay Visa&reg; Card</span>
-          <i class="icon nav-item-arrow-right"></i>
+          <i class="icon bp-arrow-right"></i>
         </a>
         <a ng-show="!externalServices.BuyAndSell && (coinbaseEnabled || glideraEnabled)" ui-sref="tabs.buyandsell" class="item item-icon-left item-big-icon-left item-icon-right next-step">
          <i class="icon big-icon-svg">
            <div class="bg icon-buy-bitcoin"></div>
          </i>
           <span translate>Buy or Sell Bitcoin</span>
-          <i class="icon nav-item-arrow-right"></i>
+          <i class="icon bp-arrow-right"></i>
         </a>
         <a ui-sref="tabs.giftcards.amazon" ng-show="!externalServices.AmazonGiftCards && amazonEnabled" class="item item-icon-left item-big-icon-left item-icon-right next-step">
           <i class="icon big-icon-svg">
-            <div class="bg icon-gift"></div>
+            <div class="bg icon-amazon"></div>
           </i>
-          <span translate>Buy Amazon.com Gift Card</span>
-          <i class="icon nav-item-arrow-right"></i>
+          <span translate>Buy an Amazon Gift Card</span>
+          <i class="icon bp-arrow-right"></i>
         </a>
       </div>
     </div>
diff --git a/src/sass/views/tab-home.scss b/src/sass/views/tab-home.scss
index 6ac2ab547..fadcafe6c 100644
--- a/src/sass/views/tab-home.scss
+++ b/src/sass/views/tab-home.scss
@@ -13,12 +13,13 @@
   .icon-gift {
     background-image: url("../img/icon-gift.svg");
   }
+  .icon-amazon {
+    background-image: url("../img/icon-amazon.svg");
+  }
   .card{
     .item {
       color: #444;
       border-top:none;
-      padding-top: 1.5rem;
-      padding-bottom: 1.5rem;
       &:before {
         display: block;
         position: absolute;
@@ -59,14 +60,9 @@
       }
     }
   }
-
-  .next-step {
-    padding-top: 20px;
-    padding-bottom: 20px;
-    &.item{
-      padding-top:2rem;
-      padding-bottom: 2rem;
-    }
+  .next-step.item {
+    padding-top: 27px;
+    padding-bottom: 27px;
   }
   .homeTip {
     .item {
@@ -93,4 +89,8 @@
       }
     }
   }
+  .icon.close-home-tip {
+    color: #666;
+    font-size: 38px;
+  }
 }