From bdbbc1808e62ede126f4cc2ee43cfec44c889a04 Mon Sep 17 00:00:00 2001 From: Jason Dreyzehner Date: Tue, 4 Oct 2016 19:36:55 -0400 Subject: [PATCH 01/12] design(welcome): improve welcome responsiveness, better scss organization --- ...ng24.png => onboarding-welcome-qrcode.png} | Bin public/views/onboarding/welcome.html | 28 ++---- src/sass/main.scss | 2 +- src/sass/shame.scss | 6 -- src/sass/variables.scss | 6 ++ .../views/onboarding/onboard-welcome.scss | 94 ++++++------------ .../views/onboarding/onboarding-buttons.scss | 32 ++++++ src/sass/views/onboarding/onboarding.scss | 49 ++------- 8 files changed, 89 insertions(+), 128 deletions(-) rename public/img/{onboarding-welcome-shopping24.png => onboarding-welcome-qrcode.png} (100%) create mode 100644 src/sass/views/onboarding/onboarding-buttons.scss diff --git a/public/img/onboarding-welcome-shopping24.png b/public/img/onboarding-welcome-qrcode.png similarity index 100% rename from public/img/onboarding-welcome-shopping24.png rename to public/img/onboarding-welcome-qrcode.png diff --git a/public/views/onboarding/welcome.html b/public/views/onboarding/welcome.html index e753a8d65..8faf99bb5 100644 --- a/public/views/onboarding/welcome.html +++ b/public/views/onboarding/welcome.html @@ -1,23 +1,13 @@ - -
-
- -
-
-

- Take control of your money,
get started with bitcoin. -

-
-
-
-
- -
-
- -
-
+ +
+ +

Take control of your money,
get started with bitcoin.

+
+
+ + +
diff --git a/src/sass/main.scss b/src/sass/main.scss index acb64a176..937471ad7 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -1,7 +1,7 @@ @import "fonts"; @import "variables"; -@import "icons"; @import "ionic"; +@import "icons"; @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..628b340ec 100644 --- a/src/sass/variables.scss +++ b/src/sass/variables.scss @@ -13,9 +13,15 @@ $light-gray: #9b9bab; $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: 6px; +$button-height: 52px; +$button-padding: 16px; + $base-background-color: $subtle-gray; $item-default-active-bg: $subtle-gray; diff --git a/src/sass/views/onboarding/onboard-welcome.scss b/src/sass/views/onboarding/onboard-welcome.scss index 42cfe0826..214f8a245 100644 --- a/src/sass/views/onboarding/onboard-welcome.scss +++ b/src/sass/views/onboarding/onboard-welcome.scss @@ -1,73 +1,39 @@ #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; - } + } + #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; + } + #cta-buttons { + position: absolute; + bottom: 0; + width: 100%; 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; + max-width: 400px; } } } diff --git a/src/sass/views/onboarding/onboarding-buttons.scss b/src/sass/views/onboarding/onboarding-buttons.scss new file mode 100644 index 000000000..f347b5859 --- /dev/null +++ b/src/sass/views/onboarding/onboarding-buttons.scss @@ -0,0 +1,32 @@ +$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%; + margin-left: auto; + margin-right: auto; + } + } +} diff --git a/src/sass/views/onboarding/onboarding.scss b/src/sass/views/onboarding/onboarding.scss index da762022a..a92873297 100644 --- a/src/sass/views/onboarding/onboarding.scss +++ b/src/sass/views/onboarding/onboarding.scss @@ -1,15 +1,10 @@ .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%); - color: #fff; + background: #1e3186; + 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; color: #fff; button { color: #fff; @@ -20,9 +15,8 @@ } } } - .bar.bar-stable{ - border-color: transparent; - border:none; + .bar.bar-stable { + border: 0 none transparent; } ion-content { height: 100%; @@ -57,34 +51,18 @@ @media (min-width: 450px){ p{ font-size: 1.1rem; - line-height: 1.5rem; + line-height: 1.6; } } } - .col { - @include center-block(.5rem); - } .swiper-pagination { &-bullet { - background: rgb(100, 124, 232); + background: $soft-blue; &-active { - background: rgb(100, 124, 232); + background: $soft-blue; } } } - .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); - } } @media (min-width: 415px){ @@ -95,19 +73,14 @@ } p{ font-size: 1.4rem; - line-height: 1.9rem; - } - p,h2,h3{ - max-width: 600px !important; - } - button{ - max-width: 400px !important; + line-height: 1.6; } } } } @import "terms-of-use"; +@import "onboarding-buttons"; @import "onboard-welcome"; @import "onboard-tour"; @import "onboard-collect-email"; From 3fbb626141c31692b79752a586a0dda611e38f71 Mon Sep 17 00:00:00 2001 From: Jason Dreyzehner Date: Tue, 4 Oct 2016 20:49:22 -0400 Subject: [PATCH 02/12] design(tour): improve tour responsiveness, better scss organization --- public/img/onboarding-tour-currency-bg.svg | 94 +++++++++---------- public/views/onboarding/tour.html | 83 +++++----------- public/views/onboarding/welcome.html | 4 +- src/sass/icons.scss | 2 +- src/sass/variables.scss | 4 +- src/sass/views/onboarding/onboard-tour.scss | 93 +++++++----------- .../views/onboarding/onboard-welcome.scss | 11 +-- .../views/onboarding/onboarding-buttons.scss | 1 + src/sass/views/onboarding/onboarding.scss | 35 ++++++- src/sass/views/wallet-backup-phrase.scss | 2 +- 10 files changed, 148 insertions(+), 181 deletions(-) diff --git a/public/img/onboarding-tour-currency-bg.svg b/public/img/onboarding-tour-currency-bg.svg index 169671aad..cb1d40b35 100644 --- a/public/img/onboarding-tour-currency-bg.svg +++ b/public/img/onboarding-tour-currency-bg.svg @@ -1,48 +1,46 @@ - - - - bitcoin-currency - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1 BTC = $650 - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/views/onboarding/tour.html b/public/views/onboarding/tour.html index be1058cdb..2e93309bc 100644 --- a/public/views/onboarding/tour.html +++ b/public/views/onboarding/tour.html @@ -1,5 +1,5 @@ - - + + - + -
-

