design(collectEmail): start polishing collectEmail view

app-template/config-template.xml

@@ -20,7 +20,8 @@
     <preference name="ShowSplashScreenSpinner" value="false" />
     <preference name="AutoHideSplashScreen" value="false" />
     <preference name="FadeSplashScreen" value="true" />
-    <preference name="FadeSplashScreenDuration" value="1" />
+    <preference name="FadeSplashScreenDuration" value=".3" />
+    <preference name="KeyboardDisplayRequiresUserAction" value="false" />
     <preference name="StatusBarOverlaysWebView" value="true" />
     <preference name="StatusBarBackgroundColor" value="#1e3186" />
     <preference name="StatusBarStyle" value="lightcontent" />

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

@@ -2,27 +2,11 @@ $relish-success: 1.3s;
 
 #onboarding-collect-email {
   background: rgb(17, 209, 166);
-  .overlay {
+
-    position: absolute;
+  #success-container {
-    top:0;
+    top: 41vh;
-    left:0;
-    width:100%;
-    height: 100%;
-    background: rgba(0,0,0,.4);
-    z-index: 4;
-  }
-  .scroll-content {
-    margin-top: 0;
-    height: 101%;
-  }
-  .scroll {
-    height: 100%;
-    transform: translate3d(0px, 0px, 0px) scale(1) !important;
-  }
-  .success-message {
-    top: 30vh;
     position: relative;
-    animation-name: slideUp;
+    animation-name: emailCollectSlideUp;
     animation-iteration-count: 1;
     animation-timing-function: ease-in;
     animation-duration: .5s;
@@ -30,103 +14,80 @@ $relish-success: 1.3s;
     animation-fill-mode: forwards;
   }
   #success-image {
-    width: 8rem;
+    width: 13vh;
-    margin: 0 auto;
+    margin: 0 auto 2vh;
+  }
+  #success-message {
+    font-size: 3vh;
   }
   .collect-overlay {
-   animation-name: opacity;
+    position: absolute;
-   animation-iteration-count: 1;
+    top:0;
-   animation-timing-function: ease-in;
+    left:0;
-   animation-duration: .2s;
+    width:100%;
-   animation-delay: $relish-success;
+    height: 100%;
-   animation-fill-mode: forwards;
+    background: rgba(0,0,0,.4);
-   opacity: 0;
+    z-index: 4;
-   button {
+    animation-name: emailCollectOpacity;
-     position: absolute;
+    animation-iteration-count: 1;
-     right: 0;
+    animation-timing-function: ease-in;
-   }
+    animation-duration: .2s;
+    animation-delay: $relish-success;
+    animation-fill-mode: forwards;
+    opacity: 0;
+    button {
+      position: absolute;
+      right: 0;
+    }
   }
-  .collect-overlay {
+  .heading {
-    top:-1px;
+    color: $dark-gray;
+    font-size: 1.2rem;
+    font-weight: bold;
+    margin: 3rem 0 1rem;
   }
   .prompt {
-    padding: 2rem 2rem 1rem;
+    margin: 1rem 1.5rem;
-    display: block;
+    color: $mid-gray;
   }
   #email-form {
-    margin: 0 2rem 1rem;
+    margin: 0 1.5rem 1rem;
   }
-  #email-input {
+  #email-label {
     border-radius: $visible-radius;
+    background: rgba(200, 200, 200, 0.20);
+    height: 3rem;
+    margin-top:0;
   }
   #collect-email {
     opacity: 1;
     background: #fff;
-    color: rgb(108, 108, 108);
+    height: 25rem;
-    height: 14rem;
     animation-name: topBottom;
     animation-iteration-count: 1;
     animation-timing-function: ease-in;
     animation-duration: .4s;
     animation-delay: $relish-success + .2s;
     position: absolute;
-    bottom: -14rem;
+    bottom: -100%;
     animation-fill-mode: forwards;
     z-index: 5;
     margin-top: 0;
     width: 100%;
-    form {
+  }
-      label {
+  #collect-email-inner {
-        background: rgba(200, 200, 200, 0.20);
+    max-width: 400px;
-        height: 3rem;
+    margin: 0 auto;
-        margin-top:0;
+  }
-        i {
+
-          position: absolute;
+
-          right: 3%;
+
-          top: 1rem;
+  #news-updates {
-        }
+    padding-top: 0;
-      }
-    }
-    #news-updates{
-      padding-top:0;
-      .list{
-        max-width: 310px;
-        text-align: center;
-        width: 100%;
-        @include center-block();
-        label{
-          display: inline-block;
-          margin-top: 0;
-          padding-bottom: 1rem;
-          .checkbox{
-            left:0;
-            margin-left:0;
-          }
-          .item-content{
-            margin-left: 12%;
-            position: relative;
-            font-size:.8rem;
-          }
-        }
-        @media (min-width: 415px){
-          &{
-            max-width: 400px;
-            label{
-              .checkbox{
-                left:1rem;
-              }
-              .item-content{
-                font-size: 1rem;
-              }
-            }
-          }
-        }
-      }
-    }
   }
   .item {
     border: none;
-    label{
+    label {
       background: none;
     }
     .checkbox input:before,
@@ -134,29 +95,34 @@ $relish-success: 1.3s;
       border-radius: 50% !important;
       background: none;
       border-width: 2px;
-      padding: .9rem;
+      padding: 12px;
       position: relative;
-      left: -7px;
+      right: 5px;
-      top: -8px;
+      bottom: 5px;
     }
     .checkbox input:checked:after,
     input:checked + .checkbox-icon:after {
       border-color: rgb(19, 229, 182);
-      top:20%;
+      top: 4px;
-      left:11%;
+      left: 6px;
     }
     .item-content {
-      width: 90%;
+      color: $mid-gray;
-      margin-left: 10%;
+      text-align: left;
+      margin-left: 75px;
+      white-space: initial;
     }
   }
