Add rough layout for flat layout tx details, add notes for breakpoints

1 files changed, 39 insertions, 20 deletions

diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index b2799a65f..dc9a7985f 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -56,42 +56,61 @@ TxView.prototype.render = function () {
     }, [
     ]),
 
-    h('div.flex-row.flex-wrap', {
+    h('div.flex-row', {
       style: {
         margin: '1.8em 1.3em 0.8em 1.3em',
-        flex: '1 0 auto',
+        // flex: '1 0 520px',
       }
     }, [
 
-      h('div.flex-column.flex-center', {
+      // laptop: flex-row
+      // mobile: flex-column
+      h('div.flex-row.flex-center', {
         style: {
-          width: '100%',
         }
       }, [
 
-        h('div', {}, 'ETH LOGO'),
-
-        h('div', {}, '1001.124 ETH'),
+        // laptop: 50px 50px
+        // mobile: 100px 100px
+        h('img', {
+          src: '../images/eth_logo.svg',
+          width: '50px',
+          height: '50px',
+          style: {
+            borderRadius: '25px',
+            border: '1px solid',
+          }
+        }),
 
-        h('div', {}, '$300,000 USD'),
+        // laptop: 5vw?
+        // phone: 50vw?
+        h('div.flex-column.flex-center', {
+          style: {}
+        }, [
+          h('div', {}, '1001.124 ETH'),
 
-      ]),
+          h('div', {}, '$300,000 USD'),
+        ]),
 
-      h('div.flex-row.flex-center', {
-        style: {
-          width: '100%',
-        }
-      }, [
-        h('button.btn-clear', {
-          textAlign: 'center'
-        }, 'BUY'),
+        // laptop: 10vw?
+        // phone: 75vw?
+        h('div.flex-row.flex-center', {
+          style: {
+            width: '100%',
+          }
+        }, [
+          h('button.btn-clear', {
+            textAlign: 'center'
+          }, 'BUY'),
 
-        h('button.btn-clear', {
-          textAlign: 'center'
-        }, 'SEND'),
+          h('button.btn-clear', {
+            textAlign: 'center'
+          }, 'SEND'),
 
+        ]),
       ]),
 
+
     ]),
 
     h('div.flex-row', {