From e39c600a45a4cf28b5429231dd6c57442d467075 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Sun, 13 Aug 2017 10:49:41 -0700
Subject: [WIP] Extract network dropdown out of main app render function

---
 ui/app/components/dropdowns/index.js   |  16 ++
 ui/app/components/dropdowns/network.js | 259 +++++++++++++++++++++++++++++++++
 2 files changed, 275 insertions(+)
 create mode 100644 ui/app/components/dropdowns/index.js
 create mode 100644 ui/app/components/dropdowns/network.js

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/index.js b/ui/app/components/dropdowns/index.js
new file mode 100644
index 000000000..b52dd8802
--- /dev/null
+++ b/ui/app/components/dropdowns/index.js
@@ -0,0 +1,16 @@
+// Reusable Dropdown Components
+// const Dropdown = require('./dropdown') //TODO: Refactor into separate components
+// const AccountDropdowns = require('./account-dropdowns')
+
+// App-Specific Instances
+// const AccountSelectionDropdown = require('./account-selection-dropdown')
+// const AccountOptionsDropdown = require('./account-options-dropdown')
+const NetworkDropdown = require('./network-dropdown')
+
+module.exports = {
+  // AccountSelectionDropdown,
+  // AccountOptionsDropdown,
+  NetworkDropdown,
+  // Dropdown,
+  // AccountDropdowns,
+}
\ No newline at end of file
diff --git a/ui/app/components/dropdowns/network.js b/ui/app/components/dropdowns/network.js
new file mode 100644
index 000000000..2b693803b
--- /dev/null
+++ b/ui/app/components/dropdowns/network.js
@@ -0,0 +1,259 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+
+// connect, dispatch actions...
+        // onClick: () => props.dispatch(actions.setProviderType('mainnet')),
+        // onClick: () => props.dispatch(actions.setDefaultRpcTarget()),
+        // onClick: () => props.dispatch(actions.setRpcTarget(rpcTarget)),
+        // onClick: () => this.props.dispatch(actions.showConfigPage()),
+
+function mapStateToProps (state) {
+  return {
+    active: state.appState.modalOpen
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+  }
+}
+
+
+inherits(NetworkDropdown, Component)
+function NetworkDropdown () {
+  Component.call(this)
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(NetworkDropdown)
+
+// renderNetworkDropdown
+// renderCustomOption
+// renderCommonRpc
+// TODO: specify default props and proptypes
+NetworkDropdown.prototype.render = function () {
+  const props = this.props
+  const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
+  const rpcList = props.frequentRpcList
+  const state = this.state || {}
+  const isOpen = state.isNetworkMenuOpen
+
+  return h(Dropdown, {
+    useCssTransition: true,
+    isOpen,
+    onClickOutside: (event) => {
+      const { classList } = event.target
+      const isNotToggleElement = [
+        classList.contains('menu-icon'),
+        classList.contains('network-name'),
+        classList.contains('network-indicator'),
+      ].filter(bool => bool).length === 0
+      // classes from three constituent nodes of the toggle element
+
+      if (isNotToggleElement) {
+        this.setState({ isNetworkMenuOpen: false })
+      }
+    },
+    zIndex: 11,
+    style: {
+      position: 'absolute',
+      right: '2px',
+      top: '38px',
+    },
+    innerStyle: {
+      padding: '2px 16px 2px 0px',
+    },
+  }, [
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'main',
+        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
+        onClick: () => props.dispatch(actions.setProviderType('mainnet')),
+        style: {
+          fontSize: '18px',
+        },
+      },
+      [
+        h('.menu-icon.diamond'),
+        'Main Ethereum Network',
+        providerType === 'mainnet' ? h('.check', '✓') : null,
+      ]
+    ),
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'ropsten',
+        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
+        onClick: () => props.dispatch(actions.setProviderType('ropsten')),
+        style: {
+          fontSize: '18px',
+        },
+      },
+      [
+        h('.menu-icon.red-dot'),
+        'Ropsten Test Network',
+        providerType === 'ropsten' ? h('.check', '✓') : null,
+      ]
+    ),
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'kovan',
+        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
+        onClick: () => props.dispatch(actions.setProviderType('kovan')),
+        style: {
+          fontSize: '18px',
+        },
+      },
+      [
+        h('.menu-icon.hollow-diamond'),
+        'Kovan Test Network',
+        providerType === 'kovan' ? h('.check', '✓') : null,
+      ]
+    ),
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'rinkeby',
+        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
+        onClick: () => props.dispatch(actions.setProviderType('rinkeby')),
+        style: {
+          fontSize: '18px',
+        },
+      },
+      [
+        h('.menu-icon.golden-square'),
+        'Rinkeby Test Network',
+        providerType === 'rinkeby' ? h('.check', '✓') : null,
+      ]
+    ),
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'default',
+        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
+        onClick: () => props.dispatch(actions.setDefaultRpcTarget()),
+        style: {
+          fontSize: '18px',
+        },
+      },
+      [
+        h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+        'Localhost 8545',
+        activeNetwork === 'http://localhost:8545' ? h('.check', '✓') : null,
+      ]
+    ),
+
+    this.renderCustomOption(props.provider),
+    this.renderCommonRpc(rpcList, props.provider),
+
+    h(
+      DropdownMenuItem,
+      {
+        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
+        onClick: () => this.props.dispatch(actions.showConfigPage()),
+        style: {
+          fontSize: '18px',
+        },
+      },
+      [
+        h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+        'Custom RPC',
+        activeNetwork === 'custom' ? h('.check', '✓') : null,
+      ]
+    ),
+
+  ])
+}
+
+
+NetworkDropdown.prototype.getNetworkName = function () {
+  const { provider } = this.props
+  const providerName = provider.type
+
+  let name
+
+  if (providerName === 'mainnet') {
+    name = 'Main Ethereum Network'
+  } else if (providerName === 'ropsten') {
+    name = 'Ropsten Test Network'
+  } else if (providerName === 'kovan') {
+    name = 'Kovan Test Network'
+  } else if (providerName === 'rinkeby') {
+    name = 'Rinkeby Test Network'
+  } else {
+    name = 'Unknown Private Network'
+  }
+
+  return name
+}
+
+NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) {
+  const props = this.props
+  const rpcTarget = provider.rpcTarget
+
+  return rpcList.map((rpc) => {
+    if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) {
+      return null
+    } else {
+      return h(
+        DropdownMenuItem,
+        {
+          key: `common${rpc}`,
+          closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
+          onClick: () => props.dispatch(actions.setRpcTarget(rpc)),
+        },
+        [
+          h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+          rpc,
+          rpcTarget === rpc ? h('.check', '✓') : null,
+        ]
+      )
+    }
+  })
+}
+
+NetworkDropdown.prototype.renderCustomOption = function (provider) {
+  const { rpcTarget, type } = provider
+  const props = this.props
+
+  if (type !== 'rpc') return null
+
+  // Concatenate long URLs
+  let label = rpcTarget
+  if (rpcTarget.length > 31) {
+    label = label.substr(0, 34) + '...'
+  }
+
+  switch (rpcTarget) {
+
+    case 'http://localhost:8545':
+      return null
+
+    default:
+      return h(
+        DropdownMenuItem,
+        {
+          key: rpcTarget,
+          onClick: () => props.dispatch(actions.setRpcTarget(rpcTarget)),
+          closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
+        },
+        [
+          h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+          label,
+          h('.check', '✓'),
+        ]
+      )
+  }
+}
-- 
cgit v1.2.3


From 4cd33453dc14ae9e6a797c16cccb52598904941a Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Sun, 13 Aug 2017 22:15:21 +0200
Subject: [WIP] Extract network dropdown into own component

---
 ui/app/components/dropdowns/index.js            |   2 +-
 ui/app/components/dropdowns/network-dropdown.js | 276 ++++++++++++++++++++++++
 ui/app/components/dropdowns/network.js          | 259 ----------------------
 3 files changed, 277 insertions(+), 260 deletions(-)
 create mode 100644 ui/app/components/dropdowns/network-dropdown.js
 delete mode 100644 ui/app/components/dropdowns/network.js

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/index.js b/ui/app/components/dropdowns/index.js
index b52dd8802..6723a2048 100644
--- a/ui/app/components/dropdowns/index.js
+++ b/ui/app/components/dropdowns/index.js
@@ -5,7 +5,7 @@
 // App-Specific Instances
 // const AccountSelectionDropdown = require('./account-selection-dropdown')
 // const AccountOptionsDropdown = require('./account-options-dropdown')
-const NetworkDropdown = require('./network-dropdown')
+const NetworkDropdown = require('./network-dropdown').default
 
 module.exports = {
   // AccountSelectionDropdown,
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
new file mode 100644
index 000000000..42ab53c60
--- /dev/null
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -0,0 +1,276 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const Dropdown = require('../dropdown').Dropdown
+const DropdownMenuItem = require('../dropdown').DropdownMenuItem
+
+function mapStateToProps (state) {
+  return {
+    provider: state.metamask.provider,
+    frequentRpcList: state.metamask.frequentRpcList || [],
+    networkDropdownOpen: state.appState.networkDropdownOpen,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+    setProviderType: (type) => {
+      dispatch(actions.setProviderType(type))
+    },
+    setDefaultRpcTarget: () => {
+      dispatch(actions.setDefaultRpcTarget(type))
+    },
+    setRpcTarget: (target) => {
+      dispatch(actions.setRpcTarget(target))
+    },
+    showConfigPage: () => {
+      dispatch(actions.showConfigPage())
+    },
+    showNetworkDropdown: () => {dispatch(actions.showNetworkDropdown())},
+    hideNetworkDropdown: () => {dispatch(actions.hideNetworkDropdown())},
+  }
+}
+
+
+inherits(NetworkDropdown, Component)
+function NetworkDropdown () {
+  Component.call(this)
+}
+
+// renderNetworkDropdown
+// renderCustomOption
+// renderCommonRpc
+// TODO: specify default props and proptypes
+NetworkDropdown.prototype.render = function () {
+  console.log("RENDER")
+  const props = this.props
+  const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
+  const rpcList = props.frequentRpcList
+  const state = this.state || {}
+  console.log("this.state", state)
+  const isOpen = this.props.networkDropdownOpen
+
+  console.log("isOpen", isOpen)
+
+  return h(Dropdown, {
+    useCssTransition: true,
+    isOpen,
+    onClickOutside: (event) => {
+      const { classList } = event.target
+      const isNotToggleElement = [
+        classList.contains('menu-icon'),
+        classList.contains('network-name'),
+        classList.contains('network-indicator'),
+      ].filter(bool => bool).length === 0
+      // classes from three constituent nodes of the toggle element
+
+      if (isNotToggleElement) {
+        this.props.hideNetworkDropdown()
+      }
+    },
+    zIndex: 11,
+    style: {
+      position: 'absolute',
+      right: '2px',
+      top: '38px',
+    },
+    innerStyle: {
+      padding: '2px 16px 2px 0px',
+    },
+  }, [
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'main',
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => props.setProviderType('mainnet'),
+        style: {
+          fontSize: '18px',
+        },
+      },
+      [
+        h('.menu-icon.diamond'),
+        'Main Ethereum Network',
+        providerType === 'mainnet' ? h('.check', '✓') : null,
+      ]
+    ),
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'ropsten',
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => props.setProviderType('ropsten'),
+        style: {
+          fontSize: '18px',
+        },
+      },
+      [
+        h('.menu-icon.red-dot'),
+        'Ropsten Test Network',
+        providerType === 'ropsten' ? h('.check', '✓') : null,
+      ]
+    ),
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'kovan',
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => props.setProviderType('kovan'),
+        style: {
+          fontSize: '18px',
+        },
+      },
+      [
+        h('.menu-icon.hollow-diamond'),
+        'Kovan Test Network',
+        providerType === 'kovan' ? h('.check', '✓') : null,
+      ]
+    ),
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'rinkeby',
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => propssetProviderType('rinkeby'),
+        style: {
+          fontSize: '18px',
+        },
+      },
+      [
+        h('.menu-icon.golden-square'),
+        'Rinkeby Test Network',
+        providerType === 'rinkeby' ? h('.check', '✓') : null,
+      ]
+    ),
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'default',
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => props.setDefaultRpcTarget(),
+        style: {
+          fontSize: '18px',
+        },
+      },
+      [
+        h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+        'Localhost 8545',
+        activeNetwork === 'http://localhost:8545' ? h('.check', '✓') : null,
+      ]
+    ),
+
+    this.renderCustomOption(props.provider),
+    this.renderCommonRpc(rpcList, props.provider),
+
+    h(
+      DropdownMenuItem,
+      {
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => this.props.showConfigPage(),
+        style: {
+          fontSize: '18px',
+        },
+      },
+      [
+        h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+        'Custom RPC',
+        activeNetwork === 'custom' ? h('.check', '✓') : null,
+      ]
+    ),
+
+  ])
+}
+
+
+NetworkDropdown.prototype.getNetworkName = function () {
+  const { provider } = this.props
+  const providerName = provider.type
+
+  let name
+
+  if (providerName === 'mainnet') {
+    name = 'Main Ethereum Network'
+  } else if (providerName === 'ropsten') {
+    name = 'Ropsten Test Network'
+  } else if (providerName === 'kovan') {
+    name = 'Kovan Test Network'
+  } else if (providerName === 'rinkeby') {
+    name = 'Rinkeby Test Network'
+  } else {
+    name = 'Unknown Private Network'
+  }
+
+  return name
+}
+
+NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) {
+  const props = this.props
+  const rpcTarget = provider.rpcTarget
+
+  return rpcList.map((rpc) => {
+    if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) {
+      return null
+    } else {
+      return h(
+        DropdownMenuItem,
+        {
+          key: `common${rpc}`,
+          closeMenu: () => this.props.hideNetworkDropdown(),
+          onClick: () => props.setRpcTarget(rpc),
+        },
+        [
+          h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+          rpc,
+          rpcTarget === rpc ? h('.check', '✓') : null,
+        ]
+      )
+    }
+  })
+}
+
+NetworkDropdown.prototype.renderCustomOption = function (provider) {
+  const { rpcTarget, type } = provider
+  const props = this.props
+
+  if (type !== 'rpc') return null
+
+  // Concatenate long URLs
+  let label = rpcTarget
+  if (rpcTarget.length > 31) {
+    label = label.substr(0, 34) + '...'
+  }
+
+  switch (rpcTarget) {
+
+    case 'http://localhost:8545':
+      return null
+
+    default:
+      return h(
+        DropdownMenuItem,
+        {
+          key: rpcTarget,
+          onClick: () => props.setRpcTarget(rpcTarget),
+          closeMenu: () => this.props.hideNetworkDropdown(),
+        },
+        [
+          h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+          label,
+          h('.check', '✓'),
+        ]
+      )
+  }
+}
+
+const comp = connect(mapStateToProps, mapDispatchToProps)(NetworkDropdown)
+module.exports = comp
diff --git a/ui/app/components/dropdowns/network.js b/ui/app/components/dropdowns/network.js
deleted file mode 100644
index 2b693803b..000000000
--- a/ui/app/components/dropdowns/network.js
+++ /dev/null
@@ -1,259 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const actions = require('../../actions')
-
-// connect, dispatch actions...
-        // onClick: () => props.dispatch(actions.setProviderType('mainnet')),
-        // onClick: () => props.dispatch(actions.setDefaultRpcTarget()),
-        // onClick: () => props.dispatch(actions.setRpcTarget(rpcTarget)),
-        // onClick: () => this.props.dispatch(actions.showConfigPage()),
-
-function mapStateToProps (state) {
-  return {
-    active: state.appState.modalOpen
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    hideModal: () => {
-      dispatch(actions.hideModal())
-    },
-  }
-}
-
-
-inherits(NetworkDropdown, Component)
-function NetworkDropdown () {
-  Component.call(this)
-}
-
-module.exports = connect(mapStateToProps, mapDispatchToProps)(NetworkDropdown)
-
-// renderNetworkDropdown
-// renderCustomOption
-// renderCommonRpc
-// TODO: specify default props and proptypes
-NetworkDropdown.prototype.render = function () {
-  const props = this.props
-  const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
-  const rpcList = props.frequentRpcList
-  const state = this.state || {}
-  const isOpen = state.isNetworkMenuOpen
-
-  return h(Dropdown, {
-    useCssTransition: true,
-    isOpen,
-    onClickOutside: (event) => {
-      const { classList } = event.target
-      const isNotToggleElement = [
-        classList.contains('menu-icon'),
-        classList.contains('network-name'),
-        classList.contains('network-indicator'),
-      ].filter(bool => bool).length === 0
-      // classes from three constituent nodes of the toggle element
-
-      if (isNotToggleElement) {
-        this.setState({ isNetworkMenuOpen: false })
-      }
-    },
-    zIndex: 11,
-    style: {
-      position: 'absolute',
-      right: '2px',
-      top: '38px',
-    },
-    innerStyle: {
-      padding: '2px 16px 2px 0px',
-    },
-  }, [
-
-    h(
-      DropdownMenuItem,
-      {
-        key: 'main',
-        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
-        onClick: () => props.dispatch(actions.setProviderType('mainnet')),
-        style: {
-          fontSize: '18px',
-        },
-      },
-      [
-        h('.menu-icon.diamond'),
-        'Main Ethereum Network',
-        providerType === 'mainnet' ? h('.check', '✓') : null,
-      ]
-    ),
-
-    h(
-      DropdownMenuItem,
-      {
-        key: 'ropsten',
-        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
-        onClick: () => props.dispatch(actions.setProviderType('ropsten')),
-        style: {
-          fontSize: '18px',
-        },
-      },
-      [
-        h('.menu-icon.red-dot'),
-        'Ropsten Test Network',
-        providerType === 'ropsten' ? h('.check', '✓') : null,
-      ]
-    ),
-
-    h(
-      DropdownMenuItem,
-      {
-        key: 'kovan',
-        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
-        onClick: () => props.dispatch(actions.setProviderType('kovan')),
-        style: {
-          fontSize: '18px',
-        },
-      },
-      [
-        h('.menu-icon.hollow-diamond'),
-        'Kovan Test Network',
-        providerType === 'kovan' ? h('.check', '✓') : null,
-      ]
-    ),
-
-    h(
-      DropdownMenuItem,
-      {
-        key: 'rinkeby',
-        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
-        onClick: () => props.dispatch(actions.setProviderType('rinkeby')),
-        style: {
-          fontSize: '18px',
-        },
-      },
-      [
-        h('.menu-icon.golden-square'),
-        'Rinkeby Test Network',
-        providerType === 'rinkeby' ? h('.check', '✓') : null,
-      ]
-    ),
-
-    h(
-      DropdownMenuItem,
-      {
-        key: 'default',
-        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
-        onClick: () => props.dispatch(actions.setDefaultRpcTarget()),
-        style: {
-          fontSize: '18px',
-        },
-      },
-      [
-        h('i.fa.fa-question-circle.fa-lg.menu-icon'),
-        'Localhost 8545',
-        activeNetwork === 'http://localhost:8545' ? h('.check', '✓') : null,
-      ]
-    ),
-
-    this.renderCustomOption(props.provider),
-    this.renderCommonRpc(rpcList, props.provider),
-
-    h(
-      DropdownMenuItem,
-      {
-        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
-        onClick: () => this.props.dispatch(actions.showConfigPage()),
-        style: {
-          fontSize: '18px',
-        },
-      },
-      [
-        h('i.fa.fa-question-circle.fa-lg.menu-icon'),
-        'Custom RPC',
-        activeNetwork === 'custom' ? h('.check', '✓') : null,
-      ]
-    ),
-
-  ])
-}
-
-
-NetworkDropdown.prototype.getNetworkName = function () {
-  const { provider } = this.props
-  const providerName = provider.type
-
-  let name
-
-  if (providerName === 'mainnet') {
-    name = 'Main Ethereum Network'
-  } else if (providerName === 'ropsten') {
-    name = 'Ropsten Test Network'
-  } else if (providerName === 'kovan') {
-    name = 'Kovan Test Network'
-  } else if (providerName === 'rinkeby') {
-    name = 'Rinkeby Test Network'
-  } else {
-    name = 'Unknown Private Network'
-  }
-
-  return name
-}
-
-NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) {
-  const props = this.props
-  const rpcTarget = provider.rpcTarget
-
-  return rpcList.map((rpc) => {
-    if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) {
-      return null
-    } else {
-      return h(
-        DropdownMenuItem,
-        {
-          key: `common${rpc}`,
-          closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
-          onClick: () => props.dispatch(actions.setRpcTarget(rpc)),
-        },
-        [
-          h('i.fa.fa-question-circle.fa-lg.menu-icon'),
-          rpc,
-          rpcTarget === rpc ? h('.check', '✓') : null,
-        ]
-      )
-    }
-  })
-}
-
-NetworkDropdown.prototype.renderCustomOption = function (provider) {
-  const { rpcTarget, type } = provider
-  const props = this.props
-
-  if (type !== 'rpc') return null
-
-  // Concatenate long URLs
-  let label = rpcTarget
-  if (rpcTarget.length > 31) {
-    label = label.substr(0, 34) + '...'
-  }
-
-  switch (rpcTarget) {
-
-    case 'http://localhost:8545':
-      return null
-
-    default:
-      return h(
-        DropdownMenuItem,
-        {
-          key: rpcTarget,
-          onClick: () => props.dispatch(actions.setRpcTarget(rpcTarget)),
-          closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
-        },
-        [
-          h('i.fa.fa-question-circle.fa-lg.menu-icon'),
-          label,
-          h('.check', '✓'),
-        ]
-      )
-  }
-}
-- 
cgit v1.2.3


