diff --git a/public/img/onboarding-backup-warning.svg b/public/img/onboarding-backup-warning.svg new file mode 100644 index 000000000..bfb4c0bff --- /dev/null +++ b/public/img/onboarding-backup-warning.svg @@ -0,0 +1,25 @@ + + + + being-watched + Created with Sketch. + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/img/onboarding-warning.svg b/public/img/onboarding-warning.svg new file mode 100644 index 000000000..5f4b4a907 --- /dev/null +++ b/public/img/onboarding-warning.svg @@ -0,0 +1,18 @@ + + + + warning + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/views/onboarding/backupRequest.html b/public/views/onboarding/backupRequest.html index d03cf26be..3802772fd 100644 --- a/public/views/onboarding/backupRequest.html +++ b/public/views/onboarding/backupRequest.html @@ -1,10 +1,26 @@ - + -

- No backup, no bitcoin. -

- Since only you control yout 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. +

+
+
+ +
+
+ +
+
+ +
diff --git a/public/views/onboarding/backupWarning.html b/public/views/onboarding/backupWarning.html index 88fa653a5..7b5e173af 100644 --- a/public/views/onboarding/backupWarning.html +++ b/public/views/onboarding/backupWarning.html @@ -1,15 +1,32 @@ - - + + - - 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. - +
+

+ 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/public/views/onboarding/collectEmail.html b/public/views/onboarding/collectEmail.html index eb5bda54b..ca3afbd94 100644 --- a/public/views/onboarding/collectEmail.html +++ b/public/views/onboarding/collectEmail.html @@ -1,17 +1,29 @@ - - + + - - Wallet Created - Where would you like to receive email notifications about payments -
- - -
+ +
+ +
+
+

Wallet Created

+
+
+
+

Where would you like to receive email notifications about payments

+
+
+ +
+
+
diff --git a/public/views/onboarding/tour.html b/public/views/onboarding/tour.html index c3185705b..3524f8231 100644 --- a/public/views/onboarding/tour.html +++ b/public/views/onboarding/tour.html @@ -3,7 +3,7 @@ @@ -32,7 +32,7 @@
diff --git a/src/sass/common.scss b/src/sass/common.scss index 4507e1f0d..9350009f1 100644 --- a/src/sass/common.scss +++ b/src/sass/common.scss @@ -25,7 +25,15 @@ box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3); } } - +.overlay{ + position: absolute; + top:0; + left:0; + width:100%; + height: 100%; + background: rgba(0,0,0,.4); + z-index: 4; +} .back-button { border: 0; .icon:before { @@ -49,3 +57,9 @@ margin-left: auto; margin-right: auto; } + +ion-header-bar{ + button{ + border:none; + } +} diff --git a/src/sass/views/onboarding/onboard-backup-request.scss b/src/sass/views/onboarding/onboard-backup-request.scss new file mode 100644 index 000000000..0ad4d641d --- /dev/null +++ b/src/sass/views/onboarding/onboard-backup-request.scss @@ -0,0 +1,11 @@ +#onboarding-backup-request{ + .warning{ + margin:4rem auto 1rem; + } + button{ + color:#fff; + } + #arrow-down{ + font-size: 4.2rem; + } +} \ No newline at end of file diff --git a/src/sass/views/onboarding/onboard-backup-warning.scss b/src/sass/views/onboarding/onboard-backup-warning.scss new file mode 100644 index 000000000..0ee7b5c1b --- /dev/null +++ b/src/sass/views/onboarding/onboard-backup-warning.scss @@ -0,0 +1,11 @@ +#onboarding-backup-warning{ + .warning{ + margin:4rem auto 1rem; + } + button{ + color:#fff; + } + #arrow-down{ + font-size: 4.2rem; + } +} \ 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 new file mode 100644 index 000000000..427ab466f --- /dev/null +++ b/src/sass/views/onboarding/onboard-collect-email.scss @@ -0,0 +1,66 @@ +#onboarding-collect-email { + background: rgb(17, 209, 166); + #success-image { + margin-top: 4rem; + } + .col { + margin-top: 1rem; + margin-bottom: 1rem; + } + #collect-email { + opacity: 1; + background: #fff; + color: rgb(108, 108, 108); + height: 11rem; + animation-name: topBottom; + animation-iteration-count: 1; + animation-timing-function: ease-in; + animation-duration: 1s; + animation-delay: 2s; + position: absolute; + bottom: -100%; + animation-fill-mode: forwards; + z-index: 5; + margin-top: 0; + label { + background: rgba(200, 200, 200, 0.20); + height: 3rem; + margin-top:0; + input { + position: absolute; + } + i { + position: absolute; + right: 3%; + top: 1rem; + } + } + } + .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 { + 0% { + bottom: -100%; + } + 100% { + bottom: 0; + } +} + +@keyframes bottomTop { + 0% { + top: 100%; + } + 100% { + top: 0; + } +} diff --git a/src/sass/views/onboarding/onboard-tour.scss b/src/sass/views/onboarding/onboard-tour.scss index 1123a511a..906853e2e 100644 --- a/src/sass/views/onboarding/onboard-tour.scss +++ b/src/sass/views/onboarding/onboard-tour.scss @@ -2,6 +2,7 @@ &-secure { #cta { background-image: url(../img/onboarding-tour-phone.svg); + height: 17rem; } } &-currency { diff --git a/src/sass/views/onboarding/onboarding.scss b/src/sass/views/onboarding/onboarding.scss index 6e94dabe4..ac2d1d698 100644 --- a/src/sass/views/onboarding/onboarding.scss +++ b/src/sass/views/onboarding/onboarding.scss @@ -21,9 +21,8 @@ } ion-content { color: #fff; - .scroll {} + h2, h3{color:#fff;} h2 { - color: #fff; font-size: 1.8rem; } p { @@ -31,9 +30,6 @@ color: rgba(255, 255, 255, .5); } } - .col { - @include center-block(.5rem); - } #cta { background-size: contain; width: 100%; @@ -52,6 +48,9 @@ } } } + .col { + @include center-block(.5rem); + } .swiper-pagination { &-bullet { background: rgb(100, 124, 232); @@ -60,8 +59,20 @@ } } } + .button-transparent{ + background: none !important; + } + .button-primary{ + background: rgb(100, 124, 232) !important; + } + .light-blue{ + color:rgb(100, 124, 232); + } } @import "terms-of-use"; @import "onboard-welcome"; @import "onboard-tour"; +@import "onboard-collect-email"; +@import "onboard-backup-request"; +@import "onboard-backup-warning";