Merge pull request #62 from jamal-jackson/feature/onboarding_last_steps

Onboarding disclaimer steps

public/views/onboarding/disclaimer.html

@@ -1,20 +1,20 @@
-<ion-view>
+<ion-view id="onboarding-disclaimer" class="onboarding">
   <ion-content ng-controller="disclaimerController" ng-init="accept1 = accept2 = accept3 = false">
-    <h1 translate>Almost done! Let's review</h1>
+    <div class="row text-center">
-    <span transalate>Bitcoin is different - it cannot be safely held with a bank or web service </span>
+      <h3 translate class="col-75 col">Almost done! Let's review</h3>
-    <ion-list class="disclaimer">
+    </div>
-      <ion-checkbox ng-model="accept1"><span translate>I undestand my funds are held securely on this device, not by company.</span></ion-checkbox>
+    <div class="row text-center">
-      <ion-checkbox ng-model="accept2"><span translate>I understand if this wallet is lost or deleted, my bitcoin can onlt be recovered with the backup phrase</span></ion-checkbox>
+      <p translate class="col col-75">
-      <ion-checkbox ng-model="accept3"><span translate>I have read, understood, and agree with the Terms of use.</span></ion-checkbox>
+        Bitcoin is different - it cannot be safely held with a bank or web service
-    </ion-list>
+      </p>
-    <div class="text-center">
+    </div>
-      <a ui-sref="onboarding.terms" translate>Terms of use</a>
+    <ion-list class="disclaimer">
+      <ion-checkbox ng-model="accept1"><span translate>I understand my funds are held securely on this device, not by a company.</span></ion-checkbox>
+      <ion-checkbox ng-model="accept2"><span translate>I understand if this wallet is lost or deleted, my bitcoin can only be recovered with the backup phrase.</span></ion-checkbox>
+    </ion-list>
+    <div id="agree-to-terms" ng-if="accept1&&accept2">
+      <ion-checkbox ng-model="accept3"></ion-checkbox><p translate>I have read, understood, and agree with the <a ui-sref="onboarding.terms" translate>Terms of use</a>.</p>
+      <button ng-disabled="!accept1 || !accept2 || !accept3" class="button button-block button-positive" ng-click="confirm()" translate>Confirm & Finish</button>
     </div>
-    <button
-      ng-disabled="!accept1 || !accept2 || !accept3"
-      class="button button-block button-positive"
-      ng-click="confirm()"
-      translate>Confirm & Finish
-    </button>
   </ion-content>
 </ion-view>

public/views/onboarding/terms.html

@@ -8,19 +8,14 @@
     </ion-nav-buttons>
   </ion-nav-bar>
   <ion-content ng-controller="termsController" ng-init="accept = false;">
-      <div ng-include="'views/includes/terms.html'"></div>
+    <div ng-include="'views/includes/terms.html'"></div>
-      <div class="padding-vertical" ng-show="lang != 'en'">
+    <div class="padding-vertical" ng-show="lang != 'en'">
-        <a ng-click="openExternalLink('https://copay.io/disclaimer')" translate>Official English Disclaimer</a>
+      <a ng-click="openExternalLink('https://copay.io/disclaimer')" translate>Official English Disclaimer</a>
-      </div>
+    </div>
-      <ion-list class="disclaimer">
+    <div id="agree-to-terms">
-        <ion-checkbox ng-model="accept"><span translate>I have read, understood, and agree with the Terms of Use</span></ion-checkbox>
+      <ion-checkbox ng-model="accept"></ion-checkbox>
-      </ion-list>
+      <p translate>I have read, understood, and agree with the <a ui-sref="onboarding.terms">Terms of use</a>.</p>
-      <button
+      <button ng-disabled="!accept" class="button button-block button-positive" ng-click="confirm()" translate>Confirm & Finish</button>
-        ng-disabled="!accept"
+    </div>
-        class="button button-block button-positive"
-        ng-click="confirm()"
-        translate>Confirm & Finish
-      </button>
-
   </ion-content>
 </ion-view>

src/sass/ionic.scss

@@ -2,6 +2,7 @@
 $font-family-sans-serif: "Roboto", sans-serif;
 $font-family-light-sans-serif: "Roboto-Light", sans-serif-light;
 $royal: #1e3186;
