mirror of https://github.com/BTCPrivate/copay.git
design(onboarding): polish the notification and backupRequest views
This commit is contained in:
Jason Dreyzehner
parent
2ba9cea636
commit
550d1c0630
|
|
@ -7,7 +7,7 @@ angular.module('copayApp.controllers').controller('backupRequestController', fun
|
|||
$scope.openPopup = function() {
|
||||
|
||||
var title = gettextCatalog.getString('Without a backup, you could lose money.');
|
||||
var message = gettextCatalog.getString('If this device is damaged, this app is delted, or you migrate to another device, neither you nor BitPay can recover your funds.');
|
||||
var message = gettextCatalog.getString('If this device is replaced or this app is deleted, neither you nor BitPay can recover your funds without a backup.');
|
||||
var okText = gettextCatalog.getString('I understand');
|
||||
var cancelText = gettextCatalog.getString('Go back');
|
||||
popupService.showConfirm(title, message, okText, cancelText, function(val) {
|
||||
|
|
|
|||
|
|
@ -1,63 +1,31 @@
|
|||
#onboarding-backup-request{
|
||||
.warning{
|
||||
margin:4rem auto 1rem;
|
||||
height: 11rem;
|
||||
#onboarding-backup-request {
|
||||
#warning {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 320px);
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
button{
|
||||
color:#fff;
|
||||
#alert-icon {
|
||||
margin: 20px auto 5px;
|
||||
height: 10vh;
|
||||
}
|
||||
#arrow-down{
|
||||
@media (min-width: 570px){
|
||||
#backup-description {
|
||||
max-width: 500px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
#arrow-down {
|
||||
font-size: 4.2rem;
|
||||
color: $soft-blue;
|
||||
}
|
||||
.cta-buttons{
|
||||
width:100%;
|
||||
float:none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
#backup-tldr {
|
||||
font-size: 16px;
|
||||
}
|
||||
@media (min-width: 415px){
|
||||
.warning{
|
||||
height:16rem;
|
||||
}
|
||||
.cta-buttons {
|
||||
@extend %cta-buttons;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 399px){
|
||||
#onboarding-backup-request{
|
||||
.warning{
|
||||
margin: 2rem auto 1rem;
|
||||
height: 8rem;
|
||||
}
|
||||
h3{
|
||||
font-size:1.3rem;
|
||||
}
|
||||
p{
|
||||
font-size:.9rem;
|
||||
max-width: 80%;
|
||||
flex: 0 0 80%;
|
||||
}
|
||||
.cta-buttons{
|
||||
float:none;
|
||||
bottom:0;
|
||||
position: absolute;
|
||||
button{
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-height: 540px){
|
||||
#onboarding-backup-request{
|
||||
.cta-buttons{
|
||||
float:left;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-height: 980px){
|
||||
#onboarding-backup-request{
|
||||
#arrow-down{
|
||||
margin-top: 7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,49 +1,9 @@
|
|||
#onboarding-push-notifications {
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
#notifications-topic {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
#cta {
|
||||
background-image: url('../img/onboarding-push-notifications.svg');
|
||||
height: 15rem;
|
||||
margin-top: .75rem;
|
||||
}
|
||||
.cta-buttons {
|
||||
float: none;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
button {
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
#onboarding-push-notifications {
|
||||
.cta-buttons {
|
||||
float: none;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 540px) {
|
||||
#onboarding-push-notifications {
|
||||
#cta {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.cta-buttons {
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 450px) {
|
||||
#onboarding-push-notifications {
|
||||
#cta {
|
||||
height: 26rem;
|
||||
}
|
||||
#cta-buttons {
|
||||
@extend %cta-buttons;
|
||||
height: 210px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,26 +8,6 @@
|
|||
@extend %cta-buttons;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
.onboarding-topic,
|
||||
.onboarding-description,
|
||||
.onboarding-tldr {
|
||||
margin-left: 3rem;
|
||||
margin-right: 3rem;
|
||||
}
|
||||
.onboarding-topic {
|
||||
font-size: 24px;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
.onboarding-description {
|
||||
margin-top: 1rem;
|
||||
font-size: 16px;
|
||||
color: rgba(255,255,255,0.5);
|
||||
}
|
||||
.onboarding-tldr {
|
||||
font-size: 18px;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
#onboarding-illustration-currency-exchange-rate {
|
||||
background-color: $soft-blue;
|
||||
border-radius: $button-border-radius;
|
||||
|
|
@ -41,4 +21,12 @@
|
|||
width: 140px;
|
||||
z-index: 1;
|
||||
}
|
||||
.swiper-pagination {
|
||||
&-bullet {
|
||||
background: $soft-blue;
|
||||
&-active {
|
||||
background: $soft-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
.onboarding {
|
||||
background: #1e3186;
|
||||
color: #fff;
|
||||
background-image: linear-gradient(to bottom, #1e3186 0%, #111b49 100%);
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
|
|
@ -10,71 +11,40 @@
|
|||
button {
|
||||
color: #fff;
|
||||
}
|
||||
.secondary-buttons {
|
||||
button {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
ion-content {
|
||||
height: 100%;
|
||||
.scroll{
|
||||
height: 100%;
|
||||
}
|
||||
color: #fff;
|
||||
h2, h3{color:#fff;}
|
||||
h2 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
p {
|
||||
&.tagline {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
}
|
||||
#cta {
|
||||
background-size: contain;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
height: 23rem;
|
||||
margin-bottom: -3rem;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
img {
|
||||
height: 16rem;
|
||||
}
|
||||
}
|
||||
button {
|
||||
color:#fff;
|
||||
}
|
||||
@media (min-width: 450px){
|
||||
p{
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper-pagination {
|
||||
&-bullet {
|
||||
background: $soft-blue;
|
||||
&-active {
|
||||
background: $soft-blue;
|
||||
}
|
||||
}
|
||||
.onboarding-topic,
|
||||
.onboarding-description,
|
||||
.onboarding-tldr {
|
||||
margin-left: 3rem;
|
||||
margin-right: 3rem;
|
||||
}
|
||||
.onboarding-topic {
|
||||
font-size: 24px;
|
||||
margin-top: .5rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.onboarding-description {
|
||||
margin-top: 1rem;
|
||||
font-size: 16px;
|
||||
color: rgba(255,255,255,0.5);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.onboarding-tldr {
|
||||
font-size: 18px;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1em;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 415px){
|
||||
.onboarding{
|
||||
ion-content{
|
||||
h2{
|
||||
font-size: 2rem;
|
||||
}
|
||||
p{
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
//
|
||||
}
|
||||
|
||||
%cta-buttons {
|
||||
|
|
@ -116,4 +86,8 @@
|
|||
@extend %onboarding-illustration;
|
||||
background-image: url(../img/onboarding-tour-control.svg);
|
||||
}
|
||||
&-notifications {
|
||||
@extend %onboarding-illustration;
|
||||
background-image: url(../img/onboarding-push-notifications.svg);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +1,15 @@
|
|||
<ion-view id="onboarding-backup-request" class="onboarding">
|
||||
<ion-content ng-controller="backupRequestController" scroll="false">
|
||||
<div class="row">
|
||||
<img src="img/onboarding-warning.svg" class="col col-75 warning">
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<h3 translate class="col-75 col">
|
||||
No backup, no bitcoin.
|
||||
</h3>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p class="col col-60 text-center">
|
||||
Since only you control your money, you’ll need save your backup phrase in case this app is deleted.
|
||||
</p>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<i class="ion-ios-arrow-thin-down light-blue col col-60" id="arrow-down"></i>
|
||||
<div id="warning">
|
||||
<img src="img/onboarding-warning.svg" id="alert-icon">
|
||||
<div class="onboarding-topic" translate>No backup, no bitcoin.</div>
|
||||
<div class="onboarding-description" id="backup-description" translate>Since only you control your money, you’ll need save your backup phrase in case this app is deleted.</div>
|
||||
</div>
|
||||
<div class="cta-buttons">
|
||||
<div class="row">
|
||||
<button class="button button-block button-positive col-75 col" href
|
||||
ui-sref="onboarding.backupWarning({from: 'onboarding.backupRequest', walletId: walletId})" translate>Backup wallet</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button class="button button-block button-transparent col-75 col" ng-click="openPopup()" translate>I'll backup my wallet later</button>
|
||||
</div>
|
||||
<i class="ion-ios-arrow-thin-down" id="arrow-down"></i>
|
||||
<div class="onboarding-tldr" id="backup-tldr" translate>Your wallet is never saved to cloud storage or standard device backups.</div>
|
||||
<button class="button button-block button-primary" ui-sref="onboarding.backupWarning({from: 'onboarding.backupRequest', walletId: walletId})" translate>Backup wallet</button>
|
||||
<button class="button button-block button-secondary button-clear" ng-click="openPopup()" translate>I'll backup my wallet later</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,11 @@
|
|||
<ion-view class="onboarding" id="onboarding-push-notifications">
|
||||
<ion-content ng-controller="notificationsController">
|
||||
<div class="text-center row">
|
||||
<h2 translate class="col col-80">
|
||||
Push Notifications
|
||||
</h2>
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<p class="col col-75 tagline" translate>
|
||||
Would you like to receive push notifications about payments?
|
||||
</p>
|
||||
</div>
|
||||
<div id="cta">
|
||||
</div>
|
||||
<div class="cta-buttons">
|
||||
<button class="button button-block button-primary col col-75" ng-click="allowNotif()" translate>Allow notifications</button>
|
||||
<button class="button button-block button-translucent col col-75" href ui-sref="onboarding.backupRequest({walletId: walletId})" translate>Not now</button>
|
||||
</div>
|
||||
<div class="onboarding-topic" id="notifications-topic" translate>Push Notifications</div>
|
||||
<div class="onboarding-description" translate>Would you like to receive push notifications about payments?</div>
|
||||
<div class="onboarding-illustration-notifications"></div>
|
||||
<div id="cta-buttons">
|
||||
<button class="button button-block button-primary" ng-click="allowNotif()" translate>Allow notifications</button>
|
||||
<button class="button button-block button-secondary button-clear" href ui-sref="onboarding.backupRequest({walletId: walletId})" translate>Not now</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
|
|
|
|||
|
|
@ -13,11 +13,11 @@
|
|||
<ion-slides class="slides" options="options" slider="data.slider">
|
||||
<ion-slide-page>
|
||||
<ion-content id="onboard-tour-secure" scroll="false">
|
||||
<h2 class="onboarding-topic" translate>Bitcoin is secure,<br/>digital money.</h2>
|
||||
<p class="onboarding-description" translate>You can spend bitcoin at millions of websites and stores worldwide.</p>
|
||||
<div class="onboarding-topic" translate>Bitcoin is secure,<br/>digital money.</div>
|
||||
<div class="onboarding-description" translate>You can spend bitcoin at millions of websites and stores worldwide.</div>
|
||||
<div class="onboarding-illustration-secure"></div>
|
||||
<div class="cta-buttons">
|
||||
<p class="onboarding-tldr" translate>Just scan the code to pay.</p>
|
||||
<div class="onboarding-tldr" translate>Just scan the code to pay.</div>
|
||||
<button class="button button-block button-secondary" ng-click="slideNext()">
|
||||
Got it →
|
||||
</button>
|
||||
|
|
@ -26,13 +26,13 @@
|
|||
</ion-slide-page>
|
||||
<ion-slide-page>
|
||||
<ion-content id="onboard-tour-currency" scroll="false">
|
||||
<h2 class="onboarding-topic" translate>Bitcoin is a currency.</h2>
|
||||
<p class="onboarding-description" translate>You can trade it for other currencies like US Dollars, Euros, or Pounds.</p>
|
||||
<div class="onboarding-topic" translate>Bitcoin is a currency.</div>
|
||||
<div class="onboarding-description" translate>You can trade it for other currencies like US Dollars, Euros, or Pounds.</div>
|
||||
<div class="onboarding-illustration-currency">
|
||||
<div id="onboarding-illustration-currency-exchange-rate">1 BTC = {{localCurrencySymbol}}{{localCurrencyPerBtc}}</div>
|
||||
</div>
|
||||
<div class="cta-buttons">
|
||||
<p class="onboarding-tldr" translate>The exchange rate changes with the market.</p>
|
||||
<div class="onboarding-tldr" translate>The exchange rate changes with the market.</div>
|
||||
<button class="button button-block button-secondary" ng-click="slideNext()">
|
||||
Makes sense →
|
||||
</button>
|
||||
|
|
@ -41,11 +41,11 @@
|
|||
</ion-slide-page>
|
||||
<ion-slide-page>
|
||||
<ion-content id="onboard-tour-control" scroll="false">
|
||||
<h2 translate class="onboarding-topic">You control your bitcoin.</h2>
|
||||
<p translate class="onboarding-description">The BitPay wallet stores your bitcoin with cutting-edge security.</p>
|
||||
<div translate class="onboarding-topic">You control your bitcoin.</div>
|
||||
<div translate class="onboarding-description">This app stores your bitcoin with cutting-edge security.</div>
|
||||
<div class="onboarding-illustration-control"></div>
|
||||
<div class="cta-buttons">
|
||||
<p class="onboarding-tldr" translate>Not even BitPay can access it.</p>
|
||||
<div class="onboarding-tldr" translate>Not even BitPay can access it.</div>
|
||||
<button class="button button-block button-primary" ng-click="createDefaultWallet()">
|
||||
Create bitcoin wallet
|
||||
</button>
|
||||
|
|
|
|||
Loading…
Reference in New Issue