From 7455440abf1f7f1971580f71a95e5c15dadcaee8 Mon Sep 17 00:00:00 2001 From: Gustavo Maximiliano Cortez Date: Fri, 20 Oct 2017 16:12:03 -0300 Subject: [PATCH] Fix onboarding. Clear styling --- src/assets/img/tour-control.svg | 47 ---- src/assets/img/tour-currency.svg | 33 --- src/assets/img/tour-phone.svg | 39 ---- .../backup-request/backup-request.html | 14 +- .../backup-request/backup-request.scss | 73 ++---- .../backup-request/backup-request.ts | 13 +- .../onboarding/disclaimer/disclaimer.html | 54 ++--- .../onboarding/disclaimer/disclaimer.scss | 61 +---- src/pages/onboarding/disclaimer/disclaimer.ts | 8 +- src/pages/onboarding/email/email.html | 66 +++--- src/pages/onboarding/email/email.scss | 210 ++---------------- src/pages/onboarding/email/email.ts | 13 +- src/pages/onboarding/tour/tour.html | 6 +- 13 files changed, 138 insertions(+), 499 deletions(-) delete mode 100644 src/assets/img/tour-control.svg delete mode 100644 src/assets/img/tour-currency.svg delete mode 100644 src/assets/img/tour-phone.svg diff --git a/src/assets/img/tour-control.svg b/src/assets/img/tour-control.svg deleted file mode 100644 index 7a49991b1..000000000 --- a/src/assets/img/tour-control.svg +++ /dev/null @@ -1,47 +0,0 @@ - - - - tour-control - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/assets/img/tour-currency.svg b/src/assets/img/tour-currency.svg deleted file mode 100644 index 85854559f..000000000 --- a/src/assets/img/tour-currency.svg +++ /dev/null @@ -1,33 +0,0 @@ - - - - tour-currency - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/assets/img/tour-phone.svg b/src/assets/img/tour-phone.svg deleted file mode 100644 index 9386356db..000000000 --- a/src/assets/img/tour-phone.svg +++ /dev/null @@ -1,39 +0,0 @@ - - - - onboarding-tour-phone - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/pages/onboarding/backup-request/backup-request.html b/src/pages/onboarding/backup-request/backup-request.html index 037362936..c9c0c7d3a 100644 --- a/src/pages/onboarding/backup-request/backup-request.html +++ b/src/pages/onboarding/backup-request/backup-request.html @@ -1,13 +1,13 @@ - -
- -
No backup, no bitcoin.
-
Since only you control your money, you’ll need to save your backup phrase in case this app is deleted.
+ +
+ +

No backup, no bitcoin.

+

Since only you control your money, you’ll need to save your backup phrase in case this app is deleted.

-
Your wallet is never saved to cloud storage or standard device backups.
+

Your wallet is never saved to cloud storage or standard device backups.

