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

feat(buyandsell): clearer language and better expectations in buyandsell view

Browse source
This commit is contained in:
Jason Dreyzehner 2017-01-31 18:15:52 -05:00
commit cfa0dedb37
4 changed files with 51 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/sass/variables.scss
View file

@ -46,6 +46,7 @@ $item-default-border: $subtle-gray;
$item-default-text: $dark-gray; $item-default-text: $dark-gray;
$item-default-active-bg: darken(#ffffff, 7%); $item-default-active-bg: darken(#ffffff, 7%);
$item-default-active-border: darken($subtle-gray, 7%); $item-default-active-border: darken($subtle-gray, 7%);
$item-divider-bg: $subtle-gray;
$bar-default-border: $subtle-gray; $bar-default-border: $subtle-gray;

34
src/sass/views/buyandsell.scss Normal file
View file

@ -0,0 +1,34 @@
#buy-and-sell {
.explain {
text-align: center;
margin-top: 1em;
}
.buy-and-sell-icon {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: $subtle-box-shadow;
background-color: #fa912b;
img {
height: 100%;
width: 100%;
}
}
.explain {
&-heading {
font-size: 20px;
margin: 1rem;
}
&-description {
margin-left: auto;
margin-right: auto;
opacity: .6;
max-width: 300px;
padding: 0 1em;
}
}
.item-note {
color: $light-gray;
}
}

1
src/sass/views/views.scss
View file

@ -15,6 +15,7 @@
@import "bitpayCard"; @import "bitpayCard";
@import "bitpayCardIntro"; @import "bitpayCardIntro";
@import "bitpayCardPreferences"; @import "bitpayCardPreferences";
@import "buyandsell";
@import "address-book"; @import "address-book";
@import "addresses"; @import "addresses";
@import "wallet-backup-phrase"; @import "wallet-backup-phrase";

21
www/views/buyandsell.html
View file

@ -1,21 +1,30 @@
<ion-view> <ion-view id="buy-and-sell">
<ion-nav-bar class="bar-royal"> <ion-nav-bar class="bar-royal">
<ion-nav-back-button> <ion-nav-back-button>
</ion-nav-back-button> </ion-nav-back-button>
<ion-nav-title translate>Buy and sell</ion-nav-title> <ion-nav-title translate>Buy &amp; Sell Bitcoin</ion-nav-title>
</ion-nav-bar> </ion-nav-bar>
<ion-content> <ion-content>
<div class="list"> <div class="list">
<div class="explain">
<i class="icon buy-and-sell-icon">
<img src="/img/icon-bitcoin.svg"/>
</i>
<div class="explain-heading" translate>Connect an Exchange</div>
<div class="explain-description" translate>Buy and sell bitcoin directly from your wallet by connecting an exchange account.</div>
</div>
<div class="item item-divider"></div> <div class="item item-divider"></div>
<div class="item item-icon-right" ui-sref="tabs.buyandsell.coinbase" ng-show="isCoinbaseEnabled"> <a class="item item-icon-right" ui-sref="tabs.buyandsell.coinbase" ng-show="isCoinbaseEnabled">
<img src="img/coinbase-logo.png" width="90"> <img src="img/coinbase-logo.png" width="90">
<span class="item-note" translate>International</span>
<i class="icon bp-arrow-right"></i> <i class="icon bp-arrow-right"></i>
</div> </a>
<div class="item item-icon-right" ui-sref="tabs.buyandsell.glidera" ng-show="isGlideraEnabled"> <a class="item item-icon-right" ui-sref="tabs.buyandsell.glidera" ng-show="isGlideraEnabled">
<img src="img/glidera-logo.png" width="90"> <img src="img/glidera-logo.png" width="90">
<span class="item-note" translate>US Only</span>
<i class="icon bp-arrow-right"></i> <i class="icon bp-arrow-right"></i>
</div> </a>
</div> </div>
</ion-content> </ion-content>
</ion-view> </ion-view>