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

2 files changed, 56 insertions, 23 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', {
diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index a14da2d70..eec17ec2b 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -89,12 +89,10 @@ input:focus, textarea:focus {
   background-color: #02C9B1; // TODO: reusable color in colors.css
 }
 
+
 button.btn-clear {
-  width: 100px;
-  height: 50px;
   background: white;
   border: 1px solid;
-  font-size: .7em;
 }
 
 // No longer used in flat design, remove when modal buttons done
@@ -795,6 +793,14 @@ div.message-container > div:first-child {
     width: 85%;
     height: 90vh;
   }
+
+  button.btn-clear {
+    width: 75px;
+    height: 32px;
+    font-size: .6em;
+    background: white;
+    border: 1px solid;
+  }
 }
 
 @media screen and (min-width: 769px) {
@@ -828,4 +834,12 @@ div.message-container > div:first-child {
     width: 100%;
     height: 100%
   }
+
+  button.btn-clear {
+    width: 100px;
+    height: 50px;
+    font-size: .7em;
+    background: white;
+    border: 1px solid;
+  }
 }
\ No newline at end of file