Update status plugins

js/package-lock.json

@@ -48,7 +48,7 @@
         "@parity/parity.js": "1.8.7",
         "@parity/shapeshift": "github:paritytech/js-shapeshift#1e015cb4355b8db81aeac6a71abf971677de8f5b",
         "@parity/shared": "github:paritytech/js-shared#859361fc126e7c19ac2dece27db9b941a4c400cd",
-        "@parity/ui": "github:paritytech/js-ui#dcdf4c22013eb0f125afb8cfc5789b22df7c217e",
+        "@parity/ui": "github:paritytech/js-ui#db419de2cd7fc1df4933f415ef5bd8e107e0129e",
         "happypack": "3.1.0",
         "lodash": "4.17.2",
         "oo7": "0.5.3",
@@ -72,7 +72,7 @@
         "@parity/api": "github:paritytech/js-api#ca3e026f40d434218eec9ab27a3958ec6761e8ea",
         "@parity/dapp-vaults": "github:paritytech/dapp-vaults#f1ce18e69df07648bb13ac5cfe88b52cd83dc731",
         "@parity/shared": "github:paritytech/js-shared#859361fc126e7c19ac2dece27db9b941a4c400cd",
-        "@parity/ui": "github:paritytech/js-ui#dcdf4c22013eb0f125afb8cfc5789b22df7c217e",
+        "@parity/ui": "github:paritytech/js-ui#db419de2cd7fc1df4933f415ef5bd8e107e0129e",
         "file-saver": "1.3.3",
         "react": "15.6.1",
         "react-dom": "15.6.1",
@@ -88,7 +88,7 @@
         "@parity/dapp-account": "github:paritytech/dapp-account#eb7f989f2d801b1940b4251463b8f6a09433973c",
         "@parity/dapp-addresses": "github:paritytech/dapp-addresses#4eb1345610273de6d32ad6cb3d0b6fe3f0fb1af3",
         "@parity/shared": "github:paritytech/js-shared#859361fc126e7c19ac2dece27db9b941a4c400cd",
