Update account dropdowns (#2959)

* Simplify & consolidate address items * Adjust dropdown background
openethereum · Oct 31, 2016 · d086251 · d086251
1 parent 7af20a5
commit d086251
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;