Add TxView, use width percentages instead of flex-grow for layout

3 files changed, 61 insertions, 5 deletions

diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
new file mode 100644
index 000000000..b10589035
--- /dev/null
+++ b/ui/app/components/tx-view.js
@@ -0,0 +1,53 @@
+const Component = require('react').Component
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+// const Identicon = require('./identicon')
+// const AccountDropdowns = require('./account-dropdowns').AccountDropdowns
+// const Content = require('./wallet-content-display')
+
+module.exports = connect()(TxView)
+
+// function mapStateToProps (state) {
+//   return {
+//     network: state.metamask.network,
+//   }
+// }
+
+inherits(TxView, Component)
+function TxView () {
+  Component.call(this)
+}
+
+TxView.prototype.render = function () {
+  return h('div.tx-view.flex-column', {
+    style: {
+      width: '66.666%',
+      height: '82vh',
+      background: '#FFFFFF',
+    }
+  }, [
+    h('div.flex-row', {
+    }, [
+      // tab
+      h('div.flex-column', {
+
+      }, [
+        h('div', {}, 'Transactions'),
+        h('div', {
+          style: {
+            height: '0.5em',
+            color: 'black',
+            width: '100%',
+          }
+        })
+      ]),
+
+      // tab2
+    ])
+  ])
+  // column
+  // tab row
+  // divider
+  // item
+}
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index e61346290..b8ea633db 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -28,7 +28,7 @@ WalletView.prototype.render = function () {
 
   return h('div.wallet-view.flex-column', {
     style: {
-      flexGrow: 1,
+      width: '33.333%',
       height: '82vh',
       background: '#FAFAFA', // TODO: add to reusable colors
     }
diff --git a/ui/app/main-container.js b/ui/app/main-container.js
index cc61860b6..88028f8eb 100644
--- a/ui/app/main-container.js
+++ b/ui/app/main-container.js
@@ -2,6 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const WalletView = require('./components/wallet-view')
+const TxView = require('./components/tx-view')
 
 module.exports = MainContainer
 
@@ -20,6 +21,7 @@ MainContainer.prototype.render = function () {
       zIndex: 20,
       boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
       fontFamily: 'DIN OT',
+      display: 'flex',
     }
   }, [
     h(WalletView, {
@@ -30,11 +32,12 @@ MainContainer.prototype.render = function () {
     }, [
     ]),
 
-    h('div.tx-view', {
+    h(TxView, {
       style: {
-        width: '66.66%',
-        height: '82vh',
-        background: '#FFFFFF',
+        // flexGrow: 2
+        // width: '66.66%',
+        // height: '82vh',
+        // background: '#FFFFFF',
       }
     }, [
     ]),