From 155ea281d8ede8cc8c619a339aa4d389684e5431 Mon Sep 17 00:00:00 2001
From: Sam Cheng Hung <samchenghung@gmail.com>
Date: Wed, 18 Jul 2018 17:24:13 +0800
Subject: [PATCH] Adds header component

---
 src/sass/components/components.scss |  1 +
 src/sass/components/header.scss     | 36 +++++++++++++++++++++++++++++
 src/sass/main.scss                  |  1 +
 www/css/main.css                    | 24 +++++++++++++++++++
 www/views/review.html               |  8 ++++++-
 5 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 src/sass/components/components.scss
 create mode 100644 src/sass/components/header.scss

diff --git a/src/sass/components/components.scss b/src/sass/components/components.scss
new file mode 100644
index 000000000..833f565dd
--- /dev/null
+++ b/src/sass/components/components.scss
@@ -0,0 +1 @@
+@import "header";
diff --git a/src/sass/components/header.scss b/src/sass/components/header.scss
new file mode 100644
index 000000000..1c178dd07
--- /dev/null
+++ b/src/sass/components/header.scss
@@ -0,0 +1,36 @@
+.header {
+  padding: 29px 12px 65px;
+  background-color: #FAB915;
+  color: #FFFFFF;
+
+  .title {
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1em;
+    color: #FFFFFF;
+    text-align: center;
+
+    + .content {
+      margin-top: 23px;
+    }
+  }
+
+  .content {
+    text-align: center;
+
+    p {
+      margin: 0;
+      line-height: 1em;
+      font-size: 18px;
+
+      &.large {
+        font-size: 29px;
+        font-weight: 600;
+      }
+
+      + p {
+        margin-top: 8px;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/sass/main.scss b/src/sass/main.scss
index 7b3e46291..516656449 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -9,4 +9,5 @@
 @import "mixins/mixins";
 @import "views/views";
 @import "directives/directives";
+@import "components/components";
 @import "shame";
diff --git a/www/css/main.css b/www/css/main.css
index a87bc4be9..2e2726888 100644
--- a/www/css/main.css
+++ b/www/css/main.css
@@ -15066,6 +15066,30 @@ log-options #check-bar .checkbox-icon {
   border-radius: 3px;
   display: inline-block; }
 
+.header {
+  padding: 29px 12px 65px;
+  background-color: #FAB915;
+  color: #FFFFFF; }
+  .header .title {
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1em;
+    color: #FFFFFF;
+    text-align: center; }
+    .header .title + .content {
+      margin-top: 23px; }
+  .header .content {
+    text-align: center; }
+    .header .content p {
+      margin: 0;
+      line-height: 1em;
+      font-size: 18px; }
+      .header .content p.large {
+        font-size: 29px;
+        font-weight: 600; }
+      .header .content p + p {
+        margin-top: 8px; }
+
 /* This is for rules that don't yet have a home.
  * Our goal is to delete this file. Search the regex: /class=".*CLASS.*?"/
  */
diff --git a/www/views/review.html b/www/views/review.html
index d68eca05b..cc57c79b8 100644
--- a/www/views/review.html
+++ b/www/views/review.html
@@ -8,7 +8,13 @@
   </ion-nav-bar>
 
   <ion-content class="add-bottom-for-cta">
-    Review
+    <div class="header">
+      <h1 class="title" translate>You are sending</h1>
+      <div class="content" translate>
+        <p class="large">13.98 USD</p>
+        <p>0.014 BCH</p>
+      </div>
+    </div>
   </ion-content>
   <click-to-accept
     ng-click="approve(tx, wallet, statusChangeHandler)"