- +
diff --git a/src/pages/onboarding/backup-request/backup-request.scss b/src/pages/onboarding/backup-request/backup-request.scss index 6e6013fa5..a73650788 100644 --- a/src/pages/onboarding/backup-request/backup-request.scss +++ b/src/pages/onboarding/backup-request/backup-request.scss @@ -1,64 +1,17 @@ page-backup-request { - .backup-request { - #warning { - padding-top: 15%; - display: block; - flex-direction: column; - height: calc(100vh - 320px); - justify-content: center; - align-content: center; - } - #alert-icon { - margin: 20px auto 5px; - height: 10vh; - } - #arrow-down { - font-size: 4.2rem; - color: $v-accent-color; - } - #backup-tldr { - font-size: 16px; - } - #backup-description { - max-width: 500px; - margin: auto; - padding: 1rem 0.5rem 0 1rem; - @media (max-height: 480px) { - padding-top: 40px; - } - } - .buttons { - position: absolute; - bottom: 0px; - padding: 15px; - } - @media (max-height: 568px) { - #warning { - padding-top: 5%; - } - #backup-description { - font-size: 14px; - } - #backup-tldr { - font-size: 14px; - } - } - @media (max-height: 480px) { - #warning { - padding-top: 5%; - } - #backup-description { - font-size: 14px; - } - #backup-tldr { - font-size: 14px; - } - #arrow-down { - display: none; - } - } + .buttons { + text-align: center; + width: 100%; + position: absolute; + bottom: 0px; + padding: 15px 15px 4vh 15px; } - .header-md::after { - background: none; + .header { + margin: 5vh 3vh; + text-align: center; + font-size: 3vh; + img { + width: 50px; + } } } diff --git a/src/pages/onboarding/backup-request/backup-request.ts b/src/pages/onboarding/backup-request/backup-request.ts index 14aba6532..b211713bd 100644 --- a/src/pages/onboarding/backup-request/backup-request.ts +++ b/src/pages/onboarding/backup-request/backup-request.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { NavController, NavParams, AlertController} from 'ionic-angular'; +import { Logger } from '@nsalaun/ng-logger'; import { DisclaimerPage } from '../disclaimer/disclaimer'; @@ -10,7 +11,12 @@ import { DisclaimerPage } from '../disclaimer/disclaimer'; export class BackupRequestPage { private opts: any; - constructor(public navCtrl: NavController, public navParams: NavParams, public alertCtrl: AlertController) { + constructor( + public navCtrl: NavController, + public navParams: NavParams, + public alertCtrl: AlertController, + private log: Logger + ) { this.opts = { title: '', message: '', @@ -19,13 +25,14 @@ export class BackupRequestPage { } ionViewDidLoad() { + this.log.info('ionViewDidLoad BackupRequestPage'); } initBackupFlow() { // TODO navigate to backupFlow } - later(confirmed: boolean) { + doBackupLater(confirmed: boolean) { this.opts.title = !confirmed ? '¡Watch Out!' : 'Are you sure you want to skip it?'; this.opts.message = !confirmed ? 'If this device is replaced or this app is deleted, neither you nor BitPay can recover your funds without a backup.' : 'You can create a backup later from your wallet settings.'; this.opts.buttons = [{ @@ -37,7 +44,7 @@ export class BackupRequestPage { handler: () => { if (!confirmed) { setTimeout(() => { - this.later(true); + this.doBackupLater(true); }, 300); } else { this.navCtrl.push(DisclaimerPage); diff --git a/src/pages/onboarding/disclaimer/disclaimer.html b/src/pages/onboarding/disclaimer/disclaimer.html index 9a4192170..229da7540 100644 --- a/src/pages/onboarding/disclaimer/disclaimer.html +++ b/src/pages/onboarding/disclaimer/disclaimer.html @@ -1,35 +1,27 @@ - - - - - - - - - -
-
Quick review!
-
Almost done! Let's review.
-
Bitcoin is different – it cannot be safely held with a bank or web service.
-
- - I understand that my funds are held securely on this device, not by a company. - - - - I understand that if this app is moved to another device or deleted, my bitcoin can only be recovered with the backup phrase. - - -
-
-
-
- -
- - Terms of Use. + +
+
Quick review!
+
Almost done! Let's review.
+

Bitcoin is different – it cannot be safely held with a bank or web service.

+ + I understand that my funds are held securely on this device, not by a company. + + + + I understand that if this app is moved to another device or deleted, my bitcoin can only be recovered with the backup phrase. + + +
+
+ Terms of Use + + + I have read, understood, and agree to the + + + +
-
diff --git a/src/pages/onboarding/disclaimer/disclaimer.scss b/src/pages/onboarding/disclaimer/disclaimer.scss index d809d1431..0290ddb45 100644 --- a/src/pages/onboarding/disclaimer/disclaimer.scss +++ b/src/pages/onboarding/disclaimer/disclaimer.scss @@ -1,54 +1,17 @@ page-disclaimer { - .disclaimer { - .options { - padding-top: 20px; - } - .item { - background-color: transparent; - color: $v-onboarding-color; - } - .item-md.item-block .item-inner { - border-bottom: 0; - } - ion-label { - white-space: normal; - } - #agree-to-terms { - position: absolute; - bottom: 0; - width: 100%; - padding: 15px; - .item { - padding-left: 0px; - } - .terms-check { - text-align: left; - margin-bottom: 25px; - display: flex; - label { - font-size: 16px; - cursor: pointer; - } - a { - cursor: pointer; - } - .checkbox { - margin: auto; - padding: 5px; - } - .modal-text { - margin-left: 30px; - } - } + .terms { + width: 100%; + position: absolute; + bottom: 0px; + padding: 15px 15px 4vh 15px; + .link { + font-size: 2vh; + cursor: pointer; } } - - .navbarc { - .bar-button { - color: $v-accent-color; - } - } - .header-md::after { - background: none; + .content { + padding-top: 5vh; + text-align: center; + font-size: 3vh; } } diff --git a/src/pages/onboarding/disclaimer/disclaimer.ts b/src/pages/onboarding/disclaimer/disclaimer.ts index 8fa51b843..21797d2d9 100644 --- a/src/pages/onboarding/disclaimer/disclaimer.ts +++ b/src/pages/onboarding/disclaimer/disclaimer.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { NavController, NavParams} from 'ionic-angular'; +import { Logger } from '@nsalaun/ng-logger'; import { TermsOfUsePage } from '../../settings/about/terms-of-use/terms-of-use'; import { TabsPage } from '../../tabs/tabs'; @@ -12,7 +13,11 @@ export class DisclaimerPage { public accepted: any; public terms: any; - constructor(public navCtrl: NavController, public navParams: NavParams) { + constructor( + public navCtrl: NavController, + public navParams: NavParams, + private log: Logger + ) { this.accepted = { first: false, second: false, @@ -23,6 +28,7 @@ export class DisclaimerPage { } ionViewDidLoad() { + this.log.info('ionViewDidLoad DisclaimerPage'); } selectTerms() { diff --git a/src/pages/onboarding/email/email.html b/src/pages/onboarding/email/email.html index 103d780ed..b238664b7 100644 --- a/src/pages/onboarding/email/email.html +++ b/src/pages/onboarding/email/email.html @@ -1,29 +1,45 @@ -