Merge pull request #5298 from whymarrh/fix-tx-spinner

Fix loading screen height

5 files changed, 23 insertions, 24 deletions

diff --git a/ui/app/app.js b/ui/app/app.js
index c93f93e75..26dd784f0 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -152,12 +152,14 @@ class App extends Component {
 
         h(AccountMenu),
 
-        (isLoading || isLoadingNetwork) && h(Loading, {
-          loadingMessage: loadMessage,
-        }),
-
-        // content
-        this.renderRoutes(),
+        h('div.main-container-wrapper', [
+          (isLoading || isLoadingNetwork) && h(Loading, {
+            loadingMessage: loadMessage,
+          }),
+
+          // content
+          this.renderRoutes(),
+        ]),
       ])
     )
   }
diff --git a/ui/app/components/page-container/index.scss b/ui/app/components/page-container/index.scss
index 14cdbacd3..61434cbcf 100644
--- a/ui/app/components/page-container/index.scss
+++ b/ui/app/components/page-container/index.scss
@@ -182,5 +182,7 @@
     max-height: 82vh;
     min-height: 570px;
     flex: 0 0 auto;
+    margin-right: auto;
+    margin-left: auto;
   }
 }
diff --git a/ui/app/components/pages/unlock-page/index.scss b/ui/app/components/pages/unlock-page/index.scss
index 3d44bd037..6bd52282d 100644
--- a/ui/app/components/pages/unlock-page/index.scss
+++ b/ui/app/components/pages/unlock-page/index.scss
@@ -14,6 +14,7 @@
     align-self: stretch;
     justify-content: center;
     flex: 1 0 auto;
+    height: 100vh;
   }
 
   &__mascot-container {
diff --git a/ui/app/css/itcss/components/loading-overlay.scss b/ui/app/css/itcss/components/loading-overlay.scss
index b07d6af17..b023c8423 100644
--- a/ui/app/css/itcss/components/loading-overlay.scss
+++ b/ui/app/css/itcss/components/loading-overlay.scss
@@ -1,6 +1,6 @@
 .loading-overlay {
   left: 0;
-  z-index: 50;
+  z-index: 51;
   position: absolute;
   flex-direction: column;
   display: flex;
@@ -8,25 +8,9 @@
   align-items: center;
   flex: 1 1 auto;
   width: 100%;
+  height: 100%;
   background: rgba(255, 255, 255, .8);
 
-  @media screen and (max-width: 575px) {
-    margin-top: 66px;
-    height: calc(100% - 66px);
-  }
-
-  @media screen and (min-width: 576px) {
-    margin-top: 75px;
-    height: calc(100% - 75px);
-  }
-
-  &--full-screen {
-    position: fixed;
-    height: 100vh;
-    width: 100vw;
-    margin-top: 0;
-  }
-
   &__container {
     position: absolute;
     top: 33%;
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 7eb193d6f..8e963d495 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -22,6 +22,12 @@ $wallet-view-bg: $alabaster;
   display: none;
 }
 
+.main-container-wrapper {
+  display: flex;
+  width: 100vw;
+  justify-content: center;
+}
+
 //Account and transaction details
 .account-and-transaction-details {
   display: flex;
@@ -219,6 +225,10 @@ $wallet-view-bg: $alabaster;
     overflow-y: auto;
     background-color: $white;
   }
+
+  .main-container-wrapper {
+    height: 100%;
+  }
 }
 
 // wallet view