Adds fee-summary bar, adds amount directive, adds support for fee-summary overlapping with content on scrollable small screens

src/js/directives/amount.js

@@ -0,0 +1,21 @@
+'use strict';
+angular.module('bitcoincom.directives')
+    .directive('amount', [
+    '$timeout',
+    function($timeout) {
+        return {
+            restrict: 'E',
+            scope: {
+              value: '=',
+              currency: '='
+            },
+            templateUrl: 'views/includes/amount.html',
+            controller: ['$scope', function($scope) {
+                var valueFormatted = parseFloat($scope.value).toFixed(8);
+                $scope.start = valueFormatted.slice(0, -5);
+                $scope.middle = valueFormatted.slice(-5, -2);
+                $scope.end = valueFormatted.substr(valueFormatted.length - 2);
+            }]
+        };
+    }
+]);

src/sass/components/amount.scss

@@ -0,0 +1,24 @@
+.amount {
+  .start,
+  .middle,
+  .end,
+  .currency {
+    display: inline-block;
+  }
+
+  .start {
+    font-size: 14px;
+  }
+
+  .middle {
+    font-size: 11px;
+  }
+
+  .end {
+    font-size: 11px;
+  }
+
+  .currency {
+    font-size: 14px;
+  }
+}

src/sass/components/components.scss

@@ -7,3 +7,5 @@
 @import "address";
 @import "action-minor";
 @import "expand-content";
+@import "fee-summary";
+@import "amount";

src/sass/components/fee-summary.scss

@@ -0,0 +1,33 @@
+.fee-summary {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 5px 12px 15px;
+  box-sizing: border-box;
+  background-color: #F2F2F2;
+
+  &:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: -15px;
+    width: 100%;
+    height: 15px;
+    background: linear-gradient(to bottom, rgba(242,242,242,0) 0%,rgba(242,242,242,1) 100%);
+  }
+
+  .fee-fiat {
+    &.positive {
+      color: #70955F;
+    }
+
+    &.negative {
+      color: #C24633;
+    }
+  }
+
+  .fee-crypto {
+    color: #BCBCBC;
+  }
+}

src/sass/components/ion-content.scss

@@ -10,4 +10,8 @@ ion-content {
   &.padded-bottom-cta {
     bottom: 92px;
   }
+
+  &.padded-bottom-cta-with-summary {
+    bottom: 134px;
+  }
 }

src/sass/views/review.scss

@@ -5,4 +5,9 @@
     margin-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
     margin-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */
   }
+
+  .fee-summary {
+    position: absolute;
+    bottom: 92px;
+  }
 }