added styling and needed improvements to html organization on disclaimer view to create animation for terms display

src/js/controllers/onboarding/disclaimer.js

@@ -34,7 +34,7 @@ angular.module('copayApp.controllers').controller('disclaimerController', functi
   };
 
   $scope.openTerms = function() {
-    $scope.shrinkView = true;
+    $scope.shrinkView = !$scope.shrinkView;
   }
 
   $scope.goBack = function() {

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

@@ -1,9 +1,9 @@
 #onboarding-disclaimer {
   color: #fff;
   height: 100%;
-  transition: transform 1s ease;
+  transition: transform 2.5s ease;
   &.shrink{
-    transform: scale(.98);
+    transform: scale(.8);
   }
   &-container {
     max-width: 450px;
@@ -83,6 +83,41 @@
     left:0;
   }
 }
+#terms-of-use{
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 10;
+  transition: top 1s ease;
+  transition-delay: .25s;
+  width: 100%;
+  overflow: scroll;
+  background: #fff;
+  height: 100%;
+  ion-nav-bar{
+    position: fixed;
+    background: #fff;
+    width: 100%;
+    z-index: 15;
+  }
+  .has-header{
+    width:100%;
+    background:#fff;
+    overflow-y:scroll;
+    position:relative;
+    #terms{
+      max-width:400px;
+      padding-top:.5rem;
+      position: relative;
+      margin: 0 auto;
+      padding-bottom: 165px;
+      width:90%;
+    }
+  }
+  &.slideUp{
+    top:0;
+  }
+}
 #agree-to-terms {
   background: #fff;
   padding:1rem;
@@ -90,6 +125,7 @@
   bottom: 0;
   width: 100%;
   z-index: 10;
+  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
   &-content{
     max-width: 450px;
     @include center-block();

www/views/onboarding/disclaimer.html

@@ -10,7 +10,7 @@
     </ion-nav-bar>
     <ion-content scroll="false" ng-class="{'has-header': backedUp == 'false'}">
       <div id="onboarding-disclaimer-container">
-        <div ng-show="resume" class="onboarding-topic" id="disclaimer-topic" translate>Quick review! {{shrinkView}}</div>
+        <div ng-show="resume" class="onboarding-topic" id="disclaimer-topic" translate>Quick review!</div>
         <div ng-show="!resume" class="onboarding-topic" id="disclaimer-topic" translate>Almost done! Let's review.</div>
         <div class="onboarding-description" id="disclaimer-description" translate>Bitcoin is different &ndash; it cannot be safely held with a bank or web service.</div>
         <ion-list>
@@ -24,6 +24,20 @@
       </div>
     </ion-content>
   </ion-view>
+  <div id="terms-of-use" ng-class="{'slideUp': shrinkView}">
+    <ion-nav-bar class="bar-ligt">
+      <ion-nav-title>{{'Terms of Use' | translate}}</ion-nav-title>
+      <ion-nav-buttons side="primary">
+        <button class="button no-border" ng-click="openTerms()">
+          <i class="ion-ios-arrow-down"></i>
+        </button>
+      </ion-nav-buttons>
+    </ion-nav-bar>
+    <div class="has-header">
+      <div ng-include="'views/includes/terms.html'" direction="y"></div>
+    </div>
+  </div>
+</div>
   <div id="agree-to-terms" ng-if="accepted.first && accepted.second" ng-class="{'header-present': backedUp == 'false'}">
     <div id="agree-to-terms-content" class="center-block">
       <ion-checkbox ng-model="terms.accepted"></ion-checkbox>