Ui 2 complete MUI removal (#5635)

* Convert DateTime input component

* Remove muiTheme context

js/src/shell/embed.js

@@ -29,7 +29,6 @@ import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
 import { patchApi } from '@parity/shared/util/tx';
 import ContextProvider from '@parity/ui/ContextProvider';
-import muiTheme from '@parity/ui/Theme';
 
 import SecureApi from '~/secureApi';
 
@@ -98,7 +97,6 @@ window.secureApi = api;
 ReactDOM.render(
   <ContextProvider
     api={ api }
-    muiTheme={ muiTheme }
     store={ store }
   >
     <ParityBar dapp externalLink={ 'http://127.0.0.1:8180' } />

js/src/shell/index.js

@@ -34,7 +34,6 @@ import HistoryStore from '@parity/shared/mobx/historyStore';
 import { initStore } from '@parity/shared/redux';
 import { patchApi } from '@parity/shared/util/tx';
 import ContextProvider from '@parity/ui/ContextProvider';
-import muiTheme from '@parity/ui/Theme';
 
 import '@parity/shared/environment';
 
@@ -83,7 +82,7 @@ function onEnterDapp ({ params }) {
 }
 
 ReactDOM.render(
-  <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
+  <ContextProvider api={ api } store={ store }>
     <Router history={ hashHistory }>
       <Route path='/' component={ Application }>
         <Redirect from='/auth' to='/' />

js/src/ui/ContextProvider/contextProvider.js

@@ -24,14 +24,12 @@ import { LocaleStore } from '~/i18n';
 export default class ContextProvider extends Component {
   static propTypes = {
     api: PropTypes.object.isRequired,
-    muiTheme: PropTypes.object.isRequired,
     store: PropTypes.object,
     children: PropTypes.node.isRequired
   }
 
   static childContextTypes = {
     api: PropTypes.object,
-    muiTheme: PropTypes.object,
     store: PropTypes.object
   }
 
@@ -49,11 +47,10 @@ export default class ContextProvider extends Component {
   }
 
   getChildContext () {
-    const { api, muiTheme, store } = this.props;
+    const { api, store } = this.props;
 
     return {
       api,
-      muiTheme,
       store
     };
   }

js/src/ui/Form/AddressSelect/addressSelect.js

@@ -42,8 +42,7 @@ let currentId = 1;
 class AddressSelect extends Component {
   static contextTypes = {
     intl: React.PropTypes.object.isRequired,
-    api: PropTypes.object.isRequired,
-    muiTheme: PropTypes.object.isRequired
+    api: PropTypes.object.isRequired
   };
 
   static propTypes = {

js/src/ui/Form/InputDate/inputDate.js

@@ -1,53 +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 { DatePicker } from 'material-ui';
-import React, { Component, PropTypes } from 'react';
-
-import Label from '../Label';
-
-import styles from './inputDate.css';
-
-// NOTE: Has to be larger than Signer overlay Z, aligns with ../InputTime
-const DIALOG_STYLE = { zIndex: 10010 };
-
-export default class InputDate extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    hint: PropTypes.node,
-    label: PropTypes.node,
-    onChange: PropTypes.func,
-    value: PropTypes.object.isRequired
-  };
-
-  render () {
-    const { className, hint, label, onChange, value } = this.props;
-
-    return (
-      <div className={ [styles.container, className].join(' ') }>
-        <Label label={ label } />
-        <DatePicker
-          autoOk
-          className={ styles.input }
-          dialogContainerStyle={ DIALOG_STYLE }
-          hintText={ hint }
-          onChange={ onChange }
-          value={ value }
-        />
-      </div>
-    );
-  }
-}

js/src/ui/Form/InputDateTime/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 './inputDate';
+export default from './inputDateTime';

js/src/ui/Form/InputDateTime/inputDateTime.css

@@ -16,7 +16,4 @@
 */
 
 .container {
-  .input {
-    width: 100%;
-  }
 }

js/src/ui/Form/InputDateTime/inputDateTime.js

@@ -0,0 +1,60 @@
+// 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 DateTime from 'react-datetime';
+
+import { parseI18NString } from '@parity/shared/util/messages';
+
+import LabelComponent from '~/ui/Form/LabelComponent';
+
+import styles from './inputDateTime.css';
+
+import 'react-datetime/css/react-datetime.css';
+
+export default function InputDateTime ({ className, hint, label, onChange, value }, context) {
+  const _onChange = (value) => onChange && onChange(null, value);
+
+  return (
+    <LabelComponent
+      className={ `${styles.container} ${className}` }
+      label={ label }
+    >
+      <div className='ui fluid input'>
+        <DateTime
+          className={ styles.input }
+          inputProps={ {
+            placeholder: parseI18NString(context, hint)
+          } }
+          onChange={ _onChange }
+          value={ value }
+        />
+      </div>
+    </LabelComponent>
+  );
+}
+
+InputDateTime.contextTypes = {
+  intl: PropTypes.object
+};
+
+InputDateTime.propTypes = {
+  className: PropTypes.string,
+  hint: PropTypes.node,
+  label: PropTypes.node,
+  onChange: PropTypes.func,
+  value: PropTypes.object.isRequired
+};

js/src/ui/Form/InputTime/index.js

@@ -1,17 +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/>.
-
-export default from './inputTime';

js/src/ui/Form/InputTime/inputTime.css

@@ -1,22 +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/>.
-*/
-
-.container {
-  .input {
-    width: 100%;
-  }
-}

js/src/ui/Form/InputTime/inputTime.js

@@ -1,54 +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 { TimePicker } from 'material-ui';
-import React, { Component, PropTypes } from 'react';
-
-import Label from '../Label';
-
-import styles from './inputTime.css';
-
-// NOTE: Has to be larger than Signer overlay Z, aligns with ../InputDate
-const DIALOG_STYLE = { zIndex: 10010 };
-
-export default class InputTime extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    hint: PropTypes.node,
-    label: PropTypes.node,
-    onChange: PropTypes.func,
-    value: PropTypes.object.isRequired
-  }
-
-  render () {
-    const { className, hint, label, onChange, value } = this.props;
-
-    return (
-      <div className={ [styles.container, className].join(' ') }>
-        <Label label={ label } />
-        <TimePicker
-          autoOk
-          className={ styles.input }
-          dialogStyle={ DIALOG_STYLE }
-          format='24hr'
-          hintText={ hint }
-          onChange={ onChange }
-          value={ value }
-        />
-      </div>
-    );
-  }
-}

js/src/ui/Form/form.js

@@ -14,36 +14,27 @@
 // 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 React, { PropTypes } from 'react';
 
 import styles from './form.css';
 
-export default class Form extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string
-  }
-
-  render () {
-    const { className } = this.props;
-    const classes = [ styles.form ];
-
-    if (className) {
-      classes.push(className);
-    }
-
+export default function Form ({ children, className }) {
   // HACK: hidden inputs to disable Chrome's autocomplete
   return (
     <form
       autoComplete='new-password'
-        className={ classes.join(' ') }
+      className={ `${styles.form} ${className}` }
     >
       <div className={ styles.autofill }>
         <input type='text' name='fakeusernameremembered' />
         <input type='password' name='fakepasswordremembered' />
       </div>
-        { this.props.children }
+      { children }
     </form>
   );
 }
-}
+
+Form.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string
+};