-        "@parity/ui": "github:paritytech/js-ui#dcdf4c22013eb0f125afb8cfc5789b22df7c217e"
+        "@parity/ui": "github:paritytech/js-ui#db419de2cd7fc1df4933f415ef5bd8e107e0129e"
       }
     },
     "@parity/dapp-addresses": {
@@ -97,7 +97,7 @@
         "@parity/api": "github:paritytech/js-api#ca3e026f40d434218eec9ab27a3958ec6761e8ea",
         "@parity/dapp-accounts": "github:paritytech/dapp-accounts#c7613306fdb888896370c87b1ec3ad6ca1d76ec0",
         "@parity/shared": "github:paritytech/js-shared#859361fc126e7c19ac2dece27db9b941a4c400cd",
-        "@parity/ui": "github:paritytech/js-ui#dcdf4c22013eb0f125afb8cfc5789b22df7c217e"
+        "@parity/ui": "github:paritytech/js-ui#db419de2cd7fc1df4933f415ef5bd8e107e0129e"
       }
     },
     "@parity/dapp-chaindeploy": {
@@ -115,7 +115,7 @@
         "@parity/api": "github:paritytech/js-api#ca3e026f40d434218eec9ab27a3958ec6761e8ea",
         "@parity/dapp-account": "github:paritytech/dapp-account#eb7f989f2d801b1940b4251463b8f6a09433973c",
         "@parity/shared": "github:paritytech/js-shared#859361fc126e7c19ac2dece27db9b941a4c400cd",
-        "@parity/ui": "github:paritytech/js-ui#dcdf4c22013eb0f125afb8cfc5789b22df7c217e"
+        "@parity/ui": "github:paritytech/js-ui#db419de2cd7fc1df4933f415ef5bd8e107e0129e"
       }
     },
     "@parity/dapp-contracts": {
@@ -125,7 +125,7 @@
         "@parity/dapp-account": "github:paritytech/dapp-account#eb7f989f2d801b1940b4251463b8f6a09433973c",
         "@parity/dapp-accounts": "github:paritytech/dapp-accounts#c7613306fdb888896370c87b1ec3ad6ca1d76ec0",
         "@parity/shared": "github:paritytech/js-shared#859361fc126e7c19ac2dece27db9b941a4c400cd",
-        "@parity/ui": "github:paritytech/js-ui#dcdf4c22013eb0f125afb8cfc5789b22df7c217e"
+        "@parity/ui": "github:paritytech/js-ui#db419de2cd7fc1df4933f415ef5bd8e107e0129e"
       }
     },
     "@parity/dapp-dapp-accounts": {
@@ -133,7 +133,7 @@
       "requires": {
         "@parity/api": "github:paritytech/js-api#ca3e026f40d434218eec9ab27a3958ec6761e8ea",
         "@parity/shared": "github:paritytech/js-shared#859361fc126e7c19ac2dece27db9b941a4c400cd",
-        "@parity/ui": "github:paritytech/js-ui#dcdf4c22013eb0f125afb8cfc5789b22df7c217e"
+        "@parity/ui": "github:paritytech/js-ui#db419de2cd7fc1df4933f415ef5bd8e107e0129e"
       }
     },
     "@parity/dapp-dapp-methods": {
@@ -141,7 +141,7 @@
       "requires": {
         "@parity/api": "github:paritytech/js-api#ca3e026f40d434218eec9ab27a3958ec6761e8ea",
         "@parity/shared": "github:paritytech/js-shared#859361fc126e7c19ac2dece27db9b941a4c400cd",
-        "@parity/ui": "github:paritytech/js-ui#dcdf4c22013eb0f125afb8cfc5789b22df7c217e"
+        "@parity/ui": "github:paritytech/js-ui#db419de2cd7fc1df4933f415ef5bd8e107e0129e"
       }
     },
     "@parity/dapp-dapp-visible": {
@@ -149,7 +149,7 @@
       "requires": {
         "@parity/api": "github:paritytech/js-api#ca3e026f40d434218eec9ab27a3958ec6761e8ea",
         "@parity/shared": "github:paritytech/js-shared#859361fc126e7c19ac2dece27db9b941a4c400cd",
-        "@parity/ui": "github:paritytech/js-ui#dcdf4c22013eb0f125afb8cfc5789b22df7c217e"
+        "@parity/ui": "github:paritytech/js-ui#db419de2cd7fc1df4933f415ef5bd8e107e0129e"
       }
     },
     "@parity/dapp-dappreg": {
@@ -157,7 +157,7 @@
       "requires": {
         "@parity/api": "github:paritytech/js-api#ca3e026f40d434218eec9ab27a3958ec6761e8ea",
         "@parity/shared": "github:paritytech/js-shared#859361fc126e7c19ac2dece27db9b941a4c400cd",
-        "@parity/ui": "github:paritytech/js-ui#dcdf4c22013eb0f125afb8cfc5789b22df7c217e"
+        "@parity/ui": "github:paritytech/js-ui#db419de2cd7fc1df4933f415ef5bd8e107e0129e"
       }
     },
     "@parity/dapp-develop": {
@@ -167,7 +167,7 @@
         "@parity/dapp-contracts": "github:paritytech/dapp-contracts#e7656290c46d598eab76ad5b7402386c32b87c44",
         "@parity/parity.js": "1.8.7",
         "@parity/shared": "github:paritytech/js-shared#859361fc126e7c19ac2dece27db9b941a4c400cd",
-        "@parity/ui": "github:paritytech/js-ui#dcdf4c22013eb0f125afb8cfc5789b22df7c217e",
+        "@parity/ui": "github:paritytech/js-ui#db419de2cd7fc1df4933f415ef5bd8e107e0129e",
         "oo7": "0.5.3",
         "oo7-parity": "0.6.8",
         "oo7-react": "0.4.5",
@@ -195,7 +195,7 @@
         "@parity/api": "github:paritytech/js-api#ca3e026f40d434218eec9ab27a3958ec6761e8ea",
         "@parity/dapp-web": "github:paritytech/dapp-web#b5e209ab2a9e6ac37b780b292a648e8764cb5f96",
         "@parity/shared": "github:paritytech/js-shared#859361fc126e7c19ac2dece27db9b941a4c400cd",
-        "@parity/ui": "github:paritytech/js-ui#dcdf4c22013eb0f125afb8cfc5789b22df7c217e",
+        "@parity/ui": "github:paritytech/js-ui#db419de2cd7fc1df4933f415ef5bd8e107e0129e",
         "react-markdown": "2.4.4"
       },
       "dependencies": {
@@ -216,7 +216,7 @@
       "requires": {
         "@parity/api": "github:paritytech/js-api#ca3e026f40d434218eec9ab27a3958ec6761e8ea",
         "@parity/shared": "github:paritytech/js-shared#859361fc126e7c19ac2dece27db9b941a4c400cd",
-        "@parity/ui": "github:paritytech/js-ui#dcdf4c22013eb0f125afb8cfc5789b22df7c217e"
+        "@parity/ui": "github:paritytech/js-ui#db419de2cd7fc1df4933f415ef5bd8e107e0129e"
       }
     },
     "@parity/dapp-playground": {
@@ -224,7 +224,7 @@
       "requires": {
         "@parity/api": "github:paritytech/js-api#ca3e026f40d434218eec9ab27a3958ec6761e8ea",
         "@parity/shared": "github:paritytech/js-shared#859361fc126e7c19ac2dece27db9b941a4c400cd",
-        "@parity/ui": "github:paritytech/js-ui#dcdf4c22013eb0f125afb8cfc5789b22df7c217e"
+        "@parity/ui": "github:paritytech/js-ui#db419de2cd7fc1df4933f415ef5bd8e107e0129e"
       }
     },
     "@parity/dapp-registry": {
@@ -232,7 +232,7 @@
       "requires": {
         "@parity/api": "github:paritytech/js-api#ca3e026f40d434218eec9ab27a3958ec6761e8ea",
         "@parity/shared": "github:paritytech/js-shared#859361fc126e7c19ac2dece27db9b941a4c400cd",
-        "@parity/ui": "github:paritytech/js-ui#dcdf4c22013eb0f125afb8cfc5789b22df7c217e",
+        "@parity/ui": "github:paritytech/js-ui#db419de2cd7fc1df4933f415ef5bd8e107e0129e",
         "material-ui": "0.16.5"
       }
     },
