BTCPrivate
/
copay
mirror of https://github.com/BTCPrivate/copay.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #243 from bitjson/ref/design 

scss refactor and design polish
This commit is contained in:
Jason Dreyzehner 2016-10-03 20:29:13 -04:00 committed by GitHub
parent 9bf5d0f4ce 04fd391579
commit 32744f6ad1
29 changed files with 269 additions and 258 deletions
Show Stats 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

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

@ -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>
<?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>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

8
public/views/add.html
View File

@ -12,7 +12,7 @@
<img src="img/icon-wallet.svg" class="bg"/>
</i>
<h2 translate>New Personal Wallet</h2>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-remove-animate item-icon-right item-icon-left item-big-icon-left" type="item-text-wrap" ui-sref="tabs.add.create-shared">
@ -20,7 +20,7 @@
<img src="img/icon-wallet.svg" class="bg"/>
</i>
<h2 translate>Create Shared Wallet</h2>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-remove-animate item-icon-right item-icon-left item-big-icon-left" type="item-text-wrap" ui-sref="tabs.add.join">
@ -28,7 +28,7 @@
<img src="img/item-ico-addwallet.svg" class="bg join"/>
</i>
<h2 translate>Join shared wallet</h2>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-remove-animate item-icon-right item-icon-left item-big-icon-left" type="item-text-wrap" ui-sref="tabs.add.import">
@ -36,7 +36,7 @@
<img src="img/item-ico-import.svg" class="bg"/>
</i>
<h2 translate>Import wallet</h2>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
</ion-list>

2
public/views/addressbook.html
View File

@ -31,7 +31,7 @@
<gravatar name="{{addrEntry.name}}" width="50" email="{{addrEntry.email}}"></gravatar>
<h2>{{addrEntry.name}}</h2>
<p>{{addrEntry.address}}</p>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
<ion-option-button class="button-assertive" ng-click="remove(addrEntry.address)">
<i class="icon ion-minus-circled"></i>

2
public/views/amazon.html
View File

@ -33,7 +33,7 @@
<a class="item item-icon-left item-icon-right" href ui-sref="tabs.giftcards.amazon.buy">
<i class="icon ion-bag"></i>
Buy Gift Card
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
</div>

2
public/views/buyandsell.html
View File

@ -8,7 +8,7 @@
<ion-list>
<ion-item class="item item-icon-right" ui-sref="tabs.buyandsell.glidera">
<img src="img/glidera-logo.png" width="90">
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</ion-item>
</ion-list>
</ion-content>

6
public/views/glidera.html
View File

@ -87,7 +87,7 @@
<span class="item-note" ng-show="email">
{{email}}
</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
</div>
<div class="padding">
@ -112,14 +112,14 @@
href ui-sref="tabs.buyandsell.glidera.buy">
<img src="img/buy-bitcoin.svg" alt="buy bitcoin" width="30">
Buy Bitcoin
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-right"
ng-show="status.userCanSell"
href ui-sref="tabs.buyandsell.glidera.sell">
<img src="img/sell-bitcoin.svg" alt="buy bitcoin" width="30">
Sell Bitcoin
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
</div>

12
public/views/preferences.html
View File

@ -14,7 +14,7 @@
<span class="item-note">
{{wallet.name}}
</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item" ng-show="wallet.isPrivKeyExternal()">
<span translate>Hardware Wallet</span>
@ -27,7 +27,7 @@
<span class="item-note" ng-style="{'color': wallet.color}">
&block;
</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-right" ui-sref="tabs.preferences.preferencesEmail">
<span translate>Email Notifications</span>
@ -35,14 +35,14 @@
<span ng-if="!wallet.email" translate>Disabled</span>
<span ng-if="wallet.email">{{wallet.email}}</span>
</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<div class="item item-divider" translate>
Security
</div>
<a class="item item-icon-right" ui-sref="tabs.preferences.backupWarning({from: 'tabs.preferences'})" ng-hide="wallet.isPrivKeyExternal()">
<span translate>Backup</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<div ng-show="wallet.canSign()">
<ion-toggle ng-model="encryptEnabled.value" toggle-class="toggle-balanced" ng-change="encryptChange()">
@ -56,12 +56,12 @@
</div>
<a class="item item-icon-right" ui-sref="tabs.preferences.deleteWords" ng-show ="!deleted">
<span translate>Delete recovery phrase</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<div class="item item-divider"></div>
<a class="item item-icon-right" ui-sref="tabs.preferences.preferencesAdvanced">
<span translate>Advanced</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
</div>
</ion-content>

