mui-be-gone (#5539)

* mui-be-gone

* Revert ~/dapp mui removal

js/src/dapps/registry/Lookup/lookup.js

@@ -18,11 +18,11 @@ import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { Card, CardHeader, CardText } from 'material-ui/Card';
+import RaisedButton from 'material-ui/RaisedButton';
+import SearchIcon from 'material-ui/svg-icons/action/search';
 import TextField from 'material-ui/TextField';
 import DropDownMenu from 'material-ui/DropDownMenu';
 import MenuItem from 'material-ui/MenuItem';
-import RaisedButton from 'material-ui/RaisedButton';
-import SearchIcon from 'material-ui/svg-icons/action/search';
 import keycode from 'keycode';
 
 import { nullableProptype } from '~/util/proptypes';

js/src/views/Settings/Node/parity.js

@@ -14,7 +14,7 @@
 // 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 { Dropdown, Menu } from 'semantic-ui-react';
 import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -67,15 +67,16 @@ export default class Parity extends Component {
     );
   }
 
-  renderItem (name, label) {
+  renderItem (name, func, label) {
     return (
-      <MenuItem
+      <Dropdown.Item
         key={ name }
-        label={ label }
-        value={ name }
+        contenet={ label }
+        name={ name }
+        onClick={ func }
       >
         { label }
-      </MenuItem>
+      </Dropdown.Item>
     );
   }
 
@@ -131,56 +132,54 @@ export default class Parity extends Component {
     const { mode } = this.store;
 
     return (
-      <Select
-        id='parityModeSelect'
-        hint={
-          <FormattedMessage
-            id='settings.parity.modes.hint'
-            defaultMessage='the syncing mode for the Parity node'
-          />
-        }
-        label={
-          <FormattedMessage
-            id='settings.parity.modes.label'
-            defaultMessage='mode of operation'
-          />
-        }
-        onChange={ this.onChangeMode }
-        value={ mode }
-      >
-        {
-          this.renderItem('active', (
-            <FormattedMessage
-              id='settings.parity.modes.mode_active'
-              defaultMessage='Parity continuously syncs the chain'
-            />
-          ))
-        }
-        {
-          this.renderItem('passive', (
-            <FormattedMessage
-              id='settings.parity.modes.mode_passive'
-              defaultMessage='Parity syncs initially, then sleeps and wakes regularly to resync'
-            />
-          ))
-        }
-        {
-          this.renderItem('dark', (
-            <FormattedMessage
-              id='settings.parity.modes.mode_dark'
-              defaultMessage='Parity syncs only when the RPC is active'
-            />
-          ))
-        }
-        {
-          this.renderItem('offline', (
-            <FormattedMessage
-              id='settings.parity.modes.mode_offline'
-              defaultMessage="Parity doesn't sync"
-            />
-          ))
-        }
-      </Select>
+      <div className={ layout.option }>
+        <FormattedMessage
+          id='settings.parity.modes.hint'
+          defaultMessage='Choose the syncing mode for the Parity node'
+        />
+        <Menu
+          vertical
+          className='parityModeSelect'
+          value={ mode }
+        >
+          <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>
+        </Menu>
+      </div>
     );
   }
 
@@ -188,96 +187,94 @@ export default class Parity extends Component {
     const { chain } = this.store;
 
     return (
-      <Select
-        id='parityChainSelect'
-        hint={
-          <FormattedMessage
-            id='settings.parity.chains.hint'
-            defaultMessage='the chain for the Parity node to sync to'
-          />
-        }
-        label={
-          <FormattedMessage
-            id='settings.parity.chains.label'
-            defaultMessage='chain/network to sync'
-          />
-        }
-        onChange={ this.onChangeChain }
-        value={ chain }
-      >
-        {
-          this.renderItem('foundation', (
-            <FormattedMessage
-              id='settings.parity.chains.chain_foundation'
-              defaultMessage='Parity syncs to the Ethereum network launched by the Ethereum Foundation'
-            />
-          ))
-        }
-        {
-          this.renderItem('kovan', (
-            <FormattedMessage
-              id='settings.parity.chains.chain_kovan'
-              defaultMessage='Parity syncs to the Kovan test network'
-            />
-          ))
-        }
-        {
-          this.renderItem('olympic', (
-            <FormattedMessage
-              id='settings.parity.chains.chain_olympic'
-              defaultMessage='Parity syncs to the Olympic test network'
-            />
-          ))
-        }
-        {
-          this.renderItem('morden', (
-            <FormattedMessage
-              id='settings.parity.chains.cmorden_kovan'
-              defaultMessage='Parity syncs to Morden (Classic) test network'
-            />
-          ))
-        }
-        {
-          this.renderItem('ropsten', (
-            <FormattedMessage
-              id='settings.parity.chains.chain_ropsten'
-              defaultMessage='Parity syncs to the Ropsten test network'
-            />
-          ))
-        }
-        {
-          this.renderItem('classic', (
-            <FormattedMessage
-              id='settings.parity.chains.chain_classic'
-              defaultMessage='Parity syncs to the Ethereum Classic network'
-            />
-          ))
-        }
-        {
-          this.renderItem('expanse', (
-            <FormattedMessage
-              id='settings.parity.chains.chain_expanse'
-              defaultMessage='Parity syncs to the Expanse network'
-            />
-          ))
-        }
-        {
-          this.renderItem('dev', (
-            <FormattedMessage
-              id='settings.parity.chains.chain_dev'
-              defaultMessage='Parity uses a local development chain'
-            />
-          ))
-        }
-      </Select>
+      <div className={ layout.option }>
+        <FormattedMessage
+          id='settings.parity.chains.hint'
+          defaultMessage='Choose the chain for the Parity node to sync to'
+        />
+        <Menu
+          vertical
+          className='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>
+        </Menu>
+      </div>
     );
   }
 
-  onChangeMode = (event, index, mode) => {
-    this.store.changeMode(mode || event.target.value);
+  onChangeMode = (e, mode) => {
+    this.store.changeMode(mode.name);
   }
 
-  onChangeChain = (event, index, chain) => {
-    this.store.changeChain(chain || event.target.value);
+  onChangeChain = (e, chain) => {
+    this.store.changeChain(chain.name);
   }
 }

js/src/views/Settings/layout.css

@@ -67,3 +67,7 @@
 .center {
   text-align: center;
 }
+
+.option {
+  margin-bottom: 1em;
+}

js/src/views/Settings/settings.js

@@ -16,11 +16,12 @@
 
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Tab, Tabs } from 'material-ui';
+import { Menu } from 'semantic-ui-react';
+// import { Tab, Tabs } from 'material-ui';
 
 import imagesEthcoreBlock from '~/../assets/images/parity-logo-white-no-text.svg';
 
-import { Actionbar, Page } from '~/ui';
+import { Page } from '~/ui';
 import { BackgroundIcon, EthernetIcon, VisibleIcon } from '~/ui/Icons';
 
 import styles from './settings.css';
@@ -46,19 +47,12 @@ export default class Settings extends Component {
 
     return (
       <div>
-        <Actionbar
-          className={ styles.bar }
-          title={
-            <FormattedMessage id='settings.label' />
-          }
-        >
-          <Tabs className={ styles.tabs } value={ hash }>
-            { this.renderTab(hash, 'views', <VisibleIcon />) }
-            { this.renderTab(hash, 'background', <BackgroundIcon />) }
-            { proxy }
-            { this.renderTab(hash, 'parity', <img src={ imagesEthcoreBlock } className={ styles.imageIcon } />) }
-          </Tabs>
-        </Actionbar>
+        <Menu className={ styles.tabs } name={ hash }>
+          { this.renderTab(hash, 'views', <VisibleIcon />) }
+          { this.renderTab(hash, 'background', <BackgroundIcon />) }
+          { proxy }
+          { this.renderTab(hash, 'parity', <img src={ imagesEthcoreBlock } className={ styles.imageIcon } />) }
+        </Menu>
         <Page>
           { children }
         </Page>
@@ -66,32 +60,32 @@ export default class Settings extends Component {
     );
   }
 
-  renderTab (hash, section, icon) {
+  renderTab (hash, name, icon) {
     return (
-      <Tab
+      <Menu.Item
         className={
-          hash === section
+          hash === name
             ? styles.tabactive
             : styles.tab
         }
         icon={ icon }
-        key={ section }
-        label={
+        key={ name }
+        content={
           <div className={ styles.menu }>
-            <FormattedMessage id={ `settings.${section}.label` } />
+            <FormattedMessage id={ `settings.${name}.label` } />
           </div>
         }
-        onActive={ this.onActivate(section) }
-        value={ section }
+        onClick={ this.onActivate(name) }
+        name={ name }
       />
     );
   }
 
-  onActivate = (section) => {
+  onActivate = (name) => {
     const { router } = this.context;
 
     return (event) => {
-      router.push(`/${section}`);
+      router.push(`/${name}`);
     };
   }
 }