Bitcoin is secure, digital money

-
-
-

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

-
-
-
-
-

- Just scan the code to pay -

-
-
-
-
-

Bitcoin is a currency

+

Bitcoin is a currency.

+

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

+
+
1 BTC = $1,000
-
-

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

-
-
-
-
-

- The exchange rate changes with the market -

-
-
-
-
-

You control your bitcoin

-
-
-

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

-
-
-
-
-

- Not even BitPay can access it -

-
-
-
diff --git a/public/views/onboarding/welcome.html b/public/views/onboarding/welcome.html index 8faf99bb5..e5d60855b 100644 --- a/public/views/onboarding/welcome.html +++ b/public/views/onboarding/welcome.html @@ -3,11 +3,11 @@
-

Take control of your money,
get started with bitcoin.

+

Take control of your money,
get started with bitcoin.

- +
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/variables.scss b/src/sass/variables.scss index 628b340ec..f5b4a227b 100644 --- a/src/sass/variables.scss +++ b/src/sass/variables.scss @@ -8,6 +8,8 @@ $roboto-light: "Roboto-Light", sans-serif-light; $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); /* Set ionic variables */ @@ -31,4 +33,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/onboarding/onboard-tour.scss b/src/sass/views/onboarding/onboard-tour.scss index 6cd9a42ea..1b8846c51 100644 --- a/src/sass/views/onboarding/onboard-tour.scss +++ b/src/sass/views/onboarding/onboard-tour.scss @@ -1,69 +1,40 @@ -#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: 100px; } - .cta-button{ - position: absolute; - bottom: 85px; - } -} - -@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; - } - } + .onboarding-topic, + .onboarding-description, + .onboarding-tldr { + margin: 1rem 3rem .5rem; + } + .onboarding-topic { + font-size: 24px; + } + .onboarding-description { + font-size: 16px; + color: rgba(255,255,255,0.5); + } + .onboarding-tldr { + font-size: 18px; + margin-bottom: 1em; + } + #onboarding-illustration-currency-exchange-rate { + background-color: $soft-blue; + border-radius: $button-border-radius; + box-shadow: $subtle-box-shadow; + font-size: 14px; + font-weight: bold; + height: 40px; + line-height: 38px; + margin: 10px auto 0; + position: relative; + width: 120px; + z-index: 1; } } diff --git a/src/sass/views/onboarding/onboard-welcome.scss b/src/sass/views/onboarding/onboard-welcome.scss index 214f8a245..27df613c0 100644 --- a/src/sass/views/onboarding/onboard-welcome.scss +++ b/src/sass/views/onboarding/onboard-welcome.scss @@ -25,15 +25,12 @@ max-width: 200px; margin: 5rem auto 0; } - .lead { + #lead { line-height: 1.6; + font-size: 18px; } #cta-buttons { - position: absolute; - bottom: 0; - width: 100%; - button { - max-width: 400px; - } + @extend %cta-buttons; + padding-bottom: 1rem; } } diff --git a/src/sass/views/onboarding/onboarding-buttons.scss b/src/sass/views/onboarding/onboarding-buttons.scss index f347b5859..d535821f5 100644 --- a/src/sass/views/onboarding/onboarding-buttons.scss +++ b/src/sass/views/onboarding/onboarding-buttons.scss @@ -25,6 +25,7 @@ $button-secondary-active-border: transparent; &.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 a92873297..57586f5b5 100644 --- a/src/sass/views/onboarding/onboarding.scss +++ b/src/sass/views/onboarding/onboarding.scss @@ -5,6 +5,7 @@ text-align: center; .bar.bar-header { background: none; + border: 0 none transparent; color: #fff; button { color: #fff; @@ -15,9 +16,6 @@ } } } - .bar.bar-stable { - border: 0 none transparent; - } ion-content { height: 100%; .scroll{ @@ -79,6 +77,12 @@ } } +%cta-buttons { + position: absolute; + bottom: 0; + width: 100%; +} + @import "terms-of-use"; @import "onboarding-buttons"; @import "onboard-welcome"; @@ -88,3 +92,28 @@ @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; +} +.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); + } +} diff --git a/src/sass/views/wallet-backup-phrase.scss b/src/sass/views/wallet-backup-phrase.scss index c4c3c20b0..48e7e815a 100644 --- a/src/sass/views/wallet-backup-phrase.scss +++ b/src/sass/views/wallet-backup-phrase.scss @@ -44,7 +44,7 @@ } .select-word { background: #fff; - box-shadow: 0px 4px 5px 0px rgba(50, 50, 50, 0.37); + box-shadow: $hovering-box-shadow; margin: .1rem 0; display: inline-block; padding: 0 5px; From 0c0ccbd10514019413ea4acde2200bb3a548da10 Mon Sep 17 00:00:00 2001 From: Jason Dreyzehner Date: Tue, 4 Oct 2016 22:21:43 -0400 Subject: [PATCH 03/12] design(collectEmail): improve animations and layout --- public/views/onboarding/collectEmail.html | 28 ++++------ src/sass/variables.scss | 3 +- .../onboarding/onboard-collect-email.scss | 54 +++++++++++++------ 3 files changed, 51 insertions(+), 34 deletions(-) diff --git a/public/views/onboarding/collectEmail.html b/public/views/onboarding/collectEmail.html index 465fe84b8..2e6659e17 100644 --- a/public/views/onboarding/collectEmail.html +++ b/public/views/onboarding/collectEmail.html @@ -1,33 +1,25 @@ -
+
-
-
-

