From 926e80fcea5f505dac6507252db51469d2c862ea Mon Sep 17 00:00:00 2001 From: Jason Dreyzehner Date: Fri, 7 Oct 2016 02:10:30 -0400 Subject: [PATCH] design(backup): polish backup flow (via onboarding process) --- src/js/controllers/backup.js | 6 +- src/sass/buttons.scss | 58 +++++ src/sass/main.scss | 1 + src/sass/variables.scss | 3 +- src/sass/views/backup-warning.scss | 2 +- src/sass/views/includes/modals/modals.scss | 3 +- .../onboarding/onboard-backup-request.scss | 2 +- .../onboard-push-notifications.scss | 2 +- src/sass/views/onboarding/onboard-tour.scss | 2 +- .../views/onboarding/onboard-welcome.scss | 2 +- .../views/onboarding/onboarding-buttons.scss | 33 --- src/sass/views/onboarding/onboarding.scss | 11 - src/sass/views/wallet-backup-phrase.scss | 236 ++++++++---------- www/views/backup.html | 91 ++++--- www/views/backupWarning.html | 2 +- www/views/includes/confirmBackupPopup.html | 18 +- .../includes/screenshotWarningModal.html | 5 +- www/views/onboarding/backupRequest.html | 4 +- www/views/onboarding/collectEmail.html | 2 +- www/views/onboarding/notifications.html | 4 +- www/views/onboarding/tour.html | 6 +- www/views/onboarding/welcome.html | 4 +- 22 files changed, 237 insertions(+), 260 deletions(-) create mode 100644 src/sass/buttons.scss delete mode 100644 src/sass/views/onboarding/onboarding-buttons.scss diff --git a/src/js/controllers/backup.js b/src/js/controllers/backup.js index b8d21bc90..0ae069025 100644 --- a/src/js/controllers/backup.js +++ b/src/js/controllers/backup.js @@ -72,8 +72,8 @@ angular.module('copayApp.controllers').controller('backupController', var showBackupResult = function() { if ($scope.backupError) { - var title = gettextCatalog.getString('uh oh...'); - var message = gettextCatalog.getString("It's importante that you write your backup phrase down correctly. If something happens to your wallet, you'll need this backup to recover your money Please review your backup and try again"); + var title = gettextCatalog.getString('Uh oh...'); + var message = gettextCatalog.getString("It's important that you write your backup phrase down correctly. If something happens to your wallet, you'll need this backup to recover your money. Please review your backup and try again."); popupService.showAlert(title, message, function() { $scope.goToStep(1); }) @@ -205,4 +205,4 @@ angular.module('copayApp.controllers').controller('backupController', }); }); - }); \ No newline at end of file + }); diff --git a/src/sass/buttons.scss b/src/sass/buttons.scss new file mode 100644 index 000000000..c096bcd80 --- /dev/null +++ b/src/sass/buttons.scss @@ -0,0 +1,58 @@ +// white on $positive +$button-primary-bg: $positive; +$button-primary-text: #fff; +$button-primary-border: transparent; +$button-primary-active-bg: darken($positive, 5%); +$button-primary-active-border: transparent; + +//white on translucent-white +$button-secondary-onboarding-bg: rgba($light-gray, 0.1); // rgba(215, 215, 215, 0.1); +$button-secondary-onboarding-text: #fff; +$button-secondary-onboarding-border: transparent; +$button-secondary-onboarding-active-bg: rgba($light-gray, 0.2); // rgba(215, 215, 215, 0.2); +$button-secondary-onboarding-active-border: transparent; + +//dark-gray on translucent-gray +$button-secondary-bg: $subtle-gray; +$button-secondary-text: $dark-gray; +$button-secondary-border: transparent; +$button-secondary-active-bg: darken($subtle-gray, 5%); +$button-secondary-active-border: transparent; + +%button-standard { + width: 85%; + max-width: 300px; + margin-left: auto; + margin-right: auto; + display: block; +} + +.button, +.onboarding .button { + &.button-primary { + @include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $button-primary-text); + @include button-clear($button-primary-bg); + @include button-outline($button-primary-bg); + } + &.button-primary, + &.button-secondary { + &.button-standard { + @extend %button-standard; + } + } +} +.onboarding .button { + &.button-secondary { + @include button-style($button-secondary-onboarding-bg, $button-secondary-onboarding-border, $button-secondary-onboarding-active-bg, $button-secondary-onboarding-active-border, $button-secondary-onboarding-text); + @include button-clear($button-secondary-onboarding-text); + @include button-outline($button-secondary-onboarding-text); + } +} + +.button { + &.button-secondary { + @include button-style($button-secondary-bg, $button-secondary-border, $button-secondary-active-bg, $button-secondary-active-border, $button-secondary-text); + @include button-clear($button-secondary-text); + @include button-outline($button-secondary-text); + } +} diff --git a/src/sass/main.scss b/src/sass/main.scss index 937471ad7..7485d07e0 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -2,6 +2,7 @@ @import "variables"; @import "ionic"; @import "icons"; +@import "buttons"; @import "forms"; @import "mixins/mixins"; @import "views/views"; diff --git a/src/sass/variables.scss b/src/sass/variables.scss index 545a4b9e5..b10787fd0 100644 --- a/src/sass/variables.scss +++ b/src/sass/variables.scss @@ -2,7 +2,7 @@ $royal: #1e3186; $soft-blue: #647ce8; $fill-blue: #D5DFFF; -$subtle-gray: #f5f5f5; +$subtle-gray: #f7f7f7; $roboto: "Roboto", sans-serif; $roboto-light: "Roboto-Light", sans-serif-light; $success-green: #17ae8c; @@ -12,6 +12,7 @@ $mid-gray: #667; $light-gray: #9b9bab; $subtle-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); $hovering-box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3); +$subtle-radius: 3px; $visible-radius: 6px; $unmistakable-radius: 12px; diff --git a/src/sass/views/backup-warning.scss b/src/sass/views/backup-warning.scss index 71ac7efee..2b6cf7fd1 100644 --- a/src/sass/views/backup-warning.scss +++ b/src/sass/views/backup-warning.scss @@ -1,6 +1,6 @@ #backup-warning{ #cta-buttons { @extend %cta-buttons; - height: 250px; + padding-bottom: 10vh; } } diff --git a/src/sass/views/includes/modals/modals.scss b/src/sass/views/includes/modals/modals.scss index 98078e354..742ee9aee 100644 --- a/src/sass/views/includes/modals/modals.scss +++ b/src/sass/views/includes/modals/modals.scss @@ -47,7 +47,8 @@ color: $dark-gray; font-weight: bold; font-size: 1.3rem; - margin-top:1rem; + margin-top: 1rem; + line-height: 1.3; } &-message { color: $mid-gray; diff --git a/src/sass/views/onboarding/onboard-backup-request.scss b/src/sass/views/onboarding/onboard-backup-request.scss index d4fc1d782..255309ea7 100644 --- a/src/sass/views/onboarding/onboard-backup-request.scss +++ b/src/sass/views/onboarding/onboard-backup-request.scss @@ -26,6 +26,6 @@ } .cta-buttons { @extend %cta-buttons; - padding-bottom: 10px; + padding-bottom: 4vw; } } diff --git a/src/sass/views/onboarding/onboard-push-notifications.scss b/src/sass/views/onboarding/onboard-push-notifications.scss index 385067812..09f939953 100644 --- a/src/sass/views/onboarding/onboard-push-notifications.scss +++ b/src/sass/views/onboarding/onboard-push-notifications.scss @@ -4,6 +4,6 @@ } #cta-buttons { @extend %cta-buttons; - height: 210px; + padding-bottom: 1rem; } } diff --git a/src/sass/views/onboarding/onboard-tour.scss b/src/sass/views/onboarding/onboard-tour.scss index c103c6ee9..7e97560c5 100644 --- a/src/sass/views/onboarding/onboard-tour.scss +++ b/src/sass/views/onboarding/onboard-tour.scss @@ -6,7 +6,7 @@ } .cta-buttons { @extend %cta-buttons; - padding-bottom: 100px; + padding-bottom: 12vh; } #onboarding-illustration-currency-exchange-rate { background-color: $soft-blue; diff --git a/src/sass/views/onboarding/onboard-welcome.scss b/src/sass/views/onboarding/onboard-welcome.scss index 27df613c0..88eed9a4f 100644 --- a/src/sass/views/onboarding/onboard-welcome.scss +++ b/src/sass/views/onboarding/onboard-welcome.scss @@ -31,6 +31,6 @@ } #cta-buttons { @extend %cta-buttons; - padding-bottom: 1rem; + padding-bottom: 4vw; } } diff --git a/src/sass/views/onboarding/onboarding-buttons.scss b/src/sass/views/onboarding/onboarding-buttons.scss deleted file mode 100644 index d535821f5..000000000 --- a/src/sass/views/onboarding/onboarding-buttons.scss +++ /dev/null @@ -1,33 +0,0 @@ -$button-primary-bg: $positive; -$button-primary-text: #fff; -$button-primary-border: transparent; -$button-primary-active-bg: darken($positive, 5%); -$button-primary-active-border: transparent; - -$button-secondary-bg: rgba(215, 215, 215, 0.1); -$button-secondary-text: #fff; -$button-secondary-border: transparent; -$button-secondary-active-bg: rgba(215, 215, 215, 0.2); -$button-secondary-active-border: transparent; - -.onboarding .button { - &.button-primary { - @include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $button-primary-text); - @include button-clear($button-primary-bg); - @include button-outline($button-primary-bg); - } - &.button-secondary { - @include button-style($button-secondary-bg, $button-secondary-border, $button-secondary-active-bg, $button-secondary-active-border, $button-secondary-text); - @include button-clear($button-secondary-text); - @include button-outline($button-secondary-text); - } - &.button-primary, - &.button-secondary { - &.button-block { - width: 85%; - max-width: 300px; - margin-left: auto; - margin-right: auto; - } - } -} diff --git a/src/sass/views/onboarding/onboarding.scss b/src/sass/views/onboarding/onboarding.scss index 5dc5ace31..635ba7ad7 100644 --- a/src/sass/views/onboarding/onboarding.scss +++ b/src/sass/views/onboarding/onboarding.scss @@ -12,12 +12,6 @@ color: #fff; } } - ion-content { - height: 100%; - .scroll{ - height: 100%; - } - } .onboarding-topic, .onboarding-description, .onboarding-tldr { @@ -43,10 +37,6 @@ } } -@media (min-width: 415px){ - // -} - %cta-buttons { position: absolute; bottom: 0; @@ -54,7 +44,6 @@ } @import "terms-of-use"; -@import "onboarding-buttons"; @import "onboard-welcome"; @import "onboard-tour"; @import "onboard-collect-email"; diff --git a/src/sass/views/wallet-backup-phrase.scss b/src/sass/views/wallet-backup-phrase.scss index 48e7e815a..10a9f3f15 100644 --- a/src/sass/views/wallet-backup-phrase.scss +++ b/src/sass/views/wallet-backup-phrase.scss @@ -1,140 +1,112 @@ - #wallet-backup-phrase { - &, - & ion-content, - & ion-content .scroll { - height: 100%; - overflow-y: hidden; +#wallet-backup-phrase { + .bar.bar-royal .title { + font-size: 1rem; + } + background: #fff; + text-align: center; + .backup-phrase { + background-color: $subtle-gray; + padding: 12px; + border: 2px dashed darken($subtle-gray, 10%); + border-radius: $subtle-radius; + color: #2b2b2b; + text-align: center; + max-width: 500px; + min-height: 10rem; + width: 85%; + display: flex; + justify-content: center; + align-items: center; + &-content { + font-weight: bold; + line-height: 2; + font-size: 16px; + letter-spacing: 1px; + @media (min-width: 575px) { + font-size: 18px; + padding: 3rem; } - .bar.bar-royal { - .title { - font-size: 1rem; - } - } - background: #fff; - .backup-phrase { - background: rgba(246, 246, 246, 0.87); - padding: .5rem .5rem 1.7rem; - border: 2px dashed rgb(206, 206, 206); - width: 95%; - margin: 1rem auto; - color: rgb(43, 43, 43); - text-align: center; - span { - line-height: 2rem; - font-weight: bold; - max-width: 400px; - color: rgb(43, 43, 43); - } - } - .bold-text { - font-weight: bold !important; - } - p { - color: rgb(58, 58, 58); - font-weight: 200; - } - .cta-buttons { - position: absolute; - width: 100%; - text-align: center; - bottom: 45px; - button { - max-width: 400px; - } - } - .select-word { - background: #fff; - box-shadow: $hovering-box-shadow; - margin: .1rem 0; - display: inline-block; - padding: 0 5px; - } - #select-phrase { - background: rgba(246, 246, 246, 0.87); - width: 100%; - text-align: center; - position: absolute; - bottom: 45px; - padding-bottom: 20px; - padding: .5rem .5rem .9rem; - p { - font-weight: bold; - font-weight: bold; - padding-top: .7rem; - margin-bottom: 0.3rem; - float: left; - width: 100%; - } - .select-word { - &.button[disabled] { - background: transparent !important; - box-shadow: none !important; - color: transparent; - border: 1px solid rgb(211, 211, 211); - } - } - #confirm-phrase { - margin: 5px auto 0; - } - } - ion-content.has-tabs{ - .cta-buttons{ - bottom:110px; - } - .cta-buttons, #select-phrase{ - bottom:110px; + &-word-readonly { + padding: 0 1px; + @media (min-width: 575px) { + padding: 0 6px; } } } + } + &-step-1, + &-step-2 { + display: flex; + flex-direction: column; + height: 70%; + width: 100%; + justify-content: center; + align-items: center; + } + &-step-1 { + height: 70%; + } + &-step-2 { + height: 60% + } + &-step-3 { - @media (min-width : 320px) and (max-width : 415px) and (orientation : portrait), (min-width : 650px) and (max-width : 770px) and (orientation : portrait){ - #wallet-backup-phrase{ - .cta-buttons,#select-phrase{ - bottom: 64px; - } + } + .initial-prompt, + .confirmation-prompt, + .tldr-prompt { + color: $dark-gray; + padding-bottom: 1.5rem; + } + .initial-prompt, + .confirmation-prompt { + padding-top: 1.5rem; + } + .tldr-prompt { + font-weight: bold; + } + .cta-buttons { + @extend %cta-buttons; + padding-bottom: 5vh; + } + .select-word { + background: #fff; + box-shadow: $subtle-box-shadow; + display: inline-block; + margin: 3px 0; + min-height: 38px; + line-height: 33px; + padding: 0 8px; + @media (min-width: 400px) { + margin: 4px 3px; + padding: 0 16px; + } + } + #select-phrase { + background: $subtle-gray; + padding: 5% 0; + .select-word { + &.button[disabled] { + background: transparent !important; + box-shadow: none !important; + color: transparent; + border: 1px solid rgb(211, 211, 211); } } - - @media (max-width: 400px) { - #wallet-backup-phrase { - ion-content { - h2 { - font-size: 1.2rem; - } - p, - h2, - h3 { - max-width: 600px !important; - } - button { - max-width: 400px !important; - } - } - } + &-content { + max-width: 500px; + width: 90%; + margin-left: auto; + margin-right: auto; } - - @media (max-height: 560px) { - #wallet-backup-phrase { - &, - & ion-content, - & ion-content .scroll { - overflow-y:visible; - } - #select-phrase { - float: left; - position: relative; - } - .backup-phrase { - margin-bottom: 5rem; - } - } - } - @media (max-height: 379px) { - #wallet-backup-phrase { - .cta-buttons { - float: left; - position: relative; - bottom: 0; - } - } - } + } + ion-content.has-tabs{ + // TODO: review + .cta-buttons{ + bottom:110px; + } + .cta-buttons, #select-phrase{ + bottom:110px; + } + } +} diff --git a/www/views/backup.html b/www/views/backup.html index 4453e17d7..ef472b40e 100644 --- a/www/views/backup.html +++ b/www/views/backup.html @@ -6,73 +6,68 @@ - +
-
-

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}}　 +
+ {{word}}　 +
-
-

- Please carefully write down this phrase -

-
-
-

- +

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.
+
- -
+
+
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. -

- - - -
- -
-
Enter your password
- - +
+
Enter your password + + +
diff --git a/www/views/backupWarning.html b/www/views/backupWarning.html index 9b24b68e9..6af1592fc 100644 --- a/www/views/backupWarning.html +++ b/www/views/backupWarning.html @@ -12,7 +12,7 @@
Anyone with your backup phrase can access or spend your bitcoin.
- +
diff --git a/www/views/includes/confirmBackupPopup.html b/www/views/includes/confirmBackupPopup.html index f226e8ce4..c6a416600 100644 --- a/www/views/includes/confirmBackupPopup.html +++ b/www/views/includes/confirmBackupPopup.html @@ -1,16 +1,10 @@
The exchange rate changes with the market.
-
@@ -46,7 +46,7 @@
Not even BitPay can access it.
-
diff --git a/www/views/onboarding/welcome.html b/www/views/onboarding/welcome.html index e5d60855b..4d335f31a 100644 --- a/www/views/onboarding/welcome.html +++ b/www/views/onboarding/welcome.html @@ -6,8 +6,8 @@

Take control of your money,
get started with bitcoin.

- - + +