js/src/ui/Form/index.js

@@ -24,9 +24,8 @@ export Input from './Input';
 export InputAddress from './InputAddress';
 export InputAddressSelect from './InputAddressSelect';
 export InputChip from './InputChip';
-export InputDate from './InputDate';
+export InputDateTime from './InputDateTime';
 export InputInline from './InputInline';
-export InputTime from './InputTime';
 export Label from './Label';
 export RadioButtons from './RadioButtons';
 export Toggle from './Toggle';

js/src/ui/GasPriceEditor/gasPriceEditor.js

@@ -19,7 +19,7 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Input, InputDate, InputTime, RadioButtons } from '../Form';
+import { Input, InputDateTime, RadioButtons } from '../Form';
 import GasPriceSelector from '../GasPriceSelector';
 
 import Store, { CONDITIONS } from './store';
@@ -187,35 +187,17 @@ export default class GasPriceEditor extends Component {
     return (
       <div className={ styles.conditionContainer }>
         <div className={ styles.input }>
-          <InputDate
+          <InputDateTime
             hint={
               <FormattedMessage
                 id='txEditor.condition.date.hint'
-                defaultMessage='The minimum date to send from'
+                defaultMessage='The minimum date and time to send from'
               />
             }
             label={
               <FormattedMessage
                 id='txEditor.condition.date.label'
-                defaultMessage='Transaction send date'
-              />
-            }
-            onChange={ this.onChangeConditionDateTime }
-            value={ condition.time }
-          />
-        </div>
-        <div className={ styles.input }>
-          <InputTime
-            hint={
-              <FormattedMessage
-                id='txEditor.condition.time.hint'
-                defaultMessage='The minimum time to send from'
-              />
-            }
-            label={
-              <FormattedMessage
-                id='txEditor.condition.time.label'
-                defaultMessage='Transaction send time'
+                defaultMessage='Transaction send date and time'
               />
             }
             onChange={ this.onChangeConditionDateTime }

js/src/ui/ParityBackground/parityBackground.js

@@ -14,14 +14,33 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import GeoPattern from 'geopattern';
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 
-class ParityBackground extends Component {
-  static contextTypes = {
-    muiTheme: PropTypes.object.isRequired
-  };
+const imageCache = {};
 
+function getBackgroundStyle (_gradient, _seed) {
+  const gradient = _gradient || 'rgba(255, 255, 255, 0.25)';
+  const seed = _seed || '0';
+  let url;
+
+  if (_seed) {
+    url = GeoPattern.generate(_seed).toDataUrl();
+  } else if (imageCache[seed] && imageCache[seed][gradient]) {
+    url = imageCache[seed][gradient];
+  } else {
+    url = GeoPattern.generate(seed).toDataUrl();
+    imageCache[seed] = imageCache[seed] || {};
+    imageCache[seed][gradient] = url;
+  }
+
+  return {
+    background: `linear-gradient(${gradient}, ${gradient}), ${url}`
+  };
+}
+
+class ParityBackground extends Component {
   static propTypes = {
     attachDocument: PropTypes.bool,
     backgroundSeed: PropTypes.string,
@@ -63,9 +82,7 @@ class ParityBackground extends Component {
       return;
     }
 
-    const { muiTheme } = this.context;
-
-    const style = muiTheme.parity.getBackgroundStyle(gradient, _seed);
+    const style = getBackgroundStyle(gradient, _seed);
 
     this.setState({ style });
   }
@@ -105,5 +122,6 @@ function mapStateToProps (state) {
 }
 
 export default connect(
-  mapStateToProps
+  mapStateToProps,
+  null
 )(ParityBackground);

js/src/ui/Theme/index.js

@@ -1,17 +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/>.
-
-export default from './theme';

js/src/ui/Theme/theme.js

@@ -1,55 +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 GeoPattern from 'geopattern';
-import getMuiTheme from 'material-ui/styles/getMuiTheme';
-
-const muiTheme = getMuiTheme();
-
-muiTheme.zIndex.layer = 4000;
-muiTheme.zIndex.popover = 4100;
-
-const imageCache = {};
-
-muiTheme.parity = {
-  backgroundSeed: '0x0',
-
-  setBackgroundSeed: (seed) => {
-    muiTheme.parity.backgroundSeed = seed;
-  },
-
-  getBackgroundStyle: (_gradient, _seed) => {
-    const gradient = _gradient || 'rgba(255, 255, 255, 0.25)';
-    const seed = _seed || muiTheme.parity.backgroundSeed;
-    let url;
-
-    if (_seed) {
-      url = GeoPattern.generate(_seed).toDataUrl();
-    } else if (imageCache[seed] && imageCache[seed][gradient]) {
-      url = imageCache[seed][gradient];
-    } else {
-      url = GeoPattern.generate(seed).toDataUrl();
-      imageCache[seed] = imageCache[seed] || {};
-      imageCache[seed][gradient] = url;
-    }
-
-    return {
-      background: `linear-gradient(${gradient}, ${gradient}), ${url}`
-    };
-  }
-};
-
-export default muiTheme;

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, Slider, Toggle, TypedInput, VaultSelect } from './Form';
+export Form, { AddressSelect, Checkbox, DappUrlInput, Dropdown, FileSelect, FormWrap, Input, InputAddress, InputAddressSelect, InputChip, InputDateTime, InputInline, Label, RadioButtons, Slider, Toggle, TypedInput, VaultSelect } from './Form';
 export GasPriceEditor from './GasPriceEditor';
 export GasPriceSelector from './GasPriceSelector';
 export IconCache from './IconCache';
@@ -46,7 +46,6 @@ export Loading from './Loading';
 export MethodDecoding from './MethodDecoding';
 export { Busy as BusyStep, Completed as CompletedStep } from './Modal';
 export ModalBox from './ModalBox';
-export muiTheme from './Theme';
 export Page from './Page';
 export Popup from './Popup';
 export Portal from './Portal';

js/src/ui/package.json

@@ -26,10 +26,10 @@
     "js-sha3": "0.5.5",
     "keycode": "2.1.8",
     "lodash": "4.17.2",
-    "material-ui": "0.16.5",
     "moment": "2.17.0",
     "react-ace": "4.1.0",
     "react-copy-to-clipboard": "4.2.3",
+    "react-datetime": "2.8.10",
     "react-dropzone": "3.7.3",
     "react-event-listener": "0.4.1",
     "react-portal": "3.0.0",

js/src/views/Account/index.js

@@ -24,7 +24,6 @@ injectTapEventPlugin();
 import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
 import ContextProvider from '@parity/ui/ContextProvider';
-import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
 
@@ -35,7 +34,7 @@ ContractInstances.get(api);
 const store = initStore(api, hashHistory);
 
 ReactDOM.render(
-  <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
+  <ContextProvider api={ api } store={ store }>
     <Router history={ hashHistory }>
       <Route path='/:address' component={ Account } />
     </Router>

js/src/views/Accounts/index.js

@@ -24,7 +24,6 @@ injectTapEventPlugin();
 import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
 import ContextProvider from '@parity/ui/ContextProvider';
-import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
 
@@ -35,7 +34,7 @@ ContractInstances.get(api);
 const store = initStore(api, hashHistory);
 
 ReactDOM.render(
-  <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
+  <ContextProvider api={ api } store={ store }>
     <Router history={ hashHistory }>
       <Route path='/' component={ Accounts } />
     </Router>

js/src/views/Address/index.js

@@ -24,7 +24,6 @@ injectTapEventPlugin();
 import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
 import ContextProvider from '@parity/ui/ContextProvider';
-import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
 import Address from './address';
@@ -34,7 +33,7 @@ ContractInstances.get(api);
 const store = initStore(api, hashHistory);
 
 ReactDOM.render(
-  <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
+  <ContextProvider api={ api } store={ store }>
     <Router history={ hashHistory }>
       <Route path='/:address' component={ Address } />
     </Router>

js/src/views/Addresses/index.js

@@ -24,7 +24,6 @@ injectTapEventPlugin();
 import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
 import ContextProvider from '@parity/ui/ContextProvider';
-import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
 import Addresses from './addresses';
@@ -34,7 +33,7 @@ ContractInstances.get(api);
 const store = initStore(api, hashHistory);
 
 ReactDOM.render(
-  <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
+  <ContextProvider api={ api } store={ store }>
     <Router history={ hashHistory }>
       <Route path='/' component={ Addresses } />
     </Router>

js/src/views/Contract/index.js

@@ -24,7 +24,6 @@ injectTapEventPlugin();
 import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
 import ContextProvider from '@parity/ui/ContextProvider';
-import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
 import Contract from './contract';
@@ -34,7 +33,7 @@ ContractInstances.get(api);
 const store = initStore(api, hashHistory);
 
 ReactDOM.render(
-  <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
+  <ContextProvider api={ api } store={ store }>
     <Router history={ hashHistory }>
       <Route path='/:address' component={ Contract } />
     </Router>

js/src/views/ContractDevelop/index.js

@@ -23,7 +23,6 @@ injectTapEventPlugin();
 
 import { initStore } from '@parity/shared/redux';
 import ContextProvider from '@parity/ui/ContextProvider';
-import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
 
@@ -32,7 +31,7 @@ import ContractDevelop from './contractDevelop';
 const store = initStore(api, hashHistory);
 
 ReactDOM.render(
-  <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
+  <ContextProvider api={ api } store={ store }>
     <Router history={ hashHistory }>
       <Route path='/' component={ ContractDevelop } />
     </Router>

js/src/views/Contracts/index.js

@@ -24,7 +24,6 @@ injectTapEventPlugin();
 import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
 import ContextProvider from '@parity/ui/ContextProvider';
-import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
 import Contracts from './contracts';
@@ -34,7 +33,7 @@ ContractInstances.get(api);
 const store = initStore(api, hashHistory);
 
 ReactDOM.render(
-  <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
+  <ContextProvider api={ api } store={ store }>
     <Router history={ hashHistory }>
       <Route path='/' component={ Contracts } />
     </Router>

js/src/views/Home/index.js

@@ -23,7 +23,6 @@ injectTapEventPlugin();
 
 import { initStore } from '@parity/shared/redux';
 import ContextProvider from '@parity/ui/ContextProvider';
-import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
 import Home from './home';
@@ -31,7 +30,7 @@ import Home from './home';
 const store = initStore(api, hashHistory);
 
 ReactDOM.render(
-  <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
+  <ContextProvider api={ api } store={ store }>
     <Router history={ hashHistory }>
       <Route path='/' component={ Home } />
     </Router>

js/src/views/Playground/index.js

@@ -23,7 +23,6 @@ injectTapEventPlugin();
 
 import { initStore } from '@parity/shared/redux';
 import ContextProvider from '@parity/ui/ContextProvider';
-import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
 import Playground from './playground';
@@ -31,7 +30,7 @@ import Playground from './playground';
 const store = initStore(api, hashHistory);
 
 ReactDOM.render(
-  <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
+  <ContextProvider api={ api } store={ store }>
     <Router history={ hashHistory }>
       <Route path='/' component={ Playground } />
     </Router>

js/src/views/Settings/Background/background.js

@@ -30,8 +30,7 @@ let counter = 0;
 
 class Background extends Component {
   static contextTypes = {
-    api: PropTypes.object.isRequired,
-    muiTheme: PropTypes.object.isRequired
+    api: PropTypes.object.isRequired
   }
 
   static propTypes = {
@@ -118,11 +117,9 @@ class Background extends Component {
   }
 
   onSelect = (seed) => {
-    const { muiTheme } = this.context;
     const { updateBackground } = this.props;
 
     return (event) => {
-      muiTheme.parity.setBackgroundSeed(seed);
       updateBackground(seed);
     };
   }
@@ -145,9 +142,9 @@ class Background extends Component {
   }
 
   generateSeed () {
-    const { api, muiTheme } = this.context;
+    const { api } = this.context;
 
-    return api.util.sha3.text(`${muiTheme.backgroundSeed}${Math.random()}${counter++}`);
+    return api.util.sha3.text(`${Math.random()}${counter++}`);
   }
 }
 

js/src/views/Settings/index.js

@@ -23,7 +23,6 @@ injectTapEventPlugin();
 
 import { initStore } from '@parity/shared/redux';
 import ContextProvider from '@parity/ui/ContextProvider';
-import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
 
@@ -36,7 +35,7 @@ import Settings from './settings';
 const store = initStore(api, hashHistory);
 
 ReactDOM.render(
-  <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
+  <ContextProvider api={ api } store={ store }>
     <Router history={ hashHistory }>
       <Route path='/' component={ Settings }>
         <Route path='/background' component={ SettingsBackground } />

js/src/views/Signer/index.js

@@ -24,7 +24,6 @@ injectTapEventPlugin();
 import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
 import ContextProvider from '@parity/ui/ContextProvider';
-import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
 
@@ -35,7 +34,7 @@ ContractInstances.get(api);
 const store = initStore(api, hashHistory);
 
 ReactDOM.render(
-  <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
+  <ContextProvider api={ api } store={ store }>
     <Router history={ hashHistory }>
       <Route path='/' component={ Signer } />
     </Router>

js/src/views/Status/index.js

@@ -24,7 +24,6 @@ injectTapEventPlugin();
 import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
 import ContextProvider from '@parity/ui/ContextProvider';
-import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
 import Status from './status';
@@ -34,7 +33,7 @@ ContractInstances.get(api);
 const store = initStore(api, hashHistory);
 
 ReactDOM.render(
-  <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
+  <ContextProvider api={ api } store={ store }>
     <Router history={ hashHistory }>
       <Route path='/' component={ Status } />
     </Router>

js/src/views/Vaults/index.js

@@ -24,7 +24,6 @@ injectTapEventPlugin();
 import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
 import ContextProvider from '@parity/ui/ContextProvider';
-import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
 
@@ -35,7 +34,7 @@ ContractInstances.get(api);
 const store = initStore(api, hashHistory);
 
 ReactDOM.render(
-  <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
+  <ContextProvider api={ api } store={ store }>
     <Router history={ hashHistory }>
       <Route path='/' component={ Vaults } />
     </Router>

js/src/views/Wallet/index.js

@@ -24,7 +24,6 @@ injectTapEventPlugin();
 import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
 import ContextProvider from '@parity/ui/ContextProvider';
-import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
 import Wallet from './wallet';
@@ -34,7 +33,7 @@ ContractInstances.get(api);
 const store = initStore(api, hashHistory);
 
 ReactDOM.render(
-  <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
+  <ContextProvider api={ api } store={ store }>
     <Router history={ hashHistory }>
       <Route path='/:address' component={ Wallet } />
     </Router>

js/src/views/Web/index.js

@@ -23,7 +23,6 @@ injectTapEventPlugin();
 
 import { initStore } from '@parity/shared/redux';
 import ContextProvider from '@parity/ui/ContextProvider';
-import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
 import Web from './web';
@@ -31,7 +30,7 @@ import Web from './web';
 const store = initStore(api, hashHistory);
 
 ReactDOM.render(
-  <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
+  <ContextProvider api={ api } store={ store }>
     <Router history={ hashHistory }>
       <Route path='/' component={ Web } />
     </Router>