updated and fixed issues with collect email view styling, moved skip button to top right

public/views/onboarding/collectEmail.html

@@ -1,4 +1,11 @@
 <ion-view ng-controller="collectEmailController" id="onboarding-collect-email" class="onboarding">
+<ion-nav-bar class="bar-overlay">
+    <ion-nav-buttons side="right">
+      <button class="button button-block button-positive button-clear" ng-click="onboardingMailSkip()">
+        {{'Skip' | translate}}
+      </button>
+    </ion-nav-buttons>
+  </ion-nav-bar>
   <ion-content>
     <div class="row">
       <img src="img/onboarding-success.svg" class="col col-75" id="success-image" />
@@ -8,18 +15,15 @@
     </div>
     <div id="collect-email">
     <div class="row text-center">
-        <p translate class="col col-75">Where would you like to receive email notifications about payments </p>
+      <p translate class="col col-75 center-block">Where would you like to receive email notifications about payments? </p>
     </div>
     <form name="emailForm" ng-submit="save(emailForm)" novalidate>
-        <label class="item item-input col col-75">
+      <label class="item item-input col col-75 center-block">
         <i class="icon ion-arrow-right-c"></i>
-          <input type="email" id="email" name="email" ng-model="email" required></input>
+        <input type="email" id="email" name="email" ng-model="email" placeholder="satoshi@example.com" required></input>
       </label>
     </form>
-      <button class="button button-block button-positive button-clear" ng-click="onboardingMailSkip()">
-        {{'Skip' | translate}}
-      </button>
   </div>
-    <div class="overlay"></div>
+  <div class="overlay collect-overlay"></div>
   </ion-content>
 </ion-view>

src/sass/mixins/layout.scss

@@ -2,3 +2,7 @@
   float:none;
   margin: $topBottom auto;
 }
+
+.center-block{
+  @include center-block();
+}

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-duration: .4s;
-    animation-delay: 2s;
+    animation-delay: 1s;
     position: absolute;
     bottom: -14rem;
     animation-fill-mode: forwards;
@@ -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;
   }
 }