From 4115c25d8f2e186a575de7904a91b3717da5e800 Mon Sep 17 00:00:00 2001
From: kumavis <aaron@kumavis.me>
Date: Tue, 1 Aug 2017 13:21:02 -0700
Subject: [PATCH 01/32] lint fix

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

diff --git a/ui/app/app.js b/ui/app/app.js
index 8fad0f7d6..297a2f621 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -203,7 +203,7 @@ App.prototype.renderNetworkDropdown = function () {
         classList.contains('menu-icon'),
         classList.contains('network-name'),
         classList.contains('network-indicator'),
-      ].filter(bool => bool).length === 0;
+      ].filter(bool => bool).length === 0
       // classes from three constituent nodes of the toggle element
 
       if (isNotToggleElement) {
diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index 2813f4752..4ef9a5c14 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -17,8 +17,8 @@ class AccountDropdowns extends Component {
       accountSelectorActive: false,
       optionsMenuActive: false,
     }
-    this.accountSelectorToggleClassName = 'fa-angle-down';
-    this.optionsMenuToggleClassName = 'fa-ellipsis-h';
+    this.accountSelectorToggleClassName = 'fa-angle-down'
+    this.optionsMenuToggleClassName = 'fa-ellipsis-h'
   }
 
   renderAccounts () {

From 6176a4b1bf773bfe73d00bec1e4da1f95ffaf7d5 Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevin.serrano@consensys.net>
Date: Thu, 3 Aug 2017 15:32:44 -0700
Subject: [PATCH 02/32] Add QR functionality

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

diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index 4ef9a5c14..79e6cff59 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -144,6 +144,18 @@ 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 : '')
+            },
+          },
+          'Show QR Code',
+        ),
         h(
           DropdownMenuItem,
           {
@@ -226,6 +238,7 @@ const mapDispatchToProps = (dispatch) => {
       showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)),
       addNewAccount: () => dispatch(actions.addNewAccount()),
       showImportPage: () => dispatch(actions.showImportPage()),
+      showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
     },
   }
 }

From ce2e9872cf7470dcf019db742bf5a1011fc1d300 Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevin.serrano@consensys.net>
Date: Thu, 3 Aug 2017 15:51:20 -0700
Subject: [PATCH 03/32] Remove 100% properties that were messing up sizing.

---
 ui/app/css/index.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index 05bdb33af..e9a70b3a2 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -19,8 +19,6 @@ html, body {
   font-weight: 300;
   line-height: 1.4em;
   background: #F7F7F7;
-  width: 100%;
-  height: 100%;
   margin: 0;
   padding: 0;
 }

From b4f621c980916bdbcaa03099cbff4e53adc375b4 Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevin.serrano@consensys.net>
Date: Thu, 3 Aug 2017 16:00:44 -0700
Subject: [PATCH 04/32] Add maximum width for private key reveal

---
 ui/app/components/account-export.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/app/components/account-export.js b/ui/app/components/account-export.js