From d01a6633423e9b20f3ca8e73cd39655362190f64 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Sun, 13 Aug 2017 22:18:08 +0200
Subject: Remove unused code - network dropdown components in app

---
 ui/app/components/dropdowns/network-dropdown.js | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 42ab53c60..eb41f6f9b 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -42,21 +42,16 @@ function NetworkDropdown () {
   Component.call(this)
 }
 
-// renderNetworkDropdown
-// renderCustomOption
-// renderCommonRpc
+module.exports = connect(mapStateToProps, mapDispatchToProps)(NetworkDropdown)
+
 // TODO: specify default props and proptypes
 NetworkDropdown.prototype.render = function () {
-  console.log("RENDER")
   const props = this.props
   const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
   const rpcList = props.frequentRpcList
   const state = this.state || {}
-  console.log("this.state", state)
   const isOpen = this.props.networkDropdownOpen
 
-  console.log("isOpen", isOpen)
-
   return h(Dropdown, {
     useCssTransition: true,
     isOpen,
@@ -271,6 +266,3 @@ NetworkDropdown.prototype.renderCustomOption = function (provider) {
       )
   }
 }
-
-const comp = connect(mapStateToProps, mapDispatchToProps)(NetworkDropdown)
-module.exports = comp
-- 
cgit v1.2.3


From 88665ba150c74955ef11a1b3fbc0f158a1c321de Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Mon, 14 Aug 2017 08:31:49 +0200
Subject: Extract dropdown component into components/dropdowns, hook up to app

---
 .../dropdowns/account-options-dropdown.js          |  28 ++
 .../dropdowns/account-selection-dropdown.js        |  28 ++
 .../dropdowns/components/account-dropdowns.js      | 318 +++++++++++++++++++++
 ui/app/components/dropdowns/components/dropdown.js |  95 ++++++
 ui/app/components/dropdowns/index.js               |  18 +-
 5 files changed, 479 insertions(+), 8 deletions(-)
 create mode 100644 ui/app/components/dropdowns/account-options-dropdown.js
 create mode 100644 ui/app/components/dropdowns/account-selection-dropdown.js
 create mode 100644 ui/app/components/dropdowns/components/account-dropdowns.js
 create mode 100644 ui/app/components/dropdowns/components/dropdown.js

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/account-options-dropdown.js b/ui/app/components/dropdowns/account-options-dropdown.js
new file mode 100644
index 000000000..7d7188ec4
--- /dev/null
+++ b/ui/app/components/dropdowns/account-options-dropdown.js
@@ -0,0 +1,28 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const AccountDropdowns = require('./components/account-dropdowns')
+
+inherits(AccountOptionsDropdown, Component)
+function AccountOptionsDropdown () {
+  Component.call(this)
+}
+
+module.exports = AccountOptionsDropdown
+
+// TODO: specify default props and proptypes
+// TODO: hook up to state, connect to redux to clean up API
+AccountOptionsDropdown.prototype.render = function () {
+  const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props
+
+  return h(AccountDropdowns, {
+    enableAccountOptions: true,
+    enableAccountsSelector: false,
+    selected: selectedAddress,
+    network,
+    identities,
+    style: !!style ? style : {},
+    dropdownWrapperStyle: !!dropdownWrapperStyle ? dropdownWrapperStyle : {},
+    menuItemStyles: !!menuItemStyles ? menuItemStyles : {},
+  }, [])
+}
diff --git a/ui/app/components/dropdowns/account-selection-dropdown.js b/ui/app/components/dropdowns/account-selection-dropdown.js
new file mode 100644
index 000000000..ccb73bde7
--- /dev/null
+++ b/ui/app/components/dropdowns/account-selection-dropdown.js
@@ -0,0 +1,28 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const AccountDropdowns = require('./components/account-dropdowns')
+
+inherits(AccountSelectionDropdown, Component)
+function AccountSelectionDropdown () {
+  Component.call(this)
+}
+
+module.exports = AccountSelectionDropdown
+
+// TODO: specify default props and proptypes
+// TODO: hook up to state, connect to redux to clean up API
+AccountSelectionDropdown.prototype.render = function () {
+  const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props
+
+  return h(AccountDropdowns, {
+    enableAccountOptions: false,
+    enableAccountsSelector: true,
+    selected: selectedAddress,
+    network,
+    identities,
+    style: !!style ? style : {},
+    dropdownWrapperStyle: !!dropdownWrapperStyle ? dropdownWrapperStyle : {},
+    menuItemStyles: !!menuItemStyles ? menuItemStyles : {},
+  }, [])
+}
diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
new file mode 100644
index 000000000..ee41829c9
--- /dev/null
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -0,0 +1,318 @@
+const Component = require('react').Component
+const PropTypes = require('react').PropTypes
+const h = require('react-hyperscript')
+const actions = require('../../../actions')
+const genAccountLink = require('../../../../lib/account-link.js')
+const connect = require('react-redux').connect
+const Dropdown = require('./dropdown').Dropdown
+const DropdownMenuItem = require('./dropdown').DropdownMenuItem
+const Identicon = require('../../identicon')
+const ethUtil = require('ethereumjs-util')
+const copyToClipboard = require('copy-to-clipboard')
+
+class AccountDropdowns extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      accountSelectorActive: false,
+      optionsMenuActive: false,
+    }
+    this.accountSelectorToggleClassName = 'accounts-selector'
+    this.optionsMenuToggleClassName = 'fa-ellipsis-h'
+  }
+
+  renderAccounts () {
+    const { identities, selected, menuItemStyles, dropdownWrapperStyle } = this.props
+
+    return Object.keys(identities).map((key, index) => {
+      const identity = identities[key]
+      const isSelected = identity.address === selected
+
+      return h(
+        DropdownMenuItem,
+        {
+          closeMenu: () => {},
+          onClick: () => {
+            this.props.actions.showAccountDetail(identity.address)
+          },
+          style: Object.assign(
+            {
+              marginTop: index === 0 ? '5px' : '',
+              fontSize: '24px',
+            },
+            menuItemStyles,
+          ),
+        },
+        [
+          h(
+            Identicon,
+            {
+              address: identity.address,
+              diameter: 32,
+              style: {
+                marginLeft: '10px',
+              },
+            },
+          ),
+          h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, identity.name || ''),
+          h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null),
+        ]
+      )
+    })
+  }
+
+  renderAccountSelector () {
+    const { actions, dropdownWrapperStyle } = this.props
+    const { accountSelectorActive, menuItemStyles } = this.state
+
+    return h(
+      Dropdown,
+      {
+        useCssTransition: true, // Hardcoded because account selector is temporarily in app-header
+        style: {
+          marginLeft: '-238px',
+          marginTop: '38px',
+          minWidth: '180px',
+          overflowY: 'auto',
+          maxHeight: '300px',
+          width: '300px',
+        },
+        innerStyle: {
+          padding: '8px 25px',
+        },
+        isOpen: accountSelectorActive,
+        onClickOutside: (event) => {
+          const { classList } = event.target
+          const isNotToggleElement = !classList.contains(this.accountSelectorToggleClassName)
+          if (accountSelectorActive && isNotToggleElement) {
+            this.setState({ accountSelectorActive: false })
+          }
+        },
+      },
+      [
+        ...this.renderAccounts(),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => actions.addNewAccount(),
+            style: Object.assign(
+              {},
+              menuItemStyles,
+            ),
+          },
+          [
+            h(
+              Identicon,
+              {
+                style: {
+                  marginLeft: '10px',
+                },
+                diameter: 32,
+              },
+            ),
+            h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, 'Create Account'),
+          ],
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => actions.showImportPage(),
+            style: Object.assign(
+              {},
+              menuItemStyles,
+            ),
+          },
+          [
+            h(
+              Identicon,
+              {
+                style: {
+                  marginLeft: '10px',
+                },
+                diameter: 32,
+              },
+            ),
+            h('span', {
+              style: {
+                marginLeft: '20px',
+                fontSize: '24px',
+                marginBottom: '5px',
+              },
+            }, 'Import Account'),
+          ]
+        ),
+      ]
+    )
+  }
+
+  renderAccountOptions () {
+    const { actions, dropdownWrapperStyle } = this.props
+    const { optionsMenuActive, menuItemStyles } = this.state
+
+    return h(
+      Dropdown,
+      {
+        style: Object.assign(
+          {
+            marginLeft: '-10px',
+            position: 'absolute',
+            width: '29vh', // affects both mobile and laptop views
+          },
+          dropdownWrapperStyle,
+        ),
+        isOpen: optionsMenuActive,
+        onClickOutside: () => {
+          const { classList } = event.target
+          const isNotToggleElement = !classList.contains(this.optionsMenuToggleClassName)
+          if (optionsMenuActive && isNotToggleElement) {
+            this.setState({ optionsMenuActive: false })
+          }
+        },
+      },
+      [
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              const { selected, network } = this.props
+              const url = genAccountLink(selected, network)
+              global.platform.openWindow({ url })
+            },
+            style: Object.assign(
+              {},
+              menuItemStyles,
+            ),
+          },
+          'View account on Etherscan',
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              const { selected, identities } = this.props
+              var identity = identities[selected]
+              actions.showQrView(selected, identity ? identity.name : '')
+            },
+            style: Object.assign(
+              {},
+              menuItemStyles,
+            ),
+          },
+          'Show QR Code',
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              const { selected } = this.props
+              const checkSumAddress = selected && ethUtil.toChecksumAddress(selected)
+              copyToClipboard(checkSumAddress)
+            },
+            style: Object.assign(
+              {},
+              menuItemStyles,
+            ),
+          },
+          'Copy Address to clipboard',
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              actions.requestAccountExport()
+            },
+            style: Object.assign(
+              {},
+              menuItemStyles,
+            ),
+          },
+          'Export Private Key',
+        ),
+      ]
+    )
+  }
+
+  render () {
+    const { style, enableAccountsSelector, enableAccountOptions, dropdownWrapperStyle } = this.props
+    const { optionsMenuActive, accountSelectorActive } = this.state
+
+    return h(
+      'span',
+      {
+        style: style,
+      },
+      [
+        enableAccountsSelector && h(
+          'i.fa.fa-angle-down',
+          // 'div.cursor-pointer.color-orange.accounts-selector',
+          {
+            style: {
+              // fontSize: '135%',
+              // background: 'url(images/switch_acc.svg) white center center no-repeat',
+              // height: '25px',
+              // width: '25px',
+              // transform: 'scale(0.75)',
+              // marginRight: '3px',
+            },
+            onClick: (event) => {
+              event.stopPropagation()
+              this.setState({
+                accountSelectorActive: !accountSelectorActive,
+                optionsMenuActive: false,
+              })
+            },
+          },
+          this.renderAccountSelector(),
+        ),
+        enableAccountOptions && h(
+          'i.fa.fa-ellipsis-h',
+          {
+            style: {
+              fontSize: '135%',
+            },
+            onClick: (event) => {
+              event.stopPropagation()
+              this.setState({
+                accountSelectorActive: false,
+                optionsMenuActive: !optionsMenuActive,
+              })
+            },
+          },
+          this.renderAccountOptions()
+        ),
+      ]
+    )
+  }
+}
+
+AccountDropdowns.defaultProps = {
+  enableAccountsSelector: false,
+  enableAccountOptions: false,
+}
+
+AccountDropdowns.propTypes = {
+  identities: PropTypes.objectOf(PropTypes.object),
+  selected: PropTypes.string, // TODO: refactor to be more explicit: selectedAddress
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    actions: {
+      showConfigPage: () => dispatch(actions.showConfigPage()),
+      requestAccountExport: () => dispatch(actions.requestExportAccount()),
+      showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)),
+      addNewAccount: () => dispatch(actions.addNewAccount()),
+      showImportPage: () => dispatch(actions.showImportPage()),
+      showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
+    },
+  }
+}
+
+module.exports = connect(null, mapDispatchToProps)(AccountDropdowns)
+
diff --git a/ui/app/components/dropdowns/components/dropdown.js b/ui/app/components/dropdowns/components/dropdown.js
new file mode 100644
index 000000000..1f35f0c70
--- /dev/null
+++ b/ui/app/components/dropdowns/components/dropdown.js
@@ -0,0 +1,95 @@
+const Component = require('react').Component
+const PropTypes = require('react').PropTypes
+const h = require('react-hyperscript')
+const MenuDroppo = require('../../menu-droppo')
+const extend = require('xtend')
+
+const noop = () => {}
+
+class Dropdown extends Component {
+  render () {
+    const { isOpen, onClickOutside, style, innerStyle, children, useCssTransition } = this.props
+
+    const innerStyleDefaults = extend({
+      borderRadius: '4px',
+      padding: '8px 16px',
+      background: 'rgba(0, 0, 0, 0.8)',
+      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+    }, innerStyle)
+
+    return h(
+      MenuDroppo,
+      {
+        useCssTransition,
+        isOpen,
+        zIndex: 30,
+        onClickOutside,
+        style,
+        innerStyle: innerStyleDefaults,
+      },
+      [
+        h(
+          'style',
+          `
+          li.dropdown-menu-item:hover { color:rgb(225, 225, 225); }
+          li.dropdown-menu-item { color: rgb(185, 185, 185); }
+          `
+        ),
+        ...children,
+      ]
+    )
+  }
+}
+
+Dropdown.defaultProps = {
+  isOpen: false,
+  onClick: noop,
+  useCssTransition: false,
+}
+
+Dropdown.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+  children: PropTypes.node,
+  style: PropTypes.object.isRequired,
+}
+
+class DropdownMenuItem extends Component {
+  render () {
+    const { onClick, closeMenu, children, style } = this.props
+
+    return h(
+      'li.dropdown-menu-item',
+      {
+        onClick: () => {
+          onClick()
+          closeMenu()
+        },
+        style: Object.assign({
+          listStyle: 'none',
+          padding: '8px 0px',
+          fontSize: '18px',
+          fontStyle: 'normal',
+          fontFamily: 'Montserrat Regular',
+          cursor: 'pointer',
+          display: 'flex',
+          justifyContent: 'flex-start',
+          alignItems: 'center',
+          color: 'white',
+        }, style),
+      },
+      children
+    )
+  }
+}
+
+DropdownMenuItem.propTypes = {
+  closeMenu: PropTypes.func.isRequired,
+  onClick: PropTypes.func.isRequired,
+  children: PropTypes.node,
+}
+
+module.exports = {
+  Dropdown,
+  DropdownMenuItem,
+}
diff --git a/ui/app/components/dropdowns/index.js b/ui/app/components/dropdowns/index.js
index 6723a2048..d21c795f5 100644
--- a/ui/app/components/dropdowns/index.js
+++ b/ui/app/components/dropdowns/index.js
@@ -1,16 +1,18 @@
 // Reusable Dropdown Components
