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

This commit is contained in:
Jason Dreyzehner 2017-01-31 18:15:52 -05:00
parent ed45495ae2
commit cfa0dedb37
4 changed files with 51 additions and 6 deletions

View File

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

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

View File

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

View File

@ -1,21 +1,30 @@
<ion-view>
<ion-view id="buy-and-sell">
<ion-nav-bar class="bar-royal">
<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-content>
<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-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">
<span class="item-note" translate>International</span>
<i class="icon bp-arrow-right"></i>
</div>
<div class="item item-icon-right" ui-sref="tabs.buyandsell.glidera" ng-show="isGlideraEnabled">
</a>
<a class="item item-icon-right" ui-sref="tabs.buyandsell.glidera" ng-show="isGlideraEnabled">
<img src="img/glidera-logo.png" width="90">
<span class="item-note" translate>US Only</span>
<i class="icon bp-arrow-right"></i>
</div>
</a>
</div>
</ion-content>
</ion-view>