index 394d878f7..330f73805 100644
--- a/ui/app/components/account-export.js
+++ b/ui/app/components/account-export.js
@@ -100,7 +100,7 @@ ExportAccountView.prototype.render = function () {
           textOverflow: 'ellipsis',
           overflow: 'hidden',
           webkitUserSelect: 'text',
-          width: '100%',
+          maxWidth: '275px',
         },
         onClick: function (event) {
           copyToClipboard(ethUtil.stripHexPrefix(accountDetail.privateKey))

From 77908e1181a8fd043c1e9bdc3807b9dd8a0d3ab7 Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevin.serrano@consensys.net>
Date: Thu, 3 Aug 2017 16:30:57 -0700
Subject: [PATCH 05/32] Fix wonky widths for notices.

---
 ui/app/app.js               | 2 +-
 ui/app/components/notice.js | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/ui/app/app.js b/ui/app/app.js
index 297a2f621..e23caa72b 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -92,7 +92,7 @@ App.prototype.render = function () {
       // panel content
       h('.app-primary' + (transForward ? '.from-right' : '.from-left'), {
         style: {
-          maxWidth: '850px',
+          width: '100%',
         },
       }, [
         this.renderPrimary(),
diff --git a/ui/app/components/notice.js b/ui/app/components/notice.js
index d9f0067cd..636e82ba1 100644
--- a/ui/app/components/notice.js
+++ b/ui/app/components/notice.js
@@ -19,7 +19,11 @@ Notice.prototype.render = function () {
   const disabled = state.disclaimerDisabled
 
   return (
-    h('.flex-column.flex-center.flex-grow', [
+    h('.flex-column.flex-center.flex-grow', {
+      style: {
+        width: '100%', 
+      },
+    }, [
       h('h3.flex-center.text-transform-uppercase.terms-header', {
         style: {
           background: '#EBEBEB',

From 24a13d116ce484a834eea641a75bc4aa626c52c0 Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevin.serrano@consensys.net>
Date: Thu, 3 Aug 2017 16:35:14 -0700
Subject: [PATCH 06/32] Fix fox positioning.

---
 ui/app/unlock.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/ui/app/unlock.js b/ui/app/unlock.js
index 1aee3c5d0..9bacd5124 100644
--- a/ui/app/unlock.js
+++ b/ui/app/unlock.js
@@ -26,7 +26,11 @@ UnlockScreen.prototype.render = function () {
   const state = this.props
   const warning = state.warning
   return (
-    h('.flex-column', [
+    h('.flex-column', {
+      style: {
+        width: 'inherit',
+      },
+    }, [
       h('.unlock-screen.flex-column.flex-center.flex-grow', [
 
         h(Mascot, {

From 67f10d660f1a7f5875253eb0de097e1fab9ad912 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Thu, 3 Aug 2017 17:03:14 -0700
Subject: [PATCH 07/32] Adjust account checksumAddress location up

---
 ui/app/account-detail.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index 24561c32e..a233c6861 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -145,6 +145,7 @@ AccountDetailScreen.prototype.render = function () {
 
               h('div', {
                 style: {
+                  marginTop: '-10px',
                   overflow: 'hidden',
                   textOverflow: 'ellipsis',
                   paddingTop: '3px',

From ecb09fcc0aa801f553cd83659c06c429b5cfbf33 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Thu, 3 Aug 2017 17:08:19 -0700
Subject: [PATCH 08/32] Disable account selection dropdown from account details

---
 ui/app/account-detail.js               |  3 +--
 ui/app/components/account-dropdowns.js | 20 +++++++++++++++-----
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index a233c6861..22a883096 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -128,6 +128,7 @@ AccountDetailScreen.prototype.render = function () {
                       selected,
                       network,
                       identities: props.identities,
+                      enableAccountOptions: true,
                     },
                   ),
                 ]
@@ -145,7 +146,6 @@ AccountDetailScreen.prototype.render = function () {
 
               h('div', {
                 style: {
-                  marginTop: '-10px',
                   overflow: 'hidden',
                   textOverflow: 'ellipsis',
                   paddingTop: '3px',
@@ -153,7 +153,6 @@ AccountDetailScreen.prototype.render = function () {
                   fontSize: '13px',
                   fontFamily: 'Montserrat Light',
                   textRendering: 'geometricPrecision',
-                  marginTop: '10px',
                   marginBottom: '15px',
                   color: '#AEAEAE',
                 },
diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index 79e6cff59..8d8cb211e 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -183,7 +183,7 @@ class AccountDropdowns extends Component {
   }
 
   render () {
-    const { style } = this.props
+    const { style, enableAccountsSelector, enableAccountOptions } = this.props
     const { optionsMenuActive, accountSelectorActive } = this.state
 
     return h(
@@ -192,10 +192,12 @@ class AccountDropdowns extends Component {
         style: style,
       },
       [
-        h(
+        enableAccountsSelector && h(
           'i.fa.fa-angle-down',
           {
-            style: {},
+            style: {
+              fontSize: '1.8em',
+            },
             onClick: (event) => {
               event.stopPropagation()
               this.setState({
@@ -206,10 +208,13 @@ class AccountDropdowns extends Component {
           },
           this.renderAccountSelector(),
         ),
-        h(
+        enableAccountOptions && h(
           'i.fa.fa-ellipsis-h',
           {
-            style: { 'marginLeft': '10px'},
+            style: {
+              marginRight: '0.5em',
+              fontSize: '1.8em',
+            },
             onClick: (event) => {
               event.stopPropagation()
               this.setState({
@@ -225,6 +230,11 @@ class AccountDropdowns extends Component {
   }
 }
 
+AccountDropdowns.defaultProps = {
+  enableAccountsSelector: false,
+  enableAccountOptions: false,
+}
+
 AccountDropdowns.propTypes = {
   identities: PropTypes.objectOf(PropTypes.object),
   selected: PropTypes.string,

From 850e9b63d297c9da2403bb3796445df3cd500600 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Thu, 3 Aug 2017 17:17:00 -0700
Subject: [PATCH 09/32] Move accountselector menu-droppo up to app-header

---
 ui/app/app.js | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/ui/app/app.js b/ui/app/app.js
index e23caa72b..bafc13d32 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -30,6 +30,8 @@ const QrView = require('./components/qr-code')
 const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete')
 const HDRestoreVaultScreen = require('./keychains/hd/restore-vault')
 const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation')
+const AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns
+const ethUtil = require('ethereumjs-util')
 
 module.exports = connect(mapStateToProps)(App)
 
@@ -37,6 +39,14 @@ inherits(App, Component)
 function App () { Component.call(this) }
 
 function mapStateToProps (state) {
+  const {
+    identities,
+    accounts,
+    address,
+  } = state.metamask
+  let selected = address || Object.keys(accounts)[0]
+  // let checksumAddress = selected && ethUtil.toChecksumAddress(selected)
+
   return {
     // state from plugin
     isLoading: state.appState.isLoading,
@@ -57,6 +67,10 @@ function mapStateToProps (state) {
     lastUnreadNotice: state.metamask.lastUnreadNotice,
     lostAccounts: state.metamask.lostAccounts,
     frequentRpcList: state.metamask.frequentRpcList || [],
+
+    // state needed to get account dropdown temporarily rendering from app bar
+    identities,
+    selected,
   }
 }
 
@@ -169,6 +183,14 @@ App.prototype.renderAppBar = function () {
           },
         }, [
 
+          props.isUnlocked && h(AccountDropdowns, {
+            style: {},
+            enableAccountsSelector: true,
+            identities: this.props.identities,
+            selected: this.props.selected,
+            network: this.props.network,
+          }, []),
+
           // hamburger
           props.isUnlocked && h(SandwichExpando, {
             width: 16,

From aff213e845dcea49946f9a26d4b44a35082cd5f3 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Thu, 3 Aug 2017 17:49:23 -0700
Subject: [PATCH 10/32] Position account switcher icon back in app header

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

diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index 8d8cb211e..906b3315b 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -193,10 +193,14 @@ class AccountDropdowns extends Component {
       },
       [
         enableAccountsSelector && h(
-          'i.fa.fa-angle-down',
+          'div.cursor-pointer.color-orange',
           {
             style: {
-              fontSize: '1.8em',
+              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()

From 4d6a289629fdfb404251386564720a3a586fe79a Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Thu, 3 Aug 2017 17:50:00 -0700
Subject: [PATCH 11/32] Add note with previous fa-angle-down for future
 refactor

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

diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index 906b3315b..33daecd38 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -193,9 +193,11 @@ class AccountDropdowns extends Component {
       },
       [
         enableAccountsSelector && h(
+          // 'i.fa.fa-angle-down',
           'div.cursor-pointer.color-orange',
           {
             style: {
+              // fontSize: '1.8em',
               background: 'url(images/switch_acc.svg) white center center no-repeat',
               height: '25px',
               width: '25px',

From 10d3a519c881763d4b79876bb1fde6c8243c3427 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Thu, 3 Aug 2017 18:35:10 -0700
Subject: [PATCH 12/32] De-dupe click handler for sandwich-expando

---
 ui/app/app.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/ui/app/app.js b/ui/app/app.js
index bafc13d32..fda48f41d 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -193,15 +193,17 @@ App.prototype.renderAppBar = function () {
 
           // hamburger
           props.isUnlocked && h(SandwichExpando, {
+            className: 'sandwich-expando',
             width: 16,
             barHeight: 2,
             padding: 0,
             isOpen: state.isMainMenuOpen,
             color: 'rgb(247,146,30)',
-            onClick: (event) => {
-              event.preventDefault()
+            onClick: () => {
               event.stopPropagation()
-              this.setState({ isMainMenuOpen: !state.isMainMenuOpen })
+              this.setState({
+                isMainMenuOpen: !state.isMainMenuOpen,
+              })
             },
           }),
         ]),
@@ -340,9 +342,13 @@ App.prototype.renderDropdown = function () {
     isOpen: isOpen,
     zIndex: 11,
     onClickOutside: (event) => {
-      const { classList } = event.target
-      const isNotToggleElement = !classList.contains('sandwich-expando')
-      if (isNotToggleElement) {
+      const classList = event.target.classList
+      const parentClassList = event.target.parentElement.classList
+
+      const isToggleElement = classList.contains('sandwich-expando') ||
+        parentClassList.contains('sandwich-expando')
+
+      if (isOpen && !isToggleElement) {
         this.setState({ isMainMenuOpen: false })
       }
     },

From 086441e41c3a06cb062a475b59b542aa4ea6f185 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Thu, 3 Aug 2017 18:50:29 -0700
Subject: [PATCH 13/32] Increase size of network dropdown

---
 ui/app/app.js                 | 18 ++++++++++++++++++
 ui/app/components/dropdown.js |  3 ++-
 ui/app/css/index.css          |  2 +-
 ui/app/css/lib.css            |  9 +++++++--
 4 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/ui/app/app.js b/ui/app/app.js
index fda48f41d..2566a7515 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -251,6 +251,9 @@ App.prototype.renderNetworkDropdown = function () {
         key: 'main',
         closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
         onClick: () => props.dispatch(actions.setProviderType('mainnet')),
+        style: {
+          fontSize: '18px'
+        },
       },
       [
         h('.menu-icon.diamond'),
@@ -265,6 +268,9 @@ App.prototype.renderNetworkDropdown = function () {
         key: 'ropsten',
         closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
         onClick: () => props.dispatch(actions.setProviderType('ropsten')),
+        style: {
+          fontSize: '18px'
+        },
       },
       [
         h('.menu-icon.red-dot'),
@@ -279,6 +285,9 @@ App.prototype.renderNetworkDropdown = function () {
         key: 'kovan',
         closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
         onClick: () => props.dispatch(actions.setProviderType('kovan')),
+        style: {
+          fontSize: '18px'
+        },
       },
       [
         h('.menu-icon.hollow-diamond'),
@@ -293,6 +302,9 @@ App.prototype.renderNetworkDropdown = function () {
         key: 'rinkeby',
         closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
         onClick: () => props.dispatch(actions.setProviderType('rinkeby')),
+        style: {
+          fontSize: '18px'
+        },
       },
       [
         h('.menu-icon.golden-square'),
@@ -307,6 +319,9 @@ App.prototype.renderNetworkDropdown = function () {
         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'),
@@ -323,6 +338,9 @@ App.prototype.renderNetworkDropdown = function () {
       {
         closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
         onClick: () => this.props.dispatch(actions.showConfigPage()),
+        style: {
+          fontSize: '18px'
+        },
       },
       [
         h('i.fa.fa-question-circle.fa-lg.menu-icon'),
diff --git a/ui/app/components/dropdown.js b/ui/app/components/dropdown.js
index 759800fd6..993a104ee 100644
--- a/ui/app/components/dropdown.js
+++ b/ui/app/components/dropdown.js
@@ -54,7 +54,7 @@ Dropdown.propTypes = {
 
 class DropdownMenuItem extends Component {
   render () {
-    const { onClick, closeMenu, children } = this.props
+    const { onClick, closeMenu, children, style } = this.props
 
     return h(
       'li.dropdown-menu-item',
@@ -73,6 +73,7 @@ class DropdownMenuItem extends Component {
           display: 'flex',
           justifyContent: 'flex-start',
           alignItems: 'center',
+          ...style,
         },
       },
       children
diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index e9a70b3a2..49b432a1f 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -201,7 +201,7 @@ textarea.twelve-word-phrase {
 }
 
 .check {
-  margin-left: 7px;
+  margin-left: 12px;
   color: #F7861C;
   flex: 1 0 auto;
   display: flex;
diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css
index 98570859a..6fff4f56a 100644
--- a/ui/app/css/lib.css
+++ b/ui/app/css/lib.css
@@ -238,10 +238,15 @@ hr.horizontal-line {
 
 .menu-icon {
   display: inline-block;
-  height: 9px;
-  min-width: 9px;
+  height: 12px;
+  min-width: 12px;
   margin: 13px;
 }
+
+i.fa.fa-question-circle.fa-lg.menu-icon {
+  font-size: 18px;
+}
+
 .ether-icon {
   background: rgb(0, 163, 68);
   border-radius: 20px;

From 36d8c3dd3984d37fb72115464f862d89d1559763 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Thu, 3 Aug 2017 18:55:11 -0700
Subject: [PATCH 14/32] Increase size of settings dropdown and account settings
 dropdown

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

diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index 33daecd38..faad31422 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -119,7 +119,7 @@ class AccountDropdowns extends Component {
       Dropdown,
       {
         style: {
-          marginLeft: '-162px',
+          marginLeft: '-215px',
           minWidth: '180px',
         },
         isOpen: optionsMenuActive,
diff --git a/ui/app/components/dropdown.js b/ui/app/components/dropdown.js
index 993a104ee..b99e0aa9a 100644
--- a/ui/app/components/dropdown.js
+++ b/ui/app/components/dropdown.js
@@ -66,7 +66,7 @@ class DropdownMenuItem extends Component {
         style: {
           listStyle: 'none',
           padding: '8px 0px 8px 0px',
-          fontSize: '12px',
+          fontSize: '18px',
           fontStyle: 'normal',
           fontFamily: 'Montserrat Regular',
           cursor: 'pointer',

From 28fd016d12a73c92a2fa8492de4072520d094f95 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Thu, 3 Aug 2017 19:08:36 -0700
Subject: [PATCH 15/32] Increase size of accountSelection dropdown

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

diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index faad31422..f0ebd9f25 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -35,17 +35,23 @@ class AccountDropdowns extends Component {
           onClick: () => {
             this.props.actions.showAccountDetail(identity.address)
           },
+          style: {
+            fontSize: '24px',
+          }
         },
         [
           h(
             Identicon,
             {
               address: identity.address,
-              diameter: 16,
+              diameter: 32,
+              style: {
+                marginLeft: '10px',
+              },
             },
           ),
-          h('span', { style: { marginLeft: '10px' } }, identity.name || ''),
-          h('span', { style: { marginLeft: '10px' } }, isSelected ? h('.check', '✓') : null),
+          h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, identity.name || ''),
+          h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null),
         ]
       )
     })
@@ -59,10 +65,12 @@ class AccountDropdowns extends Component {
       Dropdown,
       {
         style: {
-          marginLeft: '-125px',
+          marginLeft: '-220px',
+          marginTop: '38px',
           minWidth: '180px',
           overflowY: 'auto',
           maxHeight: '300px',
+          width: '285px',
         },
         isOpen: accountSelectorActive,
         onClickOutside: (event) => {
@@ -85,10 +93,13 @@ class AccountDropdowns extends Component {
             h(
               Identicon,
               {
-                diameter: 16,
+                style: {
+                  marginLeft: '10px'
+                },
+                diameter: 32,
               },
             ),
-            h('span', { style: { marginLeft: '10px' } }, 'Create Account'),
+            h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, 'Create Account'),
           ],
         ),
         h(
@@ -101,10 +112,13 @@ class AccountDropdowns extends Component {
             h(
               Identicon,
               {
-                diameter: 16,
+                style: {
+                  marginLeft: '10px'
+                },
+                diameter: 32,
               },
             ),
-            h('span', { style: { marginLeft: '10px' } }, 'Import Account'),
+            h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, 'Import Account'),
           ]
         ),
       ]

From 6f14f4b717c7f1d86611994473ff7c33059218c6 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Thu, 3 Aug 2017 19:10:37 -0700
Subject: [PATCH 16/32] Allow new accounts selector to handle clicks

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

diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index f0ebd9f25..b4ae9f606 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -17,7 +17,7 @@ class AccountDropdowns extends Component {
       accountSelectorActive: false,
       optionsMenuActive: false,
     }
-    this.accountSelectorToggleClassName = 'fa-angle-down'
+    this.accountSelectorToggleClassName = 'accounts-selector'
     this.optionsMenuToggleClassName = 'fa-ellipsis-h'
   }
 
@@ -208,7 +208,7 @@ class AccountDropdowns extends Component {
       [
         enableAccountsSelector && h(
           // 'i.fa.fa-angle-down',
-          'div.cursor-pointer.color-orange',
+          'div.cursor-pointer.color-orange.accounts-selector',
           {
             style: {
               // fontSize: '1.8em',

From baee076348a913529834f7d57239e2ded460aa0a Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Thu, 3 Aug 2017 19:17:46 -0700
Subject: [PATCH 17/32] Lint ui/app

---
 ui/app/app.js                          | 17 +++++++----------
 ui/app/components/account-dropdowns.js |  6 +++---
 ui/app/components/notice.js            |  2 +-
 3 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/ui/app/app.js b/ui/app/app.js
index 2566a7515..0592496fc 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -31,7 +31,6 @@ const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete')
 const HDRestoreVaultScreen = require('./keychains/hd/restore-vault')
 const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation')
 const AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns
-const ethUtil = require('ethereumjs-util')
 
 module.exports = connect(mapStateToProps)(App)
 
@@ -44,8 +43,7 @@ function mapStateToProps (state) {
     accounts,
     address,
   } = state.metamask
-  let selected = address || Object.keys(accounts)[0]
-  // let checksumAddress = selected && ethUtil.toChecksumAddress(selected)
+  const selected = address || Object.keys(accounts)[0]
 
   return {
     // state from plugin
@@ -252,7 +250,7 @@ App.prototype.renderNetworkDropdown = function () {
         closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
         onClick: () => props.dispatch(actions.setProviderType('mainnet')),
         style: {
-          fontSize: '18px'
+          fontSize: '18px',
         },
       },
       [
@@ -269,7 +267,7 @@ App.prototype.renderNetworkDropdown = function () {
         closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
         onClick: () => props.dispatch(actions.setProviderType('ropsten')),
         style: {
-          fontSize: '18px'
+          fontSize: '18px',
         },
       },
       [
@@ -286,7 +284,7 @@ App.prototype.renderNetworkDropdown = function () {
         closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
         onClick: () => props.dispatch(actions.setProviderType('kovan')),
         style: {
-          fontSize: '18px'
+          fontSize: '18px',
         },
       },
       [
@@ -303,7 +301,7 @@ App.prototype.renderNetworkDropdown = function () {
         closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
         onClick: () => props.dispatch(actions.setProviderType('rinkeby')),
         style: {
-          fontSize: '18px'
+          fontSize: '18px',
         },
       },
       [
@@ -320,7 +318,7 @@ App.prototype.renderNetworkDropdown = function () {
         closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
         onClick: () => props.dispatch(actions.setDefaultRpcTarget()),
         style: {
-          fontSize: '18px'
+          fontSize: '18px',
         },
       },
       [
@@ -339,7 +337,7 @@ App.prototype.renderNetworkDropdown = function () {
         closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
         onClick: () => this.props.dispatch(actions.showConfigPage()),
         style: {
-          fontSize: '18px'
+          fontSize: '18px',
         },
       },
       [
@@ -625,7 +623,6 @@ App.prototype.renderCommonRpc = function (rpcList, provider) {
     if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) {
       return null
     } else {
-
       return h(
         DropdownMenuItem,
         {
diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index b4ae9f606..fc96ce6c5 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -37,7 +37,7 @@ class AccountDropdowns extends Component {
           },
           style: {
             fontSize: '24px',
-          }
+          },
         },
         [
           h(
@@ -94,7 +94,7 @@ class AccountDropdowns extends Component {
               Identicon,
               {
                 style: {
-                  marginLeft: '10px'
+                  marginLeft: '10px',
                 },
                 diameter: 32,
               },
@@ -113,7 +113,7 @@ class AccountDropdowns extends Component {
               Identicon,
               {
                 style: {
-                  marginLeft: '10px'
+                  marginLeft: '10px',
                 },
                 diameter: 32,
               },
diff --git a/ui/app/components/notice.js b/ui/app/components/notice.js
index 636e82ba1..c26505193 100644
--- a/ui/app/components/notice.js
+++ b/ui/app/components/notice.js
@@ -21,7 +21,7 @@ Notice.prototype.render = function () {
   return (
     h('.flex-column.flex-center.flex-grow', {
       style: {
-        width: '100%', 
+        width: '100%',
       },
     }, [
       h('h3.flex-center.text-transform-uppercase.terms-header', {

From 5ddb40f60cfd300f97aba82158fa239d1c80f9bc Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Thu, 3 Aug 2017 19:23:22 -0700
Subject: [PATCH 18/32] Adjust top and bottom padding of accountSwitcher

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

diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index fc96ce6c5..b61a4996a 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -24,7 +24,7 @@ class AccountDropdowns extends Component {
   renderAccounts () {
     const { identities, selected } = this.props
 
-    return Object.keys(identities).map((key) => {
+    return Object.keys(identities).map((key, index) => {
       const identity = identities[key]
       const isSelected = identity.address === selected
 
@@ -36,6 +36,7 @@ class AccountDropdowns extends Component {
             this.props.actions.showAccountDetail(identity.address)
           },
           style: {
+            marginTop: index === 0 ? '10px' : '',
             fontSize: '24px',
           },
         },
@@ -118,7 +119,13 @@ class AccountDropdowns extends Component {
                 diameter: 32,
               },
             ),
-            h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, 'Import Account'),
+            h('span', {
+              style: {
+                marginLeft: '20px',
+                fontSize: '24px',
+                marginButtom: '20px',
+              },
+            }, 'Import Account'),
           ]
         ),
       ]

From 777eb865df2d8dae15eb34589bdd47817aab8486 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Thu, 3 Aug 2017 20:02:49 -0700
Subject: [PATCH 19/32] Adjust padding of accountSwitcher dropdown

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

diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index b61a4996a..da92619e1 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -36,7 +36,7 @@ class AccountDropdowns extends Component {
             this.props.actions.showAccountDetail(identity.address)
           },
           style: {
-            marginTop: index === 0 ? '10px' : '',
+            marginTop: index === 0 ? '5px' : '',
             fontSize: '24px',
           },
         },
@@ -66,12 +66,15 @@ class AccountDropdowns extends Component {
       Dropdown,
       {
         style: {
-          marginLeft: '-220px',
+          marginLeft: '-238px',
           marginTop: '38px',
           minWidth: '180px',
           overflowY: 'auto',
           maxHeight: '300px',
-          width: '285px',
+          width: '300px',
+        },
+        innerStyle: {
+          padding: '8px 25px',
         },
         isOpen: accountSelectorActive,
         onClickOutside: (event) => {
@@ -123,7 +126,7 @@ class AccountDropdowns extends Component {
               style: {
                 marginLeft: '20px',
                 fontSize: '24px',
-                marginButtom: '20px',
+                marginBottom: '5px',
               },
             }, 'Import Account'),
           ]

From 29dcadc346fec8c2ea66c84c72d6c65bc565162f Mon Sep 17 00:00:00 2001
From: kumavis <aaron@kumavis.me>
Date: Thu, 3 Aug 2017 21:32:08 -0700
Subject: [PATCH 20/32] ui - dropdown - use Object.assign syntax to appease
 coverage parser

---
 ui/app/components/dropdown.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/ui/app/components/dropdown.js b/ui/app/components/dropdown.js
index b99e0aa9a..8cdfc13e8 100644
--- a/ui/app/components/dropdown.js
+++ b/ui/app/components/dropdown.js
@@ -63,7 +63,7 @@ class DropdownMenuItem extends Component {
           onClick()
           closeMenu()
         },
-        style: {
+        style: Object.assign({
           listStyle: 'none',
           padding: '8px 0px 8px 0px',
           fontSize: '18px',
@@ -73,8 +73,7 @@ class DropdownMenuItem extends Component {
           display: 'flex',
           justifyContent: 'flex-start',
           alignItems: 'center',
-          ...style,
-        },
+        }, style),
       },
       children
     )

From 44616483e032241a63c49abec752aa8ef16551d2 Mon Sep 17 00:00:00 2001
From: kumavis <aaron@kumavis.me>
Date: Thu, 3 Aug 2017 21:40:32 -0700
Subject: [PATCH 21/32] test - integration - throw error on failure

---
 test/integration/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/integration/index.js b/test/integration/index.js
index 85f91d92b..e9263c6c8 100644
--- a/test/integration/index.js
+++ b/test/integration/index.js
@@ -17,7 +17,7 @@ try {
   })
 
   b.bundle().pipe(writeStream)
-} catch (e) {
-  console.error('Integration build failure', e)
+} catch (err) {
+  throw new Error('Integration tests build failure - ' + err.stack)
 }
 

From 925edd5f7decfc3272b6ad5bf9b44ca8504fd0c8 Mon Sep 17 00:00:00 2001
From: kumavis <aaron@kumavis.me>
Date: Thu, 3 Aug 2017 21:50:17 -0700
Subject: [PATCH 22/32] test - integration - remove unused code

---
 test/integration/index.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/test/integration/index.js b/test/integration/index.js
index e9263c6c8..549b7d37c 100644
--- a/test/integration/index.js
+++ b/test/integration/index.js
@@ -8,7 +8,9 @@ var b = browserify()
 
 // Remove old bundle
 try {
-  fs.unlinkSync(bundlePath)
+  // if (fs.existsSync(bundlePath)) {
+  //   fs.unlinkSync(bundlePath)
+  // }
 
   var writeStream = fs.createWriteStream(bundlePath)
 

From f804567d24cd3e0bd6d8dd77f637da79207c5e08 Mon Sep 17 00:00:00 2001
From: kumavis <aaron@kumavis.me>
Date: Thu, 3 Aug 2017 21:50:41 -0700
Subject: [PATCH 23/32] test - integration - syntax - prefer const

---
 test/integration/index.js | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/test/integration/index.js b/test/integration/index.js
index 549b7d37c..ab418a146 100644
--- a/test/integration/index.js
+++ b/test/integration/index.js
@@ -1,18 +1,13 @@
-var fs = require('fs')
-var path = require('path')
-var browserify = require('browserify')
-var tests = fs.readdirSync(path.join(__dirname, 'lib'))
-var bundlePath = path.join(__dirname, 'bundle.js')
+const fs = require('fs')
+const path = require('path')
+const browserify = require('browserify')
+const tests = fs.readdirSync(path.join(__dirname, 'lib'))
+const bundlePath = path.join(__dirname, 'bundle.js')
 
-var b = browserify()
+const b = browserify()
 
-// Remove old bundle
 try {
-  // if (fs.existsSync(bundlePath)) {
-  //   fs.unlinkSync(bundlePath)
-  // }
-
-  var writeStream = fs.createWriteStream(bundlePath)
+  const writeStream = fs.createWriteStream(bundlePath)
 
   tests.forEach(function (fileName) {
     b.add(path.join(__dirname, 'lib', fileName))

From 0a5a46b8f40d6f52a96f0fee96f271dd66a506ab Mon Sep 17 00:00:00 2001
From: kumavis <aaron@kumavis.me>
Date: Thu, 3 Aug 2017 22:24:22 -0700
Subject: [PATCH 24/32] test - integration - better error handling

---
 test/integration/index.js | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/test/integration/index.js b/test/integration/index.js
index ab418a146..e089fc39b 100644
--- a/test/integration/index.js
+++ b/test/integration/index.js
@@ -6,15 +6,14 @@ const bundlePath = path.join(__dirname, 'bundle.js')
 
 const b = browserify()
 
-try {
-  const writeStream = fs.createWriteStream(bundlePath)
+const writeStream = fs.createWriteStream(bundlePath)
 
-  tests.forEach(function (fileName) {
-    b.add(path.join(__dirname, 'lib', fileName))
-  })
-
-  b.bundle().pipe(writeStream)
-} catch (err) {
-  throw new Error('Integration tests build failure - ' + err.stack)
-}
+tests.forEach(function (fileName) {
+  b.add(path.join(__dirname, 'lib', fileName))
+})
 
+b.bundle()
+.pipe(writeStream)
+.on('error', (err) => {
+  throw err
+})

From 781ac00eac5d947b2c88159d38267386992a05f2 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Fri, 4 Aug 2017 11:31:07 -0700
Subject: [PATCH 25/32] Re-enable css transitions for dropdowns in header,
 needs menu-droppo library update

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

diff --git a/ui/app/app.js b/ui/app/app.js
index 0592496fc..620b4617a 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -218,6 +218,7 @@ App.prototype.renderNetworkDropdown = function () {
   const isOpen = state.isNetworkMenuOpen
 
   return h(Dropdown, {
+    useCssTransition: true,
     isOpen,
     onClickOutside: (event) => {
       const { classList } = event.target
@@ -355,6 +356,7 @@ App.prototype.renderDropdown = function () {
   const isOpen = state.isMainMenuOpen
 
   return h(Dropdown, {
+    useCssTransition: true,
     isOpen: isOpen,
     zIndex: 11,
     onClickOutside: (event) => {
diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index da92619e1..b23600e9b 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -65,6 +65,7 @@ class AccountDropdowns extends Component {
     return h(
       Dropdown,
       {
+        useCssTransition: true, // Hardcoded because account selector is temporarily in app-header
         style: {
           marginLeft: '-238px',
           marginTop: '38px',
diff --git a/ui/app/components/dropdown.js b/ui/app/components/dropdown.js
index 8cdfc13e8..ef1a274c3 100644
--- a/ui/app/components/dropdown.js
+++ b/ui/app/components/dropdown.js
@@ -8,7 +8,7 @@ const noop = () => {}
 
 class Dropdown extends Component {
   render () {
-    const { isOpen, onClickOutside, style, innerStyle, children } = this.props
+    const { isOpen, onClickOutside, style, innerStyle, children, useCssTransition } = this.props
 
     const innerStyleDefaults = extend({
       borderRadius: '4px',
@@ -20,6 +20,7 @@ class Dropdown extends Component {
     return h(
       MenuDroppo,
       {
+        useCssTransition,
         isOpen,
         zIndex: 11,
         onClickOutside,
@@ -43,6 +44,7 @@ class Dropdown extends Component {
 Dropdown.defaultProps = {
   isOpen: false,
   onClick: noop,
+  useCssTransition: false,
 }
 
 Dropdown.propTypes = {

From 4d967ebea99b8c1a899a91e379a1fa12015b7e53 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Fri, 4 Aug 2017 11:47:36 -0700
Subject: [PATCH 26/32] Bring menu-droppo component into project, remove as a
 dependency

---
 package.json                     |   2 +-
 ui/app/components/dropdown.js    |   2 +-
 ui/app/components/menu-droppo.js | 137 +++++++++++++++++++++++++++++++
 3 files changed, 139 insertions(+), 2 deletions(-)
 create mode 100644 ui/app/components/menu-droppo.js

diff --git a/package.json b/package.json
index 98066a172..60987559e 100644
--- a/package.json
+++ b/package.json
@@ -91,7 +91,6 @@
     "inject-css": "^0.1.1",
     "jazzicon": "^1.2.0",
     "loglevel": "^1.4.1",
-    "menu-droppo": "2.0.1",
     "metamask-logo": "^2.1.2",
     "mississippi": "^1.2.0",
     "mkdirp": "^0.5.1",
@@ -109,6 +108,7 @@
     "pumpify": "^1.3.4",
     "qrcode-npm": "0.0.3",
     "react": "^15.0.2",
+    "react-addons-css-transition-group": "^15.6.0",
     "react-dom": "^15.5.4",
     "react-hyperscript": "^2.2.2",
     "react-markdown": "^2.3.0",
diff --git a/ui/app/components/dropdown.js b/ui/app/components/dropdown.js
index ef1a274c3..34c7149ee 100644
--- a/ui/app/components/dropdown.js
+++ b/ui/app/components/dropdown.js
@@ -1,7 +1,7 @@
 const Component = require('react').Component
 const PropTypes = require('react').PropTypes
 const h = require('react-hyperscript')
-const MenuDroppo = require('menu-droppo')
+const MenuDroppo = require('./menu-droppo')
 const extend = require('xtend')
 
 const noop = () => {}
diff --git a/ui/app/components/menu-droppo.js b/ui/app/components/menu-droppo.js
new file mode 100644
index 000000000..a9370a7c8
--- /dev/null
+++ b/ui/app/components/menu-droppo.js
@@ -0,0 +1,137 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const findDOMNode = require('react-dom').findDOMNode
+const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
+
+module.exports = MenuDroppoComponent
+
+
+inherits(MenuDroppoComponent, Component)
+function MenuDroppoComponent() {
+  Component.call(this)
+}
+
+MenuDroppoComponent.prototype.render = function() {
+
+  const speed = this.props.speed || '300ms'
+  const useCssTransition = this.props.useCssTransition
+  const zIndex = ('zIndex' in this.props) ? this.props.zIndex : 0
+
+  this.manageListeners()
+
+  let style = this.props.style || {}
+  if (!('position' in style)) {
+    style.position = 'fixed'
+  }
+  style.zIndex = zIndex
+
+  return (
+    h('.menu-droppo-container', {
+      style,
+    }, [
+      h('style', `
+        .menu-droppo-enter {
+          transition: transform ${speed} ease-in-out;
+          transform: translateY(-200%);
+        }
+
+        .menu-droppo-enter.menu-droppo-enter-active {
+          transition: transform ${speed} ease-in-out;
+          transform: translateY(0%);
+        }
+
+        .menu-droppo-leave {
+          transition: transform ${speed} ease-in-out;
+          transform: translateY(0%);
+        }
+
+        .menu-droppo-leave.menu-droppo-leave-active {
+          transition: transform ${speed} ease-in-out;
+          transform: translateY(-200%);
+        }
+      `),
+
+      !!useCssTransition
+        ? h(ReactCSSTransitionGroup, {
+          className: 'css-transition-group',
+          transitionName: 'menu-droppo',
+          transitionEnterTimeout: parseInt(speed),
+          transitionLeaveTimeout: parseInt(speed),
+        }, this.renderPrimary())
+        : this.renderPrimary()
+    ])
+  )
+}
+
+MenuDroppoComponent.prototype.renderPrimary = function() {
+  const isOpen = this.props.isOpen
+  if (!isOpen) {
+    return null
+    return h('span', {
+      key: 'menu-droppo-null',
+      style: {
+        height: '0px',
+      }
+    })
+  }
+
+  let innerStyle = this.props.innerStyle || {}
+
+  return (
+    h('.menu-droppo', {
+      key: 'menu-droppo-drawer',
+      style: innerStyle,
+    },
+    [ this.props.children ])
+  )
+}
+
+MenuDroppoComponent.prototype.manageListeners = function() {
+  const isOpen = this.props.isOpen
+  const onClickOutside = this.props.onClickOutside
+
+  if (isOpen) {
+    this.outsideClickHandler = onClickOutside
+  } else if (isOpen) {
+    this.outsideClickHandler = null
+  }
+}
+
+MenuDroppoComponent.prototype.componentDidMount = function() {
+  if (this && document.body) {
+    this.globalClickHandler = this.globalClickOccurred.bind(this);
+    document.body.addEventListener('click', this.globalClickHandler)
+    var container = findDOMNode(this)
+    this.container = container
+  }
+}
+
+MenuDroppoComponent.prototype.componentWillUnmount = function() {
+  if (this && document.body) {
+    document.body.removeEventListener('click', this.globalClickHandler)
+  }
+}
+
+MenuDroppoComponent.prototype.globalClickOccurred = function(event) {
+  const target = event.target
+  const container = findDOMNode(this)
+  const isOpen = this.props.isOpen
+
+  if (target !== container &&
+     !isDescendant(this.container, event.target) &&
+     this.outsideClickHandler) {
+     this.outsideClickHandler(event)
+  }
+}
+
+function isDescendant(parent, child) {
+   var node = child.parentNode;
+   while (node != null) {
+     if (node == parent) {
+       return true;
+     }
+     node = node.parentNode;
+   }
+   return false;
+}

From 0cd72db2d2aa575420befa687156cf2bd271b6dd Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Fri, 4 Aug 2017 12:57:16 -0700
Subject: [PATCH 27/32] Adds early breakpoint from @frankiebee 's + @kumavis 's
 CR

---
 ui/app/css/lib.css | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css
index 6fff4f56a..e7b3bab05 100644
--- a/ui/app/css/lib.css
+++ b/ui/app/css/lib.css
@@ -276,3 +276,27 @@ i.fa.fa-question-circle.fa-lg.menu-icon {
   color: red;
 }
 
+// Account Subsection + Tab Section Breakpoints Hack:
+//   Resolves issue from @frankiebee in:
+//   https://github.com/MetaMask/metamask-extension/pull/1835
+// Please remove this when integrating new designs
+@media screen and (min-width: 575px) and (max-width: 800px) {
+  .account-data-subsection {
+    flex: 0 0 auto !important; // needs to remove default flex settings
+    width: 40%;
+    margin-left: 10px !important;
+    margin-right: 10px !important;
+  }
+
+  .tabSection {
+    flex: 0 0 auto !important; // needs to remove default flex settings
+    width: 49%;
+    min-width: 305px; // min-width needs to be low for an early break
+    margin-left: 10px !important;
+    margin-right: 10px !important;
+  }
+
+  .name-label {
+    width: 80%; // repositions dropdown after early break
+  }
+}

From 8cc3ae5988d652b73217e80df93a685d7e5a8422 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Fri, 4 Aug 2017 13:19:06 -0700
Subject: [PATCH 28/32] Cleanup breakpoint css + comment on hackiness

---
 ui/app/css/lib.css | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css
index e7b3bab05..81647d1c1 100644
--- a/ui/app/css/lib.css
+++ b/ui/app/css/lib.css
@@ -276,27 +276,30 @@ i.fa.fa-question-circle.fa-lg.menu-icon {
   color: red;
 }
 
-// Account Subsection + Tab Section Breakpoints Hack:
-//   Resolves issue from @frankiebee in:
-//   https://github.com/MetaMask/metamask-extension/pull/1835
-// Please remove this when integrating new designs
+/*
+  Hacky breakpoint fix for account + tab sections
+    Resolves issue from @frankiebee in
+    https://github.com/MetaMask/metamask-extension/pull/1835
+  Please remove this when integrating new designs
+ */
+
 @media screen and (min-width: 575px) and (max-width: 800px) {
   .account-data-subsection {
-    flex: 0 0 auto !important; // needs to remove default flex settings
-    width: 40%;
-    margin-left: 10px !important;
+    flex: 0 0 auto !important; // reset flex
+    margin-left: 10px !important; // create additional horizontal space
     margin-right: 10px !important;
+    width: 40%;
   }
 
   .tabSection {
-    flex: 0 0 auto !important; // needs to remove default flex settings
-    width: 49%;
-    min-width: 305px; // min-width needs to be low for an early break
+    flex: 0 0 auto !important;
     margin-left: 10px !important;
     margin-right: 10px !important;
+    min-width: 285px;
+    width: 49%;
   }
 
   .name-label {
-    width: 80%; // repositions dropdown after early break
+    width: 80%;
   }
 }

From 186bcec4fb5edede504d6aa56b4f67426a6056ec Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Fri, 4 Aug 2017 13:31:18 -0700
Subject: [PATCH 29/32] Lint menu-droppo

---
 ui/app/components/menu-droppo.js | 55 ++++++++++++++------------------
 1 file changed, 24 insertions(+), 31 deletions(-)

diff --git a/ui/app/components/menu-droppo.js b/ui/app/components/menu-droppo.js
index a9370a7c8..66ab18954 100644
--- a/ui/app/components/menu-droppo.js
+++ b/ui/app/components/menu-droppo.js
@@ -8,12 +8,11 @@ module.exports = MenuDroppoComponent
 
 
 inherits(MenuDroppoComponent, Component)
-function MenuDroppoComponent() {
+function MenuDroppoComponent () {
   Component.call(this)
 }
 
-MenuDroppoComponent.prototype.render = function() {
-
+MenuDroppoComponent.prototype.render = function () {
   const speed = this.props.speed || '300ms'
   const useCssTransition = this.props.useCssTransition
   const zIndex = ('zIndex' in this.props) ? this.props.zIndex : 0
@@ -52,31 +51,25 @@ MenuDroppoComponent.prototype.render = function() {
         }
       `),
 
-      !!useCssTransition
+      useCssTransition
         ? h(ReactCSSTransitionGroup, {
           className: 'css-transition-group',
           transitionName: 'menu-droppo',
           transitionEnterTimeout: parseInt(speed),
           transitionLeaveTimeout: parseInt(speed),
         }, this.renderPrimary())
-        : this.renderPrimary()
+        : this.renderPrimary(),
     ])
   )
 }
 
-MenuDroppoComponent.prototype.renderPrimary = function() {
+MenuDroppoComponent.prototype.renderPrimary = function () {
   const isOpen = this.props.isOpen
   if (!isOpen) {
     return null
-    return h('span', {
-      key: 'menu-droppo-null',
-      style: {
-        height: '0px',
-      }
-    })
   }
 
-  let innerStyle = this.props.innerStyle || {}
+  const innerStyle = this.props.innerStyle || {}
 
   return (
     h('.menu-droppo', {
@@ -87,7 +80,7 @@ MenuDroppoComponent.prototype.renderPrimary = function() {
   )
 }
 
-MenuDroppoComponent.prototype.manageListeners = function() {
+MenuDroppoComponent.prototype.manageListeners = function () {
   const isOpen = this.props.isOpen
   const onClickOutside = this.props.onClickOutside
 
@@ -98,40 +91,40 @@ MenuDroppoComponent.prototype.manageListeners = function() {
   }
 }
 
-MenuDroppoComponent.prototype.componentDidMount = function() {
+MenuDroppoComponent.prototype.componentDidMount = function () {
   if (this && document.body) {
-    this.globalClickHandler = this.globalClickOccurred.bind(this);
+    this.globalClickHandler = this.globalClickOccurred.bind(this)
     document.body.addEventListener('click', this.globalClickHandler)
     var container = findDOMNode(this)
     this.container = container
   }
 }
 
-MenuDroppoComponent.prototype.componentWillUnmount = function() {
+MenuDroppoComponent.prototype.componentWillUnmount = function () {
   if (this && document.body) {
     document.body.removeEventListener('click', this.globalClickHandler)
   }
 }
 
-MenuDroppoComponent.prototype.globalClickOccurred = function(event) {
+MenuDroppoComponent.prototype.globalClickOccurred = function (event) {
   const target = event.target
   const container = findDOMNode(this)
-  const isOpen = this.props.isOpen
 
   if (target !== container &&
-     !isDescendant(this.container, event.target) &&
-     this.outsideClickHandler) {
-     this.outsideClickHandler(event)
+    !isDescendant(this.container, event.target) &&
+    this.outsideClickHandler) {
+    this.outsideClickHandler(event)
   }
 }
 
-function isDescendant(parent, child) {
-   var node = child.parentNode;
-   while (node != null) {
-     if (node == parent) {
-       return true;
-     }
-     node = node.parentNode;
-   }
-   return false;
+function isDescendant (parent, child) {
+  var node = child.parentNode
+  while (node !== null) {
+    if (node === parent) {
+      return true
+    }
+    node = node.parentNode
+  }
+
+  return false
 }

From b5251d22a6da21b918a0bfd98e6e572bc80a58f5 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Fri, 4 Aug 2017 23:34:26 -0700
Subject: [PATCH 30/32] Fix integration test failures: unnecessary
 sandwich-expando event stopPropagation

---
 ui/app/app.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/app/app.js b/ui/app/app.js
index 620b4617a..4565bdd37 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -198,7 +198,6 @@ App.prototype.renderAppBar = function () {
             isOpen: state.isMainMenuOpen,
             color: 'rgb(247,146,30)',
             onClick: () => {
-              event.stopPropagation()
               this.setState({
                 isMainMenuOpen: !state.isMainMenuOpen,
               })

From f37f405d5273ce6387132e4e9887d6b578b74fea Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Fri, 4 Aug 2017 23:34:54 -0700
Subject: [PATCH 31/32] Fix integration test failures: ensure qr code is
 accessible

---
 test/integration/lib/first-time.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/test/integration/lib/first-time.js b/test/integration/lib/first-time.js
index 6c8cedbac..0e4b802da 100644
--- a/test/integration/lib/first-time.js
+++ b/test/integration/lib/first-time.js
@@ -90,7 +90,13 @@ QUnit.test('render init screen', function (assert) {
     return wait()
   }).then(function (){
 
-    var qrButton = app.find('.fa.fa-qrcode')[0]
+    var qrButton = app.find('.fa.fa-ellipsis-h')[0] // open account settings dropdown
+    qrButton.click()
+
+    return wait(1000)
+  }).then(function (){
+
+    var qrButton = app.find('.dropdown-menu-item')[1] // qr code item
     qrButton.click()
 
     return wait(1000)

From 50fc9c965842f023180630267ecd8dc4f47e9cd6 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Sun, 6 Aug 2017 09:57:49 -0700
Subject: [PATCH 32/32] Improve readability of changelog

---
 CHANGELOG.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b3e069352..0f0151e6d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,8 +2,8 @@
 
 ## Current Master
 
-- Replace account scren with an account drop-down menu.
-- Replace confusing buttons with an new account-specific drop-down menu.
+- Replace account screen with an account drop-down menu.
+- Replace confusing buttons with a new account-specific drop-down menu.
 
 ## 3.9.5 2017-8-04
 
@@ -89,7 +89,7 @@
 
 ## 3.7.8 2017-6-12
 
-- Add a `ethereum:` prefix to the QR code address
+- Add an `ethereum:` prefix to the QR code address
 - The default network on installation is now MainNet
 - Fix currency API URL from cryptonator.
 - Update gasLimit params with every new block seen.
@@ -245,7 +245,7 @@
 
 - Add ability to import accounts in JSON file format (used by Mist, Geth, MyEtherWallet, and more!)
 - Fix unapproved messages not being included in extension badge.
-- Fix rendering bug where the Confirm transaction view would lets you approve transactions when the account has insufficient balance.
+- Fix rendering bug where the Confirm transaction view would let you approve transactions when the account has insufficient balance.
 
 ## 3.1.2 2017-1-24
 
@@ -268,8 +268,8 @@
 ## 3.0.0 2017-1-16
 
 - Fix seed word account generation (https://medium.com/metamask/metamask-3-migration-guide-914b79533cdd#.t4i1qmmsz).
-- Fix Bug where you see a empty transaction flash by on the confirm transaction view.
-- Create visible difference in transaction history between a approved but not yet included in a block transaction and a transaction who has been confirmed.
+- Fix Bug where you see an empty transaction flash by on the confirm transaction view.
+- Create visible difference in transaction history between an approved but not yet included in a block transaction and a transaction who has been confirmed.
 - Fix memory leak in RPC Cache
 - Override RPC commands eth_syncing and web3_clientVersion
 - Remove certain non-essential permissions from certain builds.
@@ -324,7 +324,7 @@
 
 - Fix bug where gas estimate would sometimes be very high.
 - Increased our gas estimate from 100k gas to 20% of estimate.
-- Fix github link on info page to point at current repository.
+- Fix GitHub link on info page to point at current repository.
 
 ## 2.13.6 2016-10-26
 
@@ -400,7 +400,7 @@ popup notification opens up.
 - Block negative values from transactions.
 - Fixed a memory leak.
 - MetaMask logo now renders as super lightweight SVG, improving compatibility and performance.
-- Now showing loading indication during vault unlocking, to clarify behavior for users who are experience slow unlocks.
+- Now showing loading indication during vault unlocking, to clarify behavior for users who are experiencing slow unlocks.
 - Now only initially creates one wallet when restoring a vault, to reduce some users' confusion.
 
 ## 2.10.2 2016-09-02
@@ -432,7 +432,7 @@ popup notification opens up.
 - Added info link on account screen that visits Etherscan.
 - Fixed bug where a message signing request would be lost if the vault was locked.
 - Added shortcut to open MetaMask (Ctrl+Alt+M or Cmd+Opt/Alt+M)
-- Prevent API calls in  tests.
+- Prevent API calls in tests.
 - Fixed bug where sign message confirmation would sometimes render blank.
 
 ## 2.9.0 2016-08-22