fix status bar

Breeze.UI/src/app/wallet/status-bar/status-bar.component.html

 <div class="status">
   <ul class="list-inline align-self-center row" title="Total blocks: {{ chainTip }}&#013;Last block received: {{ lastBlockSyncedHeight }}&#013;Connections: {{ connectedNodes }}">
-    <li class="list-inline-item pending"><i class="icon-syncr text-success"></i></li>
+    <li class="list-inline-item"><i class="icon-syncr text-success"></i></li>
     <li class="list-inline-item">{{ percentSynced }}</li>
-    <li class="list-inline-item"><i class="icon-earth text-success"></i></li>
+    <li class="list-inline-item ml-2"><i class="icon-earth text-info"></i></li>
     <li class="list-inline-item">{{ connectedNodes }}</li>
   </ul>
 </div>

Breeze.UI/src/scss/_custom.scss

@@ -178,7 +178,7 @@ em {
 // status box
 .status {
   background: $white;
-  width: 80px;
+  width: auto;
   height: 40px;
   border: 1px solid #DBDBDB;
   box-shadow: 0 1px 11px 0 rgba(80,96,120,.2);
@@ -187,29 +187,33 @@ em {
   bottom: 2%;
   right: 2%;
   text-align: center;
-  ul {transform: translateY(50%) translateX(15%);}
+  ul {
+    transform: translateY(50%) translateX(0);
+    display: inline-block;
+    position: relative;
+    padding: 0 2em;
+  }
   li {
     font-size: .9em;
     position: relative;
-    padding: 0 8px;
+    float: left;
+    margin-right: 4px;
+    .text-info {color: $gray-dark !important;}
     &.pending {
       i {
-        font-size: 1.3em;
-        position: absolute;
+        font-size: .9em;
         color: $brand-warning;
-        animation: spin 4s linear infinite;
       }
     }
     &.statusOK {
       i {
         color: $brand-success;
-        font-size: 1.3em;
+        font-size: .9em;
         position: absolute;
       }
     }
   }
 }
-@keyframes spin {100%{transform:rotate(360deg);}}
 
 // modal
 .modal-header {

Breeze.UI/src/styles.css

@@ -219,7 +219,7 @@ em.display-4 {
 
 .status {
   background: #fff;
-  width: 80px;
+  width: auto;
   height: 40px;
   border: 1px solid #DBDBDB;
   box-shadow: 0 1px 11px 0 rgba(80, 96, 120, 0.2);
@@ -231,34 +231,34 @@ em.display-4 {
 }
 
 .status ul {
-  transform: translateY(50%) translateX(15%);
+  transform: translateY(50%) translateX(0);
+  display: inline-block;
+  position: relative;
+  padding: 0 2em;
 }
 
 .status li {
   font-size: .9em;
   position: relative;
-  padding: 0 8px;
+  float: left;
+  margin-right: 4px;
+}
+
+.status li .text-info {
+  color: #878685 !important;
 }
 
 .status li.pending i {
-  font-size: 1.3em;
-  position: absolute;
+  font-size: .9em;
   color: #D1C312;
-  animation: spin 4s linear infinite;
 }
 
 .status li.statusOK i {
   color: #2ECCA9;
-  font-size: 1.3em;
+  font-size: .9em;
   position: absolute;
 }
 
-@keyframes spin {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 .modal-header .bubble {
   width: 50px;
   height: 50px;