From 62f2aebe1d9c3efd6ace8785fc96bb43ae08afe8 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 9 Nov 2017 13:17:10 -0330
Subject: [PATCH] Network loading does not block network loading.

---
 .../dropdowns/components/dropdown.js          |  2 +-
 .../components/dropdowns/network-dropdown.js  |  3 ++-
 ui/app/components/loading.js                  | 15 +------------
 ui/app/css/itcss/components/index.scss        |  2 ++
 .../css/itcss/components/loading-overlay.scss | 21 +++++++++++++++++++
 5 files changed, 27 insertions(+), 16 deletions(-)
 create mode 100644 ui/app/css/itcss/components/loading-overlay.scss

diff --git a/ui/app/components/dropdowns/components/dropdown.js b/ui/app/components/dropdowns/components/dropdown.js
index ddcb7998f..15d064be8 100644
--- a/ui/app/components/dropdowns/components/dropdown.js
+++ b/ui/app/components/dropdowns/components/dropdown.js
@@ -31,7 +31,7 @@ class Dropdown extends Component {
         containerClassName,
         useCssTransition,
         isOpen,
-        zIndex: 30,
+        zIndex: 55,
         onClickOutside,
         style,
         innerStyle: innerStyleDefaults,
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 20dfca590..0908faf01 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -75,11 +75,12 @@ NetworkDropdown.prototype.render = function () {
       }
     },
     containerClassName: 'network-droppo',
-    zIndex: 11,
+    zIndex: 55,
     style: {
       position: 'absolute',
       top: '58px',
       minWidth: '309px',
+      zIndex: '55px',
     },
     innerStyle: {
       padding: '18px 8px',
diff --git a/ui/app/components/loading.js b/ui/app/components/loading.js
index 587212015..9442121fe 100644
--- a/ui/app/components/loading.js
+++ b/ui/app/components/loading.js
@@ -10,20 +10,7 @@ class LoadingIndicator extends Component {
 
   render () {
     return (
-      h('.full-flex-height', {
-        style: {
-          left: '0px',
-          zIndex: 50,
-          position: 'absolute',
-          flexDirection: 'column',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          height: '100%',
-          width: '100%',
-          background: 'rgba(255, 255, 255, 0.8)',
-        },
-      }, [
+      h('.full-flex-height.loading-overlay', {}, [
         h('img', {
           src: 'images/loading.svg',
         }),
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index 4ba02be67..dfb4f23f0 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -16,6 +16,8 @@
 
 @import './confirm.scss';
 
+@import './loading-overlay.scss';
+
 // Balances
 @import './hero-balance.scss';
 
diff --git a/ui/app/css/itcss/components/loading-overlay.scss b/ui/app/css/itcss/components/loading-overlay.scss
new file mode 100644
index 000000000..15009c1e6
--- /dev/null
+++ b/ui/app/css/itcss/components/loading-overlay.scss
@@ -0,0 +1,21 @@
+.loading-overlay {
+  left: 0px;
+  z-index: 50;
+  position: absolute;
+  flex-direction: column;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  background: rgba(255, 255, 255, 0.8);
+
+  @media screen and (max-width: 575px) {
+    margin-top: 56px;
+    height: calc(100% - 56px);
+  }
+
+  @media screen and (min-width: 576px) {
+    margin-top: 75px;
+    height: calc(100% - 75px);
+  }
+}