6
public/views/preferencesAbout.html
View File

@ -28,17 +28,17 @@
<a class="item item-icon-left item-icon-right" ui-sref="tabs.about.termsOfUse">
<i class="icon ion-ios-list-outline"></i>
<span translate>Terms of Use</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-left item-icon-right" ui-sref="tabs.about.translators">
<i class="icon ion-ios-people-outline"></i>
<span translate>Translators</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-left item-icon-right" ui-sref="tabs.about.logs">
<i class="icon ion-ios-copy-outline"></i>
<span translate>Session log</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
</div>
</ion-content>

12
public/views/preferencesAdvanced.html
View File

@ -10,27 +10,27 @@
</div>
<a class="item item-icon-right" ui-sref="tabs.preferences.information">
<span translate>Wallet Information</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-right" ng-show="network == 'livenet'" ui-sref="tabs.preferences.paperWallet">
<span translate>Sweep paper wallet</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-right" ui-sref="tabs.preferences.export">
<span translate>Export Wallet</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-right" ui-sref="tabs.preferences.preferencesBwsUrl">
<span translate>Wallet Service URL</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-right" ui-sref="tabs.preferences.preferencesHistory">
<span translate>Transaction History</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-right" ui-sref="tabs.preferences.delete">
<span translate>Delete Wallet</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
</div>
</ion-content>

4
public/views/preferencesDeleteWallet.html
View File

@ -5,13 +5,13 @@
</ion-nav-back-button>
</ion-nav-bar>
<ion-content>
<div class="white-bg padding">
<div class="padding">
<h1 class="text-center assertive" translate>Warning!</h2>
<div class="padding text-center">
<p translate>
Permanently delete this wallet.
</p>
<p translate class="bold-text">
<p translate>
THIS ACTION CANNOT BE REVERSED
</p>
</div>

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

@ -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>

28
public/views/tab-send.html
View File

@ -20,37 +20,41 @@
<div class="card">
<div class="item item-icon-right item-heading">
<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>
<a ng-if="hasContacts" ui-sref="tabs.send.addressbook"><i class="icon ion-ios-plus-empty list-add-button"></i></a>
</div>
<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>
<a class="item item-icon-left item-icon-right" ng-if="!hasContacts" ui-sref="tabs.send.addressbook">
<i class="icon big-icon-svg">
<gravatar class="send-gravatar" name="" width="30" email=""></gravatar>
</i>
<span translate>Add a Contact</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-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>
<a class="item item-icon-left item-icon-right" ng-repeat="item in list" ng-if="hasContacts && !item.isWallet" ng-click="goToAmount(item)">
<i class="icon big-icon-svg">
<gravatar class="send-gravatar" name="{{item.name}}" width="30" email="{{item.email}}"></gravatar>
</i>
{{item.name}}
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<div class="show-more" ng-show="contactsShowMore" ng-click="showMore()" translate>
<div class="show-more" ng-if="contactsShowMore" ng-click="showMore()" translate>
Show more
</div>
</div>
</div>
<div class="card" ng-show="hasWallets && !oneWallet">
<div class="card" ng-if="hasWallets && !oneWallet">
<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)">
<a class="item item-icon-left item-icon-right" ng-repeat="item in list" ng-if="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">
<i class="icon big-icon-svg" ng-if="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>
<i class="icon bp-arrow-right"></i>
</a>
</div>
</div>

18
public/views/tab-settings.html
View File

@ -11,7 +11,7 @@
<img src="img/icon-address-book.svg" class="bg"/>
</i>
<span translate>Address Book</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<div class="item item-divider" translate>Preferences</div>
@ -21,7 +21,7 @@
<img src="img/icon-notifications.svg" class="bg"/>
</i>
<span translate>Notifications</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-left item-icon-right" ui-sref="tabs.language">
@ -32,7 +32,7 @@
<span class="item-note">
{{currentLanguageName|translate}}
</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-left item-icon-right" ui-sref="tabs.unit">
@ -43,7 +43,7 @@
<span class="item-note">
{{unitName}}
</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-left item-icon-right" ui-sref="tabs.altCurrency">
@ -54,7 +54,7 @@
<span class="item-note">
{{selectedAlternative.name}}
</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<a class="item item-icon-left item-icon-right" ui-sref="tabs.fee">
@ -65,7 +65,7 @@
<span class="item-note">
{{feeOpts[currentFeeLevel]|translate}}
</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<div class="item item-divider" ng-show="wallets[0]" translate>Wallets Preferences</div>
@ -80,13 +80,13 @@
<span class="right text-light assertive" ng-show="!item.isComplete()" translate>
Incomplete
</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<div class="item item-divider"></div>
<a class="item item-icon-right" href ui-sref="tabs.advanced">
<span translate>Advanced</span>
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
<div class="item item-divider"></div>
@ -95,7 +95,7 @@
<img src="img/icon-about.svg" class="bg"/>
</i>
<span translate>About</span> {{appName}}
<i class="icon nav-item-arrow-right"></i>
<i class="icon bp-arrow-right"></i>
</a>
</div>
</ion-content>

