set up initial success screen and added animation for collecting email form

public/views/onboarding/collectEmail.html

@@ -1,4 +1,3 @@
-
 <ion-view ng-controller="collectEmailController" id="onboarding-collect-email" class="onboarding">
   <ion-nav-bar class="bar-stable">
     <ion-nav-buttons side="secondary">
@@ -7,19 +6,20 @@
       </button>
     </ion-nav-buttons>
   </ion-nav-bar>
-  <ion-content ng-controller="collectEmailController">
-    <span translate>Wallet Created </span>
-    <span translate>Where would you like to receive email notifications about payments </span>
-  <ion-content >
+  <ion-content>
     <div class="row">
-      <img src="../../img/onboarding-success.svg" class="col col-75" />
+      <img src="../../img/onboarding-success.svg" class="col col-75" id="success-image" />
     </div>
-    <span translate>Wallet Created</span>
-    <!-- <span translate>Where would you like to receive email notifications about payments </span>
->>>>>>> Stashed changes
+    <div class="row text-center">
+      <h3 translate class="col">Wallet Created</h3>
+    </div>
+  </ion-content>
+  <div id="collect-email">
+    <span translate>Where would you like to receive email notifications about payments </span>
     <form name="emailForm" ng-submit="save(emailForm)" novalidate>
       <input type="email" id="email" name="email" ng-model="email" required></input>
       <input type="submit" class="button button-block button-positive" value="{{'Save'|translate}}" ng-disabled="emailForm.$invalid">
-    </form> -->
-  </ion-content>
+    </form>
+  </div>
+  <div class="overlay"></div>
 </ion-view>

src/sass/views/common.scss

@@ -25,3 +25,13 @@
     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;
+}

src/sass/views/onboarding/onboard-collect-email.scss

@@ -0,0 +1,50 @@
+#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: 8rem;
+    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;
+  }
+  .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;
+  }
+}

src/sass/views/onboarding/onboarding-collect-email.scss

@@ -1,3 +0,0 @@
-#onboarding-collect-email{
-  background: rgb(17,209,166);
-}

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 {