From d086251e891e5072f47fa5f356afa3a04fb8810a Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Mon, 31 Oct 2016 12:58:25 +0100
Subject: [PATCH] Update account dropdowns (#2959)

* Simplify & consolidate address items

* Adjust dropdown background
---
 js/src/modals/Transfer/Details/details.js     |  1 +
 js/src/modals/Transfer/transfer.css           |  9 ++++++-
 .../ui/Form/AddressSelect/addressSelect.css   | 25 +++++++++++--------
 js/src/ui/Form/AddressSelect/addressSelect.js | 18 ++++++-------
 js/src/ui/Theme/theme.js                      |  7 +++---
 5 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/js/src/modals/Transfer/Details/details.js b/js/src/modals/Transfer/Details/details.js
index c00a1ee43..f7cc70ad4 100644
--- a/js/src/modals/Transfer/Details/details.js
+++ b/js/src/modals/Transfer/Details/details.js
@@ -158,6 +158,7 @@ export default class Details extends Component {
 
     return (
       <Select
+        className={ styles.tokenSelect }
         label='type of token transfer'
         hint='type of token to transfer'
         value={ tag }
diff --git a/js/src/modals/Transfer/transfer.css b/js/src/modals/Transfer/transfer.css
index cd084a368..720cd694b 100644
--- a/js/src/modals/Transfer/transfer.css
+++ b/js/src/modals/Transfer/transfer.css
@@ -42,9 +42,16 @@
   margin-right: 0.5em;
 }
 
+.tokenSelect {
+}
+
 .token {
   height: 32px;
-  margin-top: 14px;
+  padding: 4px 0;
+}
+
+.tokenSelect .token {
+  margin-top: 10px;
 }
 
 .token img {
diff --git a/js/src/ui/Form/AddressSelect/addressSelect.css b/js/src/ui/Form/AddressSelect/addressSelect.css
index d98994da9..98dab4355 100644
--- a/js/src/ui/Form/AddressSelect/addressSelect.css
+++ b/js/src/ui/Form/AddressSelect/addressSelect.css
@@ -15,26 +15,24 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 .account {
-  max-height: 36px;
   padding: 4px 0 0 0;
-  line-height: 32px;
-  margin-top: 11px;
 }
 
-.details {
+.name {
+  height: 32px;
+  line-height: 32px;
   display: inline-block;
   vertical-align: top;
+  text-transform: uppercase;
+  padding: 0 0 0 1em;
 }
 
 .image {
   display: inline-block;
-  max-height: 32px;
-}
-
-.name {
-  line-height: 32px;
-  vertical-align: top;
-  text-transform: uppercase;
+  height: 32px;
+  width: 32px;
+  margin: 0;
+  z-index: 10;
 }
 
 .icon {
@@ -50,3 +48,8 @@
 .container {
   position: relative;
 }
+
+.menuItem {
+  min-height: 0 !important;
+  line-height: inherit !important;
+}
diff --git a/js/src/ui/Form/AddressSelect/addressSelect.js b/js/src/ui/Form/AddressSelect/addressSelect.js
index 3eae1aef8..72e80f432 100644
--- a/js/src/ui/Form/AddressSelect/addressSelect.js
+++ b/js/src/ui/Form/AddressSelect/addressSelect.js
@@ -104,21 +104,19 @@ export default class AddressSelect extends Component {
   renderSelectEntry = (entry) => {
     const item = (
       <div className={ styles.account }>
-        <div className={ styles.image }>
-          <IdentityIcon
-            inline center
-            address={ entry.address } />
-        </div>
-        <div className={ styles.details }>
-          <div className={ styles.name }>
-            <IdentityName address={ entry.address } />
-          </div>
-        </div>
+        <IdentityIcon
+          className={ styles.image }
+          inline center
+          address={ entry.address } />
+        <IdentityName
+          className={ styles.name }
+          address={ entry.address } />
       </div>
     );
 
     return (
       <MenuItem
+        className={ styles.menuItem }
         key={ entry.address }
         value={ entry.address }
         label={ item }>
diff --git a/js/src/ui/Theme/theme.js b/js/src/ui/Theme/theme.js
index 92a57487c..7b891d721 100644
--- a/js/src/ui/Theme/theme.js
+++ b/js/src/ui/Theme/theme.js
@@ -22,16 +22,17 @@ import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
 const lightTheme = getMuiTheme(lightBaseTheme);
 const muiTheme = getMuiTheme(darkBaseTheme);
 
-muiTheme.stepper.textColor = '#eee';
-muiTheme.stepper.disabledTextColor = '#777';
 muiTheme.inkBar.backgroundColor = 'transparent';
+muiTheme.paper.backgroundColor = 'rgba(0, 0, 0, 0.95)';
 muiTheme.raisedButton.primaryTextColor = 'white';
 muiTheme.snackbar.backgroundColor = 'rgba(255, 30, 30, 0.9)';
 muiTheme.snackbar.textColor = 'rgba(255, 255, 255, 0.75)';
+muiTheme.stepper.textColor = '#eee';
+muiTheme.stepper.disabledTextColor = '#777';
 muiTheme.tabs = lightTheme.tabs;
 muiTheme.tabs.backgroundColor = 'transparent';
 muiTheme.tabs.selectedTextColor = 'white';
-muiTheme.tabs.textColor = 'rgba(255, 255, 255, 0.5)'; // 'rgb(0, 151, 167)';
+muiTheme.tabs.textColor = 'rgba(255, 255, 255, 0.5)';
 muiTheme.textField.floatingLabelColor = 'rgba(255, 255, 255, 0.5)';
 muiTheme.textField.hintColor = 'rgba(255, 255, 255, 0.5)';
 muiTheme.textField.disabledTextColor = muiTheme.textField.textColor;