Wallet Created

+

Wallet Created

-
-

Where would you like to receive email notifications about payments?

-
-
-
-
-

Is this email address correct?

-
-
-

{{email}}

-
+

Is this email address correct?

+

{{email}}

@@ -35,8 +34,7 @@

The exchange rate changes with the market.

From d1a67c3049f583313547fbd0a07a5a7118ddf364 Mon Sep 17 00:00:00 2001 From: Jason Dreyzehner Date: Thu, 6 Oct 2016 16:03:18 -0400 Subject: [PATCH 06/12] feat(cordova): install cordova-plugin-device for full Ionic support --- app-template/config-template.xml | 1 + 1 file changed, 1 insertion(+) diff --git a/app-template/config-template.xml b/app-template/config-template.xml index 0ee006695..042972622 100644 --- a/app-template/config-template.xml +++ b/app-template/config-template.xml @@ -29,6 +29,7 @@ + From 2ba9cea636f8131d7f9fee38761233e6b9ab97a1 Mon Sep 17 00:00:00 2001 From: Jason Dreyzehner Date: Thu, 6 Oct 2016 19:41:50 -0400 Subject: [PATCH 07/12] design(collectEmail): start polishing collectEmail view --- app-template/config-template.xml | 3 +- .../onboarding/onboard-collect-email.scss | 210 +++++++----------- src/sass/views/onboarding/onboard-tour.scss | 6 +- www/views/onboarding/collectEmail.html | 25 ++- 4 files changed, 95 insertions(+), 149 deletions(-) diff --git a/app-template/config-template.xml b/app-template/config-template.xml index 042972622..42e4518f2 100644 --- a/app-template/config-template.xml +++ b/app-template/config-template.xml @@ -20,7 +20,8 @@ - + + diff --git a/src/sass/views/onboarding/onboard-collect-email.scss b/src/sass/views/onboarding/onboard-collect-email.scss index 93a9b9372..6e1241264 100644 --- a/src/sass/views/onboarding/onboard-collect-email.scss +++ b/src/sass/views/onboarding/onboard-collect-email.scss @@ -2,27 +2,11 @@ $relish-success: 1.3s; #onboarding-collect-email { background: rgb(17, 209, 166); - .overlay { - position: absolute; - top:0; - left:0; - width:100%; - height: 100%; - background: rgba(0,0,0,.4); - z-index: 4; - } - .scroll-content { - margin-top: 0; - height: 101%; - } - .scroll { - height: 100%; - transform: translate3d(0px, 0px, 0px) scale(1) !important; - } - .success-message { - top: 30vh; + + #success-container { + top: 41vh; position: relative; - animation-name: slideUp; + animation-name: emailCollectSlideUp; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: .5s; @@ -30,103 +14,80 @@ $relish-success: 1.3s; animation-fill-mode: forwards; } #success-image { - width: 8rem; - margin: 0 auto; + width: 13vh; + margin: 0 auto 2vh; + } + #success-message { + font-size: 3vh; } .collect-overlay { - animation-name: opacity; - 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; - } + position: absolute; + top:0; + left:0; + width:100%; + 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; + } } - .collect-overlay { - top:-1px; + .heading { + color: $dark-gray; + font-size: 1.2rem; + font-weight: bold; + margin: 3rem 0 1rem; } .prompt { - padding: 2rem 2rem 1rem; - display: block; + margin: 1rem 1.5rem; + color: $mid-gray; } #email-form { - margin: 0 2rem 1rem; + margin: 0 1.5rem 1rem; } - #email-input { + #email-label { border-radius: $visible-radius; + background: rgba(200, 200, 200, 0.20); + height: 3rem; + margin-top:0; } #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: $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, @@ -134,29 +95,34 @@ $relish-success: 1.3s; 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 { @@ -164,43 +130,17 @@ $relish-success: 1.3s; } } -@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 slideUp { - 0% { - top: 30vh; - } - 100% { - top: 10vh; - } +@keyframes emailCollectSlideUp { + 0% { top: 41vh; } + 100% { top: calc((100vh - 20rem) / 2 - 11vh);} } diff --git a/src/sass/views/onboarding/onboard-tour.scss b/src/sass/views/onboarding/onboard-tour.scss index b87bd2091..00499b2f4 100644 --- a/src/sass/views/onboarding/onboard-tour.scss +++ b/src/sass/views/onboarding/onboard-tour.scss @@ -11,17 +11,21 @@ .onboarding-topic, .onboarding-description, .onboarding-tldr { - margin: 1rem 3rem .5rem; + 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 { diff --git a/www/views/onboarding/collectEmail.html b/www/views/onboarding/collectEmail.html index 2e6659e17..889de3d08 100644 --- a/www/views/onboarding/collectEmail.html +++ b/www/views/onboarding/collectEmail.html @@ -1,21 +1,22 @@ - -
- -

