Fix status layout (#7432)

js/src/Status/SignerPending/signerPending.js

@@ -33,7 +33,9 @@ import styles from './signerPending.css';
 
 @observer
 class SignerPending extends Component {
-  static propTypes = {};
+  static propTypes = {
+    className: PropTypes.string
+  };
 
   static contextTypes = {
     api: PropTypes.object.isRequired
@@ -91,11 +93,13 @@ class SignerPending extends Component {
   );
 
   render () {
+    const { className } = this.props;
+
     return (
       <Popup
         wide='very'
         trigger={
-          <div className={ [styles.signerPending].join(' ') }>
+          <div className={ [styles.signerPending, className].join(' ') }>
             <Icon
               name={ this.store.pending.length > 0 ? 'bell' : 'bell outline' }
             />

js/src/Status/status.css

@@ -52,16 +52,16 @@ $statusHeight: 2.75em;
 }
 
 .plugins {
+  align-items: center;
+  display: flex;
   flex-grow: 1;
-  text-align: right;
-  vertical-align: middle;
+  justify-content: flex-end;
 
   > div,
   > img,
   > span {
-    display: inline-block !important;
+    align-self: center;
     margin: 0 0 0 1rem;
-    vertical-align: middle;
   }
 
   .divider {
@@ -70,9 +70,29 @@ $statusHeight: 2.75em;
     opacity: 0.75;
   }
 
+  .health,
+  .pending {
+    /* Same as default line-height, i.e. item same as text following */
+    height: 1.4285rem;
+  }
+
   .health {
     > span {
+      height: 100%;
+      /* re-instate the original margin, no negative offset */
+      margin-top: 0.2em;
       width: auto;
+
+      > span {
+        /* default vertical alignment */
+        vertical-align: baseline;
+      }
+    }
+  }
+
+  .pending {
+    > i {
+      height: 100%;
     }
   }
 }

js/src/Status/status.js

@@ -69,7 +69,7 @@ function Status ({ className = '', upgradeStore }, { api }) {
               className={ styles.health }
               id='application.status.health'
             />
-            <SignerPending />
+            <SignerPending className={ styles.pending } />
 
             <div className={ styles.divider } />
             <BlockNumber