diff --git a/app-template/config-template.xml b/app-template/config-template.xml index 0ee006695..42e4518f2 100644 --- a/app-template/config-template.xml +++ b/app-template/config-template.xml @@ -20,7 +20,8 @@ - + + @@ -29,6 +30,7 @@ + diff --git a/package.json b/package.json index 095b08351..68e72f5df 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "scripts": { "preinstall": "bower install && npm i fs-extra", "postinstall": "npm run apply:bitpay && cordova prepare", - "start": "npm run build:www && ionic serve --nolivereload --nogulp", + "start": "npm run build:www && ionic serve --nolivereload --nogulp -s", "start:ios": "npm run build:www && npm run build:ios && npm run open:ios", "start:android": "npm run build:www && npm run build:android && npm run open:android", "watch": "grunt watch", 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/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/js/controllers/onboarding/tour.js b/src/js/controllers/onboarding/tour.js index 2590d8074..aa2cdd92e 100644 --- a/src/js/controllers/onboarding/tour.js +++ b/src/js/controllers/onboarding/tour.js @@ -1,6 +1,6 @@ 'use strict'; angular.module('copayApp.controllers').controller('tourController', - function($scope, $state, $log, $timeout, ongoingProcess, profileService) { + function($scope, $state, $log, $timeout, $filter, ongoingProcess, profileService, rateService) { var tries = 0; @@ -17,6 +17,14 @@ angular.module('copayApp.controllers').controller('tourController', } }; + rateService.whenAvailable(function() { + var localCurrency = 'USD'; + var btcAmount = 1; + var rate = rateService.toFiat(btcAmount * 1e8, localCurrency); + $scope.localCurrencySymbol = '$'; + $scope.localCurrencyPerBtc = $filter('formatFiatAmount')(parseFloat(rate.toFixed(2), 10)); + }); + $scope.createDefaultWallet = function() { ongoingProcess.set('creatingWallet', true); profileService.createDefaultWallet(function(err, walletClient) { 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/icons.scss b/src/sass/icons.scss index 0f4569e3b..543ab49d2 100644 --- a/src/sass/icons.scss +++ b/src/sass/icons.scss @@ -20,7 +20,7 @@ border-radius: 50%; width: 40px; height: 40px; - box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3); + box-shadow: $hovering-box-shadow; background-repeat:no-repeat; background-clip: padding-box; background-size: 103%; diff --git a/src/sass/main.scss b/src/sass/main.scss index acb64a176..7485d07e0 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -1,7 +1,8 @@ @import "fonts"; @import "variables"; -@import "icons"; @import "ionic"; +@import "icons"; +@import "buttons"; @import "forms"; @import "mixins/mixins"; @import "views/views"; diff --git a/src/sass/shame.scss b/src/sass/shame.scss index 62f0ae8ad..6216e4cb4 100644 --- a/src/sass/shame.scss +++ b/src/sass/shame.scss @@ -92,12 +92,6 @@ input[type=number] { } } -.button-block { - width: 90% !important; - margin-left: auto; - margin-right: auto; -} - .name-wallet { font-size: 14px; font-weight: 400; diff --git a/src/sass/variables.scss b/src/sass/variables.scss index e66b39f1d..b10787fd0 100644 --- a/src/sass/variables.scss +++ b/src/sass/variables.scss @@ -2,20 +2,33 @@ $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; +$warning-orange: #ffa500; $dark-gray: #445; $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; /* Set ionic variables */ $positive: $soft-blue; +$font-size-base: 16px; +$font-size-small: 12px; $font-family-sans-serif: $roboto; $font-family-light-sans-serif: $roboto-light; +$button-border-radius: $visible-radius; +$button-height: 52px; +$button-padding: 16px; + $base-background-color: $subtle-gray; $item-default-active-bg: $subtle-gray; @@ -25,4 +38,4 @@ $tabs-icon-size: 22px; $ios-transition-duration: 200ms; -$card-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); +$card-box-shadow: $subtle-box-shadow; diff --git a/src/sass/views/backup-warning.scss b/src/sass/views/backup-warning.scss index ee1017bcc..2b6cf7fd1 100644 --- a/src/sass/views/backup-warning.scss +++ b/src/sass/views/backup-warning.scss @@ -1,54 +1,6 @@ #backup-warning{ - .warning{ - margin:4rem auto 1rem; - height: 11rem; - } - button{ - color:#fff; - } - #arrow-down{ - font-size: 4.2rem; - } - .cta-buttons{ - float:none; - bottom:67px; - position: absolute; - width:100%; - button{ - max-width: 400px; - } - } -} - -@media (max-width: 400px){ - #backup-warning{ - .warning{ - margin: 2rem auto 1rem; - height: 8rem; - } - h3{ - font-size:1.3rem; - } - p{ - font-size:.9rem; - max-width: 80%; - flex: 0 0 80%; - } - .warning-image{ - height: 11rem; - } - .cta-buttons{ - float:none; - bottom:65px; - position: absolute; - } - } -} -@media (max-height: 540px){ - #backup-warning{ - .cta-buttons{ - float:left; - position: relative; - } + #cta-buttons { + @extend %cta-buttons; + padding-bottom: 10vh; } } diff --git a/src/sass/views/includes/modals/modals.scss b/src/sass/views/includes/modals/modals.scss index c38918e7c..742ee9aee 100644 --- a/src/sass/views/includes/modals/modals.scss +++ b/src/sass/views/includes/modals/modals.scss @@ -7,16 +7,17 @@ width: 90%; max-width: 350px; transform: translate(-50%, -50%); - border-radius: .25rem; + border-radius: $unmistakable-radius; + text-align: center; &-header { &-success { - background: rgb(1, 209, 162); + background: $success-green; } &-warning { - background: orange; + background: $warning-orange; } - padding: 1rem; - border-radius: .25rem .25rem 0 0; + padding: 2rem; + border-radius: $unmistakable-radius $unmistakable-radius 0 0; min-height: 120px; &-img{ height: 6rem; @@ -39,28 +40,31 @@ } } &-content { - padding: .5rem .8rem; - h5,p{ - margin:0 0 1rem; - } - h5 { - color: rgb(74, 74, 74); - font-weight: bold; - font-size: 1.3rem; - margin-top:1rem; - } - p{ - font-weight: 200; - } + padding: 1rem 2rem; + } + &-heading { + margin:0 0 1rem; + color: $dark-gray; + font-weight: bold; + font-size: 1.3rem; + margin-top: 1rem; + line-height: 1.3; + } + &-message { + color: $mid-gray; + font-weight: 200; + } + .button { + margin-top: 1rem; } &-content-success { - button{ - color:rgb(23, 174, 140) !important; + .button { + color: $success-green !important; } } &-content-warning { - button{ - color: orange !important; + .button { + color: $warning-orange !important; } } } diff --git a/src/sass/views/onboarding/onboard-backup-request.scss b/src/sass/views/onboarding/onboard-backup-request.scss index c64f0db77..255309ea7 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: 4vw; } } - -@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-collect-email.scss b/src/sass/views/onboarding/onboard-collect-email.scss index 1aef50e84..6e1241264 100644 --- a/src/sass/views/onboarding/onboard-collect-email.scss +++ b/src/sass/views/onboarding/onboard-collect-email.scss @@ -1,6 +1,26 @@ +$relish-success: 1.3s; + #onboarding-collect-email { background: rgb(17, 209, 166); - .overlay { + + #success-container { + top: 41vh; + position: relative; + animation-name: emailCollectSlideUp; + animation-iteration-count: 1; + animation-timing-function: ease-in; + animation-duration: .5s; + animation-delay: $relish-success; + animation-fill-mode: forwards; + } + #success-image { + width: 13vh; + margin: 0 auto 2vh; + } + #success-message { + font-size: 3vh; + } + .collect-overlay { position: absolute; top:0; left:0; @@ -8,107 +28,66 @@ height: 100%; background: rgba(0,0,0,.4); z-index: 4; + animation-name: emailCollectOpacity; + animation-iteration-count: 1; + animation-timing-function: ease-in; + animation-duration: .2s; + animation-delay: $relish-success; + animation-fill-mode: forwards; + opacity: 0; + button { + position: absolute; + right: 0; + } } - .scroll-content { - margin-top: 0; - height: 101%; + .heading { + color: $dark-gray; + font-size: 1.2rem; + font-weight: bold; + margin: 3rem 0 1rem; } - .scroll { - height: 100%; - transform: translate3d(0px, 0px, 0px) scale(1) !important; + .prompt { + margin: 1rem 1.5rem; + color: $mid-gray; } - #success-image { - margin-top: 4rem; - height: 10rem; + #email-form { + margin: 0 1.5rem 1rem; } - .col { - margin-top: 1rem; - margin-bottom: 1rem; + #email-label { + border-radius: $visible-radius; + background: rgba(200, 200, 200, 0.20); + height: 3rem; + margin-top:0; } - .collect-overlay { - animation-name: opacity; - animation-iteration-count: 1; - animation-timing-function: ease-in; - animation-duration: .2s; - animation-delay: .8s; - animation-fill-mode: forwards; - opacity: 0; - button { - position: absolute; - right: 11px; - } - } - .collect-overlay{ - top:-1px; - } #collect-email { opacity: 1; background: #fff; - color: rgb(108, 108, 108); - height: 14rem; + height: 25rem; animation-name: topBottom; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: .4s; - animation-delay: 1s; + animation-delay: $relish-success + .2s; position: absolute; - bottom: -14rem; + bottom: -100%; animation-fill-mode: forwards; z-index: 5; margin-top: 0; width: 100%; - form { - label { - background: rgba(200, 200, 200, 0.20); - height: 3rem; - margin-top:0; - i { - position: absolute; - right: 3%; - top: 1rem; - } - } - } - #news-updates{ - padding-top:0; - .list{ - max-width: 310px; - text-align: center; - width: 100%; - @include center-block(); - label{ - display: inline-block; - margin-top: 0; - padding-bottom: 1rem; - .checkbox{ - left:0; - margin-left:0; - } - .item-content{ - margin-left: 12%; - position: relative; - font-size:.8rem; - } - } - @media (min-width: 415px){ - &{ - max-width: 400px; - label{ - .checkbox{ - left:1rem; - } - .item-content{ - font-size: 1rem; - } - } - } - } - } - } + } + #collect-email-inner { + max-width: 400px; + margin: 0 auto; + } + + + + #news-updates { + padding-top: 0; } .item { border: none; - label{ + label { background: none; } .checkbox input:before, @@ -116,29 +95,34 @@ border-radius: 50% !important; background: none; border-width: 2px; - padding: .9rem; + padding: 12px; position: relative; - left: -7px; - top: -8px; + right: 5px; + bottom: 5px; } .checkbox input:checked:after, input:checked + .checkbox-icon:after { border-color: rgb(19, 229, 182); - top:20%; - left:11%; + top: 4px; + left: 6px; } .item-content { - width: 90%; - margin-left: 10%; + color: $mid-gray; + text-align: left; + margin-left: 75px; + white-space: initial; } } + .item-checkbox { + padding: 1rem 0; + margin: 1rem 0; + } .item-checkbox .checkbox { - margin-left: 10%; - top: 55%; + margin-left: 15px; } .checkbox input:before, .checkbox .checkbox-icon:before{ - border-color:$soft-blue; + border-color: $soft-blue; } .checkbox input:checked:before, .checkbox input:checked + .checkbox-icon:before { @@ -146,34 +130,17 @@ } } -@media (min-width: 1000px){ - #onboarding-collect-email{ - #collect-email{ - p, form{ - max-width: 600px; - @include center-block(); - } - form{ - margin-top:.5rem; - } - } - } -} - @keyframes topBottom { - 0% { - bottom: -100%; - } - 100% { - bottom: 0; - } + 0% { bottom: -100%; } + 100% { bottom: 0; } } -@keyframes opacity { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } +@keyframes emailCollectOpacity { + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +@keyframes emailCollectSlideUp { + 0% { top: 41vh; } + 100% { top: calc((100vh - 20rem) / 2 - 11vh);} } diff --git a/src/sass/views/onboarding/onboard-disclaimer.scss b/src/sass/views/onboarding/onboard-disclaimer.scss index f8142a8d2..00784ec90 100644 --- a/src/sass/views/onboarding/onboard-disclaimer.scss +++ b/src/sass/views/onboarding/onboard-disclaimer.scss @@ -1,9 +1,27 @@ #onboarding-disclaimer { color: #fff; height: 100%; - ion-content{ - height: 100%; - &.has-header{ + &-container { + max-width: 450px; + display: flex; + flex-direction: column; + justify-content: center; + margin-left: auto; + margin-right: auto; + height: calc(100vh - 160px); + } + .has-header > &-container { + height: calc(100vh - 210px); + } + #disclaimer-topic { + margin: 0 1rem; + } + #disclaimer-description { + margin: 1rem 1rem 2rem; + } + ion-content { + height: 101%; + &.has-header { top:40px !important; } .scroll{ @@ -29,6 +47,7 @@ background: transparent; border: none; color: #fff; + text-align: left; .checkbox input:before, .checkbox .checkbox-icon:before { border-radius: 50% !important; @@ -46,13 +65,8 @@ .checkbox input:checked:after, input:checked + .checkbox-icon:after { border-color: rgb(19, 229, 182); - top:20%; - left:11%; - @media (min-width:450px){ - &{ - left: 20%; - } - } + top: 4px; + left: 5px; } .item-content { width: 90%; @@ -64,14 +78,14 @@ margin-left: 3%; top:44%; } - #agree-to-terms{ + #agree-to-terms { background: #fff; padding:1rem; position: absolute; bottom: 0; width: 100%; &.header-present{ - bottom:16px; + bottom: 38px; } &-content{ max-width: 600px; @@ -87,6 +101,7 @@ } p{ color:rgb(58,58,58); + text-align: left; } @media (min-width:450px){ p{ diff --git a/src/sass/views/onboarding/onboard-push-notifications.scss b/src/sass/views/onboarding/onboard-push-notifications.scss index 30ff9b4a2..09f939953 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; + padding-bottom: 1rem; } } diff --git a/src/sass/views/onboarding/onboard-tour.scss b/src/sass/views/onboarding/onboard-tour.scss index 6cd9a42ea..7e97560c5 100644 --- a/src/sass/views/onboarding/onboard-tour.scss +++ b/src/sass/views/onboarding/onboard-tour.scss @@ -1,68 +1,31 @@ -#onboard-tour { - &-secure { - #cta { - background-image: url(../img/onboarding-tour-phone.svg); - height: 17rem; - margin-bottom:-1.5rem; - } - } +#onboarding-tour { &-currency { - #cta { - background-image: url(../img/onboarding-tour-currency-bg.svg); - height:18rem; - } .next-slide { margin-top: 3rem; } } - &-control { - #cta { - background-image: url(../img/onboarding-tour-control.svg); - margin-bottom: .05rem; - height: 15rem; - background-position: top; - } + .cta-buttons { + @extend %cta-buttons; + padding-bottom: 12vh; } - .cta-button{ - position: absolute; - bottom: 85px; + #onboarding-illustration-currency-exchange-rate { + background-color: $soft-blue; + border-radius: $button-border-radius; + box-shadow: $subtle-box-shadow; + font-size: 14px; + font-weight: normal; + height: 40px; + line-height: 38px; + margin: 10px auto 0; + position: relative; + width: 140px; + z-index: 1; } -} - -@media (max-width: 359px){ - #onboard-tour{ - &-secure, &-currency, &-control{ - #cta{ - height: 14rem; - } - } - } -} - -@media (min-width: 450px){ - #onboard-tour{ - &-secure, &-currency, &-control{ - #cta{ - height: 26rem; - } - } - } -} - -@media (min-width: 1000px){ - #onboard-tour{ - p, h2, h3{ - max-width: 600px; - } - button{ - max-width: 400px; - } - #cta{ - margin: 2rem 0 0; - } - &-control{ - #cta{ - margin-bottom: 2rem; + .swiper-pagination { + &-bullet { + background: $soft-blue; + &-active { + background: $soft-blue; } } } diff --git a/src/sass/views/onboarding/onboard-welcome.scss b/src/sass/views/onboarding/onboard-welcome.scss index 42cfe0826..88eed9a4f 100644 --- a/src/sass/views/onboarding/onboard-welcome.scss +++ b/src/sass/views/onboarding/onboard-welcome.scss @@ -1,73 +1,36 @@ #onboard-welcome { - ion-content { + & > ion-content { background: url(../img/onboarding-welcome-bg.png); background-position: top center; background-size: contain; background-repeat: repeat-x; - #shopping-24 { - content: url("../img/onboarding-welcome-shopping24.png"); - position: absolute; - top: 5%; - right: 5%; - width: 35px; - height: auto; - } - .logo, - p { - @include center-block(); - } - .logo { - margin-top: 20rem; - } - button { - @include center-block(1rem); - color: #fff; - &.get-started { - background: rgb(100, 124, 232); - margin-top: 4rem; - } - &.restore { - background: none; - } - } - #cta-buttons { - position: absolute; - bottom: 0; - width: 100%; - button { - max-width: 400px; - min-width: 300px; - } - } - } -} - -@media (max-width:500px), -(max-height:800px) { - #onboard-welcome { - ion-content { - .logo { - margin-top: 12rem; - } - } - } -} - -@media (max-width:420px) { - #onboard-welcome { - ion-content { - .logo { - margin-top: 8rem; - } - } - } -} - -@media (max-height:550px) { - #onboard-welcome { - #cta-buttons { - position: relative !important; - float: left; - } + } + #qrcode { + content: url("../img/onboarding-welcome-qrcode.png"); + position: absolute; + top: 5%; + right: 5%; + width: 20px; + height: auto; + } + #logo-tagline { + width: 100%; + height: 70%; + display: flex; + flex-direction: column; + justify-content: space-around; + } + #logo { + width: 40%; + max-width: 200px; + margin: 5rem auto 0; + } + #lead { + line-height: 1.6; + font-size: 18px; + } + #cta-buttons { + @extend %cta-buttons; + padding-bottom: 4vw; } } diff --git a/src/sass/views/onboarding/onboarding.scss b/src/sass/views/onboarding/onboarding.scss index da762022a..635ba7ad7 100644 --- a/src/sass/views/onboarding/onboarding.scss +++ b/src/sass/views/onboarding/onboarding.scss @@ -1,110 +1,46 @@ .onboarding { - background: rgba(30, 49, 134, 1); - background: -moz-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%); - background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(30, 49, 134, 1)), color-stop(100%, rgba(17, 27, 73, 1))); - background: -webkit-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%); - background: -o-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%); - background: -ms-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%); - background: linear-gradient(to bottom, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%); + background: #1e3186; color: #fff; + background-image: linear-gradient(to bottom, #1e3186 0%, #111b49 100%); height: 100%; + text-align: center; .bar.bar-header { - background: rgb(30, 49, 134); + background: none; + border: 0 none transparent; color: #fff; button { color: #fff; } - .secondary-buttons { - button { - color: rgba(255, 255, 255, .5); - } - } } - .bar.bar-stable{ - border-color: transparent; - border:none; + .onboarding-topic, + .onboarding-description, + .onboarding-tldr { + margin-left: 3rem; + margin-right: 3rem; } - 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.5rem; - } - } + .onboarding-topic { + font-size: 24px; + margin-top: .5rem; + line-height: 1.3; } - .col { - @include center-block(.5rem); + .onboarding-description { + margin-top: 1rem; + font-size: 16px; + color: rgba(255,255,255,0.5); + line-height: 1.5; } - .swiper-pagination { - &-bullet { - background: rgb(100, 124, 232); - &-active { - background: rgb(100, 124, 232); - } - } - } - .button-transparent{ - background: none !important; - } - .button-translucent{ - background: rgba(215, 215, 215, 0.1) - } - .button-primary{ - background: rgb(100, 124, 232) !important; - color:#fff; - } - .light-blue{ - color:rgb(100, 124, 232); + .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.9rem; - } - p,h2,h3{ - max-width: 600px !important; - } - button{ - max-width: 400px !important; - } - } - } +%cta-buttons { + position: absolute; + bottom: 0; + width: 100%; } @import "terms-of-use"; @@ -115,3 +51,37 @@ @import "../backup-warning"; @import "onboard-disclaimer"; @import "onboard-push-notifications"; + +%onboarding-illustration { + position: absolute; + width: 100%; + height: 40%; + margin-top: 25vh; + top: 0; + background-position: center; + background-repeat: no-repeat; + background-size: contain; + z-index: -1; +} +.onboarding-illustration { + &-secure { + @extend %onboarding-illustration; + background-image: url(../img/onboarding-tour-phone.svg); + } + &-currency { + @extend %onboarding-illustration; + background-image: url(../img/onboarding-tour-currency-bg.svg); + } + &-control { + @extend %onboarding-illustration; + background-image: url(../img/onboarding-tour-control.svg); + } + &-notifications { + @extend %onboarding-illustration; + background-image: url(../img/onboarding-push-notifications.svg); + } + &-backup-warning { + @extend %onboarding-illustration; + background-image: url(../img/backup-warning.svg); + } +} diff --git a/src/sass/views/onboarding/terms-of-use.scss b/src/sass/views/onboarding/terms-of-use.scss index a4ab99c5c..d769dae6a 100644 --- a/src/sass/views/onboarding/terms-of-use.scss +++ b/src/sass/views/onboarding/terms-of-use.scss @@ -1,7 +1,7 @@ #terms-of-use { ion-header-bar { background: #fff; - box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.2); + box-shadow: $subtle-box-shadow; .primary-buttons{ .button{ font-size: 2rem; @@ -10,7 +10,7 @@ } ion-content{ padding-top: 1.5rem; - color: rgba(86, 86, 86, 0.77); + color: $dark-gray; p { padding: 0 2.5%; margin: 2rem auto; @@ -24,6 +24,7 @@ padding: 1rem; position: absolute; bottom: 0; + width: 100%; .checkbox input:before, .checkbox .checkbox-icon:before { border-radius: 50% !important; @@ -53,7 +54,7 @@ width: 10%; position: relative; padding-right: 0; - top: 50px; + top: 25px; .item-content { white-space: normal; } @@ -61,7 +62,7 @@ p { color: rgb(58, 58, 58); float: left; - width: 70%; + width: 80%; } .checkbox input:before, .checkbox .checkbox-icon:before { diff --git a/src/sass/views/wallet-backup-phrase.scss b/src/sass/views/wallet-backup-phrase.scss index c4c3c20b0..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: 0px 4px 5px 0px rgba(50, 50, 50, 0.37); - 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/img/onboarding-tour-currency-bg.svg b/www/img/onboarding-tour-currency-bg.svg index 169671aad..f159baf5b 100644 --- a/www/img/onboarding-tour-currency-bg.svg +++ b/www/img/onboarding-tour-currency-bg.svg @@ -1,48 +1,50 @@ - - - - bitcoin-currency - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1 BTC = $650 - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/www/img/onboarding-tour-phone.svg b/www/img/onboarding-tour-phone.svg index 095c78f0e..93f7dcf08 100644 --- a/www/img/onboarding-tour-phone.svg +++ b/www/img/onboarding-tour-phone.svg @@ -1,167 +1,107 @@ - - - - digital-money - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/www/img/onboarding-welcome-shopping24.png b/www/img/onboarding-welcome-qrcode.png similarity index 100% rename from www/img/onboarding-welcome-shopping24.png rename to www/img/onboarding-welcome-qrcode.png 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 55464baac..6af1592fc 100644 --- a/www/views/backupWarning.html +++ b/www/views/backupWarning.html @@ -1,5 +1,5 @@ - + +
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.
+
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 @@