Merge branch 'ref/design' of https://github.com/bitpay/bitpay-wallet into feature/onboarding_backup_phrase

# Conflicts:
#	public/views/includes/confirmBackupPopup.html
#	src/js/controllers/backup.js

src/sass/views/onboarding/onboard-backup-request.scss

@@ -8,4 +8,50 @@
   #arrow-down{
     font-size: 4.2rem;
   }
+  .cta-buttons{
+    width:100%;
+    float:none;
+    position: absolute;
+    bottom: 0;
+  }
+}
+
+@media (max-width: 400px){
+  #onboarding-backup-request{
+    .warning{
+      margin: 2rem auto 1rem;
+      height: 8rem;
+    }
+    h3{
+      font-size:1.3rem;
+    }
+    p{
+      font-size:.9rem;
+      max-width: 80%;
+      flex: 0 0 80%;
+    }
+    .cta-buttons{
+      float:none;
+      bottom:0;
+      position: absolute;
+      button{
+        max-width: 400px;
+      }
+    }
+  }
+}
+@media (max-height: 540px){
+  #onboarding-backup-request{
+    .cta-buttons{
+      float:left;
+      position: relative;
+    }
+  }
+}
+@media (min-height: 980px){
+  #onboarding-backup-request{
+    #arrow-down{
+      margin-top: 15rem;
+    }
+  }
 }

src/sass/views/onboarding/onboard-backup-warning.scss

@@ -8,4 +8,46 @@
   #arrow-down{
     font-size: 4.2rem;
   }
+  .cta-buttons{
+    float:none;
+    bottom:46px;
+    position: absolute;
+    width:100%;
+    button{
+      max-width: 400px;
+    }
+  }
+}
+
+@media (max-width: 400px){
+  #onboarding-backup-warning{
+    .warning{
+      margin: 2rem auto 1rem;
+      height: 8rem;
+    }
+    h3{
+      font-size:1.3rem;
+    }
+    p{
+      font-size:.9rem;
+      max-width: 80%;
+      flex: 0 0 80%;
+    }
+    .warning-image{
+      height: 11rem;
+    }
+    .cta-buttons{
+      float:none;
+      bottom:46px;
+      position: absolute;
+    }
+  }
+}
+@media (max-height: 540px){
+  #onboarding-backup-warning{
+    .cta-buttons{
+      float:left;
+      position: relative;
+    }
+  }
 }

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

@@ -14,25 +14,22 @@
     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-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;
+   button {
+     position: absolute;
+     right: 11px;
+   }
+ }
+ .collect-overlay{
+   top:-1px;
+ }
   #collect-email {
     opacity: 1;
     background: #fff;
@@ -52,10 +49,7 @@
     label {
       background: rgba(200, 200, 200, 0.20);
       height: 3rem;
-      margin-top: 0;
-      input {
-        position: absolute;
-      }
+      margin-top:0;
       i {
         position: absolute;
         right: 3%;
@@ -64,6 +58,19 @@
     }
   }
 }
+@media (min-width: 1000px){
+  #onboarding-collect-email{
+    #collect-email{
+      p, form{
+        max-width: 600px;
+        @include center-block();
+      }
+      form{
+        margin-top:.5rem;
+      }
+    }
+  }
+}
 
 @keyframes topBottom {
   0% {

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

@@ -23,6 +23,10 @@
       background-position: top;
     }
   }
+  .cta-button{
+    position: absolute;
+    bottom: 85px;
+  }
 }
 
 @media (max-width: 400px){
@@ -34,3 +38,22 @@
     }
   }
 }
+
+@media (min-width: 1000px){
+  #onboard-tour{
+    p, h2, h3{
+      max-width: 600px;
+    }
+    button{
+      max-width: 400px;
+    }
+    #cta{
+      margin: 2rem 0 0;
+    }
+    &-control{
+      #cta{
+        margin-bottom: 2rem;
+      }
+    }
+  }
+}

src/sass/views/onboarding/onboarding.scss

@@ -81,6 +81,12 @@
       h2{
         font-size: 1.2rem;
       }
+      p,h2,h3{
+        max-width: 600px !important;
+      }
+      button{
+        max-width: 400px !important; 
+      }
     }
   }
 }