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

design(onboarding): polish the notification and backupRequest views

Browse source
This commit is contained in:
Jason Dreyzehner 2016-10-06 21:12:24 -04:00
commit 550d1c0630
8 changed files with 90 additions and 224 deletions
Download patch file Download diff file Expand all files Collapse all files

30
www/views/onboarding/backupRequest.html
View file

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

22
www/views/onboarding/notifications.html
View file

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

18
www/views/onboarding/tour.html
View file

@ -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 &rarr;
</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 &rarr;
</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>