From ffa8aa39ce1e76662f7a90cca4f0afeb8e0565bd Mon Sep 17 00:00:00 2001
From: Jason Dreyzehner <jason@dreyzehner.com>
Date: Thu, 20 Oct 2016 23:59:03 -0400
Subject: [PATCH] feat(card): polish design of bitpay card intro view

---
 src/js/controllers/bitpayCardIntro.js |  5 ++
 src/sass/views/bitpayCardIntro.scss   | 79 +++++++++++----------------
 www/views/bitpayCardIntro.html        | 29 +++++-----
 3 files changed, 50 insertions(+), 63 deletions(-)

diff --git a/src/js/controllers/bitpayCardIntro.js b/src/js/controllers/bitpayCardIntro.js
index 79eef65e5..eba3fb910 100644
--- a/src/js/controllers/bitpayCardIntro.js
+++ b/src/js/controllers/bitpayCardIntro.js
@@ -59,6 +59,11 @@ angular.module('copayApp.controllers').controller('bitpayCardIntroController', f
     }
   });
 
+  $scope.bitPayCardInfo = function() {
+    var url = 'https://bitpay.com/visa/faq';
+    externalLinkService.open(url);
+  };
+
   $scope.orderBitPayCard = function() {
     var url = 'https://bitpay.com/visa/get-started';
     externalLinkService.open(url);
diff --git a/src/sass/views/bitpayCardIntro.scss b/src/sass/views/bitpayCardIntro.scss
index 3ce232b0f..a70a73105 100644
--- a/src/sass/views/bitpayCardIntro.scss
+++ b/src/sass/views/bitpayCardIntro.scss
@@ -1,70 +1,55 @@
 #bitpayCard-intro {
-  .slider-pager .slider-pager-page {
-    color: #fff;
-  }
-  .cta-button{
+  background: url(../img/onboarding-welcome-bg.png), linear-gradient(to bottom, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
+  background-position: top center;
+  background-size: contain;
+  background-repeat: no-repeat;
+  color: #fff;
+  .cta-button {
     text-align: center;
     position: absolute;
     bottom: 55px;
     padding: 0 1.5rem;
     width: 100%;
   }
-  background: rgba(30, 49, 134, 1);
-  background: -moz-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
-  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(30, 49, 134, 1)), color-stop(100%, rgba(17, 27, 73, 1)));
-  background: -webkit-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
-  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;
   height: 100%;
   .bar.bar-header {
-    background: rgb(30, 49, 134);
-    color: #fff;
-    button {
-      color: #fff;
-    }
-    .secondary-buttons {
-      button {
-        color: rgba(255, 255, 255, .5);
-      }
-    }
+    background: transparent none;
+    border: 0 none transparent;
   }
   .bar.bar-stable{
     border-color: transparent;
     border:none;
   }
-  .button-transparent{
-    background: none !important;
-  }
-  .button-translucent{
-    background: rgba(215, 215, 215, 0.1)
-  }
-  .button-primary{
-    background: rgb(100, 124, 232) !important;
-    color:#fff;
-  }
-  .light-blue{
-    color:rgb(100, 124, 232);
-  }
-  .text-white{
-    color: #ffffff;
+  .bitpayCard {
+    &__illustration {
+      padding: 2rem;
+      &__img {
+        width: 100%;
+        max-width: 400px;
+      }
+    }
+    &__info:before {
+      font-size: 22px;
+      line-height: 22px;
+      margin-top: 6px;
+    }
   }
   ion-content {
-    background: url(../img/onboarding-welcome-bg.png);
-    background-position: top center;
-    background-size: contain;
-    background-repeat: repeat-x;
     height: 100%;
     .scroll{
       height: 100%;
     }
-    color: #fff;
-    p {
-      text-align: center;
-      margin: 40px 20px;
-      font-size: 1.2rem;
-      color: rgba(255, 255, 255, .5);
-    }
+  }
+  .slider__text {
+    text-align: center;
+    margin: 40px 20px;
+    font-size: 1rem;
+    color: rgba(255, 255, 255, .7);
+  }
+  .slider-pager .slider-pager-page {
+    color: $soft-blue;
+    font-size: 8px;
+    margin: 0;
   }
 }
diff --git a/www/views/bitpayCardIntro.html b/www/views/bitpayCardIntro.html
index 09c384147..9ab7319b9 100644
--- a/www/views/bitpayCardIntro.html
+++ b/www/views/bitpayCardIntro.html
@@ -1,43 +1,40 @@
-<ion-view id="bitpayCard-intro" hide-tabs>
-  <ion-nav-bar class="bar-stable">
+<ion-view id="bitpayCard-intro" class="onboarding" hide-tabs>
+  <ion-nav-bar>
     <ion-nav-back-button>
     </ion-nav-back-button>
     <ion-nav-title></ion-nav-title>
     <ion-nav-buttons side="secondary">
-      <button class="button back-button button-clear" ng-click="orderBitPayCard()">
-        <i class="icon ion-ios-information-outline"></i>
+      <button class="button button-clear" ng-click="bitPayCardInfo()">
+        <i class="icon ion-ios-information-outline bitpayCard__info"></i>
       </button>
     </ion-nav-buttons>
   </ion-nav-bar>
   <ion-content scroll="false">
-    <div class="text-center padding">
-      <img src="img/bitpay-card-visa.svg" width="100%">
+    <div class="bitpayCard__illustration">
+      <img class="bitpayCard__illustration__img" src="img/bitpay-card-visa.svg">
     </div>
     <ion-slide-box>
       <ion-slide>
-        <p translate>
-        Turn bitcoin into dollars, swipe anywhere Visa&reg; is accepted.
+        <p class="slider__text" translate>
+        Turn bitcoin into dollars, swipe anywhere Visa<sup>&reg;</sup> is accepted.
         </p>
       </ion-slide>
       <ion-slide>
-        <p translate>
-        <span translate>Get local cash anywhere you go, from any Visa&reg;-compatible ATM.</span>
-        <div translate class="size-10 text-center">
-          *ATM bank fees may apply
-        </div>
+        <p class="slider__text" translate>
+        <span translate>Get local cash anywhere you go, from any Visa<sup>&reg;</sup> compatible ATM. ATM bank fees may apply.</span>
         </p>
       </ion-slide>
       <ion-slide>
-        <p translate>
+        <p class="slider__text" translate>
         Pay 0% fees to turn bitcoin into dollars.
         </p>
       </ion-slide>
     </ion-slide-box>
     <div class="cta-button">
-      <button class="button button-block button-primary" ng-click="orderBitPayCard()" translate>
+      <button class="button button-standard button-primary" ng-click="orderBitPayCard()" translate>
         Order the BitPay Card
       </button>
-      <button class="button button-block button-transparent text-white m10t" ng-click="connectBitPayCard()" translate>
+      <button class="button button-standard button-secondary button-clear" ng-click="connectBitPayCard()" translate>
         Connect my BitPay Card
       </button>
     </div>