131
src/sass/common.scss
View File

@ -1,131 +0,0 @@
.icon.nav-item-arrow-right {
color: #666;
font-size: 26px;
@extend .ion-ios-arrow-right;
}
.icon.nav-item-arrow-down {
color: #666;
font-size: 26px;
@extend .ion-ios-arrow-down;
}
.icon.nav-item-arrow-up {
color: #666;
font-size: 26px;
@extend .ion-ios-arrow-up;
}
.item.item-heading {
font-weight: bold;
}
.item.item-footer {
font-weight: lighter;
}
.icon.close-home-tip {
color: #666;
font-size: 38px;
}
.icon.list-add-button {
color: #666;
font-size: 38px;
}
.item.item-big-icon-left {
padding-left: 74px;
}
.item-no-bottom-border + .item {
border-top: 0;
}
.big-icon-svg {
padding: 0 7px;
> .bg {
border-radius: 50%;
width: 40px;
height: 40px;
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);
background-repeat:no-repeat;
background-clip: padding-box;
background-size: 103%;
&.green{
background: rgb(1, 209, 162);
}
}
}
.white-bg{
background: #fff;
}
.overlay {
position: absolute;
top:0;
left:0;
width:100%;
height: 100%;
background: rgba(0,0,0,.4);
z-index: 4;
}
.back-button {
border: 0;
.icon:before {
color: #fff;
font-size: 30px !important;
font-weight: bold;
margin-left: 5px;
}
}
.search-button {
.icon:before {
color: #fff;
font-size: 30px !important;
margin-left: 5px;
}
}
.button-block {
width: 90% !important;
margin-left: auto;
margin-right: auto;
}
.bar-green{
background: rgb(17, 209, 166) !important;
}
ion-header-bar{
button{
border:none;
}
}
.border-top{
border-top:1px solid rgb(228,228,228);
}
.bold-text{
font-weight: bold !important;
}
.card{
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}
/* Wrap text from item-note */
.item-note{
white-space: -moz-pre-wrap !important;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
white-space: -webkit-pre-wrap;
word-break: break-all;
white-space: normal;
}

31
src/sass/icons.scss Normal file
View File

@ -0,0 +1,31 @@
.icon.bp-arrow-right {
@extend .ion-ios-arrow-right;
}
.icon.bp-arrow-down {
@extend .ion-ios-arrow-down;
}
.icon.bp-arrow-up {
@extend .ion-ios-arrow-up;
}
.item.item-big-icon-left {
padding-left: 74px;
}
.big-icon-svg {
padding: 0 7px;
> .bg {
border-radius: 50%;
width: 40px;
height: 40px;
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);
background-repeat:no-repeat;
background-clip: padding-box;
background-size: 103%;
&.green{
background: rgb(1, 209, 162);
}
}
}

31
src/sass/ionic.scss
View File

@ -1,19 +1,9 @@
/* constants */
$royal: #1e3186;
$soft-blue: #647ce8;
$subtle-gray: #f5f5f5;
$roboto: "Roboto", sans-serif;
$roboto-light: "Roboto-Light", sans-serif-light;
// This file is for changes to the standard Ionic Framework which cannot be made
// in variables.scss.
/* Set ionic variables */
$font-family-sans-serif: $roboto;
$font-family-light-sans-serif: $roboto-light;
$base-background-color: $subtle-gray;
$item-default-active-bg: $subtle-gray;
@import "../../bower_components/ionic/scss/ionic";
$ios-transition-duration: 200ms;
/* Ionic Workarounds */
/* Ionic Overrides and Workarounds */
// Please include a description of the problem solved by the workaround.
// class to dynamically hide the ion-nav-bar for v1 Amazon flow
@ -25,4 +15,15 @@ ion-tabs.ion-tabs-transparent {
background: none transparent;
}
@import "../../bower_components/ionic/scss/ionic";
// Some overrides for the card class which can't be set by variable
.card, .list {
.icon {
color: $light-gray;
}
& > .item-heading {
font-weight: 700;
.icon {
color: $mid-gray;
}
}
}

