Merge pull request #6468 from chikeichan/network-indicator-style-fix

Fix switcher height when Custom RPC is selected or loading

2 files changed, 24 insertions, 11 deletions

diff --git a/ui/app/components/app/network.js b/ui/app/components/app/network.js
index b438287e5..783fb36df 100644
--- a/ui/app/components/app/network.js
+++ b/ui/app/components/app/network.js
@@ -130,25 +130,16 @@ Network.prototype.render = function () {
           default:
             return h('.network-indicator', [
               networkNumber === 'loading'
-              ? h('span.pointer.network-indicator', {
-                style: {
-                  display: 'flex',
-                  alignItems: 'center',
-                  flexDirection: 'row',
-                },
+              ? h('span.pointer.network-loading-spinner', {
                 onClick: (event) => this.props.onClick(event),
               }, [
                 h('img', {
                   title: context.t('attemptingConnect'),
-                  style: {
-                    width: '27px',
-                  },
                   src: 'images/loading.svg',
                 }),
               ])
               : h('i.fa.fa-question-circle.fa-lg', {
                 style: {
-                  margin: '10px',
                   color: 'rgb(125, 128, 130)',
                 },
               }),
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index 5197f93e1..2c6ca2522 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -52,6 +52,11 @@
     font-size: 12px;
     padding: 0 4px;
   }
+
+  .fa-question-circle {
+    margin: 0 4px 0 6px;
+    font-size: 1rem;
+  }
 }
 
 .network-name {
@@ -169,5 +174,22 @@
 }
 
 .network-caret {
-  margin: 0 8px 2px;
+  margin: 0 8px;
+}
+
+.network-loading-spinner {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  position: relative;
+  height: 16px;
+  width: 16px;
+  margin-left: 5px;
+
+  img {
+    height: 26px;
+    position: absolute;
+    top: -5px;
+    left: -6px;
+  }
 }