diff --git a/src/js/controllers/onboarding/backupRequest.js b/src/js/controllers/onboarding/backupRequest.js index e2290e62c..d200ced62 100644 --- a/src/js/controllers/onboarding/backupRequest.js +++ b/src/js/controllers/onboarding/backupRequest.js @@ -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) { diff --git a/src/sass/views/onboarding/onboard-backup-request.scss b/src/sass/views/onboarding/onboard-backup-request.scss index c64f0db77..d4fc1d782 100644 --- a/src/sass/views/onboarding/onboard-backup-request.scss +++ b/src/sass/views/onboarding/onboard-backup-request.scss @@ -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; - } - } -} \ No newline at end of file diff --git a/src/sass/views/onboarding/onboard-push-notifications.scss b/src/sass/views/onboarding/onboard-push-notifications.scss index 30ff9b4a2..385067812 100644 --- a/src/sass/views/onboarding/onboard-push-notifications.scss +++ b/src/sass/views/onboarding/onboard-push-notifications.scss @@ -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; } } diff --git a/src/sass/views/onboarding/onboard-tour.scss b/src/sass/views/onboarding/onboard-tour.scss index 00499b2f4..c103c6ee9 100644 --- a/src/sass/views/onboarding/onboard-tour.scss +++ b/src/sass/views/onboarding/onboard-tour.scss @@ -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; + } + } + } } diff --git a/src/sass/views/onboarding/onboarding.scss b/src/sass/views/onboarding/onboarding.scss index 57586f5b5..1d7d699d6 100644 --- a/src/sass/views/onboarding/onboarding.scss +++ b/src/sass/views/onboarding/onboarding.scss @@ -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); + } } diff --git a/www/views/onboarding/backupRequest.html b/www/views/onboarding/backupRequest.html index a76125f41..fcc109447 100644 --- a/www/views/onboarding/backupRequest.html +++ b/www/views/onboarding/backupRequest.html @@ -1,29 +1,15 @@ -
- -
-
-

- No backup, no bitcoin. -

-
-
-

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

-
-
- +
+ +
No backup, no bitcoin.
+
Since only you control your money, you’ll need save your backup phrase in case this app is deleted.
-
- -
-
- -
+ +
Your wallet is never saved to cloud storage or standard device backups.
+ +
diff --git a/www/views/onboarding/notifications.html b/www/views/onboarding/notifications.html index b60984f48..92c3ae0d9 100644 --- a/www/views/onboarding/notifications.html +++ b/www/views/onboarding/notifications.html @@ -1,21 +1,11 @@ -
-

- Push Notifications -

-
-
-

- Would you like to receive push notifications about payments? -

-
-
-
-
- - -
+
Push Notifications
+
Would you like to receive push notifications about payments?
+
+
+ +
diff --git a/www/views/onboarding/tour.html b/www/views/onboarding/tour.html index 2e3143b6c..65fa378d2 100644 --- a/www/views/onboarding/tour.html +++ b/www/views/onboarding/tour.html @@ -13,11 +13,11 @@ -

Bitcoin is secure,
digital money.

-

You can spend bitcoin at millions of websites and stores worldwide.

+
Bitcoin is secure,
digital money.
+
You can spend bitcoin at millions of websites and stores worldwide.
-

Just scan the code to pay.

+
Just scan the code to pay.
@@ -26,13 +26,13 @@ -

Bitcoin is a currency.

-

You can trade it for other currencies like US Dollars, Euros, or Pounds.

+
Bitcoin is a currency.
+
You can trade it for other currencies like US Dollars, Euros, or Pounds.
1 BTC = {{localCurrencySymbol}}{{localCurrencyPerBtc}}
-

The exchange rate changes with the market.

+
The exchange rate changes with the market.
@@ -41,11 +41,11 @@ -

You control your bitcoin.

-

The BitPay wallet stores your bitcoin with cutting-edge security.

+
You control your bitcoin.
+
This app stores your bitcoin with cutting-edge security.
-

Not even BitPay can access it.

+
Not even BitPay can access it.