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

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;
+  }
 }