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,7 +44,8 @@ function Status ({ className = '', upgradeStore }, { api }) {
   const accountStore = AccountStore.get(api);
 
   return (
-    <GradientBg className={ `${styles.status} ${className}` }>
+    <GradientBg className={ className }>
+      <div className={ styles.status }>
         <ClientVersion className={ styles.version } />
         <div className={ styles.upgrade }>
           <Consensus upgradeStore={ upgradeStore } />
@@ -92,6 +94,8 @@ function Status ({ className = '', upgradeStore }, { api }) {
           />
           <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,53 +16,29 @@
 
 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 }>
-          <GradientBg className={ styles.body }>
           <div className={ styles.status }>
             <StatusIndicator
               type='signal'
@@ -70,51 +46,17 @@ class SyncWarning extends Component {
               status={ health.overall.status }
             />
           </div>
-
           {
-              health.overall.message.map(message => (
+            health.overall.message.map((message) => (
-                <p key={ message }>{ 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) {