From 402cc2ad820092e9ea1e609a2d9352527a9dde9d Mon Sep 17 00:00:00 2001 From: JDonadio Date: Thu, 26 Oct 2017 16:28:37 -0300 Subject: [PATCH] remove old styles - fix password message location --- .../backup-confirm-modal.html | 30 ++- .../backup-confirm-modal.scss | 42 ++--- .../backup-confirm-modal.ts | 25 +-- src/pages/backup/backup-game/backup-game.html | 98 +++++----- src/pages/backup/backup-game/backup-game.scss | 173 +++--------------- src/pages/backup/backup-game/backup-game.ts | 22 +-- .../backup-warning-modal.html | 14 +- .../backup-warning-modal.scss | 52 +++--- .../backup-warning-modal.ts | 12 +- .../backup/backup-warning/backup-warning.html | 14 +- .../backup/backup-warning/backup-warning.scss | 62 +------ .../backup/backup-warning/backup-warning.ts | 10 +- 12 files changed, 175 insertions(+), 379 deletions(-) diff --git a/src/pages/backup/backup-confirm-modal/backup-confirm-modal.html b/src/pages/backup/backup-confirm-modal/backup-confirm-modal.html index 574b9f733..9c87b9411 100644 --- a/src/pages/backup/backup-confirm-modal/backup-confirm-modal.html +++ b/src/pages/backup/backup-confirm-modal/backup-confirm-modal.html @@ -1,22 +1,18 @@ - - - - -
-
- -
+
+
+
-
-
-
- Your bitcoin wallet is backed up! -
-
- Be sure to store your recovery phrase in a secure place. If this app is deleted, your money cannot be recovered without it. -
- +
+
+
+
+ Your bitcoin wallet is backed up!
+
+ Be sure to store your recovery phrase in a secure place. If this app is deleted, your money cannot be recovered without it. +
+
+
diff --git a/src/pages/backup/backup-confirm-modal/backup-confirm-modal.scss b/src/pages/backup/backup-confirm-modal/backup-confirm-modal.scss index bbe1c6ed4..a4936542f 100644 --- a/src/pages/backup/backup-confirm-modal/backup-confirm-modal.scss +++ b/src/pages/backup/backup-confirm-modal/backup-confirm-modal.scss @@ -1,33 +1,29 @@ -.popup-modal-header-success { - background-color: green; - display: flex; - justify-content: center; - padding: 1.5rem; - max-height: 10rem; - img { - max-height: 10rem; - height: 100%; - } +.confirm-modal-header { + background: green; + padding: 1rem; + border-radius: 12px 12px 0 0; + min-height: 120px; } -.popup-modal-content-success { +.confirm-modal-content { text-align: center; height: 65%; overflow-y: scroll; - padding: 3rem; + padding: 1rem; display: flex; align-items: center; - .popup-modal-heading { - font-weight: bold; - font-size: 2rem; - padding-bottom: 1rem; + .confirm-modal-heading { + font-weight: bold; + font-size: 2rem; + padding-bottom: 1rem; } - .popup-modal-message { - padding: 1.5rem; - font-size: 1.6rem; + .confirm-modal-message { + padding: 1.5rem; + font-size: 1.6rem; } - .button-clear { - padding-top: 2rem; - background: none; - font-size: 1.6rem; + button { + padding-top: 2rem; + background: none; + font-size: 1.6rem; } } + diff --git a/src/pages/backup/backup-confirm-modal/backup-confirm-modal.ts b/src/pages/backup/backup-confirm-modal/backup-confirm-modal.ts index c963f0385..f179e3363 100644 --- a/src/pages/backup/backup-confirm-modal/backup-confirm-modal.ts +++ b/src/pages/backup/backup-confirm-modal/backup-confirm-modal.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; -import { ViewController } from 'ionic-angular'; +import { NavController, ViewController } from 'ionic-angular'; +import { TabsPage } from '../../tabs/tabs'; @Component({ selector: 'page-backup-confirm-modal', @@ -7,24 +8,16 @@ import { ViewController } from 'ionic-angular'; }) export class BackupConfirmModalPage { - constructor(public viewCtrl: ViewController) { - } - - ionViewDidLoad() { - } + constructor( + public navCtrl: NavController, + public viewCtrl: ViewController + ) {} closeBackupResultModal() { - // TODO waiting for bwc - // profileService.isDisclaimerAccepted(function(val) { - // if (val) { - // $ionicHistory.removeBackView(); - // $state.go('tabs.home'); - // } else $state.go('onboarding.disclaimer', { - // walletId: $stateParams.walletId, - // backedUp: true - // }); - // }); + // TODO Set disclaimer accepted this.viewCtrl.dismiss(); + this.navCtrl.setRoot(TabsPage); + this.navCtrl.popToRoot(); } } diff --git a/src/pages/backup/backup-game/backup-game.html b/src/pages/backup/backup-game/backup-game.html index 9c7b9aa1c..2509cb37f 100644 --- a/src/pages/backup/backup-game/backup-game.html +++ b/src/pages/backup/backup-game/backup-game.html @@ -1,84 +1,82 @@ - + {{wallet.name || 'Backup'}} - +
-
Wallet recovery phrase not available.
-
You can still export it from Advanced > Export.
+
Wallet recovery phrase not available.
+
You can still export it from Advanced > Export.
- + -
-
Please carefully write down this phrase.
-
- - -
- - {{word}} - 　 - -
+
+
Please carefully write down this phrase.
+
+ + {{word}} + 　 +
-
-
- This recovery phrase was created with a password. To recover this wallet both the recovery phrase and password are needed. -
-
-
-
We'll confirm on the next screen.
- + +
+
We'll confirm on the next screen.
+
-
-
Let's verify your backup phrase.
-
-
- -
+
+
Let's verify your backup phrase.
+
+
-
-
Please tap each word in the correct order.
-
Is this correct?
+
- +
Please tap each word in the correct order.
+
+ +
+
- - +
Is this correct?
+
+ + +
-
-
Enter your password
-
-
In order to verify your wallet backup, please type your password.
-
- -
+
Enter your password
+
+
In order to verify your wallet backup, please type your password.
+
+
-
- +
+ +
+
+ This recovery phrase was created with a password. To recover this wallet both the recovery phrase and password are needed.
+ +
+ +
diff --git a/src/pages/backup/backup-game/backup-game.scss b/src/pages/backup/backup-game/backup-game.scss index 989598a65..02b8db623 100644 --- a/src/pages/backup/backup-game/backup-game.scss +++ b/src/pages/backup/backup-game/backup-game.scss @@ -1,157 +1,40 @@ -page-backup-game { - font-size: 16px; - - .header-md::after { - background: none; - } - +.backup { .pages { - .swiper-pagination { display: none; } - .slide-zoom { height: 100%; - - .wallet-backup-phrase1 { - height: 70%; - color: #445; - - .initial-prompt { - padding: 3rem; - } - - .backup-phrase { - background: #f2f2f2; - margin: auto; - border: 2px dashed #d9d9d9; - border-radius: 3px; - color: #445; - text-align: center; - max-width: 500px; - min-height: 12rem; - display: flex; - justify-content: center; - align-items: center; - } - - .password-required { - padding: 2rem; - font-size: 14px; - color: #DB5B44; - } - - .password-prompt { - background-color: #f2f2f2; - padding: 2rem; - - .description { - padding-bottom: 3rem; - } - } - - .cta-buttons { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - padding-bottom: 5vh; - - .tldr-prompt { - padding: 1rem; - } - - &.select-phrase { - background: #f2f2f2; - } - - &.confirm { - margin-top: 1rem; - } - } - - .button.primary { - width: 85%; - max-width: 300px; - min-height: 5rem; - font-size: 1.6rem; - border-radius: 3px; - cursor: pointer; - border-color: transparent; - } - - .button.button-clear { - width: 85%; - margin-top: 0.6rem; - max-width: 300px; - min-height: 5rem; - font-size: 1.6rem; - border-radius: 3px; - cursor: pointer; - border-color: transparent; - background-color: inherit; - &:active { - opacity: 0.5; - } - } - - .button.select-word { - background: #1abb9b; - color: #192c3a; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); - display: inline-block; - margin: 3px 2px; - min-height: 35px; - line-height: 33px; - padding: 0 8px; - border-width: 1px; - border-color: transparent; - border-style: solid; - border-radius: 3px; - vertical-align: top; - text-align: center; - text-overflow: ellipsis; - font-size: 16px; - } - } } - } -} - -@media not all and (min-height: 600px) and (min-width: 768px) { - .backup-modal-success ion-backdrop { - visibility: visible; - z-index: 0; - } - .backup-modal-success { - display: flex; - justify-content: center; - align-items: center; - .modal-wrapper { - width: 90%; - max-width: 350px; - height: 40%; - min-height: 350px; + .password-required { + padding: 2rem; + font-size: 14px; + color: #DB5B44; } - } -} - -.backup-modal-success { - .modal-wrapper { - max-height: 40rem; - ion-content { - max-height: 40rem; + .password { + background-color: #f2f2f2; + padding: 2rem; + } + .phrase { + display: -webkit-box; + background: #f2f2f2; + border: 2px dashed #d9d9d9; + border-radius: 3px; + color: #445; text-align: center; - border-radius: 12px; - .scroll-content { - overflow-y: hidden; - border-radius: 12px; - padding: 0rem; - .popup-modal-content-success { - overflow-y: hidden; - } + max-width: 500px; + min-height: 12rem; + align-items: center; + } + .buttons { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + padding-bottom: 5vh; + .tldr { + padding: 1rem; } } } -} +} \ No newline at end of file diff --git a/src/pages/backup/backup-game/backup-game.ts b/src/pages/backup/backup-game/backup-game.ts index 5483962b0..91fc836af 100644 --- a/src/pages/backup/backup-game/backup-game.ts +++ b/src/pages/backup/backup-game/backup-game.ts @@ -25,7 +25,11 @@ export class BackupGamePage { private keys: any; private useIdeograms: any; - constructor(public navCtrl: NavController, public alertCtrl: AlertController, public modalCtrl: ModalController) { + constructor( + public navCtrl: NavController, + public alertCtrl: AlertController, + public modalCtrl: ModalController + ) { // TODO replace for the original wallet object this.wallet = { name: 'Wallet name', @@ -35,10 +39,8 @@ export class BackupGamePage { mnemonicEncrypted: false, }, n: 1, - // isPrivKeyEncrypted: this.isPrivKeyEncrypted(), - // mnemonicHasPassphrase: this.mnemonicHasPassphrase(), - isPrivKeyEncrypted: false, - mnemonicHasPassphrase: false, + isPrivKeyEncrypted: this.isPrivKeyEncrypted(), + mnemonicHasPassphrase: this.mnemonicHasPassphrase(), network: 'livenet', }; @@ -75,7 +77,6 @@ export class BackupGamePage { // var words = keys.mnemonic; var words = this.wallet.credentials.mnemonic; - // $scope.data = {}; this.mnemonicWords = words.split(/[\u3000\s]+/); this.shuffledMnemonicWords = this.shuffledWords(this.mnemonicWords); @@ -85,7 +86,6 @@ export class BackupGamePage { this.selectComplete = false; this.error = false; - // words = _.repeat('x', 300); if (this.currentIndex == 2) this.slidePrev(); }; @@ -201,16 +201,10 @@ export class BackupGamePage { let self = this; const myModal: Modal = self.modalCtrl.create(BackupConfirmModalPage, {}, { showBackdrop: true, - enableBackdropDismiss: true, - cssClass: "backup-modal-success" + enableBackdropDismiss: false, }); myModal.present(); - - myModal.onDidDismiss(() => { - this.navCtrl.setRoot(TabsPage); - this.navCtrl.popToRoot(); - }); } }; diff --git a/src/pages/backup/backup-warning-modal/backup-warning-modal.html b/src/pages/backup/backup-warning-modal/backup-warning-modal.html index 68fd44271..ba92da285 100644 --- a/src/pages/backup/backup-warning-modal/backup-warning-modal.html +++ b/src/pages/backup/backup-warning-modal/backup-warning-modal.html @@ -1,20 +1,16 @@ - - - - -
+
-
+
-
+
Screenshots are not secure
-
+
If you take a screenshot, your backup may be viewed by other apps. You can make a safe backup with physical paper and a pen.
- +
diff --git a/src/pages/backup/backup-warning-modal/backup-warning-modal.scss b/src/pages/backup/backup-warning-modal/backup-warning-modal.scss index fa2a80099..6f235dbea 100644 --- a/src/pages/backup/backup-warning-modal/backup-warning-modal.scss +++ b/src/pages/backup/backup-warning-modal/backup-warning-modal.scss @@ -1,32 +1,28 @@ -page-backup-warning-modal { - .popup-modal-header-warning { - background: #ffa500; +.warning-modal-header { + background: orange; + padding: 1rem; + border-radius: 12px 12px 0 0; + min-height: 120px; +} +.warning-modal-content { + text-align: center; + height: 65%; + overflow-y: scroll; + padding: 1rem; + display: flex; + align-items: center; + .warning-modal-heading { + font-weight: bold; + font-size: 2rem; + padding-bottom: 1rem; } - .popup-modal-header { - padding: 1rem; - border-radius: 12px 12px 0 0; - min-height: 120px; + .warning-modal-message { + padding: 1.5rem; + font-size: 1.6rem; } - .popup-modal-content-warning { - text-align: center; - height: 65%; - overflow-y: scroll; - padding: 1rem; - display: flex; - align-items: center; - .popup-modal-heading { - font-weight: bold; - font-size: 2rem; - padding-bottom: 1rem; - } - .popup-modal-message { - padding: 1.5rem; - font-size: 1.6rem; - } - .button-clear { - padding-top: 2rem; - background: none; - font-size: 1.6rem; - } + button { + padding-top: 2rem; + background: none; + font-size: 1.6rem; } } diff --git a/src/pages/backup/backup-warning-modal/backup-warning-modal.ts b/src/pages/backup/backup-warning-modal/backup-warning-modal.ts index 47089fd98..3670ee946 100644 --- a/src/pages/backup/backup-warning-modal/backup-warning-modal.ts +++ b/src/pages/backup/backup-warning-modal/backup-warning-modal.ts @@ -8,15 +8,13 @@ import { BackupGamePage } from '../backup-game/backup-game'; }) export class BackupWarningModalPage { - constructor(public navCtrl: NavController, public viewCtrl: ViewController) { - } - - ionViewDidLoad() { - } - + constructor( + public navCtrl: NavController, + public viewCtrl: ViewController + ) {} + close() { this.navCtrl.push(BackupGamePage); this.viewCtrl.dismiss(); } - } diff --git a/src/pages/backup/backup-warning/backup-warning.html b/src/pages/backup/backup-warning/backup-warning.html index 22f125276..12bbfef6d 100644 --- a/src/pages/backup/backup-warning/backup-warning.html +++ b/src/pages/backup/backup-warning/backup-warning.html @@ -1,19 +1,19 @@ - + - -
Are you being watched?
-
Now is a perfect time to assess your surroundings. Nearby windows? Hidden cameras? Shoulder-spies?
-
+ +
Are you being watched?
+
Now is a perfect time to assess your surroundings. Nearby windows? Hidden cameras? Shoulder-spies?
+
-
Anyone with your backup phrase can access or spend your bitcoin.
- +
Anyone with your backup phrase can access or spend your bitcoin.
+
diff --git a/src/pages/backup/backup-warning/backup-warning.scss b/src/pages/backup/backup-warning/backup-warning.scss index 5ed38e4f2..0b73aa761 100644 --- a/src/pages/backup/backup-warning/backup-warning.scss +++ b/src/pages/backup/backup-warning/backup-warning.scss @@ -1,55 +1,7 @@ -page-backup-warning { - position: relative; - .buttons { - padding: 15px; - width: 100%; - position: absolute; - bottom: 0px; - padding: 15px 15px 4vh 15px; - } - .backup-illustration-backup-warning { - height: inherit; - img { - padding-top: 10%; - width: 65%; - max-width: 400px; - } - } -} - -@media not all and (min-height: 600px) and (min-width: 768px) { - .backup-modal-warning ion-backdrop { - visibility: visible; - z-index: 0; - } - .backup-modal-warning { - display: flex; - justify-content: center; - align-items: center; - .modal-wrapper { - width: 90%; - max-width: 350px; - height: 40%; - min-height: 350px; - } - } -} - -.backup-modal-warning { - .modal-wrapper { - max-height: 40rem; - ion-content { - max-height: 40rem; - text-align: center; - border-radius: 12px; - .scroll-content { - overflow-y: hidden; - border-radius: 12px; - padding: 0rem; - .popup-modal-content-warning { - overflow-y: hidden; - } - } - } - } -} +.buttons { + padding: 15px; + width: 100%; + position: absolute; + bottom: 0px; + padding: 15px 15px 4vh 15px; +} \ No newline at end of file diff --git a/src/pages/backup/backup-warning/backup-warning.ts b/src/pages/backup/backup-warning/backup-warning.ts index f325ed067..70cecd5e8 100644 --- a/src/pages/backup/backup-warning/backup-warning.ts +++ b/src/pages/backup/backup-warning/backup-warning.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { NavController, NavParams, ModalController } from 'ionic-angular'; +import { ModalController } from 'ionic-angular'; import { BackupWarningModalPage } from '../backup-warning-modal/backup-warning-modal'; @Component({ @@ -7,20 +7,14 @@ import { BackupWarningModalPage } from '../backup-warning-modal/backup-warning-m templateUrl: 'backup-warning.html', }) export class BackupWarningPage { - public currentIndex: number; - constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController) { - } - - ionViewDidLoad() { - } + constructor(public modalCtrl: ModalController) {} openWarningModal() { const myModal = this.modalCtrl.create(BackupWarningModalPage, {}, { showBackdrop: true, enableBackdropDismiss: true, - cssClass: "backup-modal-warning" }); myModal.present(); }