From be927da487e0487167199163714fd78a61d1b510 Mon Sep 17 00:00:00 2001
From: Jamal Jackson <jamal@bitpay.com>
Date: Fri, 9 Sep 2016 09:47:53 -0400
Subject: [PATCH 1/4] fixed backup request view for iPhone5 size devices

---
 public/views/onboarding/backupRequest.html    | 14 ++++----
 .../onboarding/onboard-backup-request.scss    | 35 +++++++++++++++++++
 2 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/public/views/onboarding/backupRequest.html b/public/views/onboarding/backupRequest.html
index f7099033f..0284f8bdf 100644
--- a/public/views/onboarding/backupRequest.html
+++ b/public/views/onboarding/backupRequest.html
@@ -16,12 +16,14 @@
     <div class="row text-center">
       <i class="ion-ios-arrow-thin-down light-blue col col-60" id="arrow-down"></i>
     </div>
-    <div class="row">
-      <button class="button button-block button-positive col-75 col" href
-              ui-sref="onboarding.backupWarning({walletId: walletId})" translate>Backup wallet</button>
-    </div>
-    <div class="row">
-      <button class="button button-block button-transparent col-75 col" ng-click="openPopup()" translate>I'll backup my wallet later</button>
+    <div class="cta-buttons">
+      <div class="row">
+        <button class="button button-block button-positive col-75 col" href
+                ui-sref="onboarding.backupWarning({walletId: walletId})" translate>Backup wallet</button>
+      </div>
+      <div class="row">
+        <button class="button button-block button-transparent col-75 col" ng-click="openPopup()" translate>I'll backup my wallet later</button>
+      </div>
     </div>
   </ion-content>
 </ion-view>
diff --git a/src/sass/views/onboarding/onboard-backup-request.scss b/src/sass/views/onboarding/onboard-backup-request.scss
index 0ad4d641d..ee4358655 100644
--- a/src/sass/views/onboarding/onboard-backup-request.scss
+++ b/src/sass/views/onboarding/onboard-backup-request.scss
@@ -8,4 +8,39 @@
   #arrow-down{
     font-size: 4.2rem;
   }
+  .cta-buttons{
+    width:100%;
+    float:left;
+    position: relative;
+  }
+}
+
+@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;
+    }
+  }
+}
+@media (max-height: 540px){
+  #onboarding-backup-request{
+    .cta-buttons{
+      float:left;
+      position: relative;
+    }
+  }
 }
\ No newline at end of file

From 3af5405340b7d24aebffbf3aa153a7d8fa947489 Mon Sep 17 00:00:00 2001
From: Jamal Jackson <jamal@bitpay.com>
Date: Fri, 9 Sep 2016 10:05:35 -0400
Subject: [PATCH 2/4] cleaned up backup warning view on iPhone5

---
 public/views/onboarding/backupWarning.html    |  6 +--
 .../onboarding/onboard-backup-warning.scss    | 37 +++++++++++++++++++
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/public/views/onboarding/backupWarning.html b/public/views/onboarding/backupWarning.html
index d3406fb13..19f21d0ac 100644
--- a/public/views/onboarding/backupWarning.html
+++ b/public/views/onboarding/backupWarning.html
@@ -8,7 +8,7 @@
   </ion-nav-bar>
   <ion-content>
     <div class="row text-center">
-      <h3 translate class="col col-75">
+      <h3 translate class="col col-80">
         Are you being watched?
       </h3>
     </div>
@@ -18,14 +18,14 @@
       </p>
     </div>
     <div class="row">
-      <img src="img/onboarding-backup-warning.svg" class="col col-60">
+      <img src="img/onboarding-backup-warning.svg" class="col col-60 warning-image">
     </div>
     <div class="row text-center">
       <p class="col col-60">
         Anyone with your backup phrase can access or spend your bitcoin.
       </p>
     </div>
-    <div class="row">
+    <div class="cta-buttons">
       <button class="button button-block button-primary col col-75" ng-click="openPopup()" translate>All clear, let's do this</button>
     </div>
   </ion-content>
diff --git a/src/sass/views/onboarding/onboard-backup-warning.scss b/src/sass/views/onboarding/onboard-backup-warning.scss
index 0ee7b5c1b..860c341ed 100644
--- a/src/sass/views/onboarding/onboard-backup-warning.scss
+++ b/src/sass/views/onboarding/onboard-backup-warning.scss
@@ -8,4 +8,41 @@
   #arrow-down{
     font-size: 4.2rem;
   }
+  .cta-buttons{
+    float:left;
+    width:100%;
+  }
+}
+
+@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;
+    }
+  }
 }
\ No newline at end of file

