mirror of https://github.com/BTCPrivate/copay.git
feat(card): polish design of bitpay card intro view
This commit is contained in:
Jason Dreyzehner
parent
8370112805
commit
ffa8aa39ce
|
|
@ -59,6 +59,11 @@ angular.module('copayApp.controllers').controller('bitpayCardIntroController', f
|
|||
}
|
||||
});
|
||||
|
||||
$scope.bitPayCardInfo = function() {
|
||||
var url = 'https://bitpay.com/visa/faq';
|
||||
externalLinkService.open(url);
|
||||
};
|
||||
|
||||
$scope.orderBitPayCard = function() {
|
||||
var url = 'https://bitpay.com/visa/get-started';
|
||||
externalLinkService.open(url);
|
||||
|
|
|
|||
|
|
@ -1,70 +1,55 @@
|
|||
#bitpayCard-intro {
|
||||
.slider-pager .slider-pager-page {
|
||||
color: #fff;
|
||||
}
|
||||
.cta-button{
|
||||
background: url(../img/onboarding-welcome-bg.png), linear-gradient(to bottom, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
|
||||
background-position: top center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
color: #fff;
|
||||
.cta-button {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 55px;
|
||||
padding: 0 1.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
background: rgba(30, 49, 134, 1);
|
||||
background: -moz-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
|
||||
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(30, 49, 134, 1)), color-stop(100%, rgba(17, 27, 73, 1)));
|
||||
background: -webkit-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
|
||||
background: -o-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
.bar.bar-header {
|
||||
background: rgb(30, 49, 134);
|
||||
color: #fff;
|
||||
button {
|
||||
color: #fff;
|
||||
}
|
||||
.secondary-buttons {
|
||||
button {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
}
|
||||
background: transparent none;
|
||||
border: 0 none transparent;
|
||||
}
|
||||
.bar.bar-stable{
|
||||
border-color: transparent;
|
||||
border:none;
|
||||
}
|
||||
.button-transparent{
|
||||
background: none !important;
|
||||
}
|
||||
.button-translucent{
|
||||
background: rgba(215, 215, 215, 0.1)
|
||||
}
|
||||
.button-primary{
|
||||
background: rgb(100, 124, 232) !important;
|
||||
color:#fff;
|
||||
}
|
||||
.light-blue{
|
||||
color:rgb(100, 124, 232);
|
||||
}
|
||||
.text-white{
|
||||
color: #ffffff;
|
||||
.bitpayCard {
|
||||
&__illustration {
|
||||
padding: 2rem;
|
||||
&__img {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
&__info:before {
|
||||
font-size: 22px;
|
||||
line-height: 22px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
ion-content {
|
||||
background: url(../img/onboarding-welcome-bg.png);
|
||||
background-position: top center;
|
||||
background-size: contain;
|
||||
background-repeat: repeat-x;
|
||||
height: 100%;
|
||||
.scroll{
|
||||
height: 100%;
|
||||
}
|
||||
color: #fff;
|
||||
p {
|
||||
text-align: center;
|
||||
margin: 40px 20px;
|
||||
font-size: 1.2rem;
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
}
|
||||
.slider__text {
|
||||
text-align: center;
|
||||
margin: 40px 20px;
|
||||
font-size: 1rem;
|
||||
color: rgba(255, 255, 255, .7);
|
||||
}
|
||||
.slider-pager .slider-pager-page {
|
||||
color: $soft-blue;
|
||||
font-size: 8px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,43 +1,40 @@
|
|||
<ion-view id="bitpayCard-intro" hide-tabs>
|
||||
<ion-nav-bar class="bar-stable">
|
||||
<ion-view id="bitpayCard-intro" class="onboarding" hide-tabs>
|
||||
<ion-nav-bar>
|
||||
<ion-nav-back-button>
|
||||
</ion-nav-back-button>
|
||||
<ion-nav-title></ion-nav-title>
|
||||
<ion-nav-buttons side="secondary">
|
||||
<button class="button back-button button-clear" ng-click="orderBitPayCard()">
|
||||
<i class="icon ion-ios-information-outline"></i>
|
||||
<button class="button button-clear" ng-click="bitPayCardInfo()">
|
||||
<i class="icon ion-ios-information-outline bitpayCard__info"></i>
|
||||
</button>
|
||||
</ion-nav-buttons>
|
||||
</ion-nav-bar>
|
||||
<ion-content scroll="false">
|
||||
<div class="text-center padding">
|
||||
<img src="img/bitpay-card-visa.svg" width="100%">
|
||||
<div class="bitpayCard__illustration">
|
||||
<img class="bitpayCard__illustration__img" src="img/bitpay-card-visa.svg">
|
||||
</div>
|
||||
<ion-slide-box>
|
||||
<ion-slide>
|
||||
<p translate>
|
||||
Turn bitcoin into dollars, swipe anywhere Visa® is accepted.
|
||||
<p class="slider__text" translate>
|
||||
Turn bitcoin into dollars, swipe anywhere Visa<sup>®</sup> is accepted.
|
||||
</p>
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<p translate>
|
||||
<span translate>Get local cash anywhere you go, from any Visa®-compatible ATM.</span>
|
||||
<div translate class="size-10 text-center">
|
||||
*ATM bank fees may apply
|
||||
</div>
|
||||
<p class="slider__text" translate>
|
||||
<span translate>Get local cash anywhere you go, from any Visa<sup>®</sup> compatible ATM. ATM bank fees may apply.</span>
|
||||
</p>
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<p translate>
|
||||
<p class="slider__text" translate>
|
||||
Pay 0% fees to turn bitcoin into dollars.
|
||||
</p>
|
||||
</ion-slide>
|
||||
</ion-slide-box>
|
||||
<div class="cta-button">
|
||||
<button class="button button-block button-primary" ng-click="orderBitPayCard()" translate>
|
||||
<button class="button button-standard button-primary" ng-click="orderBitPayCard()" translate>
|
||||
Order the BitPay Card
|
||||
</button>
|
||||
<button class="button button-block button-transparent text-white m10t" ng-click="connectBitPayCard()" translate>
|
||||
<button class="button button-standard button-secondary button-clear" ng-click="connectBitPayCard()" translate>
|
||||
Connect my BitPay Card
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue