From 0c0ccbd10514019413ea4acde2200bb3a548da10 Mon Sep 17 00:00:00 2001
From: Jason Dreyzehner <jason@dreyzehner.com>
Date: Tue, 4 Oct 2016 22:21:43 -0400
Subject: [PATCH] design(collectEmail): improve animations and layout

---
 public/views/onboarding/collectEmail.html     | 28 ++++------
 src/sass/variables.scss                       |  3 +-
 .../onboarding/onboard-collect-email.scss     | 54 +++++++++++++------
 3 files changed, 51 insertions(+), 34 deletions(-)

diff --git a/public/views/onboarding/collectEmail.html b/public/views/onboarding/collectEmail.html
index 465fe84b8..2e6659e17 100644
--- a/public/views/onboarding/collectEmail.html
+++ b/public/views/onboarding/collectEmail.html
@@ -1,33 +1,25 @@
 <ion-view ng-controller="collectEmailController" id="onboarding-collect-email" class="onboarding">
   <ion-content>
-    <div class="row">
+    <div class="success-message">
       <img src="img/onboarding-success.svg" class="col col-75" id="success-image" />
-    </div>
-    <div class="row text-center">
-      <h3 translate class="col">Wallet Created</h3>
+      <h3 translate>Wallet Created</h3>
     </div>
     <div id="collect-email">
       <div ng-if="!confirmation">
-        <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="confirm(emailForm)" novalidate>
-          <label class="item item-input col col-75">
+        <span translate class="prompt">Where would you like to receive email notifications about payments?</span>
+        <form id="email-form" name="emailForm" ng-submit="confirm(emailForm)" novalidate>
+          <label class="item item-input">
             <i class="icon ion-arrow-right-c"></i>
-            <input type="email" id="email" name="email" ng-model="email" placeholder="satoshi@example.com" 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" class="row">
-          <ion-checkbox ng-model="data.accept" class="col col-80"><span translate>Get news and updates from Bitpay</span></ion-checkbox>
+        <ion-list id="news-updates">
+          <ion-checkbox ng-model="data.accept"><span translate>Get news and updates from BitPay</span></ion-checkbox>
         </ion-list>
       </div>
       <div ng-if="confirmation">
-        <div class="row text-center">
-          <p translate class="col col-75">Is this email address correct?</p>
-        </div>
-        <div class="row text-center">
-          <p class="col col-75">{{email}}</p>
-        </div>
+          <p translate class="confirm">Is this email address correct?</p>
+          <p class="user-email">{{email}}</p>
         <div class="row">
           <div class="col col-50">
             <button class="button button-block button-stable" ng-click="cancel()">
diff --git a/src/sass/variables.scss b/src/sass/variables.scss
index f5b4a227b..a725ea5e5 100644
--- a/src/sass/variables.scss
+++ b/src/sass/variables.scss
@@ -10,6 +10,7 @@ $mid-gray: #667;
 $light-gray: #9b9bab;
 $subtle-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
 $hovering-box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);
+$visible-radius: 6px;
 
 /* Set ionic variables */
 
@@ -20,7 +21,7 @@ $font-size-small: 12px;
 $font-family-sans-serif: $roboto;
 $font-family-light-sans-serif: $roboto-light;
 
-$button-border-radius: 6px;
+$button-border-radius: $visible-radius;
 $button-height: 52px;
 $button-padding: 16px;
 
diff --git a/src/sass/views/onboarding/onboard-collect-email.scss b/src/sass/views/onboarding/onboard-collect-email.scss
index f88175c67..c8b39836a 100644
--- a/src/sass/views/onboarding/onboard-collect-email.scss
+++ b/src/sass/views/onboarding/onboard-collect-email.scss
@@ -1,3 +1,5 @@
+$relish-success: 1.3s;
+
 #onboarding-collect-email {
   background: rgb(17, 209, 166);
   .overlay {
@@ -13,33 +15,46 @@
     margin-top: 0;
     height: 101%;
   }
-  .scroll {
-    height: 100%;
+  .success-message {
+    top: 30vh;
+    position: relative;
+    animation-name: slideUp;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in;
+    animation-duration: .5s;
+    animation-delay: $relish-success;
+    animation-fill-mode: forwards;
   }
   #success-image {
-    margin-top: 4rem;
-    height: 10rem;
-  }
-  .col {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
+    width: 8rem;
+    margin: 0 auto;
   }
   .collect-overlay {
    animation-name: opacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: .2s;
-   animation-delay: .8s;
+   animation-delay: $relish-success;
    animation-fill-mode: forwards;
    opacity: 0;
    button {
      position: absolute;
-     right: 11px;
+     right: 0;
    }
- }
- .collect-overlay{
-   top:-1px;
- }
+  }
+  .collect-overlay {
+    top:-1px;
+  }
+  .prompt {
+    padding: 2rem 2rem 1rem;
+    display: block;
+  }
+  #email-form {
+    margin: 0 2rem 1rem;
+  }
+  #email-input {
+    border-radius: $visible-radius;
+  }
   #collect-email {
     opacity: 1;
     background: #fff;
@@ -49,7 +64,7 @@
     animation-iteration-count: 1;
     animation-timing-function: ease-in;
     animation-duration: .4s;
-    animation-delay: 1s;
+    animation-delay: $relish-success + .2s;
     position: absolute;
     bottom: -14rem;
     animation-fill-mode: forwards;
@@ -176,3 +191,12 @@
     opacity: 1;
   }
 }
+
+@keyframes slideUp {
+  0% {
+    top: 30vh;
+  }
+  100% {
+    top: 10vh;
+  }
+}