@@ -241,7 +241,7 @@
       "requires": {
         "@parity/api": "github:paritytech/js-api#ca3e026f40d434218eec9ab27a3958ec6761e8ea",
         "@parity/shared": "github:paritytech/js-shared#859361fc126e7c19ac2dece27db9b941a4c400cd",
-        "@parity/ui": "github:paritytech/js-ui#dcdf4c22013eb0f125afb8cfc5789b22df7c217e"
+        "@parity/ui": "github:paritytech/js-ui#db419de2cd7fc1df4933f415ef5bd8e107e0129e"
       }
     },
     "@parity/dapp-signaturereg": {
@@ -260,7 +260,7 @@
       "requires": {
         "@parity/api": "github:paritytech/js-api#ca3e026f40d434218eec9ab27a3958ec6761e8ea",
         "@parity/shared": "github:paritytech/js-shared#859361fc126e7c19ac2dece27db9b941a4c400cd",
-        "@parity/ui": "github:paritytech/js-ui#dcdf4c22013eb0f125afb8cfc5789b22df7c217e"
+        "@parity/ui": "github:paritytech/js-ui#db419de2cd7fc1df4933f415ef5bd8e107e0129e"
       }
     },
     "@parity/dapp-status": {
@@ -268,7 +268,7 @@
       "requires": {
         "@parity/api": "github:paritytech/js-api#ca3e026f40d434218eec9ab27a3958ec6761e8ea",
         "@parity/shared": "github:paritytech/js-shared#859361fc126e7c19ac2dece27db9b941a4c400cd",
-        "@parity/ui": "github:paritytech/js-ui#dcdf4c22013eb0f125afb8cfc5789b22df7c217e",
+        "@parity/ui": "github:paritytech/js-ui#db419de2cd7fc1df4933f415ef5bd8e107e0129e",
         "bytes": "2.4.0",
         "format-number": "2.0.1"
       }
@@ -278,7 +278,7 @@
       "requires": {
         "@parity/api": "github:paritytech/js-api#ca3e026f40d434218eec9ab27a3958ec6761e8ea",
         "@parity/shared": "github:paritytech/js-shared#859361fc126e7c19ac2dece27db9b941a4c400cd",
-        "@parity/ui": "github:paritytech/js-ui#dcdf4c22013eb0f125afb8cfc5789b22df7c217e"
+        "@parity/ui": "github:paritytech/js-ui#db419de2cd7fc1df4933f415ef5bd8e107e0129e"
       }
     },
     "@parity/dapp-tokenreg": {
@@ -297,7 +297,7 @@
       "requires": {
         "@parity/api": "github:paritytech/js-api#ca3e026f40d434218eec9ab27a3958ec6761e8ea",
         "@parity/shared": "github:paritytech/js-shared#859361fc126e7c19ac2dece27db9b941a4c400cd",
-        "@parity/ui": "github:paritytech/js-ui#dcdf4c22013eb0f125afb8cfc5789b22df7c217e"
+        "@parity/ui": "github:paritytech/js-ui#db419de2cd7fc1df4933f415ef5bd8e107e0129e"
       }
     },
     "@parity/dapp-wallet": {
@@ -306,7 +306,7 @@
         "@parity/api": "github:paritytech/js-api#ca3e026f40d434218eec9ab27a3958ec6761e8ea",
         "@parity/dapp-account": "github:paritytech/dapp-account#eb7f989f2d801b1940b4251463b8f6a09433973c",
         "@parity/shared": "github:paritytech/js-shared#859361fc126e7c19ac2dece27db9b941a4c400cd",
-        "@parity/ui": "github:paritytech/js-ui#dcdf4c22013eb0f125afb8cfc5789b22df7c217e"
+        "@parity/ui": "github:paritytech/js-ui#db419de2cd7fc1df4933f415ef5bd8e107e0129e"
       }
     },
     "@parity/dapp-web": {
@@ -314,7 +314,7 @@
       "requires": {
         "@parity/api": "github:paritytech/js-api#ca3e026f40d434218eec9ab27a3958ec6761e8ea",
         "@parity/shared": "github:paritytech/js-shared#859361fc126e7c19ac2dece27db9b941a4c400cd",
-        "@parity/ui": "github:paritytech/js-ui#dcdf4c22013eb0f125afb8cfc5789b22df7c217e",
+        "@parity/ui": "github:paritytech/js-ui#db419de2cd7fc1df4933f415ef5bd8e107e0129e",
         "base32.js": "0.1.0"
       }
     },
