From d2b5a70d931fc5e399106f93f2ccc1a3ef25d8aa Mon Sep 17 00:00:00 2001
From: Jamal Jackson <jamal@bitpay.com>
Date: Thu, 8 Sep 2016 15:41:44 -0400
Subject: [PATCH 1/2] updated and fixed issues with collect email view styling,
 moved skip button to top right

---
 public/views/onboarding/collectEmail.html     | 30 +++++++------
 src/sass/mixins/layout.scss                   |  4 ++
 .../onboarding/onboard-collect-email.scss     | 44 ++++++++++++-------
 3 files changed, 50 insertions(+), 28 deletions(-)

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 @@
 <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" />
@@ -7,19 +14,16 @@
       <h3 translate class="col">Wallet Created</h3>
     </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>
-      </div>
-      <form name="emailForm" ng-submit="save(emailForm)" novalidate>
-        <label class="item item-input col col-75">
-          <i class="icon ion-arrow-right-c"></i>
-          <input type="email" id="email" name="email" ng-model="email" required></input>
-        </label>
-      </form>
-      <button class="button button-block button-positive button-clear" ng-click="onboardingMailSkip()">
-        {{'Skip' | translate}}
-      </button>
+    <div class="row text-center">
+      <p translate class="col col-75 center-block">Where would you like to receive email notifications about payments? </p>
     </div>
-    <div class="overlay"></div>
+    <form name="emailForm" ng-submit="save(emailForm)" novalidate>
+      <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" placeholder="satoshi@example.com" required></input>
+      </label>
+    </form>
+  </div>
+  <div class="overlay collect-overlay"></div>
   </ion-content>
 </ion-view>
diff --git a/src/sass/mixins/layout.scss b/src/sass/mixins/layout.scss
index 71affb4b8..c55eb4932 100644
--- a/src/sass/mixins/layout.scss
+++ b/src/sass/mixins/layout.scss
@@ -1,4 +1,8 @@
 @mixin center-block($topBottom: 0) {
   float:none;
   margin: $topBottom auto;
+}
+
+.center-block{
+  @include center-block();
 }
\ 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
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;
   }
 }

From cb7125b15a811a25703884a01ed1af8224e2f657 Mon Sep 17 00:00:00 2001
From: Jamal Jackson <jamal@bitpay.com>
Date: Thu, 8 Sep 2016 15:42:19 -0400
Subject: [PATCH 2/2] fixed stylings on welcome and tour page for iPhone5

---
 src/sass/common.scss                           |  4 ++++
 src/sass/views/onboarding/onboard-tour.scss    | 10 ++++++++++
 src/sass/views/onboarding/onboard-welcome.scss |  5 +++--
 src/sass/views/onboarding/onboarding.scss      | 10 ++++++++++
 4 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/sass/common.scss b/src/sass/common.scss
index cb13008c2..52d021c1e 100644
--- a/src/sass/common.scss
+++ b/src/sass/common.scss
@@ -63,6 +63,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-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";