From 91a216cf0dbc5e7826ba24d7f461ccdf4ff3567a Mon Sep 17 00:00:00 2001
From: Jamal Jackson <jamal@bitpay.com>
Date: Fri, 9 Sep 2016 13:47:27 -0400
Subject: [PATCH 3/4] onboarding backup desktop stylings updates

---
 public/views/onboarding/tour.html             |  8 +++----
 .../onboarding/onboard-backup-request.scss    | 15 ++++++++++--
 .../onboarding/onboard-backup-warning.scss    |  7 +++++-
 .../onboarding/onboard-collect-email.scss     | 13 +++++++++++
 src/sass/views/onboarding/onboard-tour.scss   | 23 +++++++++++++++++++
 5 files changed, 59 insertions(+), 7 deletions(-)

diff --git a/public/views/onboarding/tour.html b/public/views/onboarding/tour.html
index 8df77f256..d4be4de4a 100644
--- a/public/views/onboarding/tour.html
+++ b/public/views/onboarding/tour.html
@@ -30,7 +30,7 @@
             Just scan the code to pay
           </p>
         </div>
-        <div class="row">
+        <div class="row cta-button">
           <button class="button button-positive col col-75 next-slide" ng-click="slideNext()">
             Got it <i class="icon ion-ios-arrow-thin-right"></i>
           </button>
@@ -54,9 +54,9 @@
             The exchange rate changes with the market
           </p>
         </div>
-        <div class="row">
+        <div class="row cta-button">
           <button class="button button-positive col col-75 next-slide" ng-click="slideNext()">
-            Makes sense <i class="icon ion-arrow-right-c"></i>
+            Makes sense <i class="icon ion-ios-arrow-thin-right"></i>
           </button>
         </div>
       </ion-content>
@@ -78,7 +78,7 @@
             Not even BitPay can access it
           </p>
         </div>
-        <div class="row">
+        <div class="row cta-button">
           <button class="button button-positive col col-75 get-started" ng-click="createDefaultWallet()">
             Create bitcoin wallet
           </button>
diff --git a/src/sass/views/onboarding/onboard-backup-request.scss b/src/sass/views/onboarding/onboard-backup-request.scss
index ee4358655..8ed5a36d8 100644
--- a/src/sass/views/onboarding/onboard-backup-request.scss
+++ b/src/sass/views/onboarding/onboard-backup-request.scss
@@ -10,8 +10,9 @@
   }
   .cta-buttons{
     width:100%;
-    float:left;
-    position: relative;
+    float:none;
+    position: absolute;
+    bottom: 0;
   }
 }
 
@@ -33,6 +34,9 @@
       float:none;
       bottom:0;
       position: absolute;
+      button{
+        max-width: 400px;
+      }
     }
   }
 }
@@ -43,4 +47,11 @@
       position: relative;
     }
   }
+}
+@media (min-height: 980px){
+  #onboarding-backup-request{
+    #arrow-down{
+      margin-top: 15rem;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/sass/views/onboarding/onboard-backup-warning.scss b/src/sass/views/onboarding/onboard-backup-warning.scss
index 860c341ed..7eaeacbca 100644
--- a/src/sass/views/onboarding/onboard-backup-warning.scss
+++ b/src/sass/views/onboarding/onboard-backup-warning.scss
@@ -9,8 +9,13 @@
     font-size: 4.2rem;
   }
   .cta-buttons{
-    float:left;
+    float:none;
+    bottom:46px;
+    position: absolute;
     width:100%;
+    button{
+      max-width: 400px;
+    }
   }
 }
 
diff --git a/src/sass/views/onboarding/onboard-collect-email.scss b/src/sass/views/onboarding/onboard-collect-email.scss
index 125d21a93..3cc60ce01 100644
--- a/src/sass/views/onboarding/onboard-collect-email.scss
+++ b/src/sass/views/onboarding/onboard-collect-email.scss
@@ -64,6 +64,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% {
diff --git a/src/sass/views/onboarding/onboard-tour.scss b/src/sass/views/onboarding/onboard-tour.scss
index ddb13b75e..b955d6c53 100644
--- a/src/sass/views/onboarding/onboard-tour.scss
+++ b/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;
+      }
+    }
+  }
+}

From ae1cdf4d03d2ed57b9b9f18bf8716a6d2220a43f Mon Sep 17 00:00:00 2001
From: Jamal Jackson <jamal@bitpay.com>
Date: Fri, 9 Sep 2016 14:01:39 -0400
Subject: [PATCH 4/4] added global max-width to on boarding view

---
 src/sass/views/onboarding/onboarding.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/sass/views/onboarding/onboarding.scss b/src/sass/views/onboarding/onboarding.scss
index 0c5522ac3..c84b0e3df 100644
--- a/src/sass/views/onboarding/onboarding.scss
+++ b/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; 
+      }
     }
   }
 }