diff --git a/public/views/onboarding/collectEmail.html b/public/views/onboarding/collectEmail.html index 7505add47..5629d5c8c 100644 --- a/public/views/onboarding/collectEmail.html +++ b/public/views/onboarding/collectEmail.html @@ -1,4 +1,11 @@ + + + + +
@@ -7,19 +14,16 @@

Wallet Created

-
-

Where would you like to receive email notifications about payments

-
-
- -
- +
+

Where would you like to receive email notifications about payments?

-
+
+ +
+
+
diff --git a/src/sass/common.scss b/src/sass/common.scss index c1c4f80ca..502df7d91 100644 --- a/src/sass/common.scss +++ b/src/sass/common.scss @@ -67,6 +67,10 @@ margin-right: auto; } +.bar-green{ + background: rgb(17, 209, 166) !important; +} + ion-header-bar{ button{ border:none; diff --git a/src/sass/views/onboarding/onboard-collect-email.scss b/src/sass/views/onboarding/onboard-collect-email.scss index 41edf34bf..125d21a93 100644 --- a/src/sass/views/onboarding/onboard-collect-email.scss +++ b/src/sass/views/onboarding/onboard-collect-email.scss @@ -1,5 +1,9 @@ #onboarding-collect-email { background: rgb(17, 209, 166); + .scroll-content { + margin-top: 0; + height: 101%; + } .scroll { height: 100%; } @@ -10,6 +14,25 @@ margin-top: 1rem; margin-bottom: 1rem; } + .collect-overlay, .bar-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; + } + .collect-overlay{ + top:-1px; + } + .bar-overlay{ + background: rgba(0, 0, 0, 0.23); + .button-clear{ + color:#fff; + min-width: 100%; + } + } #collect-email { opacity: 1; background: #fff; @@ -18,8 +41,8 @@ animation-name: topBottom; animation-iteration-count: 1; animation-timing-function: ease-in; - animation-duration: 1s; - animation-delay: 2s; + animation-duration: .4s; + animation-delay: 1s; position: absolute; bottom: -14rem; animation-fill-mode: forwards; @@ -29,7 +52,7 @@ label { background: rgba(200, 200, 200, 0.20); height: 3rem; - margin-top:0; + margin-top: 0; input { position: absolute; } @@ -40,15 +63,6 @@ } } } - .overlay { - animation-name: bottomTop; - animation-iteration-count: 1; - animation-timing-function: ease-in; - animation-duration: 1s; - animation-delay: 2s; - animation-fill-mode: forwards; - top: 100%; - } } @keyframes topBottom { @@ -60,11 +74,11 @@ } } -@keyframes bottomTop { +@keyframes opacity { 0% { - top: 100%; + opacity: 0; } 100% { - top: 0; + opacity: 1; } } diff --git a/src/sass/views/onboarding/onboard-tour.scss b/src/sass/views/onboarding/onboard-tour.scss index 358e9949c..ddb13b75e 100644 --- a/src/sass/views/onboarding/onboard-tour.scss +++ b/src/sass/views/onboarding/onboard-tour.scss @@ -24,3 +24,13 @@ } } } + +@media (max-width: 400px){ + #onboard-tour{ + &-secure, &-currency, &-control{ + #cta{ + height: 14rem; + } + } + } +} diff --git a/src/sass/views/onboarding/onboard-welcome.scss b/src/sass/views/onboarding/onboard-welcome.scss index 414d80e78..9e71cb6ba 100644 --- a/src/sass/views/onboarding/onboard-welcome.scss +++ b/src/sass/views/onboarding/onboard-welcome.scss @@ -42,7 +42,8 @@ } } -@media (max-width:500px), (max-height:800px) { +@media (max-width:500px), +(max-height:800px) { #onboard-welcome { ion-content { .logo { @@ -62,7 +63,7 @@ } } -@media (max-height:608px) { +@media (max-height:550px) { #onboard-welcome { #cta-buttons { position: relative !important; diff --git a/src/sass/views/onboarding/onboarding.scss b/src/sass/views/onboarding/onboarding.scss index a324af26a..0c5522ac3 100644 --- a/src/sass/views/onboarding/onboarding.scss +++ b/src/sass/views/onboarding/onboarding.scss @@ -75,6 +75,16 @@ } } +@media (max-width: 400px){ + .onboarding{ + ion-content{ + h2{ + font-size: 1.2rem; + } + } + } +} + @import "terms-of-use"; @import "onboard-welcome"; @import "onboard-tour";