+
Notifications by email
+
Where would you like to receive email notifications about payments?
+
+
Is this email address correct?
+
{{data.email}}
+
+
-
-
-
- Skip
-
-
diff --git a/src/pages/onboarding/email/email.scss b/src/pages/onboarding/email/email.scss
index 3d632aa19..1d5f88bd6 100644
--- a/src/pages/onboarding/email/email.scss
+++ b/src/pages/onboarding/email/email.scss
@@ -1,201 +1,17 @@
page-email {
- ion-label {
- text-align: left !important;
- white-space: normal;
+ .buttons {
+ width: 100%;
+ position: absolute;
+ bottom: 0px;
+ padding: 15px 15px 4vh 15px;
}
- .email {
- color: $v-onboarding-color;
- background: rgb(17, 209, 166) !important;
- $relish-success: 1.3s;
-
- button {
- &.primary {
- border-color: transparent;
- background-color: $v-accent-color;
- color: $v-onboarding-color;
- }
- &.secondary {
- background-color: transparent;
- border-color: transparent;
- color: $v-accent-color;
- }
- }
-
- #success-container {
- text-align: center;
- 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;
- 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;
- margin: 5% 1% 0 0;
- background-color: transparent;
- font-size: initial;
- color: $v-light-gray;
- text-transform: uppercase;
- }
- }
- .heading {
- text-align: center;
- color: $v-dark-gray;
- font-size: 2rem;
- font-weight: bold;
- margin: 2rem 0 1rem;
- }
- .prompt {
- text-align: center;
- margin: 1rem 1.5rem;
- color: $v-mid-gray;
- }
- #email-form {
- margin: 0 1.5rem 1rem;
- }
- #email-label {
- border-radius: $v-visible-radius;
- background: rgba(200, 200, 200, 0.20);
- height: 3rem;
- margin-top:0;
- }
- #collect-email {
- opacity: 1;
- background: #fff;
- animation-name: topBottom;
- animation-iteration-count: 1;
- animation-timing-function: ease-in;
- animation-duration: .4s;
- animation-delay: $relish-success + .2s;
- position: absolute;
- bottom: -100%;
- animation-fill-mode: forwards;
- z-index: 5;
- margin-top: 0;
- width: 100%;
- }
- #collect-email-inner {
- max-width: 400px;
- margin: 0 auto;
- input[type="email"] {
- display: block;
- padding-left: 0;
- color: #445;
- vertical-align: middle;
- font-size: 16px;
- line-height: 18px;
- }
- #email-label {
- border-radius: 6px;
- background: rgba(200, 200, 200, 0.2);
- height: 4rem;
- margin-top: 0;
- }
- }
-
- #collect-email-confirm {
- text-align: center;
- p.confirm {
- margin: 2rem 0;
- color: $v-mid-gray;
- }
- p.user-email {
- color: $v-dark-gray;
- margin-bottom: 2rem;
- }
- .row, .col {
- padding: 0;
- }
- .button {
- padding: 2.5rem;
- margin-bottom: 0;
- }
- }
-
- #news-updates {
- padding-top: 0;
- }
- .item {
- border: none;
- label {
- background: none;
- }
- .checkbox input:before,
- .checkbox .checkbox-icon:before {
- border-radius: 50% !important;
- background: none;
- border-width: 2px;
- padding: 12px;
- position: relative;
- right: 2px;
- bottom: 2px;
- }
- .checkbox input:checked:after,
- input:checked + .checkbox-icon:after {
- border-color: $v-onboarding-checkbox-on-border;
- top: 8px;
- left: 6px;
- }
- .item-content {
- color: $v-mid-gray;
- text-align: left;
- margin-left: 75px;
- white-space: initial;
- }
- }
- .item-checkbox {
- padding: 1rem 0;
- margin: 1rem 0;
- }
- .item-checkbox .checkbox {
- margin-left: 15px;
- }
- .checkbox input:before,
- .checkbox .checkbox-icon:before{
- border-color: $v-onboarding-checkbox-on-border;
- }
- .checkbox input:checked:before,
- .checkbox input:checked + .checkbox-icon:before {
- border-color: $v-onboarding-checkbox-on-border;
- }
-
- @keyframes topBottom {
- 0% { bottom: -100%; }
- 100% { bottom: 0; }
- }
- @keyframes emailCollectOpacity {
- 0% { opacity: 0; }
- 100% { opacity: 1; }
- }
- @keyframes emailCollectSlideUp {
- 0% { top: 41vh; }
- 100% { top: calc((100vh - 20rem) / 2 - 11vh);}
- }
+ .email-title {
+ margin: 5vh 0;
+ text-align: center;
+ font-size: 3vh;
+ }
+ .email-content {
+ text-align: center;
+ padding: 0 4vh;
}
}
diff --git a/src/pages/onboarding/email/email.ts b/src/pages/onboarding/email/email.ts
index d4f14a121..80d1b3107 100644
--- a/src/pages/onboarding/email/email.ts
+++ b/src/pages/onboarding/email/email.ts
@@ -1,5 +1,6 @@
import { Component } from '@angular/core';
import { NavController, NavParams, ActionSheetController } from 'ionic-angular';
+import { Logger } from '@nsalaun/ng-logger';
import { BackupRequestPage } from '../backup-request/backup-request';
@@ -11,7 +12,12 @@ export class EmailPage {
public data: any;
public showConfirmForm: boolean;
- constructor(public navCtrl: NavController, public navParams: NavParams, public actionSheet: ActionSheetController) {
+ constructor(
+ public navCtrl: NavController,
+ public navParams: NavParams,
+ public actionSheet: ActionSheetController,
+ private log: Logger
+ ) {
this.data = {
accept: true,
email: '',
@@ -19,6 +25,10 @@ export class EmailPage {
this.showConfirmForm = false;
}
+ ionViewDidLoad() {
+ this.log.info('ionViewDidLoad EmailPage');
+ }
+
skip() {
this.navCtrl.push(BackupRequestPage);
}
@@ -39,6 +49,7 @@ export class EmailPage {
}
showConfirm() {
+ // TODO Fix form validation
if (!this.data.email) return;
this.showConfirmForm = !this.showConfirmForm;
}
diff --git a/src/pages/onboarding/tour/tour.html b/src/pages/onboarding/tour/tour.html
index e4e64e4ec..098c42a66 100644
--- a/src/pages/onboarding/tour/tour.html
+++ b/src/pages/onboarding/tour/tour.html
@@ -17,7 +17,7 @@
Bitcoin is secure, digital money.
You can spend bitcoin at millions of websites and stores worldwide.