Reorder Account Selector and Account Options

ui/responsive/app/app.js

@@ -210,6 +210,7 @@ App.prototype.renderNetworkDropdown = function () {
     },
     innerStyle: {},
   }, [
+
     h(
       DropdownMenuItem,
       {
@@ -233,7 +234,8 @@ App.prototype.renderNetworkDropdown = function () {
         h('.menu-icon.red-dot'),
         'Ropsten Test Network',
         providerType === 'ropsten' ? h('.check', '✓') : null,
-      ]),
+      ]
+    ),
 
     h(
       DropdownMenuItem,
@@ -289,6 +291,7 @@ App.prototype.renderNetworkDropdown = function () {
         activeNetwork === 'custom' ? h('.check', '✓') : null,
       ]
     ),
+
   ])
 }
 

ui/responsive/app/components/account-dropdowns.js

@@ -14,12 +14,12 @@ class AccountDropdowns extends Component {
   constructor (props) {
     super(props)
     this.state = {
-      overflowMenuActive: false,
+      accountSelectorActive: false,
-      switchingMenuActive: false,
+      optionsMenuActive: false,
     }
   }
 
-  getAccounts () {
+  renderAccounts () {
     const { identities, selected } = this.props
 
     return Object.keys(identities).map((key) => {
@@ -49,38 +49,71 @@ class AccountDropdowns extends Component {
     })
   }
 
-  render () {
+  renderAccountSelector () {
-    const { style, actions } = this.props
+    const { actions } = this.props
-    const { switchingMenuActive, overflowMenuActive } = this.state
+    const { accountSelectorActive } = this.state
 
     return h(
-      'span',
+      Dropdown,
       {
-        style: style,
+        style: {
+          marginLeft: '-125px',
+          minWidth: '180px',
+        },
+        isOpen: accountSelectorActive,
+        onClickOutside: () => { this.setState({ accountSelectorActive: false }) },
       },
       [
+        ...this.renderAccounts(),
         h(
-          'i.fa.fa-angle-down',
+          DropdownMenuItem,
           {
-            style: {},
+            closeMenu: () => {},
-            onClick: (event) => {
+            onClick: () => actions.addNewAccount(),
-              event.stopPropagation()
-              this.setState({
-                switchingMenuActive: !switchingMenuActive,
-                overflowMenuActive: false,
-              })
           },
+          [
+            h(
+              Identicon,
+              {
+                diameter: 16,
+              },
+            ),
+            h('span', { style: { marginLeft: '10px' } }, 'Create Account'),
+          ],
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => actions.showImportPage(),
           },
           [
             h(
+              Identicon,
+              {
+                diameter: 16,
+              },
+            ),
+            h('span', { style: { marginLeft: '10px' } }, 'Import Account'),
+          ]
+        ),
+      ]
+    )
+  }
+
+  renderAccountOptions () {
+    const { actions } = this.props
+    const { optionsMenuActive } = this.state
+
+    return h(
       Dropdown,
       {
         style: {
-                  marginLeft: '-140px',
+          marginLeft: '-162px',
           minWidth: '180px',
         },
-                isOpen: switchingMenuActive,
+        isOpen: optionsMenuActive,
-                onClickOutside: () => { this.setState({ switchingMenuActive: false}) },
+        onClickOutside: () => { this.setState({ optionsMenuActive: false }) },
       },
       [
         h(
@@ -126,69 +159,46 @@ class AccountDropdowns extends Component {
           'Export Private Key',
         ),
       ]
-            ),
+    )
-          ],
+  }
-        ),
+
+  render () {
+    const { style } = this.props
+    const { optionsMenuActive, accountSelectorActive } = this.state
+
+    return h(
+      'span',
+      {
+        style: style,
+      },
+      [
         h(
-          'i.fa.fa-ellipsis-h',
+          'i.fa.fa-angle-down',
           {
-            style: { 'marginLeft': '10px'},
+            style: {},
             onClick: (event) => {
               event.stopPropagation()
               this.setState({
-                overflowMenuActive: !overflowMenuActive,
+                accountSelectorActive: !accountSelectorActive,
-                switchingMenuActive: false,
+                optionsMenuActive: false,
               })
             },
           },
-          [
+          this.renderAccountSelector(),
-            h(
-              Dropdown,
-              {
-                style: {
-                  marginLeft: '-155px',
-                  minWidth: '180px',
-                },
-                isOpen: overflowMenuActive,
-                onClickOutside: () => { this.setState({ overflowMenuActive: false}) },
-              },
-              [
-                ...this.getAccounts(),
-                h(
-                  DropdownMenuItem,
-                  {
-                    closeMenu: () => {},
-                    onClick: () => actions.addNewAccount(),
-                  },
-                  [
-                    h(
-                      Identicon,
-                      {
-                        diameter: 16,
-                      },
-                    ),
-                    h('span', { style: { marginLeft: '10px' } }, 'Create Account'),
-                  ],
         ),
         h(
-                  DropdownMenuItem,
+          'i.fa.fa-ellipsis-h',
           {
-                    closeMenu: () => {},
+            style: { 'marginLeft': '10px'},
-                    onClick: () => actions.showImportPage(),
+            onClick: (event) => {
+              event.stopPropagation()
+              this.setState({
+                accountSelectorActive: false,
+                optionsMenuActive: !optionsMenuActive,
+              })
             },
-                  [
-                    h(
-                      Identicon,
-                      {
-                        diameter: 16,
           },
-                    ),
+          this.renderAccountOptions()
-                    h('span', { style: { marginLeft: '10px' } }, 'Import Account'),
-                  ]
-                ),
-              ]
-            ),
-          ]
         ),
       ]
     )