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

www/css/main.css

@@ -15074,6 +15074,9 @@ log-options #check-bar .checkbox-icon {
     /* iOS 11.0 */
     margin-bottom: env(safe-area-inset-bottom);
     /* iOS 11.2 */ }
+  #view-review .fee-summary {
+    position: absolute;
+    bottom: 92px; }
 
 .gravatar {
   border-radius: 3px;
@@ -15127,6 +15130,9 @@ ion-content.bg-neutral {
 ion-content.padded-bottom-cta {
   bottom: 92px; }
 
+ion-content.padded-bottom-cta-with-summary {
+  bottom: 134px; }
+
 .card.card-gutter-compact {
   margin: 10px 12px; }
 
@@ -15212,6 +15218,47 @@ ion-content.padded-bottom-cta {
       opacity: 1;
       transform: scale(1, 1); }
 
+.fee-summary {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 5px 12px 15px;
+  box-sizing: border-box;
+  background-color: #F2F2F2; }
+  .fee-summary:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: -15px;
+    width: 100%;
+    height: 15px;
+    background: linear-gradient(to bottom, rgba(242, 242, 242, 0) 0%, #f2f2f2 100%); }
+  .fee-summary .fee-fiat.positive {
+    color: #70955F; }
+  .fee-summary .fee-fiat.negative {
+    color: #C24633; }
+  .fee-summary .fee-crypto {
+    color: #BCBCBC; }
+
+.amount .start,
+.amount .middle,
+.amount .end,
+.amount .currency {
+  display: inline-block; }
+
+.amount .start {
+  font-size: 14px; }
+
+.amount .middle {
+  font-size: 11px; }
+
+.amount .end {
+  font-size: 11px; }
+
+.amount .currency {
+  font-size: 14px; }
+
 /* This is for rules that don't yet have a home.
  * Our goal is to delete this file. Search the regex: /class=".*CLASS.*?"/
  */

www/views/includes/amount.html

@@ -0,0 +1,6 @@
+<div class="amount">
+  <span class="start">{{start}}</span>
+  <span class="middle">{{middle}}</span>
+  <span class="end">{{end}}</span>
+  <span class="currency">{{currency}}</span>
+</div>

www/views/review.html

@@ -7,7 +7,7 @@
     </ion-nav-back-button>
   </ion-nav-bar>
 
-  <ion-content class="padded-bottom-cta bg-neutral"
+  <ion-content class="padded-bottom-cta-with-summary bg-neutral"
     ng-init="memoExpanded = false">
     <div class="header">
       <div class="content" translate>
@@ -63,6 +63,17 @@
       </div>
     </div>
   </ion-content>
+
+  <div class="fee-summary">
+    <div class="fee-fiat positive">Fee: Less than 1 cent</div>
+    <div class="fee-crypto"
+      ng-init="fee = {value: '0.00195823', currency: 'BCH'};">
+      <amount
+        value="fee.value"
+        currency="fee.currency"></amount>
+    </div>
+  </div>
+
   <click-to-accept
     ng-click="approve(tx, wallet, statusChangeHandler)"
     ng-if="(!isCordova || isWindowsPhoneApp) && wallet"