anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

design(home): update amazon and bitcoin icons, polish home view

Browse source
This commit is contained in:
Jason Dreyzehner 2016-10-03 19:55:13 -04:00
commit fd16d9b5e0
4 changed files with 80 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

20
public/img/icon-amazon.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

53
public/img/icon-bitcoin.svg Executable file → Normal file
View file

@ -1,24 +1,31 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="utf-8"?>
<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"> <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"
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch --> viewBox="0 0 51 51" style="enable-background:new 0 0 51 51;" xml:space="preserve">
<title>item-ico-bitcoin</title> <style type="text/css">
<desc>Created with Sketch.</desc> .st0{fill:url(#coin_1_);}
<defs> .st1{filter:url(#Adobe_OpacityMaskFilter);}
<linearGradient x1="63.5606697%" y1="66.5486774%" x2="29.0167968%" y2="6.87818453%" id="linearGradient-1"> .st2{fill:#FFFFFF;}
<stop stop-color="#FFA24B" offset="0%"></stop> .st3{mask:url(#mask-3);fill:#FFFFFF;}
<stop stop-color="#F7891C" offset="100%"></stop> </style>
</linearGradient> <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)">
<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> <stop offset="0" style="stop-color:#FFA24B"/>
</defs> <stop offset="1" style="stop-color:#F7891C"/>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> </linearGradient>
<g id="Wallet/Icon/Bitcoin" transform="translate(-1.000000, -1.000000)"> <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"/>
<g id="item-ico-bitcoin" transform="translate(1.000000, 1.000000)"> <defs>
<mask id="mask-3" fill="white"> <filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="15" y="11" width="21" height="28.7">
<use xlink:href="#path-2"></use> <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</mask> </filter>
<use id="Mask" fill="url(#linearGradient-1)" xlink:href="#path-2"></use> </defs>
<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> <mask maskUnits="userSpaceOnUse" x="15" y="11" width="21" height="28.7" id="mask-3">
</g> <g class="st1">
</g> <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> </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> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

Before After
Before After

38
public/views/tab-home.html
View file

@ -24,7 +24,7 @@
<div class="list card" ng-hide="!txps[0]"> <div class="list card" ng-hide="!txps[0]">
<a class="item item-icon-right item-heading" ui-sref="tabs.proposals"> <a class="item item-icon-right item-heading" ui-sref="tabs.proposals">
{{'Payment Proposals'|translate}} {{'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> <span class="badge badge-assertive m5t m10r" ng-show="txpsN>3"> {{txpsN}}</span>
</a> </a>
@ -36,11 +36,11 @@
<div class="list card" ng-if="notifications[0] && recentTransactionsEnabled"> <div class="list card" ng-if="notifications[0] && recentTransactionsEnabled">
<a class="item item-icon-right item-heading" ui-sref="tabs.activity"> <a class="item item-icon-right item-heading" ui-sref="tabs.activity">
<span translate>Recent Transactions</span> <span translate>Recent Transactions</span>
<i class="icon nav-item-arrow-right"></i> <i class="icon bp-arrow-right"></i>
</a> </a>
<span ng-if="fetchingNotifications" class="item text-center"> <span ng-if="fetchingNotifications" class="item text-center">
<ion-spinner icon="lines"></ion-spinner> <ion-spinner icon="lines"></ion-spinner>
<div translate>Updating activity. Please stand by</div> <div translate>Updating activity...</div>
</span> </span>
<a class="item activity" ng-repeat="notification in notifications" ng-click="openNotificationModal(notification)"> <a class="item activity" ng-repeat="notification in notifications" ng-click="openNotificationModal(notification)">
<span ng-include="'views/includes/walletActivity.html'"></span> <span ng-include="'views/includes/walletActivity.html'"></span>
@ -57,7 +57,7 @@
<div class="bg icon-create-wallet"></div> <div class="bg icon-create-wallet"></div>
</i> </i>
<span translate>Create a bitcoin wallet</span> <span translate>Create a bitcoin wallet</span>
<i class="icon nav-item-arrow-right"></i> <i class="icon bp-arrow-right"></i>
</a> </a>
<a ng-repeat="wallet in wallets track by $index" <a ng-repeat="wallet in wallets track by $index"
class="item item-icon-left item-big-icon-left item-icon-right wallet" class="item item-icon-left item-big-icon-left item-icon-right wallet"
@ -65,12 +65,12 @@
<i class="icon big-icon-svg"> <i class="icon big-icon-svg">
<img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg"/> <img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg"/>
</i> </i>
<h2> <span>
{{wallet.name || wallet.id}} {{wallet.name || wallet.id}}
<span class="size-12 text-light" ng-if="wallet.n > 1"> <span class="size-12 text-light" ng-if="wallet.n > 1">
{{wallet.m}}-of-{{wallet.n}} {{wallet.m}}-of-{{wallet.n}}
</span> </span>
</h2> </span>
<p> <p>
<span ng-if="!wallet.isComplete()" class="assertive" translate> <span ng-if="!wallet.isComplete()" class="assertive" translate>
@ -82,7 +82,7 @@
</span> </span>
&nbsp; &nbsp;
</p> </p>
<i class="icon nav-item-arrow-right"></i> <i class="icon bp-arrow-right"></i>
</a> </a>
<a ui-sref="tabs.bitpayCard" <a ui-sref="tabs.bitpayCard"
ng-if="wallets[0] && externalServices.BitpayCard && bitpayCardEnabled" ng-if="wallets[0] && externalServices.BitpayCard && bitpayCardEnabled"
@ -93,7 +93,7 @@
<h2>BitPay Card</h2> <h2>BitPay Card</h2>
<p ng-if="!bitpayCard" translate>Add funds to get started</p> <p ng-if="!bitpayCard" translate>Add funds to get started</p>
<span ng-if="bitpayCard">${{bitpayCard.balance}}</span> <span ng-if="bitpayCard">${{bitpayCard.balance}}</span>
<i class="icon nav-item-arrow-right"></i> <i class="icon bp-arrow-right"></i>
</a> </a>
</div> </div>
@ -104,7 +104,7 @@
</div> </div>
<a ng-if="glideraEnabled" ui-sref="tabs.buyandsell.glidera" class="item item-icon-right"> <a ng-if="glideraEnabled" ui-sref="tabs.buyandsell.glidera" class="item item-icon-right">
<img src="img/glidera-logo.png" width="90"/> <img src="img/glidera-logo.png" width="90"/>
<i class="icon nav-item-arrow-right"></i> <i class="icon bp-arrow-right"></i>
</a> </a>
<!-- disable coinbase for this release --> <!-- disable coinbase for this release -->
<!-- <a ng-if="coinbaseEnabled" ui-sref="exchange.coinbase" class="item"> <!-- <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"> <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"> <a class="item item-icon-left item-icon-right item-big-icon-left" ui-sref="tabs.giftcards.amazon">
<i class="icon big-icon-svg"> <i class="icon big-icon-svg">
<div class="bg icon-gift"></div> <div class="bg icon-amazon"></div>
</i> </i>
<span translate>Buy Amazon.com Gift Card</span> <span translate>Amazon.com Gift Cards</span>
<i class="icon nav-item-arrow-right"></i> <i class="icon bp-arrow-right"></i>
</a> </a>
</div> </div>
@ -126,8 +126,8 @@
ng-show="nextStepEnabled && wallets[0]"> ng-show="nextStepEnabled && wallets[0]">
<div class="item item-icon-right item-heading" ng-click="shouldHideNextSteps()" translate> <div class="item item-icon-right item-heading" ng-click="shouldHideNextSteps()" translate>
Next steps Next steps
<i class="icon nav-item-arrow-down" ng-show="!hideNextSteps"></i> <i class="icon bp-arrow-down" ng-show="!hideNextSteps"></i>
<i class="icon nav-item-arrow-up" ng-show="hideNextSteps"></i> <i class="icon bp-arrow-up" ng-show="hideNextSteps"></i>
</div> </div>
<div ng-show="!hideNextSteps"> <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"> <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> <div class="bg icon-bitpay-card"></div>
</i> </i>
<span translate>Add BitPay Visa&reg; Card</span> <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>
<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"> <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"> <i class="icon big-icon-svg">
<div class="bg icon-buy-bitcoin"></div> <div class="bg icon-buy-bitcoin"></div>
</i> </i>
<span translate>Buy or Sell Bitcoin</span> <span translate>Buy or Sell Bitcoin</span>
<i class="icon nav-item-arrow-right"></i> <i class="icon bp-arrow-right"></i>
</a> </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"> <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"> <i class="icon big-icon-svg">
<div class="bg icon-gift"></div> <div class="bg icon-amazon"></div>
</i> </i>
<span translate>Buy Amazon.com Gift Card</span> <span translate>Buy an Amazon Gift Card</span>
<i class="icon nav-item-arrow-right"></i> <i class="icon bp-arrow-right"></i>
</a> </a>
</div> </div>
</div> </div>

20
src/sass/views/tab-home.scss
View file

@ -13,12 +13,13 @@
.icon-gift { .icon-gift {
background-image: url("../img/icon-gift.svg"); background-image: url("../img/icon-gift.svg");
} }
.icon-amazon {
background-image: url("../img/icon-amazon.svg");
}
.card{ .card{
.item { .item {
color: #444; color: #444;
border-top:none; border-top:none;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
&:before { &:before {
display: block; display: block;
position: absolute; position: absolute;
@ -59,14 +60,9 @@
} }
} }
} }
.next-step.item {
.next-step { padding-top: 27px;
padding-top: 20px; padding-bottom: 27px;
padding-bottom: 20px;
&.item{
padding-top:2rem;
padding-bottom: 2rem;
}
} }
.homeTip { .homeTip {
.item { .item {
@ -93,4 +89,8 @@
} }
} }
} }
.icon.close-home-tip {
color: #666;
font-size: 38px;
}
} }