From e3634f63d1cf0a26af995cd3df60a84bea7068be Mon Sep 17 00:00:00 2001
From: Jamal Jackson <jamal@bitpay.com>
Date: Thu, 1 Sep 2016 08:51:48 -0400
Subject: [PATCH] finished on boarding tour ui improvements, started on wallet
 create

---
 public/views/onboarding/tour.html           | 72 ++++++++++++++-------
 src/sass/views/onboarding/onboard-tour.scss | 22 +++++++
 src/sass/views/onboarding/onboarding.scss   | 56 +++++++++++++++-
 3 files changed, 125 insertions(+), 25 deletions(-)
 create mode 100644 src/sass/views/onboarding/onboard-tour.scss

diff --git a/public/views/onboarding/tour.html b/public/views/onboarding/tour.html
index be57326b9..83de5dfff 100644
--- a/public/views/onboarding/tour.html
+++ b/public/views/onboarding/tour.html
@@ -1,9 +1,9 @@
-<ion-view ng-controller="tourController" ng-init="init()">
-  <ion-nav-bar class="bar-stable">
-    <ion-nav-title>Get Started</ion-nav-title>
+<ion-view ng-controller="tourController" ng-init="init()" class="onboarding" id="onboard-tour">
+  <ion-nav-bar>
+    <ion-nav-title></ion-nav-title>
     <ion-nav-buttons side="primary">
       <button class="button no-border" ng-click="goBack()">
-        <i class="icon ion-chevron-left"></i> Back
+        <i class="icon ion-arrow-left-c"></i>
       </button>
     </ion-nav-buttons>
     <ion-nav-buttons side="secondary">
@@ -14,48 +14,72 @@
   </ion-nav-bar>
   <ion-slides class="slides" options="options" slider="data.slider">
     <ion-slide-page>
-      <ion-content >
-        <div class="text-center">
-          <h2 translate>Bitcoin is digital money</h2>
-          <p translate>
+      <ion-content id="onboard-tour-secure">
+        <div class="text-center row">
+          <h2 class="col col-60" translate>Bitcoin is secure, digital money</h2>
+        </div>
+        <div class="text-center row">
+          <p translate class="col col-75 tagline">
             You can spend bitcoin at millions of websites and stores worldwide
           </p>
-          <p translate>
+        </div>
+        <div id="cta">
+        </div>
+        <div class="row text-center">
+          <p translate class="col">
             Just scan the code to pay
           </p>
-          <button class="button icon-right ion-chevron-right button-positive" ng-click="slideNext()">
-            Got it
+        </div>
+        <div class="row">
+          <button class="button button-positive col col-75 next-slide" ng-click="slideNext()">
+            Got it <i class="icon ion-arrow-right-c"></i>
           </button>
         </div>
       </ion-content>
     </ion-slide-page>
     <ion-slide-page>
-      <ion-content >
-        <div class="text-center">
-          <h2 translate>Bitcoin is currency</h2>
-          <p translate>
+      <ion-content id="onboard-tour-currency">
+        <div class="text-center row">
+          <h2 class="col col-75" translate>Bitcoin is a currency</h2>
+        </div>
+        <div class="text-center row">
+          <p translate class="col col-75 tagline">
             You can trade it for other currencies like US Dollars, Euros, or Pounds
           </p>
-          <p translate>
+        </div>
+        <div id="cta">
+        </div>
+        <div class="row text-center">
+          <p translate class="col">
             The exchange rate changes with the market
           </p>
-          <button class="button icon-right ion-chevron-right button-positive" ng-click="slideNext()">
-            Makes sense
+        </div>
+        <div class="row">
+          <button class="button button-positive col col-75 next-slide" ng-click="slideNext()">
+            Makes sense <i class="icon ion-arrow-right-c"></i>
           </button>
         </div>
       </ion-content>
     </ion-slide-page>
     <ion-slide-page>
-      <ion-content >
-        <div class="text-center">
-          <h2 translate>You control your bitcoin</h2>
-          <p translate>
+      <ion-content id="onboard-tour-control">
+        <div class="text-center row">
+          <h2 translate class="col col-75">You control your bitcoin</h2>
+        </div>
+        <div class="text-center row">
+          <p translate class="col col-75 tagline">
             The BitPay wallet stores your bitcoin with cutting-edge security
           </p>
-          <p translate>
+        </div>
+        <div id="cta">
+        </div>
+        <div class="row text-center">
+          <p translate class="col">
             Not even BitPay can access it
           </p>
-          <button class="button icon-right button-positive" ng-click="createProfile()">
+        </div>
+        <div class="row">
+          <button class="button button-positive col col-75 get-started" ng-click="createProfile()">
             Create bitcoin wallet
           </button>
         </div>
diff --git a/src/sass/views/onboarding/onboard-tour.scss b/src/sass/views/onboarding/onboard-tour.scss
new file mode 100644
index 000000000..1123a511a
--- /dev/null
+++ b/src/sass/views/onboarding/onboard-tour.scss
@@ -0,0 +1,22 @@
+#onboard-tour {
+  &-secure {
+    #cta {
+      background-image: url(../img/onboarding-tour-phone.svg);
+    }
+  }
+  &-currency {
+    #cta {
+      background-image: url(../img/onboarding-tour-currency-bg.svg);
+    }
+    .next-slide {
+      margin-top: 3rem;
+    }
+  }
+  &-control {
+    #cta {
+      background-image: url(../img/onboarding-tour-control.svg);
+      background-size: 70%;
+      background-position: top;
+    }
+  }
+}
diff --git a/src/sass/views/onboarding/onboarding.scss b/src/sass/views/onboarding/onboarding.scss
index 94b0df66f..72896549a 100644
--- a/src/sass/views/onboarding/onboarding.scss
+++ b/src/sass/views/onboarding/onboarding.scss
@@ -6,8 +6,62 @@
   background: -o-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
   background: -ms-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
   background: linear-gradient(to bottom, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
-  color:#fff;
+  color: #fff;
+  ion-header-bar {
+    background: rgb(30, 49, 134);
+    color: #fff;
+    button {
+      color: #fff;
+    }
+    .secondary-buttons {
+      button {
+        color: rgba(255, 255, 255, .5);
+      }
+    }
+  }
+  ion-content {
+    color: #fff;
+    .scroll {}
+    h2 {
+      color: #fff;
+      font-size: 1.8rem;
+    }
+    p {
+      &.tagline {
+        color: rgba(255, 255, 255, .5);
+      }
+    }
+    .col {
+      @include center-block(.5rem);
+    }
+    #cta {
+      background-size: contain;
+      width: 100%;
+      clear: both;
+      height: 20rem;
+      margin-bottom: -3rem;
+      background-position: center;
+      background-repeat: no-repeat;
+      img {
+        height: 16rem;
+      }
+    }
+    button {
+      &.next-slide {
+        background: rgba(215, 215, 215, 0.10);
+      }
+    }
+  }
+  .swiper-pagination {
+    &-bullet {
+      background: rgb(100, 124, 232);
+      &-active {
+        background: rgb(100, 124, 232);
+      }
+    }
+  }
 }
 
 @import "terms-of-use";
 @import "onboard-welcome";
+@import "onboard-tour";