Update status plugins

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;
   }
+
+  .divider {
+    height: 1rem;
+    margin: 0 0.25rem 0 1.25rem;
+    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: 1em;
+    margin-left: 1rem;
   }
 }
-
-.defaultAccount,
-.signerPending {
-  cursor: pointer;
-}

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>
   );