Merge pull request #1858 from sdtsui/NewUI

UI Tweaks, Minor Bugfixes, and Dropdown Resizing

1 files changed, 57 insertions, 17 deletions

diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index 79e6cff59..da92619e1 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -17,14 +17,14 @@ class AccountDropdowns extends Component {
       accountSelectorActive: false,
       optionsMenuActive: false,
     }
-    this.accountSelectorToggleClassName = 'fa-angle-down'
+    this.accountSelectorToggleClassName = 'accounts-selector'
     this.optionsMenuToggleClassName = 'fa-ellipsis-h'
   }
 
   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
 
@@ -35,17 +35,24 @@ class AccountDropdowns extends Component {
           onClick: () => {
             this.props.actions.showAccountDetail(identity.address)
           },
+          style: {
+            marginTop: index === 0 ? '5px' : '',
+            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 +66,15 @@ class AccountDropdowns extends Component {
       Dropdown,
       {
         style: {
-          marginLeft: '-125px',
+          marginLeft: '-238px',
+          marginTop: '38px',
           minWidth: '180px',
           overflowY: 'auto',
           maxHeight: '300px',
+          width: '300px',
+        },
+        innerStyle: {
+          padding: '8px 25px',
         },
         isOpen: accountSelectorActive,
         onClickOutside: (event) => {
@@ -85,10 +97,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 +116,19 @@ 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',
+                marginBottom: '5px',
+              },
+            }, 'Import Account'),
           ]
         ),
       ]
@@ -119,7 +143,7 @@ class AccountDropdowns extends Component {
       Dropdown,
       {
         style: {
-          marginLeft: '-162px',
+          marginLeft: '-215px',
           minWidth: '180px',
         },
         isOpen: optionsMenuActive,
@@ -183,7 +207,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 +216,18 @@ class AccountDropdowns extends Component {
         style: style,
       },
       [
-        h(
-          'i.fa.fa-angle-down',
+        enableAccountsSelector && h(
+          // 'i.fa.fa-angle-down',
+          'div.cursor-pointer.color-orange.accounts-selector',
           {
-            style: {},
+            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()
               this.setState({
@@ -206,10 +238,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 +260,11 @@ class AccountDropdowns extends Component {
   }
 }
 
+AccountDropdowns.defaultProps = {
+  enableAccountsSelector: false,
+  enableAccountOptions: false,
+}
+
 AccountDropdowns.propTypes = {
   identities: PropTypes.objectOf(PropTypes.object),
   selected: PropTypes.string,