@@ -389,7 +389,7 @@
       }
     },
     "@parity/ui": {
-      "version": "github:paritytech/js-ui#dcdf4c22013eb0f125afb8cfc5789b22df7c217e",
+      "version": "github:paritytech/js-ui#db419de2cd7fc1df4933f415ef5bd8e107e0129e",
       "requires": {
         "@parity/api": "github:paritytech/js-api#ca3e026f40d434218eec9ab27a3958ec6761e8ea",
         "@parity/etherscan": "github:paritytech/js-etherscan#a3b432ebfca2f57462da93c68b6d6f8aebb1244f",

js/src/Status/status.css

@@ -22,7 +22,7 @@ $textColor: #ccc;
   color: $textColor;
   display: flex;
   left: 0;
-  padding: 0.5em 0.75em;
+  padding: 0.5rem 0.75rem;
   position: fixed;
   right: 0;
   top: 0;
@@ -38,19 +38,32 @@ $textColor: #ccc;
   > img,
   > span {
     display: inline-block !important;
-    margin: 0 0 0 1em;
+    margin: 0 0 0 1rem;
     vertical-align: middle;
   }
-}
 
-.upgrade {
+  .divider {
-  div {
+    height: 1rem;
-    display: inline-block;
+    margin: 0 0.25rem 0 1.25rem;
-    margin-left: 1em;
+    opacity: 0.75;
-  }
   }
 
   .defaultAccount,
   .signerPending {
     cursor: pointer;
   }
+
+  .health {
+    > span {
+      margin: -0.5rem 0 0.2rem 0 !important;
+      width: auto;
+    }
+  }
+}
+
+.upgrade {
+  div {
+    display: inline-block;
+    margin-left: 1rem;
+  }
+}

js/src/Status/status.js

@@ -55,6 +55,7 @@ function Status ({ className = '', upgradeStore }, { api }) {
             <Component key={ index } />
           ))
         }
+        <div className={ styles.divider } />
         <SignerPending
           className={ styles.signerPending }
           onClick={ parityBarStore.toggleOpenSigner }
@@ -66,7 +67,11 @@ function Status ({ className = '', upgradeStore }, { api }) {
           className={ styles.defaultAccount }
           onClick={ parityBarStore.toggleOpenAccounts }
         />
-        <StatusIndicator id='application.status.health' />
+        <StatusIndicator
+          className={ styles.health }
+          id='application.status.health'
+        />
+        <div className={ styles.divider } />
         <BlockNumber
           className={ styles.blockNumber }
           message={
@@ -85,7 +90,7 @@ function Status ({ className = '', upgradeStore }, { api }) {
             />
           }
         />
-        <NetChain />
+        <NetChain className={ styles.chain } />
       </div>
     </GradientBg>
   );