-// const Dropdown = require('./dropdown') //TODO: Refactor into separate components
-// const AccountDropdowns = require('./account-dropdowns')
+//TODO: Refactor into separate components
+const Dropdown = require('./components/dropdown').Dropdown
+const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
+const AccountDropdowns = require('./components/account-dropdowns')
 
 // App-Specific Instances
-// const AccountSelectionDropdown = require('./account-selection-dropdown')
-// const AccountOptionsDropdown = require('./account-options-dropdown')
+const AccountSelectionDropdown = require('./account-selection-dropdown')
+const AccountOptionsDropdown = require('./account-options-dropdown')
 const NetworkDropdown = require('./network-dropdown').default
 
 module.exports = {
-  // AccountSelectionDropdown,
-  // AccountOptionsDropdown,
+  AccountSelectionDropdown,
+  AccountOptionsDropdown,
   NetworkDropdown,
-  // Dropdown,
-  // AccountDropdowns,
+  Dropdown,
+  AccountDropdowns,
 }
\ No newline at end of file
-- 
cgit v1.2.3


From 5f775315bd3e9a724d9697d2604196bbe8d7436c Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Mon, 14 Aug 2017 08:40:16 +0200
Subject: Reconfigure AccoutSelector dropdown to use new fa-caret-down instead
 of old icon

---
 ui/app/components/dropdowns/components/account-dropdowns.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index ee41829c9..69bef3f1b 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -17,7 +17,9 @@ class AccountDropdowns extends Component {
       accountSelectorActive: false,
       optionsMenuActive: false,
     }
-    this.accountSelectorToggleClassName = 'accounts-selector'
+    // Used for orangeaccount selector icon
+    // this.accountSelectorToggleClassName = 'accounts-selector'
+    this.accountSelectorToggleClassName = 'fa-angle-down'
     this.optionsMenuToggleClassName = 'fa-ellipsis-h'
   }
 
-- 
cgit v1.2.3


From 1743ccbdb5df504eab8e3c46c18172b176578be1 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Mon, 14 Aug 2017 08:50:49 +0200
Subject: Center account selection dropdown and specify useCssTransition prop

---
 ui/app/components/dropdowns/components/account-dropdowns.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index 69bef3f1b..11d109d73 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -64,16 +64,16 @@ class AccountDropdowns extends Component {
   }
 
   renderAccountSelector () {
-    const { actions, dropdownWrapperStyle } = this.props
+    const { actions, dropdownWrapperStyle, useCssTransition } = this.props
     const { accountSelectorActive, menuItemStyles } = this.state
 
     return h(
       Dropdown,
       {
-        useCssTransition: true, // Hardcoded because account selector is temporarily in app-header
+        useCssTransition,
         style: {
-          marginLeft: '-238px',
-          marginTop: '38px',
+          marginLeft: '-185px',
+          marginTop: '50px',
           minWidth: '180px',
           overflowY: 'auto',
           maxHeight: '300px',
@@ -150,12 +150,13 @@ class AccountDropdowns extends Component {
   }
 
   renderAccountOptions () {
-    const { actions, dropdownWrapperStyle } = this.props
+    const { actions, dropdownWrapperStyle, useCssTransition } = this.props
     const { optionsMenuActive, menuItemStyles } = this.state
 
     return h(
       Dropdown,
       {
+        useCssTransition,
         style: Object.assign(
           {
             marginLeft: '-10px',
-- 
cgit v1.2.3


From 2eadf72fb772b5b6bd32f04c9d439cc0f1ab0453 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Mon, 14 Aug 2017 10:31:27 +0200
Subject: Lint and cleanup all scss

---
 ui/app/components/dropdowns/network-dropdown.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index eb41f6f9b..6228513c9 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -3,8 +3,8 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
-const Dropdown = require('../dropdown').Dropdown
-const DropdownMenuItem = require('../dropdown').DropdownMenuItem
+const Dropdown = require('./components/dropdown').Dropdown
+const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
 
 function mapStateToProps (state) {
   return {
-- 
cgit v1.2.3


From 7d02c90510f119959ea04e374863ddfe13cc288b Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Sun, 20 Aug 2017 18:09:09 -0700
Subject: Add 'Add Token' dropdown menu item to account options dropdown

---
 .../components/dropdowns/components/account-dropdowns.js  | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index b59f9bbf4..aaeb5d9bf 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -246,6 +246,21 @@ class AccountDropdowns extends Component {
           },
           'Export Private Key',
         ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              // Add Token Scren
+            },
+            style: Object.assign(
+              {},
+              menuItemStyles,
+            ),
+          },
+          'Add Token',
+        ),
+
       ]
     )
   }
-- 
cgit v1.2.3


From e550d360842074a59832e41ce211fae7f38085cc Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Sun, 20 Aug 2017 18:10:06 -0700
Subject: Add 'Account Details' dropdown menu item to account options dropdown

---
 .../components/dropdowns/components/account-dropdowns.js   | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index aaeb5d9bf..6af90655b 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -184,6 +184,20 @@ class AccountDropdowns extends Component {
         },
       },
       [
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              this.props.showAccountDetail()
+            },
+            style: Object.assign(
+              {},
+              menuItemStyles,
+            ),
+          },
+          'Account Details',
+        ),
         h(
           DropdownMenuItem,
           {
-- 
cgit v1.2.3


From 71b2dd290b2bbf3107d06d0616ec8858d21b44da Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Sun, 20 Aug 2017 19:10:49 -0700
Subject: Enhance global modal to handle Buy, Edit, and Details Modals

---
 ui/app/components/dropdowns/components/account-dropdowns.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index 6af90655b..9a9fbc0fc 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -189,7 +189,7 @@ class AccountDropdowns extends Component {
           {
             closeMenu: () => {},
             onClick: () => {
-              this.props.showAccountDetail()
+              this.props.actions.showAccountDetailModal()
             },
             style: Object.assign(
               {},
@@ -348,6 +348,9 @@ const mapDispatchToProps = (dispatch) => {
       showConfigPage: () => dispatch(actions.showConfigPage()),
       requestAccountExport: () => dispatch(actions.requestExportAccount()),
       showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)),
+      showAccountDetailModal: () => {
+        dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
+      },
       addNewAccount: () => dispatch(actions.addNewAccount()),
       showImportPage: () => dispatch(actions.showImportPage()),
       showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
-- 
cgit v1.2.3


From 73a593b42e3a81b721cfa2f8913565a8b800f983 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Sun, 20 Aug 2017 19:28:20 -0700
Subject: Hook up template for New Account Modal

---
 ui/app/components/dropdowns/components/account-dropdowns.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index 9a9fbc0fc..3d32ca7fb 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -46,6 +46,7 @@ class AccountDropdowns extends Component {
           ),
         },
         [
+          // MOVE CHECKMARK UP
           h(
             Identicon,
             {
@@ -67,6 +68,7 @@ class AccountDropdowns extends Component {
             },
           }, identity.name || ''),
           h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null),
+          // EDIT
         ]
       )
     })
@@ -122,7 +124,12 @@ class AccountDropdowns extends Component {
                 diameter: 32,
               },
             ),
