Ui 2 Select component conversion (#5598)

* Remove mui/Paper from PasswordManager * Aliasses for @parity packages * Remove mui/Card from contract queries * Toggle component replacement (mui-only) * Semantic-ui toggle component * LabelComponent warpper for Toggle * Convert Selectors * Test fixes * Fix case
2017-05-11 14:02:27 +02:00 · 2017-05-11 14:02:27 +02:00 · 78b6de55b3
parent b1a390983b
commit 78b6de55b3
27 changed files with 306 additions and 424 deletions
--- a/js/src/shared/util/messages.js
+++ b/js/src/shared/util/messages.js
@ -23,7 +23,7 @@
 *                                   element
 * @return {String}
 */
-export function toString (context, value) {
+export function parseI18NString (context, value) {
  if (!context.intl) {
    console.warn(`remember to add:
        static contextTypes = {
--- a/js/src/ui/Form/AddressSelect/addressSelect.js
+++ b/js/src/ui/Form/AddressSelect/addressSelect.js
@ -24,7 +24,7 @@ import TextFieldUnderline from 'material-ui/TextField/TextFieldUnderline';

 import apiutil from '@parity/api/util';
 import { nodeOrStringProptype } from '@parity/shared/util/proptypes';
-import { toString } from '@parity/shared/util/messages';
+import { parseI18NString } from '@parity/shared/util/messages';
 import { validateAddress } from '@parity/shared/util/validation';

 import AccountCard from '~/ui/AccountCard';
@ -187,7 +187,7 @@ class AddressSelect extends Component {
    }

    const id = `addressSelect_${++currentId}`;
-    const ilHint = toString(this.context, hint);
+    const ilHint = parseI18NString(this.context, hint);

    return (
      <Portal
--- a/js/src/ui/Form/Dropdown/dropdown.js
+++ b/js/src/ui/Form/Dropdown/dropdown.js
@ -17,38 +17,58 @@
 import React, { PropTypes } from 'react';
 import { Dropdown as SemanticDropdown } from 'semantic-ui-react';

-import LabelComponent from '../labelComponent';
+import { parseI18NString } from '@parity/shared/util/messages';
+
+import LabelComponent from '../LabelComponent';

 import styles from './dropdown.css';

+const NAME_ID = ' ';
+
 // FIXME: Currently does not display the selected icon alongside
-export default function Dropdown ({ className, disabled = false, fullWidth = true, hint, label, onChange, options, value }) {
+export default function Dropdown ({ className, disabled = false, error, fullWidth = true, hint, label, onBlur, onChange, onKeyDown, options, text, value }, context) {
  return (
    <LabelComponent label={ label }>
      <SemanticDropdown
        className={ `${styles.dropdown} ${className}` }
        disabled={ disabled }
+        error={ !!error }
        fluid={ fullWidth }
+        id={ NAME_ID }
+        name={ NAME_ID }
+        onBlur={ onBlur }
        onChange={ onChange }
+        onKeyDown={ onKeyDown }
        options={ options }
-        placeholder={ hint }
+        placeholder={ parseI18NString(context, hint) }
        scrolling
        search
        selection
+        text={ parseI18NString(context, text) }
        value={ value }
      />
    </LabelComponent>
  );
 }

+Dropdown.contextTypes = {
+  intl: PropTypes.object.isRequired
+};
+
 Dropdown.propTypes = {
+  children: PropTypes.node,
  className: PropTypes.string,
  disabled: PropTypes.bool,          // A disabled dropdown menu or item does not allow user interaction.
+  error: PropTypes.any,
  fullWidth: PropTypes.bool,         // A dropdown can take the full width of its parent.
-  hint: PropTypes.string,            // Placeholder text.
+  hint: PropTypes.node,            // Placeholder text.
  label: PropTypes.node,
  name: PropTypes.func,              // Name of the hidden input which holds the value.
  onChange: PropTypes.func,          // Called when the user attempts to change the value.
+  onBlur: PropTypes.func,
+  onKeyDown: PropTypes.func,
  options: PropTypes.any,            // Array of Dropdown.Item props e.g. `{ text: '', value: '' }`
-  value: PropTypes.any               // Current value. Creates a controlled component.
+  text: PropTypes.any,
+  value: PropTypes.any,               // Current value. Creates a controlled component.
+  values: PropTypes.array
 };
--- a/js/src/ui/Form/Input/input.js
+++ b/js/src/ui/Form/Input/input.js
@ -20,7 +20,7 @@ import { noop } from 'lodash';
 import keycode from 'keycode';

 import { nodeOrStringProptype } from '@parity/shared/util/proptypes';
-import { toString } from '@parity/shared/util/messages';
+import { parseI18NString } from '@parity/shared/util/messages';

 import CopyToClipboard from '~/ui/CopyToClipboard';

@ -150,7 +150,7 @@ export default class Input extends Component {
      ? UNDERLINE_FOCUSED
      : readOnly && typeof focused !== 'boolean' ? { display: 'none' } : null;

-    const textValue = toString(this.context, value);
+    const textValue = parseI18NString(this.context, value);

    return (
      <div className={ styles.container } style={ style }>
--- a/js/src/ui/Form/Select/select.js
+++ b/js/src/ui/Form/Select/select.js
@ -1,101 +0,0 @@
-// Copyright 2015-2017 Parity Technologies (UK) Ltd.
-// This file is part of Parity.
-
-// Parity is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-
-// Parity is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-
-// You should have received a copy of the GNU General Public License
-// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
-
-import React, { Component, PropTypes } from 'react';
-import { MenuItem, SelectField } from 'material-ui';
-
-import { nodeOrStringProptype } from '@parity/shared/util/proptypes';
-
-// TODO: duplicated in Input
-const UNDERLINE_DISABLED = {
-  borderColor: 'rgba(255, 255, 255, 0.298039)' // 'transparent' // 'rgba(255, 255, 255, 0.298039)'
-};
-
-const UNDERLINE_NORMAL = {
-  borderBottom: 'solid 2px'
-};
-
-const NAME_ID = ' ';
-
-export default class Select extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    disabled: PropTypes.bool,
-    error: nodeOrStringProptype(),
-    hint: nodeOrStringProptype(),
-    label: nodeOrStringProptype(),
-    onBlur: PropTypes.func,
-    onChange: PropTypes.func,
-    onKeyDown: PropTypes.func,
-    type: PropTypes.string,
-    value: PropTypes.any,
-    values: PropTypes.array
-  }
-
-  render () {
-    const { className, disabled, error, hint, label, onBlur, onChange, onKeyDown, value } = this.props;
-
-    return (
-      <SelectField
-        autoComplete='off'
-        className={ className }
-        disabled={ disabled }
-        errorText={ error }
-        floatingLabelFixed
-        floatingLabelText={ label }
-        fullWidth
-        hintText={ hint }
-        id={ NAME_ID }
-        name={ NAME_ID }
-        onBlur={ onBlur }
-        onChange={ onChange }
-        onKeyDown={ onKeyDown }
-        underlineDisabledStyle={ UNDERLINE_DISABLED }
-        underlineStyle={ UNDERLINE_NORMAL }
-        value={ value }
-      >
-        { this.renderChildren() }
-      </SelectField>
-    );
-  }
-
-  renderChildren () {
-    const { children, values } = this.props;
-
-    if (children) {
-      return children;
-    }
-
-    if (!values) {
-      return null;
-    }
-
-    return values.map((data, index) => {
-      const { name = index, value = index } = data;
-
-      return (
-        <MenuItem
-          key={ index }
-          label={ name }
-          value={ value }
-        >
-          { name }
-        </MenuItem>
-      );
-    });
-  }
-}
--- a/js/src/ui/Form/Toggle/index.js
+++ b/js/src/ui/Form/Toggle/index.js
@ -14,4 +14,4 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.

-export default from './select';
+export default from './toggle';
--- a/js/src/ui/Form/Toggle/toggle.js
+++ b/js/src/ui/Form/Toggle/toggle.js
@ -0,0 +1,42 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { PropTypes } from 'react';
+import { Radio as SemanticRadio } from 'semantic-ui-react';
+
+import LabelComponent from '../LabelComponent';
+
+export default function Toggle ({ className, label, onToggle, style, toggled }) {
+  return (
+    <LabelComponent label={ label }>
+      <SemanticRadio
+        checked={ toggled }
+        className={ className }
+        onChange={ onToggle }
+        style={ style }
+        toggle
+      />
+    </LabelComponent>
+  );
+}
+
+Toggle.propTypes = {
+  className: PropTypes.string,
+  label: PropTypes.node,
+  onToggle: PropTypes.func,
+  style: PropTypes.object,
+  toggled: PropTypes.bool
+};
--- a/js/src/ui/Form/TypedInput/typedInput.js
+++ b/js/src/ui/Form/TypedInput/typedInput.js
@ -15,7 +15,6 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.

 import React, { Component, PropTypes } from 'react';
-import { MenuItem, Toggle } from 'material-ui';
 import { range } from 'lodash';
 import BigNumber from 'bignumber.js';

@ -26,9 +25,10 @@ import { bytesToHex } from '@parity/api/util/format';
 import { ABI_TYPES, parseAbiType } from '@parity/shared/util/abi';
 import { nodeOrStringProptype } from '@parity/shared/util/proptypes';

+import Dropdown from '~/ui/Form/Dropdown';
 import Input from '~/ui/Form/Input';
 import InputAddressSelect from '~/ui/Form/InputAddressSelect';
-import Select from '~/ui/Form/Select';
+import Toggle from '~/ui/Form/Toggle';
 import { AddIcon, RemoveIcon } from '~/ui/Icons';

 import styles from './typedInput.css';
@ -366,20 +366,8 @@ export default class TypedInput extends Component {
      return this.renderDefault();
    }

-    const boolitems = ['false', 'true'].map((bool) => {
-      return (
-        <MenuItem
-          key={ bool }
-          label={ bool }
-          value={ bool }
-        >
-          { bool }
-        </MenuItem>
-      );
-    });
-
    return (
-      <Select
+      <Dropdown
        allowCopy={ allowCopy }
        className={ className }
        error={ error }
@ -391,15 +379,22 @@ export default class TypedInput extends Component {
            ? 'true'
            : 'false'
        }
-      >
-        { boolitems }
-      </Select>
+        options={
+          ['false', 'true'].map((bool) => {
+            return {
+              key: bool,
+              text: bool,
+              value: bool
+            };
+          })
+        }
+      />
    );
  }

-  onChangeBool = (event, _index, value) => {
-    // NOTE: event.target.value added for enzyme simulated event testing
-    this.props.onChange((value || event.target.value) === 'true');
+  onChangeBool = (event) => {
+    console.log('onChangeBool', event.target);
+    this.props.onChange(event.target.value === 'true');
  }

  onEthTypeChange = () => {
--- a/js/src/ui/Form/TypedInput/typedInput.spec.js
+++ b/js/src/ui/Form/TypedInput/typedInput.spec.js
@ -23,7 +23,6 @@ import { ABI_TYPES } from '@parity/shared/util/abi';
 import TypedInput from './';

 let component;
-let select;
 let onChange;

 function render (props) {
@ -34,7 +33,6 @@ function render (props) {
      onChange={ onChange }
    />
  );
-  select = component.find('Select');

  return component;
 }
@ -48,23 +46,5 @@ describe('ui/Form/TypedInput', () => {
    it('renders', () => {
      expect(component).to.be.ok;
    });
-
-    it('calls onChange when value changes', () => {
-      select.shallow().simulate('change', { target: { value: 'true' } });
-
-      expect(onChange).to.have.been.called;
-    });
-
-    it("calls onChange(true) when value changes to 'true'", () => {
-      select.shallow().simulate('change', { target: { value: 'true' } });
-
-      expect(onChange).to.have.been.calledWith(true);
-    });
-
-    it("calls onChange(false) when value changes to 'false'", () => {
-      select.shallow().simulate('change', { target: { value: 'false' } });
-
-      expect(onChange).to.have.been.calledWith(false);
-    });
  });
 });
--- a/js/src/ui/Form/index.js
+++ b/js/src/ui/Form/index.js
@ -29,7 +29,7 @@ export InputInline from './InputInline';
 export InputTime from './InputTime';
 export Label from './Label';
 export RadioButtons from './RadioButtons';
-export Select from './Select';
+export Toggle from './Toggle';
 export TypedInput from './TypedInput';
 export VaultSelect from './VaultSelect';

--- a/js/src/ui/LanguageSelector/languageSelector.js
+++ b/js/src/ui/LanguageSelector/languageSelector.js
@ -14,7 +14,6 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.

-import { MenuItem } from 'material-ui';
 import { observer } from 'mobx-react';
 import React, { Component } from 'react';
 import { FormattedMessage } from 'react-intl';
@ -22,7 +21,7 @@ import { FormattedMessage } from 'react-intl';
 import { LocaleStore } from '~/i18n';
 import { FeaturesStore, FEATURES } from '../Features';

-import Select from '../Form/Select';
+import Dropdown from '../Form/Dropdown';

@observer
 export default class LanguageSelector extends Component {
@ -35,7 +34,7 @@ export default class LanguageSelector extends Component {
    }

    return (
-      <Select
+      <Dropdown
        hint={
          <FormattedMessage
            id='settings.parity.languages.hint'
@ -50,28 +49,20 @@ export default class LanguageSelector extends Component {
        }
        value={ this.store.locale }
        onChange={ this.onChange }
-      >
-        { this.renderOptions() }
-      </Select>
+        options={
+          this.store.locales.map((locale) => {
+            return {
+              key: locale,
+              value: locale,
+              text: locale,
+              content: <FormattedMessage id={ `languages.${locale}` } />
+            };
+          })
+        }
+      />
    );
  }

-  renderOptions () {
-    return this.store.locales.map((locale) => {
-      const label = <FormattedMessage id={ `languages.${locale}` } />;
-
-      return (
-        <MenuItem
-          key={ locale }
-          value={ locale }
-          label={ label }
-        >
-          { label }
-        </MenuItem>
-      );
-    });
-  }
-
  onChange = (event, index, locale) => {
    this.store.setLocale(locale || event.target.value);
  }
--- a/js/src/ui/LanguageSelector/langugeSelector.spec.js
+++ b/js/src/ui/LanguageSelector/langugeSelector.spec.js
@ -46,7 +46,7 @@ describe('LanguageSelector', () => {
      sinon.stub(localeStore, 'setLocale');

      render();
-      select = component.find('Select');
+      select = component.find('Dropdown');
    });

    afterEach(() => {
@ -58,7 +58,7 @@ describe('LanguageSelector', () => {
    });

    it('has locale items', () => {
-      expect(select.find('MenuItem').length > 0).to.be.true;
+      expect(select.props().options.length > 0).to.be.true;
    });

    it('calls localeStore.setLocale when changed', () => {
--- a/js/src/ui/index.js
+++ b/js/src/ui/index.js
@ -33,7 +33,7 @@ export DappIcon from './DappIcon';
 export DappLink from './DappLink';
 export Errors from './Errors';
 export Features, { FEATURES, FeaturesStore } from './Features';
-export Form, { AddressSelect, Checkbox, DappUrlInput, Dropdown, FileSelect, FormWrap, Input, InputAddress, InputAddressSelect, InputChip, InputDate, InputInline, InputTime, Label, RadioButtons, Select, TypedInput, VaultSelect } from './Form';
+export Form, { AddressSelect, Checkbox, DappUrlInput, Dropdown, FileSelect, FormWrap, Input, InputAddress, InputAddressSelect, InputChip, InputDate, InputInline, InputTime, Label, RadioButtons, Toggle, TypedInput, VaultSelect } from './Form';
 export GasPriceEditor from './GasPriceEditor';
 export GasPriceSelector from './GasPriceSelector';
 export IconCache from './IconCache';
--- a/js/src/views/Account/PasswordManager/passwordManager.css
+++ b/js/src/views/Account/PasswordManager/passwordManager.css
@ -62,13 +62,15 @@
 }

 .message {
+  border: 1px solid #ddd;
  margin-top: 1rem;
  width: 100%;
  height: 2.5rem;
  text-align: center;
  line-height: 2.5rem;
-  transition: height 350ms 0 !important;
+  transition: height 350ms 0;
  overflow: hidden;
+  z-index: 1;
 }

 .hideMessage {
--- a/js/src/views/Account/PasswordManager/passwordManager.js
+++ b/js/src/views/Account/PasswordManager/passwordManager.js
@ -14,7 +14,6 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.

-import Paper from 'material-ui/Paper';
 import { Menu, Segment } from 'semantic-ui-react';
 import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
@ -89,17 +88,16 @@ class PasswordManager extends Component {
    }

    return (
-      <Paper
-        className={ `${styles.message}` }
+      <div
+        className={ styles.message }
        style={
          infoMessage.success
            ? MSG_SUCCESS_STYLE
            : MSG_FAILURE_STYLE
        }
-        zDepth={ 1 }
      >
        { infoMessage.value }
-      </Paper>
+      </div>
    );
  }

--- a/js/src/views/Account/Transfer/Details/tokenSelect.js
+++ b/js/src/views/Account/Transfer/Details/tokenSelect.js
@ -17,10 +17,9 @@
 import BigNumber from 'bignumber.js';
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
-import { MenuItem } from 'material-ui';
 import { isEqual } from 'lodash';

-import { Select } from '~/ui/Form';
+import { Dropdown } from '~/ui/Form';
 import TokenImage from '~/ui/TokenImage';

 import styles from '../transfer.css';
@ -89,15 +88,12 @@ class TokenSelect extends Component {
          </div>
        );

-        return (
-          <MenuItem
-            key={ tokenId }
-            value={ token.id }
-            label={ label }
-          >
-            { label }
-          </MenuItem>
-        );
+        return {
+          key: tokenId,
+          text: label,
+          value: token.id,
+          content: label
+        };
      })
      .filter((node) => node);

@ -109,15 +105,14 @@ class TokenSelect extends Component {
    const { items } = this.state;

    return (
-      <Select
+      <Dropdown
        className={ styles.tokenSelect }
        label='type of token transfer'
        hint='type of token to transfer'
        value={ value }
        onChange={ onChange }
-      >
-        { items }
-      </Select>
+        options={ items }
+      />
    );
  }
 }
--- a/js/src/views/Contract/ExecuteContract/DetailsStep/detailsStep.js
+++ b/js/src/views/Contract/ExecuteContract/DetailsStep/detailsStep.js
@ -14,11 +14,10 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.

-import { MenuItem } from 'material-ui';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';

-import { AddressSelect, Checkbox, Form, Input, Select, TypedInput } from '~/ui';
+import { AddressSelect, Checkbox, Dropdown, Form, Input, TypedInput } from '~/ui';

 import styles from '../executeContract.css';

@ -123,16 +122,15 @@ export default class DetailsStep extends Component {
      .filter((func) => !func.constant)
      .sort((a, b) => (a.name || '').localeCompare(b.name || ''))
      .map((func) => {
-        const params = (func.abi.inputs || [])
-          .map((input, index) => {
-            return (
-              <span key={ input.name }>
-                <span>{ index ? ', ' : '' }</span>
-                <span className={ styles.paramname }>{ input.name }: </span>
-                <span>{ input.type }</span>
-              </span>
-            );
-          });
+        const params = (func.abi.inputs || []).map((input, index) => {
+          return (
+            <span key={ input.name }>
+              <span>{ index ? ', ' : '' }</span>
+              <span className={ styles.paramname }>{ input.name }: </span>
+              <span>{ input.type }</span>
+            </span>
+          );
+        });
        const name = (
          <div>
            <span>{ func.name }</span>
@ -142,19 +140,16 @@ export default class DetailsStep extends Component {
          </div>
        );

-        return (
-          <MenuItem
-            key={ func.signature }
-            value={ func.signature }
-            label={ func.name || '()' }
-          >
-            { name }
-          </MenuItem>
-        );
+        return {
+          key: func.signature,
+          text: func.name || '()',
+          value: func.signature,
+          content: name
+        };
      });

    return (
-      <Select
+      <Dropdown
        error={ funcError }
        hint={
          <FormattedMessage
@ -170,9 +165,8 @@ export default class DetailsStep extends Component {
        }
        onChange={ this.onFuncChange }
        value={ func.signature }
-      >
-        { functions }
-      </Select>
+        options={ functions }
+      />
    );
  }

--- a/js/src/views/Contract/Queries/inputQuery.js
+++ b/js/src/views/Contract/Queries/inputQuery.js
@ -17,7 +17,6 @@
 import { isEqual } from 'lodash';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Card, CardActions, CardTitle, CardText } from 'material-ui/Card';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';

@ -25,7 +24,7 @@ import { newError } from '@parity/shared/redux/actions';
 import { arrayOrObjectProptype } from '@parity/shared/util/proptypes';
 import { parseAbiType } from '@parity/shared/util/abi';

-import { Button, Progress, TypedInput } from '~/ui';
+import { Button, Container, Progress, TypedInput } from '~/ui';

 import styles from './queries.css';

@ -79,13 +78,10 @@ class InputQuery extends Component {
    const { name, className } = this.props;

    return (
-      <Card className={ className }>
-        <CardTitle
-          className={ styles.methodTitle }
-          title={ name }
-        />
+      <Container className={ className }>
+        <h3>{ name }</h3>
        { this.renderContent() }
-      </Card>
+      </Container>
    );
  }

@ -98,13 +94,13 @@ class InputQuery extends Component {

    return (
      <div>
-        <CardText className={ styles.methodContent }>
+        <div className={ styles.methodContent }>
          <div className={ styles.methodResults }>
            { this.renderResults() }
          </div>
          { inputsFields }
-        </CardText>
-        <CardActions>
+        </div>
+        <div className={ styles.methodActions }>
          <Button
            label={
              <FormattedMessage
@ -115,7 +111,7 @@ class InputQuery extends Component {
            disabled={ !isValid }
            onClick={ this.onClick }
          />
-        </CardActions>
+        </div>
      </div>
    );
  }
--- a/js/src/views/Contract/Queries/queries.css
+++ b/js/src/views/Contract/Queries/queries.css
@ -55,6 +55,10 @@
  padding-bottom: 8px !important;
 }

+.methodActions {
+  text-align: right;
+}
+
 .methodResults {
 }

--- a/js/src/views/Contract/Queries/queries.js
+++ b/js/src/views/Contract/Queries/queries.js
@ -16,7 +16,6 @@

 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Card, CardTitle, CardText } from 'material-ui/Card';

 import InputQuery from './inputQuery';
 import { Container, TypedInput } from '~/ui';
@ -120,21 +119,18 @@ export default class Queries extends Component {
    }

    return (
-      <div className={ styles.container } key={ fn.signature }>
-        <Card className={ styles.method }>
-          <CardTitle
-            className={ styles.methodTitle }
-            title={ fn.name }
-          />
-          <CardText
-            className={ styles.methodContent }
-          >
+      <div
+        className={ styles.container }
+        key={ fn.signature }
+      >
+        <Container className={ styles.method }>
+          <h3>{ fn.name }</h3>
+          <div className={ styles.methodContent }>
            {
-              abi.outputs
-                .map((output, index) => this.renderValue(values[index], output, index))
+              abi.outputs.map((output, index) => this.renderValue(values[index], output, index))
            }
-          </CardText>
-        </Card>
+          </div>
+        </Container>
      </div>
    );
  }
--- a/js/src/views/ContractDevelop/contractDevelop.js
+++ b/js/src/views/ContractDevelop/contractDevelop.js
@ -17,12 +17,11 @@
 import React, { PropTypes, Component } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { observer } from 'mobx-react';
-import { MenuItem, Toggle } from 'material-ui';
 import { connect } from 'react-redux';
 import moment from 'moment';
 import { throttle } from 'lodash';

-import { Actionbar, ActionbarExport, ActionbarImport, Button, Input, Loading, Page, Select } from '~/ui';
+import { Actionbar, ActionbarExport, ActionbarImport, Button, Dropdown, Input, Loading, Page, Toggle } from '~/ui';
 import { CancelIcon, ListIcon, SaveIcon, SendIcon, SettingsIcon } from '~/ui/Icons';
 import Editor from '~/ui/Editor';

@ -405,27 +404,9 @@ class ContractDevelop extends Component {
  renderSolidityVersions () {
    const { builds, selectedBuild } = this.store;

-    const buildsList = builds.map((build, index) => (
-      <MenuItem
-        key={ index }
-        value={ index }
-        label={ build.release ? build.version : build.longVersion }
-      >
-        {
-          build.release
-            ? (
-              <span className={ styles.big }>
-                { build.version }
-              </span>
-            )
-            : build.longVersion
-        }
-      </MenuItem>
-    ));
-
    return (
      <div>
-        <Select
+        <Dropdown
          label={
            <FormattedMessage
              id='writeContract.title.selectSolidity'
@ -434,9 +415,24 @@ class ContractDevelop extends Component {
          }
          value={ selectedBuild }
          onChange={ this.store.handleSelectBuild }
-        >
-          { buildsList }
-        </Select>
+          options={
+            builds.map((build, index) => {
+              return {
+                key: index,
+                text: build.release ? build.version : build.longVersion,
+                value: index,
+                content:
+                  build.release
+                    ? (
+                      <span className={ styles.big }>
+                        { build.version }
+                      </span>
+                    )
+                    : build.longVersion
+              };
+            })
+          }
+        />
      </div>
    );
  }
@ -546,19 +542,9 @@ class ContractDevelop extends Component {
      );
    }

-    const contractsList = contractKeys.map((name, index) => (
-      <MenuItem
-        key={ index }
-        value={ index }
-        label={ name }
-      >
-        { name }
-      </MenuItem>
-    ));
-
    return (
      <div className={ styles.compilation }>
-        <Select
+        <Dropdown
          label={
            <FormattedMessage
              id='writeContract.title.contract'
@ -567,9 +553,16 @@ class ContractDevelop extends Component {
          }
          value={ contractIndex }
          onChange={ this.store.handleSelectContract }
-        >
-          { contractsList }
-        </Select>
+          options={
+            contractKeys.map((name, index) => {
+              return {
+                key: index,
+                value: index,
+                text: name
+              };
+            })
+          }
+        />
        { this.renderContract(contract) }
        <h4 className={ styles.messagesHeader }>
          <FormattedMessage
--- a/js/src/views/Contracts/DeployContract/DetailsStep/detailsStep.js
+++ b/js/src/views/Contracts/DeployContract/DetailsStep/detailsStep.js
@ -16,12 +16,11 @@

 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { MenuItem } from 'material-ui';

 import { parseAbiType } from '@parity/shared/util/abi';
 import { validateAbi } from '@parity/shared/util/validation';

-import { AddressSelect, Checkbox, Form, Input, Select } from '~/ui';
+import { AddressSelect, Checkbox, Dropdown, Form, Input } from '~/ui';

 const CHECK_STYLE = {
  marginTop: '1em'
@ -269,20 +268,9 @@ export default class DetailsStep extends Component {
    }

    const { selectedContractIndex } = this.state;
-    const contractsItems = Object
-      .keys(contracts)
-      .map((name, index) => (
-        <MenuItem
-          key={ index }
-          label={ name }
-          value={ index }
-        >
-          { name }
-        </MenuItem>
-      ));

    return (
-      <Select
+      <Dropdown
        label={
          <FormattedMessage
            id='deployContract.details.contract.label'
@ -291,9 +279,18 @@ export default class DetailsStep extends Component {
        }
        onChange={ this.onContractChange }
        value={ selectedContractIndex }
-      >
-        { contractsItems }
-      </Select>
+        options={
+          Object
+            .keys(contracts)
+            .map((name, index) => {
+              return {
+                key: index,
+                text: name,
+                value: index
+              };
+            })
+        }
+      />
    );
  }

--- a/js/src/views/Settings/Node/node.js
+++ b/js/src/views/Settings/Node/node.js
@ -14,12 +14,12 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.

-import { Dropdown, Menu } from 'semantic-ui-react';
+import { Menu } from 'semantic-ui-react';
 import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';

-import { Select, Container, LanguageSelector } from '~/ui';
+import { Container, Dropdown, LanguageSelector } from '~/ui';
 import Features, { FeaturesStore, FEATURES } from '~/ui/Features';

 import Store, { LOGLEVEL_OPTIONS } from './store';
@ -68,16 +68,12 @@ export default class Node extends Component {
  }

  renderItem (name, func, label) {
-    return (
-      <Dropdown.Item
-        key={ name }
-        content={ label }
-        name={ name }
-        onClick={ func }
-      >
-        { label }
-      </Dropdown.Item>
-    );
+    return {
+      key: name,
+      text: name,
+      value: name,
+      content: label
+    };
  }

  renderLogsConfig () {
@ -118,7 +114,7 @@ export default class Node extends Component {
        return (
          <div key={ key }>
            <p>{ desc }</p>
-            <Select
+            <Dropdown
              onChange={ onChange }
              value={ level }
              values={ LOGLEVEL_OPTIONS }
@ -145,42 +141,33 @@ export default class Node extends Component {
          <Dropdown
            item
            text={ mode }
-          >
-            <Dropdown.Menu>
-              {
-                this.renderItem('active', this.onChangeMode, (
-                  <FormattedMessage
-                    id='settings.parity.modes.mode_active'
-                    defaultMessage='Continuously sync'
-                  />
-                ))
-              }
-              {
-                this.renderItem('passive', this.onChangeMode, (
-                  <FormattedMessage
-                    id='settings.parity.modes.mode_passive'
-                    defaultMessage='Sync on intervals'
-                  />
-                ))
-              }
-              {
-                this.renderItem('dark', this.onChangeMode, (
-                  <FormattedMessage
-                    id='settings.parity.modes.mode_dark'
-                    defaultMessage='Sync when RPC is active'
-                  />
-                ))
-              }
-              {
-                this.renderItem('offline', this.onChangeMode, (
-                  <FormattedMessage
-                    id='settings.parity.modes.mode_offline'
-                    defaultMessage='No Syncing'
-                  />
-                ))
-              }
-            </Dropdown.Menu>
-          </Dropdown>
+            options={ [
+              this.renderItem('active', this.onChangeMode, (
+                <FormattedMessage
+                  id='settings.parity.modes.mode_active'
+                  defaultMessage='Continuously sync'
+                />
+              )),
+              this.renderItem('passive', this.onChangeMode, (
+                <FormattedMessage
+                  id='settings.parity.modes.mode_passive'
+                  defaultMessage='Sync on intervals'
+                />
+              )),
+              this.renderItem('dark', this.onChangeMode, (
+                <FormattedMessage
+                  id='settings.parity.modes.mode_dark'
+                  defaultMessage='Sync when RPC is active'
+                />
+              )),
+              this.renderItem('offline', this.onChangeMode, (
+                <FormattedMessage
+                  id='settings.parity.modes.mode_offline'
+                  defaultMessage='No Syncing'
+                />
+              ))
+            ] }
+          />
        </Menu>
      </div>
    );
@ -200,74 +187,59 @@ export default class Node extends Component {
          id='parityChainSelect'
          value={ chain }
        >
-          <Dropdown item text={ chain }>
-            <Dropdown.Menu>
-              {
-                this.renderItem('foundation', this.onChangeChain, (
-                  <FormattedMessage
-                    id='settings.parity.chains.chain_foundation'
-                    defaultMessage='Ethereum Foundation'
-                  />
-                ))
-              }
-              {
-                this.renderItem('kovan', this.onChangeChain, (
-                  <FormattedMessage
-                    id='settings.parity.chains.chain_kovan'
-                    defaultMessage='Kovan test network'
-                  />
-                ))
-              }
-              {
-                this.renderItem('olympic', this.onChangeChain, (
-                  <FormattedMessage
-                    id='settings.parity.chains.chain_olympic'
-                    defaultMessage='Olympic test network'
-                  />
-                ))
-              }
-              {
-                this.renderItem('morden', this.onChangeChain, (
-                  <FormattedMessage
-                    id='settings.parity.chains.cmorden_kovan'
-                    defaultMessage='Morden (Classic) test network'
-                  />
-                ))
-              }
-              {
-                this.renderItem('ropsten', this.onChangeChain, (
-                  <FormattedMessage
-                    id='settings.parity.chains.chain_ropsten'
-                    defaultMessage='Ropsten test network'
-                  />
-                ))
-              }
-              {
-                this.renderItem('classic', this.onChangeChain, (
-                  <FormattedMessage
-                    id='settings.parity.chains.chain_classic'
-                    defaultMessage='Ethereum Classic network'
-                  />
-                ))
-              }
-              {
-                this.renderItem('expanse', this.onChangeChain, (
-                  <FormattedMessage
-                    id='settings.parity.chains.chain_expanse'
-                    defaultMessage='Expanse network'
-                  />
-                ))
-              }
-              {
-                this.renderItem('dev', this.onChangeChain, (
-                  <FormattedMessage
-                    id='settings.parity.chains.chain_dev'
-                    defaultMessage='Local development chain'
-                  />
-                ))
-              }
-            </Dropdown.Menu>
-          </Dropdown>
+          <Dropdown
+            text={ chain }
+            options={ [
+              this.renderItem('foundation', this.onChangeChain, (
+                <FormattedMessage
+                  id='settings.parity.chains.chain_foundation'
+                  defaultMessage='Ethereum Foundation'
+                />
+              )),
+              this.renderItem('kovan', this.onChangeChain, (
+                <FormattedMessage
+                  id='settings.parity.chains.chain_kovan'
+                  defaultMessage='Kovan test network'
+                />
+              )),
+              this.renderItem('olympic', this.onChangeChain, (
+                <FormattedMessage
+                  id='settings.parity.chains.chain_olympic'
+                  defaultMessage='Olympic test network'
+                />
+              )),
+              this.renderItem('morden', this.onChangeChain, (
+                <FormattedMessage
+                  id='settings.parity.chains.cmorden_kovan'
+                  defaultMessage='Morden (Classic) test network'
+                />
+              )),
+              this.renderItem('ropsten', this.onChangeChain, (
+                <FormattedMessage
+                  id='settings.parity.chains.chain_ropsten'
+                  defaultMessage='Ropsten test network'
+                />
+              )),
+              this.renderItem('classic', this.onChangeChain, (
+                <FormattedMessage
+                  id='settings.parity.chains.chain_classic'
+                  defaultMessage='Ethereum Classic network'
+                />
+              )),
+              this.renderItem('expanse', this.onChangeChain, (
+                <FormattedMessage
+                  id='settings.parity.chains.chain_expanse'
+                  defaultMessage='Expanse network'
+                />
+              )),
+              this.renderItem('dev', this.onChangeChain, (
+                <FormattedMessage
+                  id='settings.parity.chains.chain_dev'
+                  defaultMessage='Local development chain'
+                />
+              ))
+            ] }
+          />
        </Menu>
      </div>
    );
--- a/js/webpack/app.js
+++ b/js/webpack/app.js
@ -147,6 +147,8 @@ module.exports = {
  resolve: {
    alias: {
      '~': path.resolve(__dirname, '../src'),
+      '@parity/wordlist': path.resolve(__dirname, '../node_modules/@parity/wordlist'),
+      '@parity': path.resolve(__dirname, '../src'),
      'secp256k1': path.resolve(__dirname, '../node_modules/secp256k1/js'),
      'keythereum': path.resolve(__dirname, '../node_modules/keythereum/dist/keythereum')
    },
--- a/js/webpack/libraries.js
+++ b/js/webpack/libraries.js
@ -44,6 +44,8 @@ module.exports = {
  resolve: {
    alias: {
      '~': path.resolve(__dirname, '../src'),
+      '@parity/wordlist': path.resolve(__dirname, '../node_modules/@parity/wordlist'),
+      '@parity': path.resolve(__dirname, '../src'),
      'secp256k1': path.resolve(__dirname, '../node_modules/secp256k1/js'),
      'keythereum': path.resolve(__dirname, '../node_modules/keythereum/dist/keythereum')
    }
--- a/js/webpack/npm.js
+++ b/js/webpack/npm.js
@ -77,6 +77,8 @@ module.exports = {
  resolve: {
    alias: {
      '~': path.resolve(__dirname, '../src'),
+      '@parity/wordlist': path.resolve(__dirname, '../node_modules/@parity/wordlist'),
+      '@parity': path.resolve(__dirname, '../src'),
      'secp256k1': path.resolve(__dirname, '../node_modules/secp256k1/js'),
      'keythereum': path.resolve(__dirname, '../node_modules/keythereum/dist/keythereum')
    },
--- a/js/webpack/test.js
+++ b/js/webpack/test.js
@ -20,7 +20,9 @@ module.exports = {
  context: path.join(__dirname, '../src'),
  resolve: {
    alias: {
-      '~': path.resolve(__dirname, '../src')
+      '~': path.resolve(__dirname, '../src'),
+      '@parity/wordlist': path.resolve(__dirname, '../node_modules/@parity/wordlist'),
+      '@parity': path.resolve(__dirname, '../src')
    }
  }
 };