Implement hero balance UI, mobile

ui/app/components/tx-view.js

@@ -91,65 +91,52 @@ TxView.prototype.render = function () {
 
     ]),
 
-    h('div.flex-row', {
+    // laptop: flex-row, flex-center
-      style: {
+    // mobile: flex-column
-        margin: '1.8em 0.9em 0.8em 0.9em',
+    h('div.hero-balance', {
-        // flex: '1 0 520px',
+      style: {},
-      }
     }, [
 
-      // laptop: flex-row
+      // laptop: 50px 50px
-      // mobile: flex-column
+      // mobile: 100px 100px
-      h('div.flex-row.flex-center', {
+      h('img.hero-balance-icon', {
-        style: {
+        src: '../images/eth_logo.svg',
-        }
+        width: '60px',
-      }, [
+        height: '60px',
+        style: {}
+      }),
 
-        // laptop: 50px 50px
+      // laptop: 5vw?
-        // mobile: 100px 100px
+      // phone: 50vw?
-        h('img', {
+      h('div.hero-balance-display', {}, [
-          src: '../images/eth_logo.svg',
+        h('div.token-amount', {
-          width: '50px',
-          height: '50px',
-          style: {
-            borderRadius: '25px',
-            border: '1px solid',
-          }
-        }),
-
-        // laptop: 5vw?
-        // phone: 50vw?
-        h('div.flex-column.flex-center', {
           style: {}
-        }, [
+        }, '1001.124 ETH'),
-          h('div', {}, '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', {
-          style: {
-            width: '100%',
-          }
-        }, [
-          h('button.btn-clear', {
-            style: {
-              textAlign: 'center',
-            },
-          }, 'BUY'),
-
-          h('button.btn-clear', {
-            style: {
-              textAlign: 'center',
-            },
-          }, 'SEND'),
-
-        ]),
       ]),
 
+      // laptop: 10vw?
+      // phone: 75vw?
+      h('div.flex-row.flex-center.hero-balance-buttons', {
+        style: {}
+      }, [
+        h('button.btn-clear', {
+          style: {
+            textAlign: 'center',
+          },
+        }, 'BUY'),
 
+        h('button.btn-clear', {
+          style: {
+            textAlign: 'center',
+            marginLeft: '1.4em',
+          },
+        }, 'SEND'),
+
+      ]),
     ]),
 
     h('div.flex-row', {

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) {
+    }
+
+  }
+}

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';