3
src/sass/main.scss
View File

@ -1,6 +1,7 @@
@import "fonts";
@import "variables";
@import "icons";
@import "ionic";
@import "common";
@import "forms";
@import "mixins/mixins";
@import "views/views";

36
src/sass/shame.scss
View File

@ -62,6 +62,42 @@ input[type=number] {
height: 24px;
}
/* Wrap text from item-note */
.item-note{
white-space: -moz-pre-wrap !important;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
white-space: -webkit-pre-wrap;
word-break: break-all;
white-space: normal;
}
.back-button {
border: 0;
.icon:before {
color: #fff;
font-size: 30px !important;
font-weight: bold;
margin-left: 5px;
}
}
.search-button {
.icon:before {
color: #fff;
font-size: 30px !important;
margin-left: 5px;
}
}
.button-block {
width: 90% !important;
margin-left: auto;
margin-right: auto;
}
.name-wallet {
font-size: 14px;
font-weight: 400;

20
src/sass/variables.scss Normal file
View File

@ -0,0 +1,20 @@
/* constants */
$royal: #1e3186;
$soft-blue: #647ce8;
$subtle-gray: #f5f5f5;
$roboto: "Roboto", sans-serif;
$roboto-light: "Roboto-Light", sans-serif-light;
$mid-gray: #667;
$light-gray: #9b9bab;
/* Set ionic variables */
$font-family-sans-serif: $roboto;
$font-family-light-sans-serif: $roboto-light;
$base-background-color: $subtle-gray;
$item-default-active-bg: $subtle-gray;
$ios-transition-duration: 200ms;
$card-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
$item-icon-font-size: 24px;

3
src/sass/views/amount.scss
View File

@ -1,4 +1,7 @@
#view-amount {
.item-no-bottom-border + .item {
border-top: 0;
}
.icon-bitpay-card {
background-image: url("../img/icon-bitpay.svg");
}

9
src/sass/views/onboarding/onboard-collect-email.scss
View File

@ -1,5 +1,14 @@
#onboarding-collect-email {
background: rgb(17, 209, 166);
.overlay {
position: absolute;
top:0;
left:0;
width:100%;
height: 100%;
background: rgba(0,0,0,.4);
z-index: 4;
}
.scroll-content {
margin-top: 0;
height: 101%;

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

@ -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;
}
}

3
src/sass/views/tab-receive.scss
View File

@ -7,6 +7,9 @@
}
}
}
.border-top{
border-top:1px solid rgb(228,228,228);
}
#address {
background: #fff;
.incomplete {

1
src/sass/views/tab-scan.scss
View File

@ -21,6 +21,7 @@
width: 60%;
max-width: 400px;
margin-bottom: 8em;
max-height: 50%;
}
.icon-flash, .icon-camera-toggle {
border-radius: 50%;

5
src/sass/views/tab-send.scss
View File

@ -11,11 +11,6 @@
padding-bottom: 1px;
}
}
.send-gravatar {
left: 11px;
position: absolute;
top: 10px;
}
.show-more {
text-align: center;
padding: 20px;

13
src/sass/views/tab-settings.scss
View File

@ -10,8 +10,8 @@
.item {
color: #444;
border-top: none;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
padding-top: 1.3rem;
padding-bottom: 1.3rem;
.big-icon-svg {
& > .bg{
width:20px;
@ -31,7 +31,9 @@
content: '';
}
&.item-divider {
color: rgba(74, 74, 74, .8);
color: $mid-gray;
padding-bottom: .5rem;
font-size: .9rem;
}
&.item-heading {
&:before {
@ -44,8 +46,11 @@
}
}
.item-note {
color: rgb(58, 58, 58);
color: $light-gray;
}
}
}
.item-radio .radio-icon {
font-size: 18px;
}
}

5
src/sass/views/wallet-backup-phrase.scss
View File

@ -26,6 +26,9 @@
color: rgb(43, 43, 43);
}
}
.bold-text {
font-weight: bold !important;
}
p {
color: rgb(58, 58, 58);
font-weight: 200;
@ -115,7 +118,7 @@
&,
& ion-content,
& ion-content .scroll {
overflow-y:visible;
overflow-y:visible;
}
#select-phrase {
float: left;

3
src/sass/views/walletDetails.scss
View File

@ -28,6 +28,9 @@
line-height: 100%;
}
}
.item.item-footer {
font-weight: lighter;
}
}
.wallet-details-release {