Mui be gone 2 (#5540)

* mui-be-gone

* second

* Revert ~/dapp mui removal

* Overlay text color

js/src/reset.css

@@ -45,10 +45,7 @@
 }
 
 :root .reset { font-size: initial; width: 100%; height: 100%; }
-/* shame:on */
+
-/* Material-ui is changing input properties with inline styles. */
-/* because of that https://github.com/paritytech/eth-node-status-page is overriding all inputs with !important
-/* We want to keep it consistent and we use material ui, so we set the default color according to material ui */
 :root .reset input {
   margin-top: 0;
   color: rgba(0, 0, 0, 0.870588) !important;

js/src/shell/Dapps/dapps.css

@@ -16,6 +16,7 @@
 */
 
 .overlay {
+  color: white;
   line-height: 1.5em;
   margin: 0 auto;
   text-align: left;

js/src/shell/Dapps/dapps.js

@@ -15,7 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import { omitBy } from 'lodash';
-import { Checkbox } from 'material-ui';
+import { Checkbox } from 'semantic-ui-react';
 import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -71,7 +71,7 @@ class Dapps extends Component {
                 />
               }
               checked={ false }
-              onCheck={ this.onClickAcceptExternal }
+              onClick={ this.onClickAcceptExternal }
             />
           </div>
         </div>

js/src/shell/FirstRun/TnC/tnc.js

@@ -16,7 +16,7 @@
 
 import React, { PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Checkbox } from 'material-ui';
+import { Checkbox } from 'semantic-ui-react';
 
 import styles from '../firstRun.css';
 
@@ -68,7 +68,7 @@ export default function TnC ({ hasAccepted, onAccept }) {
       <p>You agree that you are solely responsible for (and that EthCore has no responsibility to you or to any third party for) any breach of your obligations under these terms and for the consequences (including any loss or damage which EthCore may suffer) of any such breach.</p>
 
       <h3>Privacy and your personal information</h3>
-      <p>You agree to the use of your data (if any is gathered) in accordance with EthCore’s privacy policies: <a href='https://parity.io/legal.html' target='_blank'>https://parity.io/legal.html</a>. This policy explains how EthCore treats your personal information (if any is gathered), and protects your privacy, when you use EthCore’s Products.</p>
+      <p>You agree to the use of your data (if any is gathered) in accordance with EthCore’s privacy policies: <a href='https://ethcore.io/legal.html' target='_blank'>https://ethcore.io/legal.html</a>. This policy explains how EthCore treats your personal information (if any is gathered), and protects your privacy, when you use EthCore’s Products.</p>
 
       <h3>Content in Parity</h3>
       <p>You understand that all information and data (such as smart contracts, data files, written text, computer software, music, audio files or other sounds, photographs, videos or other images) which you may have access to as part of, or through your use of, EthCore’s Product are the sole responsibility of the person from which such content originated. All such information is referred to below as the “Content”.</p>
@@ -79,7 +79,7 @@ export default function TnC ({ hasAccepted, onAccept }) {
       <h3>Proprietary rights</h3>
       <p>You acknowledge and agree that EthCore own all legal right, title and interest in and to the Parity and EthCore’s Products, including any intellectual property rights which subsist in Parity and EthCore’s Products (whether those rights happen to be registered or not, and wherever in the world those rights may exist).</p>
       <p>Unless you have agreed otherwise in writing with EthCore, nothing in the Terms gives you a right to use any of EthCore’s trade names, trade marks, service marks, logos, domain names, and other distinctive brand features.</p>
-      <p>If you have been given an explicit right to use any of these brand features in a separate written agreement with EthCore, then you agree that your use of such features shall be in compliance with that agreement, any applicable provisions of these terms, and EthCore’s brand feature use guidelines as updated from time to time. These guidelines can be viewed online at <a href='https://parity.io/press.html' target='_blank'>https://parity.io/press.html</a>.</p>
+      <p>If you have been given an explicit right to use any of these brand features in a separate written agreement with EthCore, then you agree that your use of such features shall be in compliance with that agreement, any applicable provisions of these terms, and EthCore’s brand feature use guidelines as updated from time to time. These guidelines can be viewed online at <a href='https://ethcore.io/press.html' target='_blank'>https://ethcore.io/press.html</a>.</p>
       <p>EthCore acknowledges and agrees that it obtains no right, title or interest from you (or your licensors) under these terms in or to any content that you submit, post, transmit or display on, or through, Parity, including any intellectual property rights which subsist in that content (whether those rights happen to be registered or not, and wherever in the world those rights may exist). Unless you have agreed otherwise in writing with EthCore, you agree that you are responsible for protecting and enforcing those rights and that EthCore has no obligation to do so on your behalf.</p>
       <p>You agree that you shall not remove, obscure, or alter any proprietary rights notices (including copyright and trade mark notices) which may be affixed to or contained within Parity or EthCore’s Products.</p>
       <p>Unless you have been expressly authorized to do so in writing by EthCore, you agree that in using Parity, you will not use any trade mark, service mark, trade name, logo of any company or organization in a way that is likely or intended to cause confusion about the owner or authorized user of such marks, names or logos.</p>
@@ -137,7 +137,7 @@ export default function TnC ({ hasAccepted, onAccept }) {
       <p>You acknowledge and agree that EthCore is not liable for any loss or damage which may be incurred by you as a result of the availability of those external sites or resources, or as a result of any reliance placed by you on the completeness, accuracy or existence of any advertising, products or other materials on, or available from, such web sites or resources.</p>
 
       <h3>Changes to the Terms</h3>
-      <p>EthCore may make changes to these from time to time. When these changes are made, EthCore will make a new copy of these terms available at https://parity.io/legal.html and any new terms will be made available to you from within, or through, the affected EthCore’s Product.</p>
+      <p>EthCore may make changes to these from time to time. When these changes are made, EthCore will make a new copy of these terms available at https://ethcore.io/legal.html and any new terms will be made available to you from within, or through, the affected EthCore’s Product.</p>
       <p>You understand and agree that if you use Parity or EthCore’s Products after the date on which the Terms have changed, EthCore will treat your use as acceptance of the updated terms.</p>
 
       <h3>General legal terms</h3>
@@ -165,7 +165,7 @@ export default function TnC ({ hasAccepted, onAccept }) {
           />
         }
         checked={ hasAccepted }
-        onCheck={ onAccept }
+        onClick={ onAccept }
       />
     </div>
   );

js/src/shell/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/transactionPendingFormConfirm.js

@@ -79,13 +79,6 @@ export default class TransactionPendingFormConfirm extends Component {
     }
   }
 
-  /**
-   * Properly focus on the input element when needed.
-   * This might be fixed some day in MaterialUI with
-   * an autoFocus prop.
-   *
-   * @see https://github.com/callemall/material-ui/issues/5632
-   */
   focus (props = this.props) {
     if (props.focus) {
       const textNode = ReactDOM.findDOMNode(this.refs.input);

js/src/shell/Snackbar/snackbar.js

@@ -19,14 +19,13 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { Snackbar as SnackbarMUI } from 'material-ui';
-import { darkBlack, grey800 } from 'material-ui/styles/colors';
 
 import { closeSnackbar } from '~/redux/providers/snackbarActions';
 
 const BODY_STYLE = {
-  backgroundColor: darkBlack,
+  backgroundColor: 'rgba(0, 0, 0, 0.87)',
   borderStyle: 'solid',
-  borderColor: grey800,
+  borderColor: '#424242',
   borderWidth: '1px 1px 0 1px'
 };
 

js/src/ui/Features/features.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 { Checkbox } from 'material-ui';
+import { Checkbox } from 'semantic-ui-react';
 import { observer } from 'mobx-react';
 import { List, ListItem } from 'material-ui/List';
 import React, { Component } from 'react';
@@ -54,7 +54,7 @@ export default class Features extends Component {
         leftCheckbox={
           <Checkbox
             checked={ this.store.active[key] }
-            onCheck={ onCheck }
+            onClick={ onCheck }
           />
         }
         primaryText={ feature.name }

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

@@ -14,7 +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/>.
 
-import { Checkbox, MenuItem } from 'material-ui';
+import { MenuItem } from 'material-ui';
+import { Checkbox } from 'semantic-ui-react';
 import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -104,7 +105,7 @@ export default class OptionsStep extends Component {
                 defaultMessage='I understand that ShapeShift.io is a 3rd-party service and by using the service any transfer of information and/or funds is completely out of the control of Parity'
               />
             }
-            onCheck={ this.onToggleAcceptTerms }
+            onClick={ this.onToggleAcceptTerms }
           />
         </Form>
         <Warning warning={ WARNING_LABELS[warning] } />

js/src/views/Account/Transfer/Details/details.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 { Checkbox } from 'material-ui';
+import { Checkbox } from 'semantic-ui-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -97,7 +97,7 @@ export default class Details extends Component {
                   defaultMessage='full account balance'
                 />
               }
-              onCheck={ this.onCheckAll }
+              onClick={ this.onCheckAll }
               style={ CHECK_STYLE }
             />
           </div>

js/src/views/Account/Verification/GatherData/gatherData.js

@@ -17,7 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import BigNumber from 'bignumber.js';
-import { Checkbox } from 'material-ui';
+import { Checkbox } from 'semantic-ui-react';
 
 import { fromWei } from '@parity/api/util/wei';
 
@@ -67,7 +67,7 @@ export default class GatherData extends Component {
             />
           }
           disabled={ accountIsVerified }
-          onCheck={ this.consentOnChange }
+          onClick={ this.consentOnChange }
         />
         <div className={ styles.terms }>{ termsOfService }</div>
       </Form>

js/src/views/Accounts/CreateAccount/RecoveryPhrase/recoveryPhrase.js

@@ -17,7 +17,7 @@
 import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Checkbox } from 'material-ui';
+import { Checkbox } from 'semantic-ui-react';
 
 import { Form, Input } from '~/ui';
 import PasswordStrength from '~/ui/Form/PasswordStrength';
@@ -142,7 +142,7 @@ export default class RecoveryPhrase extends Component {
               defaultMessage='Key was created with Parity <1.4.5 on Windows'
             />
           }
-          onCheck={ this.onToggleWindowsPhrase }
+          onClick={ this.onToggleWindowsPhrase }
         />
       </Form>
     );

js/src/views/Contract/ExecuteContract/DetailsStep/detailsStep.js

@@ -14,7 +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/>.
 
-import { Checkbox, MenuItem } from 'material-ui';
+import { MenuItem } from 'material-ui';
+import { Checkbox } from 'semantic-ui-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -103,7 +104,7 @@ export default class DetailsStep extends Component {
                   defaultMessage='advanced sending options'
                 />
               }
-              onCheck={ onAdvancedClick }
+              onClick={ onAdvancedClick }
               style={ CHECK_STYLE }
             />
           </div>

js/src/views/Contracts/DeployContract/DetailsStep/detailsStep.js

@@ -16,7 +16,8 @@
 
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Checkbox, MenuItem } from 'material-ui';
+import { MenuItem } from 'material-ui';
+import { Checkbox } from 'semantic-ui-react';
 
 import { AddressSelect, Form, Input, Select } from '~/ui';
 import { validateAbi } from '~/util/validation';
@@ -207,7 +208,7 @@ export default class DetailsStep extends Component {
                 defaultMessage='advanced sending options'
               />
             }
-            onCheck={ this.onCheckExtras }
+            onClick={ this.onCheckExtras }
             style={ CHECK_STYLE }
           />
         </div>

js/src/views/Settings/Views/views.js

@@ -18,7 +18,7 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Checkbox } from 'material-ui';
+import { Checkbox } from 'semantic-ui-react';
 
 import { Container } from '~/ui';
 
@@ -116,7 +116,7 @@ class Views extends Component {
               </div>
             </div>
           }
-          onCheck={ toggle }
+          onClick={ toggle }
           checked={ view.active }
           value={ view.active }
         />

js/src/views/Settings/settings.js

@@ -17,7 +17,6 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Menu } from 'semantic-ui-react';
-// import { Tab, Tabs } from 'material-ui';
 
 import imagesEthcoreBlock from '~/../assets/images/parity-logo-white-no-text.svg';
 

js/src/views/Vaults/VaultMeta/vaultMeta.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 { Checkbox } from 'material-ui';
+import { Checkbox } from 'semantic-ui-react';
 import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -124,14 +124,15 @@ class VaultMeta extends Component {
             </div>
             <div className={ styles.group }>
               <Checkbox
+                toggle
+                checked={ passwordEdit }
+                onClick={ this.onTogglePassword }
                 label={
                   <FormattedMessage
                     id='vaults.editMeta.allowPassword'
                     defaultMessage='Change vault password'
                   />
                 }
-                checked={ passwordEdit }
-                onCheck={ this.onTogglePassword }
               />
               <div className={ [styles.passwords, passwordEdit ? null : styles.disabled].join(' ') }>
                 <div className={ styles.password }>