Implement hero balance UI, mobile

3 files changed, 92 insertions, 51 deletions

diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index 75c8a2c11..77ca87834 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -91,65 +91,52 @@ TxView.prototype.render = function () {
 
     ]),
 
-    h('div.flex-row', {
-      style: {
-        margin: '1.8em 0.9em 0.8em 0.9em',
-        // flex: '1 0 520px',
-      }
+    // laptop: flex-row, flex-center
+    // mobile: flex-column
+    h('div.hero-balance', {
+      style: {},
     }, [
 
-      // laptop: flex-row
-      // mobile: flex-column
-      h('div.flex-row.flex-center', {
-        style: {
-        }
-      }, [
-
-        // laptop: 50px 50px
-        // mobile: 100px 100px
-        h('img', {
-          src: '../images/eth_logo.svg',
-          width: '50px',
-          height: '50px',
-          style: {
-            borderRadius: '25px',
-            border: '1px solid',
-          }
-        }),
-
-        // laptop: 5vw?
-        // phone: 50vw?
-        h('div.flex-column.flex-center', {
+      // laptop: 50px 50px
+      // mobile: 100px 100px
+      h('img.hero-balance-icon', {
+        src: '../images/eth_logo.svg',
+        width: '60px',
+        height: '60px',
+        style: {}
+      }),
+
+      // laptop: 5vw?
+      // phone: 50vw?
+      h('div.hero-balance-display', {}, [
+        h('div.token-amount', {
           style: {}
-        }, [
-          h('div', {}, '1001.124 ETH'),
+        }, '1001.124 ETH'),
 
-          h('div', {}, '$300,000 USD'),
-        ]),
+        h('div.fiat-amount', {
+          style: {}
+        }, '$300,000 USD'),
+      ]),
 
-        // laptop: 10vw?
-        // phone: 75vw?
-        h('div.flex-row.flex-center', {
+      // laptop: 10vw?
+      // phone: 75vw?
+      h('div.flex-row.flex-center.hero-balance-buttons', {
+        style: {}
+      }, [
+        h('button.btn-clear', {
           style: {
-            width: '100%',
-          }
-        }, [
-          h('button.btn-clear', {
-            style: {
-              textAlign: 'center',
-            },
-          }, 'BUY'),
-
-          h('button.btn-clear', {
-            style: {
-              textAlign: 'center',
-            },
-          }, 'SEND'),
-
-        ]),
-      ]),
+            textAlign: 'center',
+          },
+        }, 'BUY'),
 
+        h('button.btn-clear', {
+          style: {
+            textAlign: 'center',
+            marginLeft: '1.4em',
+          },
+        }, 'SEND'),
 
+      ]),
     ]),
 
     h('div.flex-row', {
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
new file mode 100644
index 000000000..8c4d886cb
--- /dev/null
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -0,0 +1,53 @@
+$break-small: 575px;
+$break-large: 576px;
+
+.hero-balance {
+  @media screen and (max-width: $break-small) {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 0.3em 0.9em 0.8em;
+  }
+
+  @media screen and (min-width: $break-large) {
+  }
+
+  .hero-balance-display {
+    @media screen and (max-width: $break-small) {
+      text-align: center;
+    }
+
+    @media screen and (min-width: $break-large) {
+    }
+
+    .token-amount {
+      font-size: 1.8em;
+      margin-top: 1em;
+    }
+
+    .fiat-amount {
+      font-size: 1.1em;
+      margin-top: 0.8em;
+      color: #A0A0A0;
+      // TODO: colors
+    }
+  }
+
+  .hero-balance-icon {
+    border-radius: 30px;
+    // TODO: colors
+    border: 1px solid #DEDEDE; 
+  }
+
+  .hero-balance-buttons {
+    @media screen and (max-width: $break-small) {
+      width: 100%;
+      margin-top: 1.3em;
+    }
+
+    @media screen and (min-width: $break-large) {
+    }
+
+  }
+}
\ No newline at end of file
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index acd3dc108..8b6698eed 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -4,4 +4,5 @@
 @import './identicon.scss';
 @import './network.scss';
 @import './newui-sections.scss';
+@import './hero-balance.scss';
 @import './sections.scss';