Ui 2 shell updates (#5541)

* Stateless components

* Adjust borders

* Stateless for status

* Externalise link colors

* css lint

* stateless

* Create ui/IconCache, replacing redux

* Update Signer buttons

* Requests background

* Adjust request styling

* Stateless components

* ParityBar background alignment

* Shell updates

* Remove Tooltip

js/src/shell/Application/Container/container.js

@@ -1,46 +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 React, { PropTypes } from 'react';
-
-import { Errors, Tooltips } from '~/ui';
-
-import FirstRun from '../../FirstRun';
-import UpgradeParity from '../../UpgradeParity';
-
-import styles from '../application.css';
-
-export default function Container ({ children, onCloseFirstRun, showFirstRun, upgradeStore }) {
-  return (
-    <div className={ styles.container }>
-      <FirstRun
-        onClose={ onCloseFirstRun }
-        visible={ showFirstRun }
-      />
-      <Tooltips />
-      <UpgradeParity upgradeStore={ upgradeStore } />
-      <Errors />
-      { children }
-    </div>
-  );
-}
-
-Container.propTypes = {
-  children: PropTypes.node.isRequired,
-  onCloseFirstRun: PropTypes.func,
-  showFirstRun: PropTypes.bool,
-  upgradeStore: PropTypes.object.isRequired
-};

js/src/shell/Application/Container/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 './container';

js/src/shell/Application/DappContainer/dappContainer.js

@@ -1,34 +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 React, { PropTypes } from 'react';
-
-import { Errors } from '~/ui';
-
-import styles from '../application.css';
-
-export default function DappContainer ({ children }) {
-  return (
-    <div className={ styles.container }>
-      <Errors />
-      { children }
-    </div>
-  );
-}
-
-DappContainer.propTypes = {
-  children: PropTypes.node.isRequired
-};

js/src/shell/Application/DappContainer/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 './dappContainer';

js/src/shell/Application/FrameError/frameError.css

@@ -1,21 +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/>.
-*/
-.error {
-  padding: 2em;
-  background: red;
-  color: white;
-}

js/src/shell/Application/FrameError/frameError.js

@@ -1,31 +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 React from 'react';
-import { FormattedMessage } from 'react-intl';
-
-import styles from './frameError.css';
-
-export default function FrameError () {
-  return (
-    <div className={ styles.error }>
-      <FormattedMessage
-        id='application.frame.error'
-        defaultMessage='ERROR: This application cannot and should not be loaded in an embedded iFrame'
-      />
-    </div>
-  );
-}

js/src/shell/Application/FrameError/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 './frameError';

js/src/shell/Application/application.css

@@ -24,3 +24,9 @@
 .content {
   padding-bottom: 1.25em;
 }
+
+.error {
+  padding: 2em;
+  background: red;
+  color: white;
+}

js/src/shell/Application/application.js

@@ -16,21 +16,22 @@
 
 import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
+import { Errors } from '~/ui';
+
 import Connection from '../Connection';
+import Extension from '../Extension';
+import FirstRun from '../FirstRun';
 import ParityBar from '../ParityBar';
+import Requests from '../Requests';
+import Snackbar from '../Snackbar';
+import Status from '../Status';
+import UpgradeParity from '../UpgradeParity';
 import UpgradeStore from '../UpgradeParity/store';
 
-import Snackbar from './Snackbar';
-import Container from './Container';
-import DappContainer from './DappContainer';
-import Extension from './Extension';
-import FrameError from './FrameError';
-import Requests from './Requests';
-import Status from './Status';
 import Store from './store';
-
 import styles from './application.css';
 
 const inFrame = window.parent !== window && window.parent.frames.length !== 0;
@@ -55,17 +56,14 @@ class Application extends Component {
     const [root] = (window.location.hash || '').replace('#/', '').split('/');
     const isMinimized = root !== '';
 
-    if (process.env.NODE_ENV !== 'production' && root === 'playground') {
-      return (
-        <div>
-          { this.props.children }
-        </div>
-      );
-    }
-
     if (inFrame) {
       return (
-        <FrameError />
+        <div className={ styles.error }>
+          <FormattedMessage
+            id='application.frame.error'
+            defaultMessage='ERROR: This application cannot and should not be loaded in an embedded iFrame'
+          />
+        </div>
       );
     }
 
@@ -87,22 +85,24 @@ class Application extends Component {
     const { blockNumber, children } = this.props;
 
     return (
-      <Container
-        upgradeStore={ this.upgradeStore }
-        onCloseFirstRun={ this.store.closeFirstrun }
-        showFirstRun={ this.store.firstrunVisible }
-      >
-        <div className={ styles.content }>
-          { children }
-        </div>
+      <div className={ styles.container }>
+        <Extension />
+        <FirstRun
+          onClose={ this.store.closeFirstrun }
+          visible={ this.store.firstrunVisible }
+        />
+        <Snackbar />
+        <UpgradeParity upgradeStore={ this.upgradeStore } />
+        <Errors />
         {
           blockNumber
             ? <Status upgradeStore={ this.upgradeStore } />
             : null
         }
-        <Extension />
-        <Snackbar />
-      </Container>
+        <div className={ styles.content }>
+          { children }
+        </div>
+      </div>
     );
   }
 
@@ -110,9 +110,10 @@ class Application extends Component {
     const { children } = this.props;
 
     return (
-      <DappContainer>
+      <div className={ styles.container }>
+        <Errors />
         { children }
-      </DappContainer>
+      </div>
     );
   }
 }

js/src/shell/Extension/extension.css

@@ -15,32 +15,27 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+$backgroundColor: #f80;
+$buttonColor: rgba(0, 0, 0, 0.5);
+$textColor: white;
+
 .body {
-  background: #f80;
+  background: $backgroundColor;
   color: white;
-  opacity: 1;
   max-width: 500px;
+  opacity: 1;
   padding: 1em 4em 1em 2em;
   position: fixed;
   right: 1.5em;
   top: 1.5em;
   z-index: 1000;
 
-  .button {
-    background: rgba(0, 0, 0, 0.5);
-    color: white !important;
-
-    svg {
-      fill: white !important;
-    }
-  }
-
   .buttonrow {
     text-align: right;
   }
 
   p {
-    color: white;
+    color: $textColor;
   }
 
   .close {

js/src/shell/Snackbar/snackbar.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 React, { Component, PropTypes } from 'react';
+import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
@@ -23,41 +23,32 @@ import { darkBlack, grey800 } from 'material-ui/styles/colors';
 
 import { closeSnackbar } from '~/redux/providers/snackbarActions';
 
-const bodyStyle = {
+const BODY_STYLE = {
   backgroundColor: darkBlack,
   borderStyle: 'solid',
   borderColor: grey800,
   borderWidth: '1px 1px 0 1px'
 };
 
-class Snackbar extends Component {
-  static propTypes = {
-    closeSnackbar: PropTypes.func.isRequired,
-
-    open: PropTypes.bool,
-    cooldown: PropTypes.number,
-    message: PropTypes.any
-  };
-
-  render () {
-    const { open, message, cooldown } = this.props;
-
-    return (
-      <SnackbarMUI
-        open={ open }
-        message={ message }
-        autoHideDuration={ cooldown }
-        bodyStyle={ bodyStyle }
-        onRequestClose={ this.handleClose }
-      />
-    );
-  }
-
-  handleClose = () => {
-    this.props.closeSnackbar();
-  }
+function Snackbar ({ closeSnackbar, cooldown, message, open }) {
+  return (
+    <SnackbarMUI
+      autoHideDuration={ cooldown }
+      bodyStyle={ BODY_STYLE }
+      message={ message }
+      open={ open }
+      onRequestClose={ closeSnackbar }
+    />
+  );
 }
 
+Snackbar.propTypes = {
+  closeSnackbar: PropTypes.func.isRequired,
+  cooldown: PropTypes.number,
+  message: PropTypes.any,
+  open: PropTypes.bool
+};
+
 function mapStateToProps (state) {
   const { open, message, cooldown } = state.snackbar;
 

js/src/shell/Status/status.css

@@ -15,26 +15,28 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+$backgroundColor: rgba(0, 0, 0, 0.8);
+$textColor: #ccc;
+$networkLiveColor: rgb(0, 136, 0);
+$networkTestColor: rgb(136, 0, 0);
+
 .status {
   align-items: center;
-  background-color: rgba(0, 0, 0, 0.8);
+  background-color: $backgroundColor;
   bottom: 0;
-  color: #ccc;
+  color: $textColor;
   display: flex;
-  font-size: 0.75em;
   left: 0;
-  padding: .4em .5em;
+  padding: 0.4em 0.5em;
   position: fixed;
   right: 0;
   z-index: 1000;
 }
 
 .netinfo {
-  color: #ddd;
   flex-grow: 1;
   text-align: right;
   vertical-align: middle;
-  text-align: right;
 
   div {
     display: inline-block;
@@ -49,11 +51,11 @@
   text-transform: uppercase;
 
   &.live {
-    background: rgb(0, 136, 0);
+    background: $networkLiveColor;
   }
 
   &.test {
-    background: rgb(136, 0, 0);
+    background: $networkTestColor;
   }
 }
 

js/src/shell/Status/status.js

@@ -25,10 +25,13 @@ import Upgrade from './Upgrade';
 import styles from './status.css';
 
 function Status ({ clientVersion, isTest, netChain, netPeers, upgradeStore }) {
+  const [ clientName, , versionString, , ] = (clientVersion || '').split('/');
+  const [ versionNumber, versionType, , versionDate ] = (versionString || '').split('-');
+
   return (
     <div className={ styles.status }>
       <div className={ styles.version }>
-        { clientVersion }
+        { clientName } { versionNumber }-{ versionDate } { versionType }
       </div>
       <div className={ styles.upgrade }>
         <Consensus upgradeStore={ upgradeStore } />