card / update dropdown

js/src/ui/Container/container.js

@@ -16,7 +16,7 @@
 
 import React, { Component, PropTypes } from 'react';
 import { Link } from 'react-router';
-import { Card } from 'material-ui/Card';
+import { Card } from 'semantic-ui-react';
 
 import { nodeOrStringProptype } from '~/util/proptypes';
 
@@ -58,6 +58,7 @@ export default class Container extends Component {
         }
         onClick={ onClick }
         onFocus={ onFocus }
+        fluid
       >
         { this.renderTitle() }
         { children }

js/src/ui/Dropdown/dropdown.css

@@ -14,3 +14,8 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
+.dropdown {
+  position: relative;
+  display: block;
+}

js/src/ui/Dropdown/dropdown.js

@@ -31,14 +31,18 @@
 import React, { PropTypes } from 'react';
 import { Dropdown as DropdownUI } from 'semantic-ui-react';
 
-export default function Dropdown ({ defaultValue, disabled, fluid, icon, name, onChange, onClick, onClose, onFocus, options, placeholder, scrolling, search, selection, text, value }) {
+import styles from './dropdown.css';
+
+export default function Dropdown ({ defaultValue, disabled, fluid, icon, name, onBlur, onChange, onClick, onClose, onFocus, options, placeholder, scrolling, search, selection, text, value }) {
   return (
     <DropdownUI
+      className={ styles.dropdown }
       defaultValue={ defaultValue }
       disabled={ disabled }
       fluid={ fluid }
       icon={ icon }
       name={ name }
+      onBlur={ onBlur }
       onChange={ onChange }
       onClick={ onClick }
       onClose={ onClose }
@@ -55,11 +59,12 @@ export default function Dropdown ({ defaultValue, disabled, fluid, icon, name, o
 }
 
 Dropdown.propTypes = {
-  defaultValue: PropTypes.number,    // Initial value via index
+  defaultValue: PropTypes.number,    // Initial value via index.
   disabled: PropTypes.bool,          // A disabled dropdown menu or item does not allow user interaction.
-  fluid: PropTypes.bool,             // A dropdown can take the full width of its parent
+  fluid: PropTypes.bool,             // A dropdown can take the full width of its parent.
   icon: PropTypes.any,               // Shorthand for Icon.
   name: PropTypes.func,              // Name of the hidden input which holds the value.
+  onBlur: PropTypes.func,            // Called on blur.
   onChange: PropTypes.func,          // Called when the user attempts to change the value.
   onClick: PropTypes.func,           // Called on click.
   onClose: PropTypes.func,           // Called on close.

js/src/views/Account/Shapeshift/OptionsStep/optionsStep.js

@@ -59,7 +59,7 @@ export default class OptionsStep extends Component {
     return (
       <div className={ styles.body }>
         <Form>
-          <div style={ { display: 'block', height: '22px', fontSize: '16px', position: 'relative', lineHeight: '22px', top: '38px', pointerEvents: 'none', userSelect: 'none', color: 'rgba(0, 0, 0, 0.298039)' } }>
+          <div style={ { display: 'block', paddingTop: '15px', paddingBottom: '5px', fontSize: '16px', pointerEvents: 'none', userSelect: 'none', color: 'rgba(0, 0, 0, 0.298039)' } }>
             <FormattedMessage
               id='shapeshift.optionsStep.typeSelect.label'
               defaultMessage='Fund account from'