From 0ad4e390bbfe9f930cad78c9800147ba750526d7 Mon Sep 17 00:00:00 2001
From: Jamal Jackson <jamal@bitpay.com>
Date: Tue, 6 Sep 2016 10:43:54 -0400
Subject: [PATCH] finished terms of use page

---
 public/views/onboarding/terms.html            | 23 +++---
 .../views/onboarding/onboard-disclaimer.scss  |  4 +-
 src/sass/views/onboarding/terms-of-use.scss   | 74 ++++++++++++++++---
 3 files changed, 76 insertions(+), 25 deletions(-)

diff --git a/public/views/onboarding/terms.html b/public/views/onboarding/terms.html
index 775c14fdb..ba89b5cdf 100644
--- a/public/views/onboarding/terms.html
+++ b/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 class="padding-vertical" ng-show="lang != 'en'">
-        <a ng-click="$root.openExternalLink('https://copay.io/disclaimer')" translate>Official English Disclaimer</a>
-      </div>
-      <ion-list class="disclaimer">
-        <ion-checkbox ng-model="accept"><span translate>I have read, understood, and agree with the Terms of Use</span></ion-checkbox>
-      </ion-list>
-      <button
-        ng-disabled="!accept"
-        class="button button-block button-positive"
-        ng-click="confirm()"
-        translate>Confirm & Finish
-      </button>
-
+    <div ng-include="'views/includes/terms.html'"></div>
+    <div class="padding-vertical" ng-show="lang != 'en'">
+      <a ng-click="$root.openExternalLink('https://copay.io/disclaimer')" translate>Official English Disclaimer</a>
+    </div>
+    <div id="agree-to-terms">
+      <ion-checkbox ng-model="accept"></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="!accept" class="button button-block button-positive" ng-click="confirm()" translate>Confirm & Finish</button>
+    </div>
   </ion-content>
 </ion-view>
diff --git a/src/sass/views/onboarding/onboard-disclaimer.scss b/src/sass/views/onboarding/onboard-disclaimer.scss
index 8584ee74c..90ed82ae5 100644
--- a/src/sass/views/onboarding/onboard-disclaimer.scss
+++ b/src/sass/views/onboarding/onboard-disclaimer.scss
@@ -36,9 +36,11 @@
     padding:1rem;
     position: absolute;
     bottom: 0;
+    width: 100%;
     .item{
       color:rgb(58,58,58);
-      padding-bottom: 1.2rem;
+      padding-bottom: 1.6rem;
+      float: left;
       .item-content{
         white-space: normal;
       }
diff --git a/src/sass/views/onboarding/terms-of-use.scss b/src/sass/views/onboarding/terms-of-use.scss
index 981408c7d..07e9023da 100644
--- a/src/sass/views/onboarding/terms-of-use.scss
+++ b/src/sass/views/onboarding/terms-of-use.scss
@@ -1,17 +1,71 @@
-#terms-of-use{
-  ion-header-bar{
+#terms-of-use {
+  ion-header-bar {
     background: #fff;
     box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.2);
   }
-  ion-content{
-    margin-top:1.5rem;
+  ion-content {
+    margin-top: 1.5rem;
     color: rgba(86, 86, 86, 0.77);
-    p{
-      padding:0 2.5%;
-      margin:2rem auto;
-      &:first-child{
-        margin-top:0;
+    p {
+      padding: 0 2.5%;
+      margin: 2rem auto;
+      &:first-child {
+        margin-top: 0;
       }
     }
   }
-} 
\ No newline at end of file
+  #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;
+    }
+  }
+}