+  .item-checkbox {
+    padding: 1rem 0;
+    margin: 1rem 0;
+  }
   .item-checkbox .checkbox {
-    margin-left: 10%;
+    margin-left: 15px;
-    top: 55%;
   }
   .checkbox input:before,
   .checkbox .checkbox-icon:before{
-    border-color:$soft-blue;
+    border-color: $soft-blue;
   }
   .checkbox input:checked:before,
   .checkbox input:checked + .checkbox-icon:before {
@@ -164,43 +130,17 @@ $relish-success: 1.3s;
   }
 }
 
-@media (min-width: 1000px){
-  #onboarding-collect-email{
-    #collect-email{
-      p, form{
-        max-width: 600px;
-        @include center-block();
-      }
-      form{
-        margin-top:.5rem;
-      }
-    }
-  }
-}
-
 @keyframes topBottom {
-  0% {
+  0% { bottom: -100%; }
-    bottom: -100%;
+  100% { bottom: 0; }
-  }
-  100% {
-    bottom: 0;
-  }
 }
 
-@keyframes opacity {
+@keyframes emailCollectOpacity {
-  0% {
+  0% { opacity: 0; }
-    opacity: 0;
+  100% { opacity: 1; }
-  }
-  100% {
-    opacity: 1;
-  }
 }
 
-@keyframes slideUp {
+@keyframes emailCollectSlideUp {
-  0% {
+  0% { top: 41vh; }
-    top: 30vh;
+  100% { top: calc((100vh - 20rem) / 2 - 11vh);}
-  }
-  100% {
-    top: 10vh;
-  }
 }

src/sass/views/onboarding/onboard-tour.scss

@@ -11,17 +11,21 @@
   .onboarding-topic,
   .onboarding-description,
   .onboarding-tldr {
-    margin: 1rem 3rem .5rem;
+    margin-left: 3rem;
+    margin-right: 3rem;
   }
   .onboarding-topic {
     font-size: 24px;
+    margin-top: .5rem;
   }
   .onboarding-description {
+    margin-top: 1rem;
     font-size: 16px;
     color: rgba(255,255,255,0.5);
   }
   .onboarding-tldr {
     font-size: 18px;
+    margin-top: 1rem;
     margin-bottom: 1em;
   }
   #onboarding-illustration-currency-exchange-rate {

www/views/onboarding/collectEmail.html

@@ -1,21 +1,22 @@
 <ion-view ng-controller="collectEmailController" id="onboarding-collect-email" class="onboarding">
-  <ion-content>
+  <ion-content scroll="false">
-    <div class="success-message">
+    <div id="success-container">
-      <img src="img/onboarding-success.svg" class="col col-75" id="success-image" />
+      <img src="img/onboarding-success.svg" id="success-image" />
-      <h3 translate>Wallet Created</h3>
+      <div id="success-message" translate>Wallet Created</div>
     </div>
     <div id="collect-email">
-      <div ng-if="!confirmation">
+      <div id="collect-email-inner" ng-if="!confirmation">
-        <span translate class="prompt">Where would you like to receive email notifications about payments?</span>
+        <div translate class="heading">Email Notifications</div>
+        <div translate class="prompt">Where would you like to receive email notifications about payments?</div>
         <form id="email-form" name="emailForm" ng-submit="confirm(emailForm)" novalidate>
-          <label class="item item-input">
+          <label class="item item-input" id="email-label">
-            <i class="icon ion-arrow-right-c"></i>
+            <input type="email" name="email" ng-model="email" placeholder="email address" required></input>
-            <input type="email" id="email-input" name="email" ng-model="email" placeholder="satoshi@example.com" required></input>
           </label>
-        </form>
-        <ion-list id="news-updates">
           <ion-checkbox ng-model="data.accept"><span translate>Get news and updates from BitPay</span></ion-checkbox>
-        </ion-list>
+          <button class="button button-block button-primary" disabled>
+            Continue &rarr;
+          </button>
+        </form>
       </div>
       <div ng-if="confirmation">
           <p translate class="confirm">Is this email address correct?</p>