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;