Wallet Created

+ +
+ +
Wallet Created
-
- Where would you like to receive email notifications about payments? +
+
Email Notifications
+
Where would you like to receive email notifications about payments?
-

Is this email address correct?

From 550d1c06302bf255ece41be1c939717f06fee2e2 Mon Sep 17 00:00:00 2001 From: Jason Dreyzehner Date: Thu, 6 Oct 2016 21:12:24 -0400 Subject: [PATCH 08/12] design(onboarding): polish the notification and backupRequest views --- .../controllers/onboarding/backupRequest.js | 2 +- .../onboarding/onboard-backup-request.scss | 80 ++++++------------ .../onboard-push-notifications.scss | 50 ++--------- src/sass/views/onboarding/onboard-tour.scss | 28 ++----- src/sass/views/onboarding/onboarding.scss | 82 +++++++------------ www/views/onboarding/backupRequest.html | 30 ++----- www/views/onboarding/notifications.html | 22 ++--- www/views/onboarding/tour.html | 18 ++-- 8 files changed, 89 insertions(+), 223 deletions(-) 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.
From 6dcf78256eb9f729704cde8c9963f1cd04c5ff9f Mon Sep 17 00:00:00 2001 From: Jason Dreyzehner Date: Thu, 6 Oct 2016 22:42:45 -0400 Subject: [PATCH 09/12] design(onboarding): polish backup warning screen and screenshot warning modal --- src/sass/variables.scss | 3 ++ src/sass/views/backup-warning.scss | 54 ++----------------- src/sass/views/includes/modals/modals.scss | 47 ++++++++-------- src/sass/views/onboarding/onboarding.scss | 5 ++ www/views/backupWarning.html | 28 +++------- .../includes/screenshotWarningModal.html | 17 +++--- 6 files changed, 50 insertions(+), 104 deletions(-) diff --git a/src/sass/variables.scss b/src/sass/variables.scss index a725ea5e5..545a4b9e5 100644 --- a/src/sass/variables.scss +++ b/src/sass/variables.scss @@ -5,12 +5,15 @@ $fill-blue: #D5DFFF; $subtle-gray: #f5f5f5; $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); $visible-radius: 6px; +$unmistakable-radius: 12px; /* Set ionic variables */ diff --git a/src/sass/views/backup-warning.scss b/src/sass/views/backup-warning.scss index ee1017bcc..71ac7efee 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; + height: 250px; } } diff --git a/src/sass/views/includes/modals/modals.scss b/src/sass/views/includes/modals/modals.scss index c38918e7c..98078e354 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,30 @@ } } &-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; + } + &-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/onboarding.scss b/src/sass/views/onboarding/onboarding.scss index 1d7d699d6..5dc5ace31 100644 --- a/src/sass/views/onboarding/onboarding.scss +++ b/src/sass/views/onboarding/onboarding.scss @@ -72,6 +72,7 @@ background-position: center; background-repeat: no-repeat; background-size: contain; + z-index: -1; } .onboarding-illustration { &-secure { @@ -90,4 +91,8 @@ @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/www/views/backupWarning.html b/www/views/backupWarning.html index 55464baac..9b24b68e9 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/screenshotWarningModal.html b/www/views/includes/screenshotWarningModal.html index bd7f2abba..b0e7dd606 100644 --- a/www/views/includes/screenshotWarningModal.html +++ b/www/views/includes/screenshotWarningModal.html @@ -1,15 +1,12 @@