Lots of flex rearrangement on account detail view

Includes removal of ReactCssTransitionGroup for a simpler UI refactor.

5 files changed, 58 insertions, 52 deletions

diff --git a/ui/app/components/loading.js b/ui/app/components/loading.js
index 87d6f5d20..92d17ccd6 100644
--- a/ui/app/components/loading.js
+++ b/ui/app/components/loading.js
@@ -1,7 +1,6 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
-const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
 
 
 inherits(LoadingIndicator, Component)
@@ -15,35 +14,27 @@ LoadingIndicator.prototype.render = function () {
   const { isLoading, loadingMessage } = this.props
 
   return (
-    h(ReactCSSTransitionGroup, {
-      className: 'css-transition-group',
-      transitionName: 'loader',
-      transitionEnterTimeout: 150,
-      transitionLeaveTimeout: 150,
+    isLoading ? h('div', {
+      style: {
+        zIndex: 10,
+        position: 'absolute',
+        flexDirection: 'column',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100%',
+        width: '100%',
+        background: 'rgba(255, 255, 255, 0.8)',
+      },
     }, [
+      h('img', {
+        src: 'images/loading.svg',
+      }),
 
-      isLoading ? h('div', {
-        style: {
-          zIndex: 10,
-          position: 'absolute',
-          flexDirection: 'column',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          height: '100%',
-          width: '100%',
-          background: 'rgba(255, 255, 255, 0.8)',
-        },
-      }, [
-        h('img', {
-          src: 'images/loading.svg',
-        }),
-
-        h('br'),
-
-        showMessageIfAny(loadingMessage),
-      ]) : null,
-    ])
+      h('br'),
+
+      showMessageIfAny(loadingMessage),
+    ]) : null
   )
 }
 
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index e0a720426..76a265d63 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -2,7 +2,6 @@ const PersistentForm = require('../../lib/persistent-form')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
-const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
 const actions = require('../actions')
 const Qr = require('./qr-code')
 const isValidAddress = require('../util').isValidAddress
@@ -24,14 +23,7 @@ function ShapeshiftForm () {
 }
 
 ShapeshiftForm.prototype.render = function () {
-  return h(ReactCSSTransitionGroup, {
-    className: 'css-transition-group',
-    transitionName: 'main',
-    transitionEnterTimeout: 300,
-    transitionLeaveTimeout: 300,
-  }, [
-    this.props.qrRequested ? h(Qr, {key: 'qr'}) : this.renderMain(),
-  ])
+  return this.props.qrRequested ? h(Qr, {key: 'qr'}) : this.renderMain()
 }
 
 ShapeshiftForm.prototype.renderMain = function () {
diff --git a/ui/app/components/tab-bar.js b/ui/app/components/tab-bar.js
index 6295e7dd9..bef444a48 100644
--- a/ui/app/components/tab-bar.js
+++ b/ui/app/components/tab-bar.js
@@ -21,6 +21,7 @@ TabBar.prototype.render = function () {
         background: '#EBEBEB',
         color: '#AEAEAE',
         paddingTop: '4px',
+        minHeight: '30px',
       },
     }, tabs.map((tab) => {
       const { key, content } = tab
diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js
index 20cfa897e..79ec3f351 100644
--- a/ui/app/components/token-list.js
+++ b/ui/app/components/token-list.js
@@ -47,10 +47,11 @@ TokenList.prototype.render = function () {
     return h(TokenCell, tokenData)
   })
 
-  return h('div', [
-    h('ol', {
+  return h('.full-flex-height', [
+    this.renderTokenStatusBar(),
+
+    h('ol.full-flex-height.flex-column', {
       style: {
-        height: '260px',
         overflowY: 'auto',
         display: 'flex',
         flexDirection: 'column',
@@ -63,6 +64,7 @@ TokenList.prototype.render = function () {
           flex-direction: row;
           align-items: center;
           padding: 10px;
+          min-height: 50px;
         }
 
         li.token-cell > h3 {
@@ -76,17 +78,35 @@ TokenList.prototype.render = function () {
 
       `),
       ...tokenViews,
-      tokenViews.length ? null : this.message('No Tokens Found.'),
+      h('.flex-grow'),
     ]),
-    this.addTokenButtonElement(),
   ])
 }
 
-TokenList.prototype.addTokenButtonElement = function () {
-  return h('div', [
-    h('div.footer.hover-white.pointer', {
+TokenList.prototype.renderTokenStatusBar = function () {
+  const { tokens } = this.state
+
+  let msg
+  if (tokens.length > 0) {
+    msg = `You own ${tokens.length} tokens`
+  } else {
+    msg = `No tokens found`
+  }
+
+  return h('div', {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      minHeight: '70px',
+      padding: '10px',
+    },
+  }, [
+    h('span', msg),
+    h('button', {
       key: 'reveal-account-bar',
-      onClick: () => {
+      onClick: (event) => {
+        event.preventDefault()
         this.props.addToken()
       },
       style: {
@@ -97,7 +117,7 @@ TokenList.prototype.addTokenButtonElement = function () {
         alignItems: 'center',
       },
     }, [
-      h('i.fa.fa-plus.fa-lg'),
+      'ADD TOKEN',
     ]),
   ])
 }
diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js
index ae6aaec8c..192931486 100644
--- a/ui/app/components/transaction-list.js
+++ b/ui/app/components/transaction-list.js
@@ -24,9 +24,9 @@ TransactionList.prototype.render = function () {
 
   return (
 
-    h('section.transaction-list', {
+    h('section.transaction-list.full-flex-height', {
       style: {
-        height: '100%',
+        justifyContent: 'center',
       },
     }, [
 
@@ -68,13 +68,15 @@ TransactionList.prototype.render = function () {
               },
             })
           })
-        : h('.flex-center', {
+        : h('.flex-center.full-flex-height', {
           style: {
             flexDirection: 'column',
-            height: '100%',
+            justifyContent: 'center',
           },
         }, [
-          'No transaction history.',
+          h('p', {
+            marginTop: '50px',
+          }, 'No transaction history.'),
         ]),
       ]),
     ])