-            h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, 'Create Account'),
+            h('span', {
+              style: { marginLeft: '20px', fontSize: '24px' },
+              onClick: () => {
+                actions.showNewAccountModal()
+              },
+            }, 'Create Account'),
           ],
         ),
         h(
@@ -351,6 +358,9 @@ const mapDispatchToProps = (dispatch) => {
       showAccountDetailModal: () => {
         dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
       },
+      showNewAccountModal: () => {
+        dispatch(actions.showModal({ name: 'NEW_ACCOUNT' }))
+      },
       addNewAccount: () => dispatch(actions.addNewAccount()),
       showImportPage: () => dispatch(actions.showImportPage()),
       showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
-- 
cgit v1.2.3


From beedd5b11e6004b32aff9b45663dfdb4fb6e2d2e Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Sun, 20 Aug 2017 19:29:14 -0700
Subject: Remove old design - 'Show QR Code' dropdown menu item from account
 selection dropdown

---
 .../components/dropdowns/components/account-dropdowns.js | 16 ----------------
 1 file changed, 16 deletions(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index 3d32ca7fb..691c41f30 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -221,22 +221,6 @@ class AccountDropdowns extends Component {
           },
           'View account on Etherscan',
         ),
-        h(
-          DropdownMenuItem,
-          {
-            closeMenu: () => {},
-            onClick: () => {
-              const { selected, identities } = this.props
-              var identity = identities[selected]
-              actions.showQrView(selected, identity ? identity.name : '')
-            },
-            style: Object.assign(
-              {},
-              menuItemStyles,
-            ),
-          },
-          'Show QR Code',
-        ),
         h(
           DropdownMenuItem,
           {
-- 
cgit v1.2.3


From 18ea874a801c5252adb00317647c828810c33634 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Sun, 20 Aug 2017 19:39:37 -0700
Subject: Hook up edit account name modal

---
 .../dropdowns/components/account-dropdowns.js      | 68 +++++++++++++---------
 1 file changed, 42 insertions(+), 26 deletions(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index 691c41f30..f6606d8bb 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -24,7 +24,7 @@ class AccountDropdowns extends Component {
   }
 
   renderAccounts () {
-    const { identities, selected, menuItemStyles, dropdownWrapperStyle } = this.props
+    const { identities, selected, menuItemStyles, dropdownWrapperStyle, actions } = this.props
 
     return Object.keys(identities).map((key, index) => {
       const identity = identities[key]
@@ -46,29 +46,47 @@ class AccountDropdowns extends Component {
           ),
         },
         [
-          // MOVE CHECKMARK UP
-          h(
-            Identicon,
-            {
-              address: identity.address,
-              diameter: 32,
+          h('div.flex-row', {}, [
+
+            h('span', {
               style: {
-                marginLeft: '10px',
+                flex: '1 1 auto',
+              }
+            }, isSelected ? h('.check', '✓') : null),
+
+            h(
+              Identicon,
+              {
+                address: identity.address,
+                diameter: 32,
+                style: {
+                  flex: '1 1 auto',
+                },
               },
-            },
-          ),
-          h('span', {
-            style: {
-              marginLeft: '20px',
-              fontSize: '24px',
-              maxWidth: '145px',
-              whiteSpace: 'nowrap',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-            },
-          }, identity.name || ''),
-          h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null),
-          // EDIT
+            ),
+
+            h('span', {
+              style: {
+                flex: '5 5 auto',
+                fontSize: '24px',
+                maxWidth: '145px',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              },
+            }, identity.name || ''),
+
+            h('span', {
+              style: {
+                flex: '2 2 auto',
+                fontSize: '18px',
+              },
+              onClick: () => {
+                actions.showNewAccountModal()
+              }
+            }, 'Edit'),
+
+          ])
         ]
       )
     })
@@ -90,9 +108,7 @@ class AccountDropdowns extends Component {
           maxHeight: '300px',
           width: '300px',
         },
-        innerStyle: {
-          padding: '8px 25px',
-        },
+        innerStyle: {},
         isOpen: accountSelectorActive,
         onClickOutside: (event) => {
           const { classList } = event.target
@@ -343,7 +359,7 @@ const mapDispatchToProps = (dispatch) => {
         dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
       },
       showNewAccountModal: () => {
-        dispatch(actions.showModal({ name: 'NEW_ACCOUNT' }))
+        dispatch(actions.showModal({ name: 'EDIT_ACCOUNT_NAME' }))
       },
       addNewAccount: () => dispatch(actions.addNewAccount()),
       showImportPage: () => dispatch(actions.showImportPage()),
-- 
cgit v1.2.3


From 66829b7a05322320855b077c04f885908bd95efa Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Mon, 21 Aug 2017 03:27:11 -0700
Subject: Implement new dropdown design, integrate account balances

---
 .../dropdowns/components/account-dropdowns.js      | 84 +++++++++++++++-------
 1 file changed, 60 insertions(+), 24 deletions(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index f6606d8bb..043789b6c 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -9,6 +9,7 @@ const DropdownMenuItem = require('./dropdown').DropdownMenuItem
 const Identicon = require('../../identicon')
 const ethUtil = require('ethereumjs-util')
 const copyToClipboard = require('copy-to-clipboard')
+const { formatBalance } = require('../../../util')
 
 class AccountDropdowns extends Component {
   constructor (props) {
@@ -24,12 +25,15 @@ class AccountDropdowns extends Component {
   }
 
   renderAccounts () {
-    const { identities, selected, menuItemStyles, dropdownWrapperStyle, actions } = this.props
+    const { identities, accounts, selected, menuItemStyles, dropdownWrapperStyle, actions } = this.props
 
     return Object.keys(identities).map((key, index) => {
       const identity = identities[key]
       const isSelected = identity.address === selected
 
+      const balanceValue = accounts[key].balance
+      const formattedBalance = balanceValue ? formatBalance(balanceValue, 6) : '...'
+
       return h(
         DropdownMenuItem,
         {
@@ -46,45 +50,77 @@ class AccountDropdowns extends Component {
           ),
         },
         [
-          h('div.flex-row', {}, [
+          h('div.flex-row.flex-center', {}, [
 
             h('span', {
               style: {
-                flex: '1 1 auto',
+                flex: '1 1 0',
+                minWidth: '20px',
+                minHeight: '30px',
               }
-            }, isSelected ? h('.check', '✓') : null),
+            }, [
+              h('span', {
+                style: {
+                  flex: '1 1 auto',
+                  fontSize: '14px',
+                }
+              }, isSelected ? h('i.fa.fa-check') : null),
+            ]),
 
             h(
               Identicon,
               {
                 address: identity.address,
-                diameter: 32,
+                diameter: 24,
                 style: {
                   flex: '1 1 auto',
+                  marginLeft: '10px',
                 },
               },
             ),
 
-            h('span', {
+            h('span.flex-column', {
               style: {
-                flex: '5 5 auto',
-                fontSize: '24px',
-                maxWidth: '145px',
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-              },
-            }, identity.name || ''),
+                flex: '10 10 auto',
+                width: '175px',
+                alignItems: 'flex-start',
+                justifyContent: 'center',
+                marginLeft: '10px',
+              }
+            }, [
+              h('span.account-dropdown-name', {
+                style: {
+                  fontSize: '18px',
+                  maxWidth: '145px',
+                  whiteSpace: 'nowrap',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                },
+              }, identity.name || ''),
+
+              h('span.account-dropdown-balance', {
+                style: {
+                  fontSize: '14px',
+                },
+              }, formattedBalance)
+            ]),
 
             h('span', {
               style: {
-                flex: '2 2 auto',
-                fontSize: '18px',
+                flex: '3 3 auto',
               },
-              onClick: () => {
-                actions.showNewAccountModal()
-              }
-            }, 'Edit'),
+            }, [
+              h('span.account-dropdown-edit-button', {
+                style: {
+                  fontSize: '16px',
+                },
+                onClick: () => {
+                  actions.showNewAccountModal()
+                },
+              }, [
+                'Edit',
+              ])
+            ]),
 
           ])
         ]
@@ -93,7 +129,7 @@ class AccountDropdowns extends Component {
   }
 
   renderAccountSelector () {
-    const { actions, dropdownWrapperStyle, useCssTransition } = this.props
+    const { actions, dropdownWrapperStyle, useCssTransition, innerStyle } = this.props
     const { accountSelectorActive, menuItemStyles } = this.state
 
     return h(
@@ -108,7 +144,7 @@ class AccountDropdowns extends Component {
           maxHeight: '300px',
           width: '300px',
         },
-        innerStyle: {},
+        innerStyle,
         isOpen: accountSelectorActive,
         onClickOutside: (event) => {
           const { classList } = event.target
@@ -141,7 +177,7 @@ class AccountDropdowns extends Component {
               },
             ),
             h('span', {
-              style: { marginLeft: '20px', fontSize: '24px' },
+              style: { marginLeft: '20px', fontSize: '18px' },
               onClick: () => {
                 actions.showNewAccountModal()
               },
@@ -171,7 +207,7 @@ class AccountDropdowns extends Component {
             h('span', {
               style: {
                 marginLeft: '20px',
-                fontSize: '24px',
+                fontSize: '18px',
                 marginBottom: '5px',
               },
             }, 'Import Account'),
-- 
cgit v1.2.3


From d82233b95c5c3c4297a2d18b981ec6188de003c1 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Mon, 21 Aug 2017 04:46:38 -0700
Subject: Hook up actions to EditAccountNameModal

---
 ui/app/components/dropdowns/components/account-dropdowns.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index 043789b6c..2854ec95d 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -115,7 +115,7 @@ class AccountDropdowns extends Component {
                   fontSize: '16px',
                 },
                 onClick: () => {
-                  actions.showNewAccountModal()
+                  actions.showEditAccountModal(identity)
                 },
               }, [
                 'Edit',
@@ -394,8 +394,14 @@ const mapDispatchToProps = (dispatch) => {
       showAccountDetailModal: () => {
         dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
       },
+      showEditAccountModal: (identity) => {
+        dispatch(actions.showModal({
+          name: 'EDIT_ACCOUNT_NAME',
+          identity,
+        }))
+      },
       showNewAccountModal: () => {
-        dispatch(actions.showModal({ name: 'EDIT_ACCOUNT_NAME' }))
+        dispatch(actions.showModal({ name: 'NEW_ACCOUNT' }))
       },
       addNewAccount: () => dispatch(actions.addNewAccount()),
       showImportPage: () => dispatch(actions.showImportPage()),
-- 
cgit v1.2.3


From 9d69401041368ec5e3754f80d33fe69687c8e9cf Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Tue, 22 Aug 2017 16:25:23 -0700
Subject: Hook up showAddToken to dropdown menu item in account options
 dropdown

---
 ui/app/components/dropdowns/components/account-dropdowns.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index 2854ec95d..c340fdaed 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -308,7 +308,7 @@ class AccountDropdowns extends Component {
           {
             closeMenu: () => {},
             onClick: () => {
-              // Add Token Scren
+              actions.showAddTokenPage()
             },
             style: Object.assign(
               {},
@@ -403,6 +403,9 @@ const mapDispatchToProps = (dispatch) => {
       showNewAccountModal: () => {
         dispatch(actions.showModal({ name: 'NEW_ACCOUNT' }))
       },
+      showAddTokenPage: () => {
+        dispatch(actions.showAddTokenPage())
+      },
       addNewAccount: () => dispatch(actions.addNewAccount()),
       showImportPage: () => dispatch(actions.showImportPage()),
       showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
-- 
cgit v1.2.3


From e7b3ef0708290a81dad5c469adaa6fab3f1c45b5 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 29 Aug 2017 12:20:48 -0230
Subject: Lint fixes

---
 .../components/dropdowns/account-options-dropdown.js   |  7 ++++---
 .../components/dropdowns/account-selection-dropdown.js |  7 ++++---
 .../dropdowns/components/account-dropdowns.js          | 18 +++++++++---------
 ui/app/components/dropdowns/index.js                   |  5 ++---
 ui/app/components/dropdowns/network-dropdown.js        |  8 ++++----
 5 files changed, 23 insertions(+), 22 deletions(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/account-options-dropdown.js b/ui/app/components/dropdowns/account-options-dropdown.js
index 7d7188ec4..50e793d87 100644
--- a/ui/app/components/dropdowns/account-options-dropdown.js
+++ b/ui/app/components/dropdowns/account-options-dropdown.js
@@ -12,6 +12,7 @@ module.exports = AccountOptionsDropdown
 
 // TODO: specify default props and proptypes
 // TODO: hook up to state, connect to redux to clean up API
+// TODO: selectedAddress is not defined... should we use selected?
 AccountOptionsDropdown.prototype.render = function () {
   const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props
 
@@ -21,8 +22,8 @@ AccountOptionsDropdown.prototype.render = function () {
     selected: selectedAddress,
     network,
     identities,
-    style: !!style ? style : {},
-    dropdownWrapperStyle: !!dropdownWrapperStyle ? dropdownWrapperStyle : {},
-    menuItemStyles: !!menuItemStyles ? menuItemStyles : {},
+    style: style || {},
+    dropdownWrapperStyle: dropdownWrapperStyle || {},
+    menuItemStyles: menuItemStyles || {},
   }, [])
 }
diff --git a/ui/app/components/dropdowns/account-selection-dropdown.js b/ui/app/components/dropdowns/account-selection-dropdown.js
index ccb73bde7..7a8502d18 100644
--- a/ui/app/components/dropdowns/account-selection-dropdown.js
+++ b/ui/app/components/dropdowns/account-selection-dropdown.js
@@ -12,6 +12,7 @@ module.exports = AccountSelectionDropdown
 
 // TODO: specify default props and proptypes
 // TODO: hook up to state, connect to redux to clean up API
+// TODO: selectedAddress is not defined... should we use selected?
 AccountSelectionDropdown.prototype.render = function () {
   const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props
 
@@ -21,8 +22,8 @@ AccountSelectionDropdown.prototype.render = function () {
     selected: selectedAddress,
     network,
     identities,
-    style: !!style ? style : {},
-    dropdownWrapperStyle: !!dropdownWrapperStyle ? dropdownWrapperStyle : {},
-    menuItemStyles: !!menuItemStyles ? menuItemStyles : {},
+    style: style || {},
+    dropdownWrapperStyle: dropdownWrapperStyle || {},
+    menuItemStyles: menuItemStyles || {},
   }, [])
 }
diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index c340fdaed..1e869251a 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -25,7 +25,7 @@ class AccountDropdowns extends Component {
   }
 
   renderAccounts () {
-    const { identities, accounts, selected, menuItemStyles, dropdownWrapperStyle, actions } = this.props
+    const { identities, accounts, selected, menuItemStyles, actions } = this.props
 
     return Object.keys(identities).map((key, index) => {
       const identity = identities[key]
@@ -57,13 +57,13 @@ class AccountDropdowns extends Component {
                 flex: '1 1 0',
                 minWidth: '20px',
                 minHeight: '30px',
-              }
+              },
             }, [
               h('span', {
                 style: {
                   flex: '1 1 auto',
                   fontSize: '14px',
-                }
+                },
               }, isSelected ? h('i.fa.fa-check') : null),
             ]),
 
@@ -86,7 +86,7 @@ class AccountDropdowns extends Component {
                 alignItems: 'flex-start',
                 justifyContent: 'center',
                 marginLeft: '10px',
-              }
+              },
             }, [
               h('span.account-dropdown-name', {
                 style: {
@@ -102,7 +102,7 @@ class AccountDropdowns extends Component {
                 style: {
                   fontSize: '14px',
                 },
-              }, formattedBalance)
+              }, formattedBalance),
             ]),
 
             h('span', {
@@ -119,17 +119,17 @@ class AccountDropdowns extends Component {
                 },
               }, [
                 'Edit',
-              ])
+              ]),
             ]),
 
-          ])
+          ]),
         ]
       )
     })
   }
 
   renderAccountSelector () {
-    const { actions, dropdownWrapperStyle, useCssTransition, innerStyle } = this.props
+    const { actions, useCssTransition, innerStyle } = this.props
     const { accountSelectorActive, menuItemStyles } = this.state
 
     return h(
@@ -323,7 +323,7 @@ class AccountDropdowns extends Component {
   }
 
   render () {
-    const { style, enableAccountsSelector, enableAccountOptions, dropdownWrapperStyle } = this.props
+    const { style, enableAccountsSelector, enableAccountOptions } = this.props
     const { optionsMenuActive, accountSelectorActive } = this.state
 
     return h(
diff --git a/ui/app/components/dropdowns/index.js b/ui/app/components/dropdowns/index.js
index d21c795f5..fa66f5000 100644
--- a/ui/app/components/dropdowns/index.js
+++ b/ui/app/components/dropdowns/index.js
@@ -1,7 +1,6 @@
 // Reusable Dropdown Components
-//TODO: Refactor into separate components
+// TODO: Refactor into separate components
 const Dropdown = require('./components/dropdown').Dropdown
-const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
 const AccountDropdowns = require('./components/account-dropdowns')
 
 // App-Specific Instances
@@ -15,4 +14,4 @@ module.exports = {
   NetworkDropdown,
   Dropdown,
   AccountDropdowns,
-}
\ No newline at end of file
+}
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 6228513c9..0c002b2f0 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -23,6 +23,7 @@ function mapDispatchToProps (dispatch) {
       dispatch(actions.setProviderType(type))
     },
     setDefaultRpcTarget: () => {
+      // TODO: type is not defined. Is it needed?
       dispatch(actions.setDefaultRpcTarget(type))
     },
     setRpcTarget: (target) => {
@@ -31,8 +32,8 @@ function mapDispatchToProps (dispatch) {
     showConfigPage: () => {
       dispatch(actions.showConfigPage())
     },
-    showNetworkDropdown: () => {dispatch(actions.showNetworkDropdown())},
-    hideNetworkDropdown: () => {dispatch(actions.hideNetworkDropdown())},
+    showNetworkDropdown: () => { dispatch(actions.showNetworkDropdown()) },
+    hideNetworkDropdown: () => { dispatch(actions.hideNetworkDropdown()) },
   }
 }
 
@@ -49,7 +50,6 @@ NetworkDropdown.prototype.render = function () {
   const props = this.props
   const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
   const rpcList = props.frequentRpcList
-  const state = this.state || {}
   const isOpen = this.props.networkDropdownOpen
 
   return h(Dropdown, {
@@ -135,7 +135,7 @@ NetworkDropdown.prototype.render = function () {
       {
         key: 'rinkeby',
         closeMenu: () => this.props.hideNetworkDropdown(),
-        onClick: () => propssetProviderType('rinkeby'),
+        onClick: () => props.setProviderType('rinkeby'),
         style: {
           fontSize: '18px',
         },
-- 
cgit v1.2.3


From b1fc290bed26ae0ea8d182340854c82cc1f3d12d Mon Sep 17 00:00:00 2001
From: Jacky Chan <jchan@uber.com>
Date: Thu, 31 Aug 2017 04:08:11 -0700
Subject: Fix menu style

---
 .../dropdowns/account-selection-dropdown.js        |  2 +-
 .../dropdowns/components/account-dropdowns.js      | 38 ++++++++--
 ui/app/components/dropdowns/network-dropdown.js    | 83 ++++++++++++++--------
 3 files changed, 86 insertions(+), 37 deletions(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/account-selection-dropdown.js b/ui/app/components/dropdowns/account-selection-dropdown.js
index 7a8502d18..b1f4d68ce 100644
--- a/ui/app/components/dropdowns/account-selection-dropdown.js
+++ b/ui/app/components/dropdowns/account-selection-dropdown.js
@@ -15,7 +15,7 @@ module.exports = AccountSelectionDropdown
 // TODO: selectedAddress is not defined... should we use selected?
 AccountSelectionDropdown.prototype.render = function () {
   const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props
-
+  console.log({style})
   return h(AccountDropdowns, {
     enableAccountOptions: false,
     enableAccountsSelector: true,
diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index 1e869251a..be9245c0e 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -101,6 +101,8 @@ class AccountDropdowns extends Component {
               h('span.account-dropdown-balance', {
                 style: {
                   fontSize: '14px',
+                  fontFamily: 'Avenir',
+                  fontWeight: 500,
                 },
               }, formattedBalance),
             ]),
@@ -177,7 +179,13 @@ class AccountDropdowns extends Component {
               },
             ),
             h('span', {
-              style: { marginLeft: '20px', fontSize: '18px' },
+              style: {
+                marginLeft: '20px',
+                fontSize: '18px',
+                fontFamily: 'DIN OT',
+                fontSize: '16px',
+                lineHeight: '23px',
+              },
               onClick: () => {
                 actions.showNewAccountModal()
               },
@@ -209,6 +217,9 @@ class AccountDropdowns extends Component {
                 marginLeft: '20px',
                 fontSize: '18px',
                 marginBottom: '5px',
+                fontFamily: 'DIN OT',
+                fontSize: '16px',
+                lineHeight: '23px',
               },
             }, 'Import Account'),
           ]
@@ -251,7 +262,10 @@ class AccountDropdowns extends Component {
               this.props.actions.showAccountDetailModal()
             },
             style: Object.assign(
-              {},
+              {
+                fontFamily: 'DIN OT',
+                fontSize: 16,
+              },
               menuItemStyles,
             ),
           },
@@ -267,7 +281,10 @@ class AccountDropdowns extends Component {
               global.platform.openWindow({ url })
             },
             style: Object.assign(
-              {},
+              {
+                fontFamily: 'DIN OT',
+                fontSize: 16,
+              },
               menuItemStyles,
             ),
           },
@@ -283,7 +300,10 @@ class AccountDropdowns extends Component {
               copyToClipboard(checkSumAddress)
             },
             style: Object.assign(
-              {},
+              {
+                fontFamily: 'DIN OT',
+                fontSize: 16,
+              },
               menuItemStyles,
             ),
           },
@@ -297,7 +317,10 @@ class AccountDropdowns extends Component {
               actions.requestAccountExport()
             },
             style: Object.assign(
-              {},
+              {
+                fontFamily: 'DIN OT',
+                fontSize: 16,
+              },
               menuItemStyles,
             ),
           },
@@ -311,7 +334,10 @@ class AccountDropdowns extends Component {
               actions.showAddTokenPage()
             },
             style: Object.assign(
-              {},
+              {
+                fontFamily: 'DIN OT',
+                fontSize: 16,
+              },
               menuItemStyles,
             ),
           },
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 0c002b2f0..3f4ea6274 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -22,8 +22,7 @@ function mapDispatchToProps (dispatch) {
     setProviderType: (type) => {
       dispatch(actions.setProviderType(type))
     },
-    setDefaultRpcTarget: () => {
-      // TODO: type is not defined. Is it needed?
+    setDefaultRpcTarget: type => {
       dispatch(actions.setDefaultRpcTarget(type))
     },
     setRpcTarget: (target) => {
@@ -51,6 +50,11 @@ NetworkDropdown.prototype.render = function () {
   const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
   const rpcList = props.frequentRpcList
   const isOpen = this.props.networkDropdownOpen
+  const dropdownMenuItemStyle = {
+    fontFamily: 'DIN OT',
+    fontSize: '16px',
+    lineHeight: '20px',
+  };
 
   return h(Dropdown, {
     useCssTransition: true,
@@ -73,9 +77,10 @@ NetworkDropdown.prototype.render = function () {
       position: 'absolute',
       right: '2px',
       top: '38px',
+      minWidth: '309px',
     },
     innerStyle: {
-      padding: '2px 16px 2px 0px',
+      padding: '10px 8px',
     },
   }, [
 
@@ -85,14 +90,16 @@ NetworkDropdown.prototype.render = function () {
         key: 'main',
         closeMenu: () => this.props.hideNetworkDropdown(),
         onClick: () => props.setProviderType('mainnet'),
-        style: {
-          fontSize: '18px',
-        },
+        style: dropdownMenuItemStyle,
       },
       [
+        providerType === 'mainnet' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
         h('.menu-icon.diamond'),
-        'Main Ethereum Network',
-        providerType === 'mainnet' ? h('.check', '✓') : null,
+        h('span.network-name', {
+          style: {
+            color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b'
+          },
+        }, 'Main Ethereum Network'),
       ]
     ),
 
@@ -102,14 +109,16 @@ NetworkDropdown.prototype.render = function () {
         key: 'ropsten',
         closeMenu: () => this.props.hideNetworkDropdown(),
         onClick: () => props.setProviderType('ropsten'),
-        style: {
-          fontSize: '18px',
-        },
+        style: dropdownMenuItemStyle,
       },
       [
+        providerType === 'ropsten' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
         h('.menu-icon.red-dot'),
-        'Ropsten Test Network',
-        providerType === 'ropsten' ? h('.check', '✓') : null,
+        h('span.network-name', {
+          style: {
+            color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b'
+          },
+        }, 'Ropsten Test Network'),
       ]
     ),
 
@@ -119,14 +128,16 @@ NetworkDropdown.prototype.render = function () {
         key: 'kovan',
         closeMenu: () => this.props.hideNetworkDropdown(),
         onClick: () => props.setProviderType('kovan'),
-        style: {
-          fontSize: '18px',
-        },
+        style: dropdownMenuItemStyle,
       },
       [
+        providerType === 'kovan' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
         h('.menu-icon.hollow-diamond'),
-        'Kovan Test Network',
-        providerType === 'kovan' ? h('.check', '✓') : null,
+        h('span.network-name', {
+          style: {
+            color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b'
+          },
+        }, 'Kovan Test Network'),
       ]
     ),
 
@@ -136,14 +147,22 @@ NetworkDropdown.prototype.render = function () {
         key: 'rinkeby',
         closeMenu: () => this.props.hideNetworkDropdown(),
         onClick: () => props.setProviderType('rinkeby'),
+<<<<<<< HEAD
         style: {
           fontSize: '18px',
         },
+=======
+        style: dropdownMenuItemStyle,
+>>>>>>> Fix menu style
       },
       [
+        providerType === 'rinkeby' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
         h('.menu-icon.golden-square'),
-        'Rinkeby Test Network',
-        providerType === 'rinkeby' ? h('.check', '✓') : null,
+        h('span.network-name', {
+          style: {
+            color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b'
+          },
+        }, 'Rinkeby Test Network'),
       ]
     ),
 
@@ -153,14 +172,16 @@ NetworkDropdown.prototype.render = function () {
         key: 'default',
         closeMenu: () => this.props.hideNetworkDropdown(),
         onClick: () => props.setDefaultRpcTarget(),
-        style: {
-          fontSize: '18px',
-        },
+        style: dropdownMenuItemStyle,
       },
       [
+        activeNetwork === 'http://localhost:8545' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
         h('i.fa.fa-question-circle.fa-lg.menu-icon'),
-        'Localhost 8545',
-        activeNetwork === 'http://localhost:8545' ? h('.check', '✓') : null,
+        h('span.network-name', {
+          style: {
+            color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b'
+          },
+        }, 'Localhost 8545'),
       ]
     ),
 
@@ -172,14 +193,16 @@ NetworkDropdown.prototype.render = function () {
       {
         closeMenu: () => this.props.hideNetworkDropdown(),
         onClick: () => this.props.showConfigPage(),
-        style: {
-          fontSize: '18px',
-        },
+        style: dropdownMenuItemStyle,
       },
       [
+        activeNetwork === 'custom' ? h('.check', '✓') : h('.network-check__transparent', '✓'),
         h('i.fa.fa-question-circle.fa-lg.menu-icon'),
-        'Custom RPC',
-        activeNetwork === 'custom' ? h('.check', '✓') : null,
+        h('span.network-name', {
+          style: {
+            color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b'
+          },
+        }, 'Custom RPC'),
       ]
     ),
 
-- 
cgit v1.2.3


From 9213789c44beaf4bf734bc6192dc646d706d5c44 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Mon, 4 Sep 2017 14:50:12 -0700
Subject: Fix merge conflict

---
 ui/app/components/dropdowns/network-dropdown.js | 6 ------
 1 file changed, 6 deletions(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 3f4ea6274..23af3f7e4 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -147,13 +147,7 @@ NetworkDropdown.prototype.render = function () {
         key: 'rinkeby',
         closeMenu: () => this.props.hideNetworkDropdown(),
         onClick: () => props.setProviderType('rinkeby'),
-<<<<<<< HEAD
-        style: {
-          fontSize: '18px',
-        },
-=======
         style: dropdownMenuItemStyle,
->>>>>>> Fix menu style
       },
       [
         providerType === 'rinkeby' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
-- 
cgit v1.2.3


From 75c3009f839f94a19830673673f4b9ac25342633 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Mon, 4 Sep 2017 15:55:14 -0700
Subject: Fix header style; Address comments

---
 .../dropdowns/account-selection-dropdown.js        |  2 +-
 .../dropdowns/components/account-dropdowns.js      | 31 +++++++---------------
 ui/app/components/dropdowns/components/dropdown.js | 11 +++++++-
 ui/app/components/dropdowns/network-dropdown.js    | 28 +++++++++----------
 4 files changed, 34 insertions(+), 38 deletions(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/account-selection-dropdown.js b/ui/app/components/dropdowns/account-selection-dropdown.js
index b1f4d68ce..7a8502d18 100644
--- a/ui/app/components/dropdowns/account-selection-dropdown.js
+++ b/ui/app/components/dropdowns/account-selection-dropdown.js
@@ -15,7 +15,7 @@ module.exports = AccountSelectionDropdown
 // TODO: selectedAddress is not defined... should we use selected?
 AccountSelectionDropdown.prototype.render = function () {
   const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props
-  console.log({style})
+
   return h(AccountDropdowns, {
     enableAccountOptions: false,
     enableAccountsSelector: true,
diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index be9245c0e..1961a61b5 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -181,7 +181,6 @@ class AccountDropdowns extends Component {
             h('span', {
               style: {
                 marginLeft: '20px',
-                fontSize: '18px',
                 fontFamily: 'DIN OT',
                 fontSize: '16px',
                 lineHeight: '23px',
@@ -215,7 +214,6 @@ class AccountDropdowns extends Component {
             h('span', {
               style: {
                 marginLeft: '20px',
-                fontSize: '18px',
                 marginBottom: '5px',
                 fontFamily: 'DIN OT',
                 fontSize: '16px',
@@ -231,6 +229,10 @@ class AccountDropdowns extends Component {
   renderAccountOptions () {
     const { actions, dropdownWrapperStyle, useCssTransition } = this.props
     const { optionsMenuActive, menuItemStyles } = this.state
+    const dropdownMenuItemStyle = {
+      fontFamily: 'DIN OT',
+      fontSize: 16,
+    }
 
     return h(
       Dropdown,
@@ -262,10 +264,7 @@ class AccountDropdowns extends Component {
               this.props.actions.showAccountDetailModal()
             },
             style: Object.assign(
-              {
-                fontFamily: 'DIN OT',
-                fontSize: 16,
-              },
+              dropdownMenuItemStyle,
               menuItemStyles,
             ),
           },
@@ -281,10 +280,7 @@ class AccountDropdowns extends Component {
               global.platform.openWindow({ url })
             },
             style: Object.assign(
-              {
-                fontFamily: 'DIN OT',
-                fontSize: 16,
-              },
+              dropdownMenuItemStyle,
               menuItemStyles,
             ),
           },
@@ -300,10 +296,7 @@ class AccountDropdowns extends Component {
               copyToClipboard(checkSumAddress)
             },
             style: Object.assign(
-              {
-                fontFamily: 'DIN OT',
-                fontSize: 16,
-              },
+              dropdownMenuItemStyle,
               menuItemStyles,
             ),
           },
@@ -317,10 +310,7 @@ class AccountDropdowns extends Component {
               actions.requestAccountExport()
             },
             style: Object.assign(
-              {
-                fontFamily: 'DIN OT',
-                fontSize: 16,
-              },
+              dropdownMenuItemStyle,
               menuItemStyles,
             ),
           },
@@ -334,10 +324,7 @@ class AccountDropdowns extends Component {
               actions.showAddTokenPage()
             },
             style: Object.assign(
-              {
-                fontFamily: 'DIN OT',
-                fontSize: 16,
-              },
+              dropdownMenuItemStyle,
               menuItemStyles,
             ),
           },
diff --git a/ui/app/components/dropdowns/components/dropdown.js b/ui/app/components/dropdowns/components/dropdown.js
index 1f35f0c70..c4b2c2550 100644
--- a/ui/app/components/dropdowns/components/dropdown.js
+++ b/ui/app/components/dropdowns/components/dropdown.js
@@ -8,7 +8,15 @@ const noop = () => {}
 
 class Dropdown extends Component {
   render () {
-    const { isOpen, onClickOutside, style, innerStyle, children, useCssTransition } = this.props
+    const {
+      containerClassName,
+      isOpen,
+      onClickOutside,
+      style,
+      innerStyle,
+      children,
+      useCssTransition,
+    } = this.props
 
     const innerStyleDefaults = extend({
       borderRadius: '4px',
@@ -20,6 +28,7 @@ class Dropdown extends Component {
     return h(
       MenuDroppo,
       {
+        containerClassName,
         useCssTransition,
         isOpen,
         zIndex: 30,
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 23af3f7e4..fa0bb899e 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -54,7 +54,7 @@ NetworkDropdown.prototype.render = function () {
     fontFamily: 'DIN OT',
     fontSize: '16px',
     lineHeight: '20px',
-  };
+  }
 
   return h(Dropdown, {
     useCssTransition: true,
@@ -72,10 +72,10 @@ NetworkDropdown.prototype.render = function () {
         this.props.hideNetworkDropdown()
       }
     },
+    containerClassName: 'network-droppo',
     zIndex: 11,
     style: {
       position: 'absolute',
-      right: '2px',
       top: '38px',
       minWidth: '309px',
     },
@@ -95,9 +95,9 @@ NetworkDropdown.prototype.render = function () {
       [
         providerType === 'mainnet' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
         h('.menu-icon.diamond'),
-        h('span.network-name', {
+        h('span.network-name-item', {
           style: {
-            color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b'
+            color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b',
           },
         }, 'Main Ethereum Network'),
       ]
@@ -114,9 +114,9 @@ NetworkDropdown.prototype.render = function () {
       [
         providerType === 'ropsten' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
         h('.menu-icon.red-dot'),
-        h('span.network-name', {
+        h('span.network-name-item', {
           style: {
-            color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b'
+            color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b',
           },
         }, 'Ropsten Test Network'),
       ]
@@ -133,9 +133,9 @@ NetworkDropdown.prototype.render = function () {
       [
         providerType === 'kovan' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
         h('.menu-icon.hollow-diamond'),
-        h('span.network-name', {
+        h('span.network-name-item', {
           style: {
-            color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b'
+            color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b',
           },
         }, 'Kovan Test Network'),
       ]
@@ -152,9 +152,9 @@ NetworkDropdown.prototype.render = function () {
       [
         providerType === 'rinkeby' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
         h('.menu-icon.golden-square'),
-        h('span.network-name', {
+        h('span.network-name-item', {
           style: {
-            color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b'
+            color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b',
           },
         }, 'Rinkeby Test Network'),
       ]
@@ -171,9 +171,9 @@ NetworkDropdown.prototype.render = function () {
       [
         activeNetwork === 'http://localhost:8545' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
         h('i.fa.fa-question-circle.fa-lg.menu-icon'),
-        h('span.network-name', {
+        h('span.network-name-item', {
           style: {
-            color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b'
+            color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b',
           },
         }, 'Localhost 8545'),
       ]
@@ -192,9 +192,9 @@ NetworkDropdown.prototype.render = function () {
       [
         activeNetwork === 'custom' ? h('.check', '✓') : h('.network-check__transparent', '✓'),
         h('i.fa.fa-question-circle.fa-lg.menu-icon'),
-        h('span.network-name', {
+        h('span.network-name-item', {
           style: {
-            color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b'
+            color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b',
           },
         }, 'Custom RPC'),
       ]
-- 
cgit v1.2.3


From 663cb758b345d7138b9e9c68489e1859dbfaa78e Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Mon, 11 Sep 2017 00:45:06 -0700
Subject: Style send token screen

---
 ui/app/components/dropdowns/components/account-dropdowns.js | 11 ++++-------
 ui/app/components/dropdowns/components/dropdown.js          |  6 +++++-
 2 files changed, 9 insertions(+), 8 deletions(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index 1961a61b5..48354ff94 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -232,6 +232,8 @@ class AccountDropdowns extends Component {
     const dropdownMenuItemStyle = {
       fontFamily: 'DIN OT',
       fontSize: 16,
+      lineHeight: '24px',
+      padding: '8px',
     }
 
     return h(
@@ -347,15 +349,9 @@ class AccountDropdowns extends Component {
       [
         enableAccountsSelector && h(
           'i.fa.fa-angle-down',
-          // 'div.cursor-pointer.color-orange.accounts-selector',
           {
             style: {
-              // fontSize: '135%',
-              // background: 'url(images/switch_acc.svg) white center center no-repeat',
-              // height: '25px',
-              // width: '25px',
-              // transform: 'scale(0.75)',
-              // marginRight: '3px',
+              cursor: 'pointer',
             },
             onClick: (event) => {
               event.stopPropagation()
@@ -372,6 +368,7 @@ class AccountDropdowns extends Component {
           {
             style: {
               fontSize: '135%',
+              cursor: 'pointer',
             },
             onClick: (event) => {
               event.stopPropagation()
diff --git a/ui/app/components/dropdowns/components/dropdown.js b/ui/app/components/dropdowns/components/dropdown.js
index c4b2c2550..991c89cb8 100644
--- a/ui/app/components/dropdowns/components/dropdown.js
+++ b/ui/app/components/dropdowns/components/dropdown.js
@@ -40,7 +40,11 @@ class Dropdown extends Component {
         h(
           'style',
           `
-          li.dropdown-menu-item:hover { color:rgb(225, 225, 225); }
+          li.dropdown-menu-item:hover {
+            color:rgb(225, 225, 225);
+            background-color: rgba(255, 255, 255, 0.05);
+            border-radius: 4px;
+          }
           li.dropdown-menu-item { color: rgb(185, 185, 185); }
           `
         ),
-- 
cgit v1.2.3


From 6a3c59e409cf4467ca2c59a0303f2df85ffde73f Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 6 Sep 2017 20:07:48 -0230
Subject: Highlighted circle icons for the network menu.

---
 .../dropdowns/components/network-dropdown-icon.js  | 32 ++++++++++++++++++++
 ui/app/components/dropdowns/network-dropdown.js    | 35 ++++++++++++++++++----
 2 files changed, 61 insertions(+), 6 deletions(-)
 create mode 100644 ui/app/components/dropdowns/components/network-dropdown-icon.js

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/components/network-dropdown-icon.js b/ui/app/components/dropdowns/components/network-dropdown-icon.js
new file mode 100644
index 000000000..01cb95215
--- /dev/null
+++ b/ui/app/components/dropdowns/components/network-dropdown-icon.js
@@ -0,0 +1,32 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+
+
+inherits(NetworkDropdownIcon, Component)
+module.exports = NetworkDropdownIcon
+
+function NetworkDropdownIcon () {
+  Component.call(this)
+}
+
+NetworkDropdownIcon.prototype.render = function () {
+  const {
+    backgroundColor,
+    isSelected,
+    innerBorder,
+    nonSelectBackgroundColor
+  } = this.props
+
+  return h('.menu-icon-circle-select', {
+    style: {
+      border: isSelected && '1px solid white',
+      background: isSelected ? 'rgba(100, 100, 100, 0.4)' : 'none',
+    },
+  }, h('.menu-icon-circle', {
+    style: {
+      background: isSelected ? backgroundColor : nonSelectBackgroundColor,
+      border: innerBorder ? innerBorder : 'none',
+    },
+  }))
+}
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index fa0bb899e..f1c6f8221 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -5,6 +5,7 @@ const connect = require('react-redux').connect
 const actions = require('../../actions')
 const Dropdown = require('./components/dropdown').Dropdown
 const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
+const NetworkDropdownIcon = require('./components/network-dropdown-icon')
 
 function mapStateToProps (state) {
   return {
@@ -94,7 +95,11 @@ NetworkDropdown.prototype.render = function () {
       },
       [
         providerType === 'mainnet' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
-        h('.menu-icon.diamond'),
+        h(NetworkDropdownIcon, {
+          backgroundColor: '#038789', // $blue-lagoon
+          nonSelectBackgroundColor: '#15afb2',
+          isSelected: providerType === 'mainnet',
+        }),
         h('span.network-name-item', {
           style: {
             color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b',
@@ -113,7 +118,11 @@ NetworkDropdown.prototype.render = function () {
       },
       [
         providerType === 'ropsten' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
-        h('.menu-icon.red-dot'),
+        h(NetworkDropdownIcon, {
+          backgroundColor: '#e91550', // $crimson
+          nonSelectBackgroundColor: '#ec2c50',
+          isSelected: providerType === 'ropsten',
+        }),
         h('span.network-name-item', {
           style: {
             color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b',
@@ -132,7 +141,11 @@ NetworkDropdown.prototype.render = function () {
       },
       [
         providerType === 'kovan' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
-        h('.menu-icon.hollow-diamond'),
+        h(NetworkDropdownIcon, {
+          backgroundColor: '#690496', // $purple
+          nonSelectBackgroundColor: '#b039f3',
+          isSelected: providerType === 'kovan',
+        }),
         h('span.network-name-item', {
           style: {
             color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b',
@@ -151,7 +164,11 @@ NetworkDropdown.prototype.render = function () {
       },
       [
         providerType === 'rinkeby' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
-        h('.menu-icon.golden-square'),
+        h(NetworkDropdownIcon, {
+          backgroundColor: '#ebb33f', // $tulip-tree
+          nonSelectBackgroundColor: '#ecb23e',
+          isSelected: providerType === 'rinkeby',
+        }),
         h('span.network-name-item', {
           style: {
             color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b',
@@ -170,7 +187,10 @@ NetworkDropdown.prototype.render = function () {
       },
       [
         activeNetwork === 'http://localhost:8545' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
-        h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+        h(NetworkDropdownIcon, {
+          isSelected: activeNetwork === 'http://localhost:8545',
+          innerBorder: '1px solid #9b9b9b',
+        }),
         h('span.network-name-item', {
           style: {
             color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b',
@@ -191,7 +211,10 @@ NetworkDropdown.prototype.render = function () {
       },
       [
         activeNetwork === 'custom' ? h('.check', '✓') : h('.network-check__transparent', '✓'),
-        h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+        h(NetworkDropdownIcon, {
+          isSelected: activeNetwork === 'custom',
+          innerBorder: '1px solid #9b9b9b',
+        }),
         h('span.network-name-item', {
           style: {
             color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b',
-- 
cgit v1.2.3


From 99047e3ef4650ee982d6c7ed606cdaacd4965d64 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 6 Sep 2017 20:26:54 -0230
Subject: Adds title, divider and descriptive text to network dropdown.

---
 ui/app/components/dropdowns/network-dropdown.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index f1c6f8221..f79c8b29a 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -85,6 +85,17 @@ NetworkDropdown.prototype.render = function () {
     },
   }, [
 
+    h('div.network-dropdown-header', {}, [
+      h('div.network-dropdown-title', {}, 'Networks'),
+
+      h('div.network-dropdown-divider'),
+
+      h('div.network-dropdown-content',
+        {},
+        'The default network for Ether transactions is Main Net.'
+      ),
+    ]),
+
     h(
       DropdownMenuItem,
       {
-- 
cgit v1.2.3


From 6beb1b33bb20a5bb2bf38b030a5838cf9edff413 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 6 Sep 2017 20:27:29 -0230
Subject: Replace checkmark with font-awesome equivalent.

---
 ui/app/components/dropdowns/network-dropdown.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index f79c8b29a..1b6bd2385 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -105,7 +105,7 @@ NetworkDropdown.prototype.render = function () {
         style: dropdownMenuItemStyle,
       },
       [
-        providerType === 'mainnet' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
+        providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
           backgroundColor: '#038789', // $blue-lagoon
           nonSelectBackgroundColor: '#15afb2',
@@ -128,7 +128,7 @@ NetworkDropdown.prototype.render = function () {
         style: dropdownMenuItemStyle,
       },
       [
-        providerType === 'ropsten' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
+        providerType === 'ropsten' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
           backgroundColor: '#e91550', // $crimson
           nonSelectBackgroundColor: '#ec2c50',
@@ -151,7 +151,7 @@ NetworkDropdown.prototype.render = function () {
         style: dropdownMenuItemStyle,
       },
       [
-        providerType === 'kovan' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
+        providerType === 'kovan' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
           backgroundColor: '#690496', // $purple
           nonSelectBackgroundColor: '#b039f3',
@@ -174,7 +174,7 @@ NetworkDropdown.prototype.render = function () {
         style: dropdownMenuItemStyle,
       },
       [
-        providerType === 'rinkeby' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
+        providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
           backgroundColor: '#ebb33f', // $tulip-tree
           nonSelectBackgroundColor: '#ecb23e',
@@ -197,7 +197,7 @@ NetworkDropdown.prototype.render = function () {
         style: dropdownMenuItemStyle,
       },
       [
-        activeNetwork === 'http://localhost:8545' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
+        activeNetwork === 'http://localhost:8545' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
           isSelected: activeNetwork === 'http://localhost:8545',
           innerBorder: '1px solid #9b9b9b',
@@ -221,7 +221,7 @@ NetworkDropdown.prototype.render = function () {
         style: dropdownMenuItemStyle,
       },
       [
-        activeNetwork === 'custom' ? h('.check', '✓') : h('.network-check__transparent', '✓'),
+        activeNetwork === 'custom' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
           isSelected: activeNetwork === 'custom',
           innerBorder: '1px solid #9b9b9b',
-- 
cgit v1.2.3


From 8342c20b58a0b90806a592992b6212ee6fa6f0ad Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 7 Sep 2017 21:17:07 -0230
Subject: Cleaner css for circle icon.

---
 .../dropdowns/components/network-dropdown-icon.js  | 22 +++++++++-------------
 ui/app/components/dropdowns/network-dropdown.js    |  4 ----
 2 files changed, 9 insertions(+), 17 deletions(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/components/network-dropdown-icon.js b/ui/app/components/dropdowns/components/network-dropdown-icon.js
index 01cb95215..7e94e0af5 100644
--- a/ui/app/components/dropdowns/components/network-dropdown-icon.js
+++ b/ui/app/components/dropdowns/components/network-dropdown-icon.js
@@ -14,19 +14,15 @@ NetworkDropdownIcon.prototype.render = function () {
   const {
     backgroundColor,
     isSelected,
-    innerBorder,
-    nonSelectBackgroundColor
+    innerBorder = 'none',
   } = this.props
 
-  return h('.menu-icon-circle-select', {
-    style: {
-      border: isSelected && '1px solid white',
-      background: isSelected ? 'rgba(100, 100, 100, 0.4)' : 'none',
-    },
-  }, h('.menu-icon-circle', {
-    style: {
-      background: isSelected ? backgroundColor : nonSelectBackgroundColor,
-      border: innerBorder ? innerBorder : 'none',
-    },
-  }))
+  return h(`.menu-icon-circle${isSelected ? '--active' : ''}`, {},
+    h('div', {
+      style: {
+        background: backgroundColor,
+        border: innerBorder,
+      },
+    })
+  )
 }
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 1b6bd2385..4c578fbeb 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -108,7 +108,6 @@ NetworkDropdown.prototype.render = function () {
         providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
           backgroundColor: '#038789', // $blue-lagoon
-          nonSelectBackgroundColor: '#15afb2',
           isSelected: providerType === 'mainnet',
         }),
         h('span.network-name-item', {
@@ -131,7 +130,6 @@ NetworkDropdown.prototype.render = function () {
         providerType === 'ropsten' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
           backgroundColor: '#e91550', // $crimson
-          nonSelectBackgroundColor: '#ec2c50',
           isSelected: providerType === 'ropsten',
         }),
         h('span.network-name-item', {
@@ -154,7 +152,6 @@ NetworkDropdown.prototype.render = function () {
         providerType === 'kovan' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
           backgroundColor: '#690496', // $purple
-          nonSelectBackgroundColor: '#b039f3',
           isSelected: providerType === 'kovan',
         }),
         h('span.network-name-item', {
@@ -177,7 +174,6 @@ NetworkDropdown.prototype.render = function () {
         providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
           backgroundColor: '#ebb33f', // $tulip-tree
-          nonSelectBackgroundColor: '#ecb23e',
           isSelected: providerType === 'rinkeby',
         }),
         h('span.network-name-item', {
-- 
cgit v1.2.3


From b0f1fba2e5fbde573b46a284285985e63f1a3618 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 15 Sep 2017 12:39:34 -0230
Subject: Ensures that new accounts are only created from the modal, and not
 when clicking 'Create New Account'

---
 ui/app/components/dropdowns/components/account-dropdowns.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index 48354ff94..bb112dcca 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -162,11 +162,11 @@ class AccountDropdowns extends Component {
           DropdownMenuItem,
           {
             closeMenu: () => {},
-            onClick: () => actions.addNewAccount(),
             style: Object.assign(
               {},
               menuItemStyles,
             ),
+            onClick: () => actions.showNewAccountModal(),
           },
           [
             h(
@@ -185,9 +185,6 @@ class AccountDropdowns extends Component {
                 fontSize: '16px',
                 lineHeight: '23px',
               },
-              onClick: () => {
-                actions.showNewAccountModal()
-              },
             }, 'Create Account'),
           ],
         ),
-- 
cgit v1.2.3


From 162a3827c7ba418ce8180d81c54ad09d9b9560b8 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Mon, 18 Sep 2017 11:34:07 -0700
Subject: Fix Merge Problems; update yarn lock

---
 ui/app/components/dropdowns/components/account-dropdowns.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index fe80af8b3..e2d3d6d64 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -453,5 +453,11 @@ const mapDispatchToProps = (dispatch) => {
   }
 }
 
-module.exports = connect(null, mapDispatchToProps)(AccountDropdowns)
+function mapStateToProps (state) {
+  return {
+    keyrings: state.metamask.keyrings,
+  }
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDropdowns)
 
-- 
cgit v1.2.3


From 0eeba3771c2396c12de3f254dbfaae957344411d Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 20 Sep 2017 05:35:27 -0230
Subject: Exports private key modal opens from dropdown.

---
 ui/app/components/dropdowns/components/account-dropdowns.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index e2d3d6d64..76f186a3f 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -337,9 +337,7 @@ class AccountDropdowns extends Component {
           DropdownMenuItem,
           {
             closeMenu: () => {},
-            onClick: () => {
-              actions.requestAccountExport()
-            },
+            onClick: () => this.props.actions.showExportPrivateKeyModal(),
             style: Object.assign(
               dropdownMenuItemStyle,
               menuItemStyles,
@@ -429,7 +427,6 @@ const mapDispatchToProps = (dispatch) => {
   return {
     actions: {
       showConfigPage: () => dispatch(actions.showConfigPage()),
-      requestAccountExport: () => dispatch(actions.requestExportAccount()),
       showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)),
       showAccountDetailModal: () => {
         dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
@@ -443,6 +440,9 @@ const mapDispatchToProps = (dispatch) => {
       showNewAccountModal: () => {
         dispatch(actions.showModal({ name: 'NEW_ACCOUNT' }))
       },
+      showExportPrivateKeyModal: () => {
+        dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
+      },
       showAddTokenPage: () => {
         dispatch(actions.showAddTokenPage())
       },
-- 
cgit v1.2.3


From c2ccd6e90ed15245ed4e9e2965f2f5c9f293f115 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 27 Sep 2017 21:45:27 -0230
Subject: Makes styling fixes to account dropdown.

---
 .../dropdowns/components/account-dropdowns.js           | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index 76f186a3f..3e31412c6 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -51,6 +51,7 @@ class AccountDropdowns extends Component {
             {
               marginTop: index === 0 ? '5px' : '',
               fontSize: '24px',
+              width: '260px',
             },
             menuItemStyles,
           ),
@@ -92,6 +93,7 @@ class AccountDropdowns extends Component {
                 alignItems: 'flex-start',
                 justifyContent: 'center',
                 marginLeft: '10px',
+                position: 'relative',
               },
             }, [
               this.indicateIfLoose(keyring),
@@ -104,7 +106,6 @@ class AccountDropdowns extends Component {
                   textOverflow: 'ellipsis',
                 },
               }, identity.name || ''),
-              h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null),
 
               h('span.account-dropdown-balance', {
                 style: {
@@ -202,17 +203,19 @@ class AccountDropdowns extends Component {
           },
           [
             h(
-              Identicon,
+              'div',
               {
                 style: {
-                  marginLeft: '10px',
+                  marginLeft: '8px',
+                  fontFamily: 'Montserrat UltraLight',
+                  fontSize: '30px',
                 },
-                diameter: 32,
               },
+              '+'
             ),
             h('span', {
               style: {
-                marginLeft: '20px',
+                marginLeft: '14px',
                 fontFamily: 'DIN OT',
                 fontSize: '16px',
                 lineHeight: '23px',
@@ -232,13 +235,13 @@ class AccountDropdowns extends Component {
           },
           [
             h(
-              Identicon,
+              'div',
               {
                 style: {
                   marginLeft: '10px',
                 },
-                diameter: 32,
               },
+              String.fromCharCode(10515)
             ),
             h('span', {
               style: {
-- 
cgit v1.2.3


From deee689426f0b6236093128b47be81faf56d6b75 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 27 Sep 2017 22:26:44 -0230
Subject: Use font-awesome icons for create and import account.

---
 .../components/dropdowns/components/account-dropdowns.js   | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index 3e31412c6..d53d2a81b 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -203,15 +203,12 @@ class AccountDropdowns extends Component {
           },
           [
             h(
-              'div',
+              'i.fa.fa-plus.fa-lg',
               {
                 style: {
                   marginLeft: '8px',
-                  fontFamily: 'Montserrat UltraLight',
-                  fontSize: '30px',
                 },
-              },
-              '+'
+              }
             ),
             h('span', {
               style: {
@@ -235,13 +232,12 @@ class AccountDropdowns extends Component {
           },
           [
             h(
-              'div',
+              'i.fa.fa-download.fa-lg',
               {
                 style: {
-                  marginLeft: '10px',
+                  marginLeft: '8px',
                 },
-              },
-              String.fromCharCode(10515)
+              }
             ),
             h('span', {
               style: {
-- 
cgit v1.2.3


From a4838b1c575f08f9a83457222737075bab374936 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 27 Sep 2017 22:11:46 -0230
Subject: Close mobile sidebar when selecting 'Add token' from account options
 dropdown.

---
 ui/app/components/dropdowns/components/account-dropdowns.js | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index d53d2a81b..fc60c6005 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -349,6 +349,7 @@ class AccountDropdowns extends Component {
           {
             closeMenu: () => {},
             onClick: () => {
+              actions.hideSidebar()
               actions.showAddTokenPage()
             },
             style: Object.assign(
@@ -425,6 +426,7 @@ AccountDropdowns.propTypes = {
 const mapDispatchToProps = (dispatch) => {
   return {
     actions: {
+      hideSidebar: () => dispatch(actions.hideSidebar()),
       showConfigPage: () => dispatch(actions.showConfigPage()),
       showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)),
       showAccountDetailModal: () => {
-- 
cgit v1.2.3


From 47ebcbb2ed09a4cd4b062c5fa4cb6d259369149f Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 29 Sep 2017 07:40:50 -0230
Subject: Token menu ui.

---
 ui/app/components/dropdowns/token-menu-dropdown.js | 38 ++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 ui/app/components/dropdowns/token-menu-dropdown.js

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/token-menu-dropdown.js b/ui/app/components/dropdowns/token-menu-dropdown.js
new file mode 100644
index 000000000..b948534c2
--- /dev/null
+++ b/ui/app/components/dropdowns/token-menu-dropdown.js
@@ -0,0 +1,38 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+module.exports = TokenMenuDropdown
+
+inherits(TokenMenuDropdown, Component)
+function TokenMenuDropdown () {
+  Component.call(this)
+
+  this.onClose = this.onClose.bind(this)
+}
+
+TokenMenuDropdown.prototype.onClose = function (e) {
+  e.stopPropagation()
+  this.props.onClose()
+}
+
+TokenMenuDropdown.prototype.render = function () {
+  return h('div.token-menu-dropdown', {}, [
+    h('div.token-menu-dropdown__close-area', {
+      onClick: this.onClose,
+    }),
+    h('div.token-menu-dropdown__container', {}, [
+      h('div.token-menu-dropdown__options', {}, [
+        
+        h('div.token-menu-dropdown__option', {
+          onClick: (e) => {
+            e.stopPropagation()
+            console.log('div.token-menu-dropdown__option!')
+          },
+        }, 'Hide Token')
+
+      ]),
+    ]),
+  ])
+}
+
-- 
cgit v1.2.3


From d206f183f5a07787535acd196c506145f00a199e Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 29 Sep 2017 16:33:29 -0230
Subject: Hide token confirmation modal ui

---
 ui/app/components/dropdowns/token-menu-dropdown.js | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/token-menu-dropdown.js b/ui/app/components/dropdowns/token-menu-dropdown.js
index b948534c2..0f4bc2b87 100644
--- a/ui/app/components/dropdowns/token-menu-dropdown.js
+++ b/ui/app/components/dropdowns/token-menu-dropdown.js
@@ -1,8 +1,19 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+
+module.exports = connect(null, mapDispatchToProps)(TokenMenuDropdown)
+
+function mapDispatchToProps (dispatch) {
+  return {
+    showHideTokenConfirmationModal: (token) => {
+      dispatch(actions.showModal({ name: 'HIDE_TOKEN_CONFIRMATION', token }))
+    }
+  }
+}
 
-module.exports = TokenMenuDropdown
 
 inherits(TokenMenuDropdown, Component)
 function TokenMenuDropdown () {
@@ -17,6 +28,8 @@ TokenMenuDropdown.prototype.onClose = function (e) {
 }
 
 TokenMenuDropdown.prototype.render = function () {
+  const { showHideTokenConfirmationModal } = this.props
+
   return h('div.token-menu-dropdown', {}, [
     h('div.token-menu-dropdown__close-area', {
       onClick: this.onClose,
@@ -27,7 +40,7 @@ TokenMenuDropdown.prototype.render = function () {
         h('div.token-menu-dropdown__option', {
           onClick: (e) => {
             e.stopPropagation()
-            console.log('div.token-menu-dropdown__option!')
+            showHideTokenConfirmationModal(this.props.token)
           },
         }, 'Hide Token')
 
@@ -35,4 +48,3 @@ TokenMenuDropdown.prototype.render = function () {
     ]),
   ])
 }
-
-- 
cgit v1.2.3


From ac4868170f4c61d13291389d01bf1002fe240ed4 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 3 Oct 2017 14:55:52 -0230
Subject: Enables remove token and ensures add/remove update the list without
 need for refresh.

---
 ui/app/components/dropdowns/token-menu-dropdown.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/token-menu-dropdown.js b/ui/app/components/dropdowns/token-menu-dropdown.js
index 0f4bc2b87..7234a9b21 100644
--- a/ui/app/components/dropdowns/token-menu-dropdown.js
+++ b/ui/app/components/dropdowns/token-menu-dropdown.js
@@ -41,6 +41,7 @@ TokenMenuDropdown.prototype.render = function () {
           onClick: (e) => {
             e.stopPropagation()
             showHideTokenConfirmationModal(this.props.token)
+            this.props.onClose()
           },
         }, 'Hide Token')
 
-- 
cgit v1.2.3


From 57179d2b05a4efae06c2375e01e9a01a5519543b Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Thu, 12 Oct 2017 18:46:09 -0400
Subject: Various styling fixes

---
 ui/app/components/dropdowns/network-dropdown.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 4c578fbeb..567bf07a0 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -102,7 +102,7 @@ NetworkDropdown.prototype.render = function () {
         key: 'main',
         closeMenu: () => this.props.hideNetworkDropdown(),
         onClick: () => props.setProviderType('mainnet'),
-        style: dropdownMenuItemStyle,
+        style: { ...dropdownMenuItemStyle, borderColor: '#038789' },
       },
       [
         providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
-- 
cgit v1.2.3


From 81f62a7443d47461b5f9b20f442392562458c79a Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Fri, 13 Oct 2017 02:10:58 -0400
Subject: Adding Account Dropdown V2

---
 ui/app/components/dropdowns/components/menu.js | 44 ++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 ui/app/components/dropdowns/components/menu.js

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/components/menu.js b/ui/app/components/dropdowns/components/menu.js
new file mode 100644
index 000000000..0cbe0f342
--- /dev/null
+++ b/ui/app/components/dropdowns/components/menu.js
@@ -0,0 +1,44 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+
+inherits(Menu, Component)
+function Menu () { Component.call(this) }
+
+Menu.prototype.render = function () {
+  const { className = '', children, isShowing } = this.props
+  return isShowing
+    ? h('div', { className: `menu ${className}` }, children)
+    : h('noscript')
+}
+
+inherits(Item, Component)
+function Item () { Component.call(this) }
+
+Item.prototype.render = function () {
+  const {
+    icon,
+    children,
+    text,
+    className = '',
+    onClick,
+  } = this.props
+  const itemClassName = `menu__item ${className} ${onClick ? 'menu__item--clickable' : ''}`
+  const iconComponent = icon ? h('div.menu__item__icon', [icon]) : null
+  const textComponent = text ? h('div.menu__item__text', text) : null
+
+  return children
+    ? h('div', { className: itemClassName }, children)
+    : h('div.menu__item', { className: itemClassName }, [ iconComponent, textComponent ]
+      .filter(d => Boolean(d))
+    )
+}
+
+inherits(Divider, Component)
+function Divider () { Component.call(this) }
+
+Divider.prototype.render = function () {
+  return h('div.menu__divider')
+}
+
+module.exports = { Menu, Item, Divider }
-- 
cgit v1.2.3


From a84014eff8e008fff6db5ebba7323bb52a2d2d9f Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@users.noreply.github.com>
Date: Fri, 13 Oct 2017 16:25:33 -0400
Subject: Fix Localhost 8545 option in network dropdown (#2357)

---
 ui/app/components/dropdowns/network-dropdown.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 567bf07a0..c64e7a1d1 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -189,7 +189,7 @@ NetworkDropdown.prototype.render = function () {
       {
         key: 'default',
         closeMenu: () => this.props.hideNetworkDropdown(),
-        onClick: () => props.setDefaultRpcTarget(),
+        onClick: () => props.setRpcTarget('http://localhost:8545'),
         style: dropdownMenuItemStyle,
       },
       [
-- 
cgit v1.2.3


From 7caa9142235cc0eca20d638a066d666d8cfaabee Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Mon, 16 Oct 2017 01:27:51 -0400
Subject: Fix Import Account link not hiding sidebar

---
 ui/app/components/dropdowns/components/account-dropdowns.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index fc60c6005..e2eed1e4b 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -164,7 +164,7 @@ class AccountDropdowns extends Component {
   }
 
   renderAccountSelector () {
-    const { actions, useCssTransition, innerStyle } = this.props
+    const { actions, useCssTransition, innerStyle, sidebarOpen } = this.props
     const { accountSelectorActive, menuItemStyles } = this.state
 
     return h(
@@ -223,7 +223,11 @@ class AccountDropdowns extends Component {
         h(
           DropdownMenuItem,
           {
-            closeMenu: () => {},
+            closeMenu: () => {
+              if (sidebarOpen) {
+                actions.hideSidebar()
+              }
+            },
             onClick: () => actions.showImportPage(),
             style: Object.assign(
               {},
@@ -457,6 +461,7 @@ const mapDispatchToProps = (dispatch) => {
 function mapStateToProps (state) {
   return {
     keyrings: state.metamask.keyrings,
+    sidebarOpen: state.appState.sidebarOpen,
   }
 }
 
-- 
cgit v1.2.3


From 5ee6e4d3b3d61d804340c22b73a608fb6b44a9b2 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Mon, 16 Oct 2017 01:28:25 -0400
Subject: wip

---
 ui/app/components/dropdowns/components/menu.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/components/menu.js b/ui/app/components/dropdowns/components/menu.js
index 0cbe0f342..323103f0b 100644
--- a/ui/app/components/dropdowns/components/menu.js
+++ b/ui/app/components/dropdowns/components/menu.js
@@ -41,4 +41,11 @@ Divider.prototype.render = function () {
   return h('div.menu__divider')
 }
 
-module.exports = { Menu, Item, Divider }
+inherits(CloseArea, Component)
+function CloseArea () { Component.call(this) }
+
+CloseArea.prototype.render = function () {
+  return h('div.menu__close-area', { onClick: this.props.onClick })
+}
+
+module.exports = { Menu, Item, Divider, CloseArea }
-- 
cgit v1.2.3


From 085551b7e6b7dab21c21b99a40c4f79c413799d5 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Tue, 17 Oct 2017 22:36:53 -0700
Subject: New Account modal

---
 ui/app/components/dropdowns/components/menu.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/components/menu.js b/ui/app/components/dropdowns/components/menu.js
index 323103f0b..f6d8a139e 100644
--- a/ui/app/components/dropdowns/components/menu.js
+++ b/ui/app/components/dropdowns/components/menu.js
@@ -28,8 +28,8 @@ Item.prototype.render = function () {
   const textComponent = text ? h('div.menu__item__text', text) : null
 
   return children
-    ? h('div', { className: itemClassName }, children)
-    : h('div.menu__item', { className: itemClassName }, [ iconComponent, textComponent ]
+    ? h('div', { className: itemClassName, onClick }, children)
+    : h('div.menu__item', { className: itemClassName, onClick }, [ iconComponent, textComponent ]
       .filter(d => Boolean(d))
     )
 }
-- 
cgit v1.2.3


From 03685c64b8e45d893c86478869200933de043da8 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Tue, 17 Oct 2017 22:42:56 -0700
Subject: Network dropdown update

---
 ui/app/components/dropdowns/network-dropdown.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index c64e7a1d1..736019c39 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -55,6 +55,7 @@ NetworkDropdown.prototype.render = function () {
     fontFamily: 'DIN OT',
     fontSize: '16px',
     lineHeight: '20px',
+    padding: '12px 0',
   }
 
   return h(Dropdown, {
@@ -81,7 +82,7 @@ NetworkDropdown.prototype.render = function () {
       minWidth: '309px',
     },
     innerStyle: {
-      padding: '10px 8px',
+      padding: '18px 8px',
     },
   }, [
 
-- 
cgit v1.2.3


From 79be956be9f5297d6d601941e50d5ae4eca58560 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Thu, 19 Oct 2017 14:10:29 -0700
Subject: Fix network dropdown styles

---
 ui/app/components/dropdowns/network-dropdown.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 736019c39..20dfca590 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -78,7 +78,7 @@ NetworkDropdown.prototype.render = function () {
     zIndex: 11,
     style: {
       position: 'absolute',
-      top: '38px',
+      top: '58px',
       minWidth: '309px',
     },
     innerStyle: {
-- 
cgit v1.2.3


From 2c032e0df44a2d589aae62d3fc532df82441580b Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Sun, 22 Oct 2017 22:40:03 -0700
Subject: Update settings screen to new UI

---
 ui/app/components/dropdowns/simple-dropdown.js | 91 ++++++++++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 ui/app/components/dropdowns/simple-dropdown.js

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/simple-dropdown.js b/ui/app/components/dropdowns/simple-dropdown.js
new file mode 100644
index 000000000..8cea78518
--- /dev/null
+++ b/ui/app/components/dropdowns/simple-dropdown.js
@@ -0,0 +1,91 @@
+const { Component, PropTypes } = require('react')
+const h = require('react-hyperscript')
+const classnames = require('classnames')
+const R = require('ramda')
+
+class SimpleDropdown extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      isOpen: false,
+    }
+  }
+
+  getDisplayValue () {
+    const { selectedOption, options } = this.props
+    const matchesOption = option => option.value === selectedOption
+    const matchingOption = R.find(matchesOption)(options)
+    return matchingOption
+      ? matchingOption.displayValue || matchingOption.value
+      : selectedOption
+  }
+
+  handleClose () {
+    this.setState({ isOpen: false })
+  }
+
+  toggleOpen () {
+    const { isOpen } = this.state
+    this.setState({ isOpen: !isOpen })
+  }
+
+  renderOptions () {
+    const { options, onSelect, selectedOption } = this.props
+
+    return h('div', [
+      h('div.simple-dropdown__close-area', {
+        onClick: event => {
+          event.stopPropagation()
+          this.handleClose()
+        },
+      }),
+      h('div.simple-dropdown__options', [
+        ...options.map(option => {
+          return h(
+            'div.simple-dropdown__option',
+            {
+              className: classnames({
+                'simple-dropdown__option--selected': option.value === selectedOption,
+              }),
+              key: option.value,
+              onClick: () => {
+                if (option.value !== selectedOption) {
+                  onSelect(option.value)
+                }
+
+                this.handleClose()
+              },
+            },
+            option.displayValue || option.value,
+          )
+        }),
+      ]),
+    ])
+  }
+
+  render () {
+    const { placeholder } = this.props
+    const { isOpen } = this.state
+
+    return h(
+      'div.simple-dropdown',
+      {
+        onClick: () => this.toggleOpen(),
+      },
+      [
+        h('div.simple-dropdown__selected', this.getDisplayValue() || placeholder || 'Select'),
+        h('i.fa.fa-caret-down.fa-lg.simple-dropdown__caret'),
+        isOpen && this.renderOptions(),
+      ]
+    )
+  }
+}
+
+SimpleDropdown.propTypes = {
+  options: PropTypes.array.isRequired,
+  placeholder: PropTypes.string,
+  onSelect: PropTypes.func,
+  selectedOption: PropTypes.string,
+}
+
+module.exports = SimpleDropdown
-- 
cgit v1.2.3


From 78836b0ead0e1b2307a48868c109a5412effc78b Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 25 Oct 2017 13:31:58 -0230
Subject: Signature Request

---
 .../components/dropdowns/account-dropdown-mini.js  | 78 ++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 ui/app/components/dropdowns/account-dropdown-mini.js

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/account-dropdown-mini.js b/ui/app/components/dropdowns/account-dropdown-mini.js
new file mode 100644
index 000000000..96057d2b4
--- /dev/null
+++ b/ui/app/components/dropdowns/account-dropdown-mini.js
@@ -0,0 +1,78 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const Identicon = require('../identicon')
+const AccountListItem = require('../send/account-list-item')
+
+module.exports = AccountDropdownMini
+
+inherits(AccountDropdownMini, Component)
+function AccountDropdownMini () {
+  Component.call(this)
+}
+
+AccountDropdownMini.prototype.getListItemIcon = function (currentAccount, selectedAccount) {
+  const listItemIcon = h(`i.fa.fa-check.fa-lg`, { style: { color: '#02c9b1' } })
+
+  return currentAccount.address === selectedAccount.address
+    ? listItemIcon
+    : null
+}
+
+AccountDropdownMini.prototype.renderDropdown = function () {
+  const {
+    accounts,
+    selectedAccount,
+    closeDropdown,
+    onSelect,
+  } = this.props
+
+  return h('div', {}, [
+
+    h('div.account-dropdown-mini__close-area', {
+      onClick: closeDropdown,
+    }),
+
+    h('div.account-dropdown-mini__list', {}, [
+
+      ...accounts.map(account => h(AccountListItem, {
+        account,
+        displayBalance: false,
+        displayAddress: false, 
+        handleClick: () => {
+          onSelect(account)
+          closeDropdown()
+        }, 
+        icon: this.getListItemIcon(account, selectedAccount),
+      }))
+
+    ]),
+
+  ])
+}
+
+AccountDropdownMini.prototype.render = function () {
+  const {
+    accounts,
+    selectedAccount,
+    openDropdown,
+    closeDropdown,
+    dropdownOpen,
+  } = this.props
+
+  return h('div.account-dropdown-mini', {}, [
+
+    h(AccountListItem, {
+      account: selectedAccount,
+      handleClick: openDropdown,
+      displayBalance: false,
+      displayAddress: false,
+      icon: h(`i.fa.fa-caret-down.fa-lg`, { style: { color: '#dedede' } })
+    }),
+
+    dropdownOpen && this.renderDropdown(),
+
+  ])
+    
+}
+
-- 
cgit v1.2.3


From 5a94775b3fa22517a71232ebe229ee83e9debcf1 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 2 Nov 2017 00:00:33 -0230
Subject: Lint fixes for NewUI-flat.

---
 ui/app/components/dropdowns/account-dropdown-mini.js      |  3 ---
 ui/app/components/dropdowns/account-options-dropdown.js   |  2 +-
 ui/app/components/dropdowns/account-selection-dropdown.js |  2 +-
 .../components/dropdowns/components/account-dropdowns.js  | 15 +++++++++++++++
 ui/app/components/dropdowns/components/dropdown.js        |  1 +
 ui/app/components/dropdowns/simple-dropdown.js            |  3 ++-
 6 files changed, 20 insertions(+), 6 deletions(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/account-dropdown-mini.js b/ui/app/components/dropdowns/account-dropdown-mini.js
index 96057d2b4..f403c56b9 100644
--- a/ui/app/components/dropdowns/account-dropdown-mini.js
+++ b/ui/app/components/dropdowns/account-dropdown-mini.js
@@ -1,7 +1,6 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const Identicon = require('../identicon')
 const AccountListItem = require('../send/account-list-item')
 
 module.exports = AccountDropdownMini
@@ -53,10 +52,8 @@ AccountDropdownMini.prototype.renderDropdown = function () {
 
 AccountDropdownMini.prototype.render = function () {
   const {
-    accounts,
     selectedAccount,
     openDropdown,
-    closeDropdown,
     dropdownOpen,
   } = this.props
 
diff --git a/ui/app/components/dropdowns/account-options-dropdown.js b/ui/app/components/dropdowns/account-options-dropdown.js
index 50e793d87..f74c0a2d4 100644
--- a/ui/app/components/dropdowns/account-options-dropdown.js
+++ b/ui/app/components/dropdowns/account-options-dropdown.js
@@ -19,7 +19,7 @@ AccountOptionsDropdown.prototype.render = function () {
   return h(AccountDropdowns, {
     enableAccountOptions: true,
     enableAccountsSelector: false,
-    selected: selectedAddress,
+    selected,
     network,
     identities,
     style: style || {},
diff --git a/ui/app/components/dropdowns/account-selection-dropdown.js b/ui/app/components/dropdowns/account-selection-dropdown.js
index 7a8502d18..2f6452b15 100644
--- a/ui/app/components/dropdowns/account-selection-dropdown.js
+++ b/ui/app/components/dropdowns/account-selection-dropdown.js
@@ -19,7 +19,7 @@ AccountSelectionDropdown.prototype.render = function () {
   return h(AccountDropdowns, {
     enableAccountOptions: false,
     enableAccountsSelector: true,
-    selected: selectedAddress,
+    selected,
     network,
     identities,
     style: style || {},
diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index e2eed1e4b..58326b13c 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -425,6 +425,21 @@ AccountDropdowns.propTypes = {
   identities: PropTypes.objectOf(PropTypes.object),
   selected: PropTypes.string,
   keyrings: PropTypes.array,
+  accounts: PropTypes.object,
+  menuItemStyles: PropTypes.object,
+  actions: PropTypes.object,
+  // actions.showAccountDetail: ,
+  useCssTransition: PropTypes.bool,
+  innerStyle: PropTypes.object,
+  sidebarOpen: PropTypes.bool,
+  dropdownWrapperStyle: PropTypes.string,
+  // actions.showAccountDetailModal: ,
+  network: PropTypes.number,
+  // actions.showExportPrivateKeyModal: ,
+  style: PropTypes.object,
+  enableAccountsSelector: PropTypes.bool,
+  enableAccountOption: PropTypes.bool,
+  enableAccountOptions: PropTypes.bool,
 }
 
 const mapDispatchToProps = (dispatch) => {
diff --git a/ui/app/components/dropdowns/components/dropdown.js b/ui/app/components/dropdowns/components/dropdown.js
index ca68e55f7..ddcb7998f 100644
--- a/ui/app/components/dropdowns/components/dropdown.js
+++ b/ui/app/components/dropdowns/components/dropdown.js
@@ -68,6 +68,7 @@ Dropdown.propTypes = {
   onClickOutside: PropTypes.func,
   innerStyle: PropTypes.object,
   useCssTransition: PropTypes.bool,
+  containerClassName: PropTypes.string,
 }
 
 class DropdownMenuItem extends Component {
diff --git a/ui/app/components/dropdowns/simple-dropdown.js b/ui/app/components/dropdowns/simple-dropdown.js
index 8cea78518..7bb48e57b 100644
--- a/ui/app/components/dropdowns/simple-dropdown.js
+++ b/ui/app/components/dropdowns/simple-dropdown.js
@@ -1,4 +1,5 @@
-const { Component, PropTypes } = require('react')
+const { Component } = require('react')
+const PropTypes = require('react').PropTypes
 const h = require('react-hyperscript')
 const classnames = require('classnames')
 const R = require('ramda')
-- 
cgit v1.2.3


From 56e9f98bd05de8ae26f653d15eec4304f0c72155 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 2 Nov 2017 09:45:59 -0230
Subject: More lint fixes

---
 ui/app/components/dropdowns/account-dropdown-mini.js | 10 +++++-----
 ui/app/components/dropdowns/token-menu-dropdown.js   |  6 +++---
 2 files changed, 8 insertions(+), 8 deletions(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/account-dropdown-mini.js b/ui/app/components/dropdowns/account-dropdown-mini.js
index f403c56b9..a3d41af90 100644
--- a/ui/app/components/dropdowns/account-dropdown-mini.js
+++ b/ui/app/components/dropdowns/account-dropdown-mini.js
@@ -37,13 +37,13 @@ AccountDropdownMini.prototype.renderDropdown = function () {
       ...accounts.map(account => h(AccountListItem, {
         account,
         displayBalance: false,
-        displayAddress: false, 
+        displayAddress: false,
         handleClick: () => {
           onSelect(account)
           closeDropdown()
-        }, 
+        },
         icon: this.getListItemIcon(account, selectedAccount),
-      }))
+      })),
 
     ]),
 
@@ -64,12 +64,12 @@ AccountDropdownMini.prototype.render = function () {
       handleClick: openDropdown,
       displayBalance: false,
       displayAddress: false,
-      icon: h(`i.fa.fa-caret-down.fa-lg`, { style: { color: '#dedede' } })
+      icon: h(`i.fa.fa-caret-down.fa-lg`, { style: { color: '#dedede' } }),
     }),
 
     dropdownOpen && this.renderDropdown(),
 
   ])
-    
+
 }
 
diff --git a/ui/app/components/dropdowns/token-menu-dropdown.js b/ui/app/components/dropdowns/token-menu-dropdown.js
index 7234a9b21..dc7a985e3 100644
--- a/ui/app/components/dropdowns/token-menu-dropdown.js
+++ b/ui/app/components/dropdowns/token-menu-dropdown.js
@@ -10,7 +10,7 @@ function mapDispatchToProps (dispatch) {
   return {
     showHideTokenConfirmationModal: (token) => {
       dispatch(actions.showModal({ name: 'HIDE_TOKEN_CONFIRMATION', token }))
-    }
+    },
   }
 }
 
@@ -36,14 +36,14 @@ TokenMenuDropdown.prototype.render = function () {
     }),
     h('div.token-menu-dropdown__container', {}, [
       h('div.token-menu-dropdown__options', {}, [
-        
+
         h('div.token-menu-dropdown__option', {
           onClick: (e) => {
             e.stopPropagation()
             showHideTokenConfirmationModal(this.props.token)
             this.props.onClose()
           },
-        }, 'Hide Token')
+        }, 'Hide Token'),
 
       ]),
     ]),
-- 
cgit v1.2.3


From 62f2aebe1d9c3efd6ace8785fc96bb43ae08afe8 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 9 Nov 2017 13:17:10 -0330
Subject: Network loading does not block network loading.

---
 ui/app/components/dropdowns/components/dropdown.js | 2 +-
 ui/app/components/dropdowns/network-dropdown.js    | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/components/dropdown.js b/ui/app/components/dropdowns/components/dropdown.js
index ddcb7998f..15d064be8 100644
--- a/ui/app/components/dropdowns/components/dropdown.js
+++ b/ui/app/components/dropdowns/components/dropdown.js
@@ -31,7 +31,7 @@ class Dropdown extends Component {
         containerClassName,
         useCssTransition,
         isOpen,
-        zIndex: 30,
+        zIndex: 55,
         onClickOutside,
         style,
         innerStyle: innerStyleDefaults,
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 20dfca590..0908faf01 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -75,11 +75,12 @@ NetworkDropdown.prototype.render = function () {
       }
     },
     containerClassName: 'network-droppo',
-    zIndex: 11,
+    zIndex: 55,
     style: {
       position: 'absolute',
       top: '58px',
       minWidth: '309px',
+      zIndex: '55px',
     },
     innerStyle: {
       padding: '18px 8px',
-- 
cgit v1.2.3


From 7dba114feb428f7f2f78fee5611377b04bff5be6 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Fri, 1 Dec 2017 14:19:53 -0800
Subject: Update font weights to 300, remove animation from network dropdown,
 fix network dropdown not closing from certain click-areas

---
 ui/app/components/dropdowns/network-dropdown.js | 27 +++++++++++++++----------
 1 file changed, 16 insertions(+), 11 deletions(-)

(limited to 'ui/app/components/dropdowns')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 0908faf01..dfaa6b22c 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -6,6 +6,16 @@ const actions = require('../../actions')
 const Dropdown = require('./components/dropdown').Dropdown
 const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
 const NetworkDropdownIcon = require('./components/network-dropdown-icon')
+const R = require('ramda')
+
+// classes from nodes of the toggle element.
+const notToggleElementClassnames = [
+  'menu-icon',
+  'network-name',
+  'network-indicator',
+  'network-caret',
+  'network-component',
+]
 
 function mapStateToProps (state) {
   return {
@@ -32,8 +42,8 @@ function mapDispatchToProps (dispatch) {
     showConfigPage: () => {
       dispatch(actions.showConfigPage())
     },
-    showNetworkDropdown: () => { dispatch(actions.showNetworkDropdown()) },
-    hideNetworkDropdown: () => { dispatch(actions.hideNetworkDropdown()) },
+    showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
+    hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
   }
 }
 
@@ -59,18 +69,13 @@ NetworkDropdown.prototype.render = function () {
   }
 
   return h(Dropdown, {
-    useCssTransition: true,
     isOpen,
     onClickOutside: (event) => {
       const { classList } = event.target
-      const isNotToggleElement = [
-        classList.contains('menu-icon'),
-        classList.contains('network-name'),
-        classList.contains('network-indicator'),
-      ].filter(bool => bool).length === 0
-      // classes from three constituent nodes of the toggle element
-
-      if (isNotToggleElement) {
+      const isInClassList = className => classList.contains(className)
+      const notToggleElementIndex = R.findIndex(isInClassList)(notToggleElementClassnames)
+
+      if (notToggleElementIndex === -1) {
         this.props.hideNetworkDropdown()
       }
     },
-- 
cgit v1.2.3