Replace ui with responsive-ui

1 files changed, 53 insertions, 67 deletions

diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index bed05a7fb..18c867153 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -3,21 +3,18 @@ const extend = require('xtend')
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
-const CopyButton = require('./components/copyButton')
-const AccountInfoLink = require('./components/account-info-link')
 const actions = require('./actions')
 const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
 const valuesFor = require('./util').valuesFor
-
 const Identicon = require('./components/identicon')
 const EthBalance = require('./components/eth-balance')
 const TransactionList = require('./components/transaction-list')
 const ExportAccountView = require('./components/account-export')
 const ethUtil = require('ethereumjs-util')
 const EditableLabel = require('./components/editable-label')
-const Tooltip = require('./components/tooltip')
 const TabBar = require('./components/tab-bar')
 const TokenList = require('./components/token-list')
+const AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns
 
 module.exports = connect(mapStateToProps)(AccountDetailScreen)
 
@@ -54,12 +51,18 @@ AccountDetailScreen.prototype.render = function () {
 
   return (
 
-    h('.account-detail-section', [
+    h('.account-detail-section', {
+      style: {
+        height: '100%',
+        maxWidth: '850px',
+      },
+    }, [
 
       // identicon, label, balance, etc
       h('.account-data-subsection', {
         style: {
           margin: '0 20px',
+          flex: '1 0 auto',
         },
       }, [
 
@@ -84,6 +87,7 @@ AccountDetailScreen.prototype.render = function () {
             style: {
               lineHeight: '10px',
               marginLeft: '15px',
+              width: '100%',
             },
           }, [
             h(EditableLabel, {
@@ -98,7 +102,42 @@ AccountDetailScreen.prototype.render = function () {
 
               // What is shown when not editing + edit text:
               h('label.editing-label', [h('.edit-text', 'edit')]),
-              h('h2.font-medium.color-forest', {name: 'edit'}, identity && identity.name),
+              h(
+                'div',
+                {
+                  style: {
+                    display: 'flex',
+                    justifyContent: 'flex-start',
+                    alignItems: 'center',
+                  },
+                },
+                [
+                  h(
+                    'h2.font-medium.color-forest',
+                    {
+                      name: 'edit',
+                      style: {
+                      },
+                    },
+                    [
+                      identity && identity.name,
+                    ]
+                  ),
+                  h(
+                    AccountDropdowns,
+                    {
+                      style: {
+                        marginRight: '8px',
+                        marginLeft: 'auto',
+                        cursor: 'pointer',
+                      },
+                      selected,
+                      network,
+                      identities: props.identities,
+                    },
+                  ),
+                ]
+              ),
             ]),
             h('.flex-row', {
               style: {
@@ -124,56 +163,6 @@ AccountDetailScreen.prototype.render = function () {
                   color: '#AEAEAE',
                 },
               }, checksumAddress),
-
-              // copy and export
-
-              h('.flex-row', {
-                style: {
-                  justifyContent: 'flex-end',
-                },
-              }, [
-
-                h(AccountInfoLink, { selected, network }),
-
-                h(CopyButton, {
-                  value: checksumAddress,
-                }),
-
-                h(Tooltip, {
-                  title: 'QR Code',
-                }, [
-                  h('i.fa.fa-qrcode.pointer.pop-hover', {
-                    onClick: () => props.dispatch(actions.showQrView(selected, identity ? identity.name : '')),
-                    style: {
-                      fontSize: '18px',
-                      position: 'relative',
-                      color: 'rgb(247, 134, 28)',
-                      top: '5px',
-                      marginLeft: '3px',
-                      marginRight: '3px',
-                    },
-                  }),
-                ]),
-
-                h(Tooltip, {
-                  title: 'Export Private Key',
-                }, [
-                  h('div', {
-                    style: {
-                      display: 'flex',
-                      alignItems: 'center',
-                    },
-                  }, [
-                    h('img.cursor-pointer.color-orange', {
-                      src: 'images/key-32.png',
-                      onClick: () => this.requestAccountExport(selected),
-                      style: {
-                        height: '19px',
-                      },
-                    }),
-                  ]),
-                ]),
-              ]),
             ]),
 
             // account ballence
@@ -197,14 +186,11 @@ AccountDetailScreen.prototype.render = function () {
             },
           }),
 
+          h('.flex-grow'),
+
           h('button', {
             onClick: () => props.dispatch(actions.buyEthView(selected)),
-            style: {
-              marginBottom: '20px',
-              marginRight: '8px',
-              position: 'absolute',
-              left: '219px',
-            },
+            style: { marginRight: '10px' },
           }, 'BUY'),
 
           h('button', {
@@ -254,7 +240,11 @@ AccountDetailScreen.prototype.subview = function () {
 AccountDetailScreen.prototype.tabSections = function () {
   const { currentAccountTab } = this.props
 
-  return h('section.tabSection', [
+  return h('section.tabSection', {
+    style: {
+      height: '100%',
+    },
+  }, [
 
     h(TabBar, {
       tabs: [
@@ -305,7 +295,3 @@ AccountDetailScreen.prototype.transactionList = function () {
     },
   })
 }
-
-AccountDetailScreen.prototype.requestAccountExport = function () {
-  this.props.dispatch(actions.requestExportAccount())
-}