Semantic ui (#5507)

* semantic addition

* semantic addition

* semantic-ui into @parity/ui dependency

* Merge updates

* Update missing imports to use ~

* Clean @parity modules with clean

* Updated yarn.lock

js/src/shell/index.js

@@ -27,6 +27,8 @@ import injectTapEventPlugin from 'react-tap-event-plugin';
 import { IndexRoute, Redirect, Route, Router, hashHistory } from 'react-router';
 import qs from 'querystring';
 
+import '@parity/ui';
+
 import SecureApi from '~/secureApi';
 import ContractInstances from '~/contracts';
 

js/src/ui/Button/button.js

@@ -15,19 +15,25 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
-import { FlatButton } from 'material-ui';
+import { Button as SemButton } from 'semantic-ui-react';
 
 import { nodeOrStringProptype } from '~/util/proptypes';
 
 export default class Button extends Component {
   static propTypes = {
+    active: PropTypes.bool,
+    animated: PropTypes.bool,
+    basic: PropTypes.bool,
     backgroundColor: PropTypes.string,
     className: PropTypes.string,
+    color: PropTypes.string,
     disabled: PropTypes.bool,
     icon: PropTypes.node,
     label: nodeOrStringProptype(),
     onClick: PropTypes.func,
-    primary: PropTypes.bool
+    primary: PropTypes.bool,
+    size: PropTypes.string,
+    toggle: PropTypes.bool
   }
 
   static defaultProps = {
@@ -35,17 +41,35 @@ export default class Button extends Component {
   }
 
   render () {
-    const { className, backgroundColor, disabled, icon, label, primary, onClick } = this.props;
+    const {
+      active,
+      animated,
+      basic,
+      className,
+      color,
+      disabled,
+      icon,
+      label,
+      onClick,
+      primary,
+      size,
+      toggle
+    } = this.props;
 
     return (
-      <FlatButton
+      <SemButton
+        active={ active }
+        animated={ animated }
+        basic={ basic }
         className={ className }
-        backgroundColor={ backgroundColor }
+        color={ color }
         disabled={ disabled }
         icon={ icon }
-        label={ label }
+        content={ label }
+        onClick={ onClick }
         primary={ primary }
-        onTouchTap={ onClick }
+        size={ size }
+        toggle={ toggle }
       />
     );
   }

js/src/ui/Certifications/certifications.js

@@ -19,7 +19,7 @@ import { connect } from 'react-redux';
 
 import { hashToImageUrl } from '~/redux/providers/imagesReducer';
 
-import defaultIcon from '../../../assets/images/certifications/unknown.svg';
+import defaultIcon from '~/../assets/images/certifications/unknown.svg';
 
 import styles from './certifications.css';
 

js/src/ui/ContextProvider/contextProvider.js

@@ -18,7 +18,7 @@ import React, { Component, PropTypes } from 'react';
 import { IntlProvider } from 'react-intl';
 import { observer } from 'mobx-react';
 
-import { LocaleStore } from '../../i18n';
+import { LocaleStore } from '~/i18n';
 
 @observer
 export default class ContextProvider extends Component {

js/src/ui/index.js

@@ -14,6 +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 'semantic-ui-css/semantic.min.css';
+
 export AccountCard from './AccountCard';
 export Actionbar, { Export as ActionbarExport, Import as ActionbarImport, Search as ActionbarSearch, Sort as ActionbarSort } from './Actionbar';
 export Badge from './Badge';

js/src/ui/package.json

@@ -6,7 +6,8 @@
   "author": "Parity Team <admin@parity.io>",
   "maintainers": [
     "Jaco Greeff",
-    "Nicolas Gotchac"
+    "Nicolas Gotchac",
+    "Craig O'Connor"
   ],
   "contributors": [],
   "license": "GPL-3.0",
@@ -35,6 +36,8 @@
     "react-portal": "3.0.0",
     "react-qr-reader": "1.0.3",
     "recharts": "0.15.2",
+    "semantic-ui-css": "2.2.10",
+    "semantic-ui-react": "0.68.2",
     "zxcvbn": "4.4.1"
   },
   "peerDependencies": {

js/src/views/Account/account.js

@@ -23,8 +23,8 @@ import { bindActionCreators } from 'redux';
 import { newError } from '~/redux/actions';
 import shapeshiftBtn from '~/../assets/images/shapeshift-btn.png';
 import HardwareStore from '~/mobx/hardwareStore';
-import HistoryStore from '~/mobx/historyStore';
 import ExportStore from '~/modals/ExportAccount/exportStore';
+import HistoryStore from '~/mobx/historyStore';
 import { DeleteAccount, EditMeta, Faucet, PasswordManager, Shapeshift, Transfer, Verification } from '~/modals';
 import { setVisibleAccounts } from '~/redux/providers/personalActions';
 import { fetchCertifiers, fetchCertifications } from '~/redux/providers/certifications/actions';

js/webpack/app.js

@@ -126,7 +126,7 @@ module.exports = {
         use: [ 'file-loader?&name=assets/[name].[hash:10].[ext]' ]
       },
       {
-        test: /\.(woff(2)|ttf|eot|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        test: /\.(woff|woff2|ttf|eot|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
         use: [ 'file-loader?name=fonts/[name][hash:10].[ext]' ]
       },
       {