Update with latest dependencies

js/src/Connection/connection.css

@@ -15,8 +15,6 @@
 /* along with Parity.  If not; see <http://www.gnu.org/licenses/>.
 */
 
-@import '../ParityBar/_colors.css';
-
 .overlay {
   position: fixed;
   top: 0;
@@ -37,8 +35,6 @@
 }
 
 .body {
-  background: $backgroundColor;
-  background: $backgroundGradient;
   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);
   margin: 0 auto;

js/src/Connection/connection.js

@@ -19,6 +19,7 @@ import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
+import GradientBg from '@parity/ui/GradientBg';
 import Input from '@parity/ui/Form/Input';
 import { CompareIcon, ComputerIcon, DashboardIcon, VpnIcon } from '@parity/ui/Icons';
 
@@ -52,7 +53,7 @@ class Connection extends Component {
       <div>
         <div className={ styles.overlay } />
         <div className={ styles.modal }>
-          <div className={ styles.body }>
+          <GradientBg className={ styles.body }>
             <div className={ styles.icons }>
               <div className={ styles.icon }>
                 <ComputerIcon className={ styles.svg } />
@@ -73,7 +74,7 @@ class Connection extends Component {
                 ? this.renderSigner()
                 : this.renderPing()
             }
-          </div>
+          </GradientBg>
         </div>
       </div>
     );

js/src/ParityBar/parityBar.css

@@ -15,8 +15,6 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-@import './_colors.css';
-
 $overlayZ: 10000;
 $modalZ: 10001;
 
@@ -126,8 +124,6 @@ $modalZ: 10001;
 
 .cornercolor {
   align-items: center;
-  background: $backgroundColor;
-  background: $backgroundGradient;
   display: flex;
   padding: 0.5em 1em;
 }
@@ -195,8 +191,6 @@ $modalZ: 10001;
 .header {
   /* height: 2em; */
   padding: 0.5em 1em;
-  background: $backgroundColor;
-  background: $backgroundGradient;
   margin-bottom: 0;
 
   &::after {

js/src/ParityBar/parityBar.js

@@ -29,6 +29,7 @@ import Badge from '@parity/ui/Badge';
 import Button from '@parity/ui/Button';
 import ContainerTitle from '@parity/ui/Container/Title';
 import IdentityIcon from '@parity/ui/IdentityIcon';
+import GradientBg from '@parity/ui/GradientBg';
 import SelectionList from '@parity/ui/SectionList';
 import StatusIndicator from '@parity/ui/StatusIndicator';
 import { CancelIcon, FingerprintIcon } from '@parity/ui/Icons';
@@ -226,7 +227,7 @@ class ParityBar extends Component {
     }
 
     return (
-      <div className={ styles.cornercolor }>
+      <GradientBg className={ styles.cornercolor }>
         <StatusIndicator
           id='paritybar.health'
           tooltipPlacement='right'
@@ -271,7 +272,7 @@ class ParityBar extends Component {
           onClick={ this.toggleSignerDisplay }
         />
         { this.renderDrag() }
-      </div>
+      </GradientBg>
     );
   }
 
@@ -322,7 +323,7 @@ class ParityBar extends Component {
 
     return (
       <div className={ styles.container }>
-        <div className={ styles.header }>
+        <GradientBg className={ styles.header }>
           <div className={ styles.title }>
             <ContainerTitle
               title={
@@ -354,7 +355,7 @@ class ParityBar extends Component {
               onClick={ this.toggleSignerDisplay }
             />
           </div>
-        </div>
+        </GradientBg>
         <div className={ styles.content }>
           {
             displayType === DISPLAY_ACCOUNTS

js/src/Status/status.css

@@ -15,14 +15,10 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-@import '../ParityBar/_colors.css';
-
 $textColor: #ccc;
 
 .status {
   align-items: center;
-  background: $backgroundColor;
-  background: $backgroundGradient;
   bottom: 0;
   color: $textColor;
   display: flex;

js/src/Status/status.js

@@ -21,6 +21,7 @@ import { FormattedMessage } from 'react-intl';
 
 import BlockNumber from '@parity/ui/BlockNumber';
 import ClientVersion from '@parity/ui/ClientVersion';
+import GradientBg from '@parity/ui/GradientBg';
 import NetChain from '@parity/ui/NetChain';
 import NetPeers from '@parity/ui/NetPeers';
 import StatusIndicator from '@parity/ui/StatusIndicator';
@@ -35,7 +36,7 @@ const pluginStore = PluginStore.get();
 
 function Status ({ className = '', upgradeStore }, { api }) {
   return (
-    <div className={ [styles.status, className].join(' ') }>
+    <GradientBg className={ [styles.status, className].join(' ') }>
       <ClientVersion className={ styles.version } />
       <div className={ styles.upgrade }>
         <Consensus upgradeStore={ upgradeStore } />
@@ -68,7 +69,7 @@ function Status ({ className = '', upgradeStore }, { api }) {
         />
         <NetChain />
       </div>
-    </div>
+    </GradientBg>
   );
 }
 

js/src/SyncWarning/syncWarning.css

@@ -37,7 +37,6 @@
 }
 
 .body {
-  background: rgba(25, 25, 25, 0.75);
   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);
   display: flex;

js/src/SyncWarning/syncWarning.js

@@ -22,6 +22,7 @@ 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';
@@ -61,7 +62,7 @@ class SyncWarning extends Component {
       <div>
         <div className={ styles.overlay } />
         <div className={ styles.modal }>
-          <div className={ styles.body }>
+          <GradientBg className={ styles.body }>
             <div className={ styles.status }>
               <StatusIndicator
                 type='signal'
@@ -97,7 +98,7 @@ class SyncWarning extends Component {
                 onClick={ this.handleAgreeClick }
               />
             </div>
-          </div>
+          </GradientBg>
         </div>
       </div>
     );