Mui-be-gone-3 (#5546)

* mui-be-gone

* second

* mui-be-gone-3

* updates

* ups and ups

* oops

* Revert to changes in removed files from ui-2

* Revert to stateless component

js/src/shell/Snackbar/snackbar.js

@@ -18,24 +18,16 @@ import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
-import { Snackbar as SnackbarMUI } from 'material-ui';
+import { Snackbar as SnackbarUI } from '~/ui';
 
 import { closeSnackbar } from '~/redux/providers/snackbarActions';
 
-const BODY_STYLE = {
-  backgroundColor: 'rgba(0, 0, 0, 0.87)',
-  borderStyle: 'solid',
-  borderColor: '#424242',
-  borderWidth: '1px 1px 0 1px'
-};
-
-function Snackbar ({ closeSnackbar, cooldown, message, open }) {
+function Snackbar ({ closeSnackbar, cooldown = 3500, message, open = false }) {
   return (
-    <SnackbarMUI
-      autoHideDuration={ cooldown }
-      bodyStyle={ BODY_STYLE }
-      message={ message }
+    <SnackbarUI
       open={ open }
+      message={ message }
+      autoHideDuration={ cooldown }
       onRequestClose={ closeSnackbar }
     />
   );

js/src/ui/Errors/errors.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 { Snackbar } from 'material-ui';
+import { Snackbar } from '~/ui/Snackbar';
 
 import { closeErrors } from './actions';
 
@@ -26,17 +26,9 @@ import styles from './errors.css';
 
 const ERROR_REGEX = /-(\d+): (.+)$/;
 const DURATION_OPEN = 60000;
-const STYLE_BODY = {
-  height: 'auto',
-  whiteSpace: 'pre-line'
-};
+
 const STYLE_CONTENT = {
-  alignItems: 'center',
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'space-between',
-  lineHeight: '1.5em',
-  padding: '0.75em 0'
+  backgroundColor: 'rgba(255, 71, 71, 0.75)'
 };
 
 class Errors extends Component {
@@ -48,7 +40,7 @@ class Errors extends Component {
   };
 
   render () {
-    const { message, visible, onCloseErrors } = this.props;
+    const { message, visible } = this.props;
 
     if (!message || !visible) {
       return null;
@@ -68,10 +60,8 @@ class Errors extends Component {
         }
         autoHideDuration={ DURATION_OPEN }
         message={ text }
-        onActionTouchTap={ onCloseErrors }
         onRequestClose={ this.onRequestClose }
-        bodyStyle={ STYLE_BODY }
-        contentStyle={ STYLE_CONTENT }
+        bodyStyle={ STYLE_CONTENT }
       />
     );
   }

js/src/ui/Snackbar/index.js

@@ -0,0 +1,17 @@
+// 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 './snackbar';

js/src/ui/Snackbar/snackbar.css

@@ -0,0 +1,36 @@
+/* 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/>.
+*/
+
+.snacks {
+  color: white;
+  padding: 10px 20px;
+  position: fixed;
+  left: 50%;
+  bottom: 0;
+  height: 40px;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.75);
+  z-index: 3000;
+  transition: transform 0.75s;
+}
+
+#action {
+  padding-left: 20px;
+  font-weight: bold;
+  cursor: pointer;
+}

js/src/ui/Snackbar/snackbar.js

@@ -0,0 +1,101 @@
+// 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 { FormattedMessage } from 'react-intl';
+
+import styles from './snackbar.css';
+
+export default class Snackbar extends Component {
+  state = {
+    snackStyle: {
+      transform: 'translateX(-50%) translateY(40px)'
+    }
+  };
+
+  static propTypes = {
+    action: PropTypes.any,
+    open: PropTypes.bool,
+    message: PropTypes.string,
+    autoHideDuration: PropTypes.number,
+    bodyStyle: PropTypes.object,
+    onRequestClose: PropTypes.Func
+  };
+
+  defaultProps = {
+    autoHideDuration: 3500
+  };
+
+  componentWillUpdate (nextProps) {
+    const self = this;
+
+    if (this.openStatus) {
+      return;
+    }
+
+    if (nextProps.open === true) {
+      this.openStatus = true;
+
+      self.autoShow();
+
+      setTimeout(() => {
+        self.autoHide();
+      }, nextProps.autoHideDuration);
+    }
+  }
+
+  autoShow () {
+    this.setState({
+      snackStyle: {
+        transform: 'translateX(-50%) translateY(0px)'
+      }
+    });
+  }
+
+  autoHide () {
+    this.props.onRequestClose();
+    this.openStatus = false;
+    this.setState({
+      snackStyle: {
+        transform: 'translateX(-50%) translateY(40px)'
+      }
+    });
+  }
+
+  render () {
+    const { bodyStyle, message } = this.props;
+    const { snackStyle } = this.state;
+    let { action } = this.props;
+
+    if (action === null || action === 'undefined') {
+      action = (
+        <FormattedMessage
+          id='ui.snackbar.close'
+          defaultMessage='close'
+        />
+      );
+    }
+
+    return (
+      <div className={ styles.snacks } style={ snackStyle }>
+        <div style={ bodyStyle }>
+          <span>{ message }</span>
+          <span id={ styles.action } onClick={ this.autoHide }>{ action }</span>
+        </div>
+      </div>
+    );
+  }
+}

js/src/ui/index.js

@@ -56,6 +56,7 @@ export SectionList from './SectionList';
 export SelectionList from './SelectionList';
 export ShortenedHash from './ShortenedHash';
 export SignerIcon from './SignerIcon';
+export Snackbar from './Snackbar';
 export Tags from './Tags';
 export Title from './Title';
 export TxHash from './TxHash';

js/src/views/Account/PasswordManager/passwordManager.js

@@ -15,7 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import Paper from 'material-ui/Paper';
-import { Tabs, Tab } from 'material-ui/Tabs';
+import { Menu, Segment } from 'semantic-ui-react';
 import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -37,15 +37,13 @@ const MSG_SUCCESS_STYLE = {
 const MSG_FAILURE_STYLE = {
   backgroundColor: 'rgba(229, 115, 115, 0.75)'
 };
-const TABS_INKBAR_STYLE = {
-  backgroundColor: 'rgb(0, 151, 167)' // 'rgba(255, 255, 255, 0.55)'
-};
-const TABS_ITEM_STYLE = {
-  backgroundColor: 'rgba(255, 255, 255, 0.05)'
-};
+
+let MENU_CONTENT = 'TEST';
 
 @observer
 class PasswordManager extends Component {
+  state = { activeItem: 'bio' };
+
   static contextTypes = {
     api: PropTypes.object.isRequired
   }
@@ -136,37 +134,34 @@ class PasswordManager extends Component {
   }
 
   renderPage () {
+    const { activeItem } = this.state;
+
     return (
-      <Tabs
-        inkBarStyle={ TABS_INKBAR_STYLE }
-        tabItemContainerStyle={ TABS_ITEM_STYLE }
-      >
-        <Tab
-          label={
-            <FormattedMessage
-              id='passwordChange.tabTest.label'
-              defaultMessage='Test Password'
-            />
-          }
-          onActive={ this.onActivateTestTab }
-        >
-          { this.renderTabTest() }
-        </Tab>
-        <Tab
-          label={
-            <FormattedMessage
-              id='passwordChange.tabChange.label'
-              defaultMessage='Change Password'
-            />
-          }
-          onActive={ this.onActivateChangeTab }
-        >
-          { this.renderTabChange() }
-        </Tab>
-      </Tabs>
+      <div>
+        <Menu attached='top' tabular>
+          <Menu.Item name='Test Password' active={ activeItem === 'Test Password' } onClick={ this.itemTestPassword } />
+          <Menu.Item name='Change Password' active={ activeItem === 'Change Password' } onClick={ this.itemChangePassword } />
+        </Menu>
+
+        <Segment attached='bottom'>
+          { MENU_CONTENT === 'TEST' ? this.renderTabTest() : this.renderTabChange() }
+        </Segment>
+      </div>
     );
   }
 
+  itemTestPassword = (e, name) => {
+    MENU_CONTENT = 'TEST';
+    this.onActivateTestTab();
+    this.setState({ activeItem: name });
+  }
+
+  itemChangePassword = (e, name) => {
+    MENU_CONTENT = 'CHANGE';
+    this.onActivateChangeTab();
+    this.setState({ activeItem: name });
+  }
+
   renderTabTest () {
     const { actionTab, busy } = this.store;