+$soft-blue: rgb(100,124,232);
 $base-background-color: #f5f5f5;
 
 

src/sass/main.scss

@@ -991,6 +991,7 @@ input[type=number] {
 
 @import "ionic";
 @import "common";
+@import "forms";
 @import 'mixins/mixins';
 @import "views/add";
 @import "views/tab-home";

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

@@ -0,0 +1,64 @@
+#onboarding-disclaimer {
+  color: #fff;
+  .item {
+    background: transparent;
+    border: none;
+    color: #fff;
+    .checkbox input:before,
+    .checkbox .checkbox-icon:before {
+      border-radius: 50% !important;
+      background: none;
+      border-width: 2px;
+      padding: .9rem;
+      position: relative;
+      left: -7px;
+      top: -8px;
+    }
+    .checkbox input:checked:before,
+    .checkbox input:checked + .checkbox-icon:before {
+      border-color: rgb(19, 229, 182);
+    }
+    .checkbox input:checked:after,
+    input:checked + .checkbox-icon:after {
+      border-color: rgb(19, 229, 182);
+    }
+    .item-content {
+      width: 90%;
+      margin-left: 6%;
+    }
+  }
+  .item-checkbox .checkbox {
+    margin-left: 3%;
+    top:44%;
+  }
+  #agree-to-terms{
+    background: #fff;
+    padding:1rem;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    .item{
+      color:rgb(58,58,58);
+      padding-bottom: 1.6rem;
+      float: left;
+      .item-content{
+        white-space: normal;
+      }
+    }
+    p{
+      color:rgb(58,58,58);
+    }
+    .checkbox input:before,
+    .checkbox .checkbox-icon:before{
+      border-color:$soft-blue;
+    }
+    .checkbox input:checked:before,
+    .checkbox input:checked + .checkbox-icon:before {
+      border-color: rgb(19, 229, 182);
+    }
+    button{
+      margin-top:1.5rem;
+      position: relative;
+    }
+  }
+}

src/sass/views/onboarding/onboarding.scss

@@ -76,3 +76,4 @@
 @import "onboard-collect-email";
 @import "onboard-backup-request";
 @import "onboard-backup-warning";
+@import "onboard-disclaimer";

src/sass/views/onboarding/terms-of-use.scss

@@ -1,17 +1,71 @@
-#terms-of-use{
+#terms-of-use {
-  ion-header-bar{
+  ion-header-bar {
     background: #fff;
     box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.2);
   }
   ion-content{
     padding-top: 1.5rem;
     color: rgba(86, 86, 86, 0.77);
-    p{
+    p {
-      padding:0 2.5%;
+      padding: 0 2.5%;
-      margin:2rem auto;
+      margin: 2rem auto;
-      &:first-child{
+      &:first-child {
-        margin-top:0;
+        margin-top: 0;
       }
     }
   }
+  #agree-to-terms {
+    background: #fff;
+    padding: 1rem;
+    position: relative;
+    .checkbox input:before,
+    .checkbox .checkbox-icon:before {
+      border-radius: 50% !important;
+      background: none;
+      border-width: 2px;
+      padding: .9rem;
+      position: relative;
+      left: -7px;
+      top: -8px;
+    }
+    .checkbox input:checked:before,
+    .checkbox input:checked + .checkbox-icon:before {
+      border-color: rgb(19, 229, 182);
+    }
+    .checkbox input:checked:after,
+    input:checked + .checkbox-icon:after {
+      border-color: rgb(19, 229, 182);
+    }
+    .item {
+      color: rgb(58, 58, 58);
+      padding-bottom: 1.2rem;
+      padding-bottom: 1.6rem;
+      float: left;
+      border: none;
+      width: 10%;
+      position: relative;
+      padding-right: 0;
+      top: 30px;
+      .item-content {
+        white-space: normal;
+      }
+    }
+    p {
+      color: rgb(58, 58, 58);
+      float: left;
+      width: 70%;
+    }
+    .checkbox input:before,
+    .checkbox .checkbox-icon:before {
+      border-color: $soft-blue;
+    }
+    .checkbox input:checked:before,
+    .checkbox input:checked + .checkbox-icon:before {
+      border-color: rgb(19, 229, 182);
+    }
+    button {
+      margin-top: 1.5rem;
+      position: relative;
+    }
+  }
 }