Add sync warning to top

js/src/Status/status.css

@@ -17,16 +17,24 @@
 
 $textColor: #ccc;
 
-.status {
+.container {
-  align-items: center;
   color: $textColor;
-  display: flex;
   left: 0;
   padding: 0.5rem 0.75rem;
   position: fixed;
   right: 0;
   top: 0;
   z-index: 1000;
+
+  .status {
+    align-items: center;
+    display: flex;
+  }
+
+  .warning {
+    background: red;
+    display: block;
+  }
 }
 
 .plugins {

js/src/Status/status.js

@@ -31,6 +31,7 @@ import StatusIndicator from '@parity/ui/StatusIndicator';
 import Consensus from './Consensus';
 import AccountStore from '../ParityBar/accountStore';
 import ParityBarStore from '../ParityBar/store';
+import SyncWarning from '../SyncWarning';
 import PluginStore from './pluginStore';
 import Upgrade from './Upgrade';
 
@@ -43,54 +44,57 @@ function Status ({ className = '', upgradeStore }, { api }) {
   const accountStore = AccountStore.get(api);
 
   return (
-    <GradientBg className={ `${styles.status} ${className}` }>
+    <GradientBg className={ className }>
-      <ClientVersion className={ styles.version } />
+      <div className={ styles.status }>
-      <div className={ styles.upgrade }>
+        <ClientVersion className={ styles.version } />
-        <Consensus upgradeStore={ upgradeStore } />
+        <div className={ styles.upgrade }>
-        <Upgrade upgradeStore={ upgradeStore } />
+          <Consensus upgradeStore={ upgradeStore } />
-      </div>
+          <Upgrade upgradeStore={ upgradeStore } />
-      <div className={ styles.plugins }>
+        </div>
-        {
+        <div className={ styles.plugins }>
-          pluginStore.components.map((Component, index) => (
+          {
-            <Component key={ index } />
+            pluginStore.components.map((Component, index) => (
-          ))
+              <Component key={ index } />
-        }
+            ))
-        <div className={ styles.divider } />
-        <SignerPending
-          className={ styles.signerPending }
-          onClick={ parityBarStore.toggleOpenSigner }
-        />
-        <IdentityIcon
-          address={ accountStore.defaultAccount }
-          button
-          center
-          className={ styles.defaultAccount }
-          onClick={ parityBarStore.toggleOpenAccounts }
-        />
-        <StatusIndicator
-          className={ styles.health }
-          id='application.status.health'
-        />
-        <div className={ styles.divider } />
-        <BlockNumber
-          className={ styles.blockNumber }
-          message={
-            <FormattedMessage
-              id='ui.blockStatus.bestBlock'
-              defaultMessage=' best block'
-            />
           }
-        />
+          <div className={ styles.divider } />
-        <NetPeers
+          <SignerPending
-          className={ styles.peers }
+            className={ styles.signerPending }
-          message={
+            onClick={ parityBarStore.toggleOpenSigner }
-            <FormattedMessage
+          />
-              id='ui.netPeers.peers'
+          <IdentityIcon
-              defaultMessage=' peers'
+            address={ accountStore.defaultAccount }
-            />
+            button
-          }
+            center
-        />
+            className={ styles.defaultAccount }
-        <NetChain className={ styles.chain } />
+            onClick={ parityBarStore.toggleOpenAccounts }
+          />
+          <StatusIndicator
+            className={ styles.health }
+            id='application.status.health'
+          />
+          <div className={ styles.divider } />
+          <BlockNumber
+            className={ styles.blockNumber }
+            message={
+              <FormattedMessage
+                id='ui.blockStatus.bestBlock'
+                defaultMessage=' best block'
+              />
+            }
+          />
+          <NetPeers
+            className={ styles.peers }
+            message={
+              <FormattedMessage
+                id='ui.netPeers.peers'
+                defaultMessage=' peers'
+              />
+            }
+          />
+          <NetChain className={ styles.chain } />
+        </div>
+        <SyncWarning className={ styles.warning } />
       </div>
     </GradientBg>
   );

js/src/SyncWarning/syncWarning.css

@@ -15,27 +15,6 @@
 /* along with Parity.  If not; see <http://www.gnu.org/licenses/>.
 */
 
-.overlay {
-  background: rgba(255, 255, 255, 0.75);
-  bottom: 0;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 10000;
-}
-
-.modal {
-  align-items: flex-start;
-  bottom: 0;
-  display: flex;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 10001;
-}
-
 .body {
   box-shadow: rgba(0, 0, 0, 0.25) 0 14px 45px, rgba(0, 0, 0, 0.22) 0 10px 18px;
   color: rgb(208, 208, 208);

js/src/SyncWarning/syncWarning.js

@@ -16,105 +16,47 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
-import store from 'store';
 
-import Button from '@parity/ui/Button';
-import Checkbox from '@parity/ui/Form/Checkbox';
-import GradientBg from '@parity/ui/GradientBg';
 import StatusIndicator from '@parity/ui/StatusIndicator';
 
 import styles from './syncWarning.css';
 
-const LS_DONT_SHOW_AGAIN = '_parity::syncWarning::dontShowAgain';
-
-export const showSyncWarning = () => {
-  const dontShowAgain = store.get(LS_DONT_SHOW_AGAIN);
-
-  if (dontShowAgain === undefined || dontShowAgain === null) {
-    return true;
-  }
-
-  return !dontShowAgain;
-};
-
 class SyncWarning extends Component {
   static propTypes = {
+    className: PropTypes.string,
     isOk: PropTypes.bool.isRequired,
     health: PropTypes.object.isRequired
   };
 
-  state = {
-    dontShowAgain: false,
-    show: true
-  };
-
   render () {
-    const { isOk, health } = this.props;
+    const { className, isOk, health } = this.props;
-    const { dontShowAgain, show } = this.state;
 
-    if (isOk || !show) {
+    if (isOk) {
       return null;
     }
 
     return (
-      <div>
+      <div className={ className }>
-        <div className={ styles.overlay } />
+        <div className={ styles.body }>
-        <div className={ styles.modal }>
+          <div className={ styles.status }>
-          <GradientBg className={ styles.body }>
+            <StatusIndicator
-            <div className={ styles.status }>
+              type='signal'
-              <StatusIndicator
+              id='healthWarning.indicator'
-                type='signal'
+              status={ health.overall.status }
-                id='healthWarning.indicator'
+            />
-                status={ health.overall.status }
+          </div>
-              />
+          {
-            </div>
+            health.overall.message.map((message) => (
-
+              <p key={ message }>
-            {
+                { message }
-              health.overall.message.map(message => (
+              </p>
-                <p key={ message }>{ message }</p>
+            ))
-              ))
+          }
-            }
-
-            <div className={ styles.button }>
-              <Checkbox
-                label={
-                  <FormattedMessage
-                    id='syncWarning.dontShowAgain.label'
-                    defaultMessage='Do not show this warning again'
-                  />
-                }
-                checked={ dontShowAgain }
-                onClick={ this.handleCheck }
-              />
-              <Button
-                label={
-                  <FormattedMessage
-                    id='syncWarning.understandBtn.label'
-                    defaultMessage='I understand'
-                  />
-                }
-                onClick={ this.handleAgreeClick }
-              />
-            </div>
-          </GradientBg>
         </div>
       </div>
     );
   }
-
-  handleCheck = () => {
-    this.setState({ dontShowAgain: !this.state.dontShowAgain });
-  }
-
-  handleAgreeClick = () => {
-    if (this.state.dontShowAgain) {
-      store.set(LS_DONT_SHOW_AGAIN, true);
-    }
-
-    this.setState({ show: false });
-  }
 }
 
 function mapStateToProps (state) {