From 8405edab416a911e8307e935f4cfa89efcbe0127 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 3 Jan 2018 10:49:52 +0100
Subject: [PATCH] Fix status layout (#7432)

---
 js/src/Status/SignerPending/signerPending.js |  8 ++++--
 js/src/Status/status.css                     | 28 +++++++++++++++++---
 js/src/Status/status.js                      |  2 +-
 3 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/js/src/Status/SignerPending/signerPending.js b/js/src/Status/SignerPending/signerPending.js
index c73196ef7..b4bca2619 100644
--- a/js/src/Status/SignerPending/signerPending.js
+++ b/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' }
             />
diff --git a/js/src/Status/status.css b/js/src/Status/status.css
index 1046ab525..246e0ca8b 100644
--- a/js/src/Status/status.css
+++ b/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%;
     }
   }
 }
diff --git a/js/src/Status/status.js b/js/src/Status/status.js
index fd39b1862..f2e3139c2 100644
--- a/js/src/Status/status.js
+++ b/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