Prevent loading screen from overlaying the app bar (#4417)

ui/app/app.js

@@ -137,7 +137,6 @@ class App extends Component {
 
         (isLoading || isLoadingNetwork) && h(Loading, {
           loadingMessage: loadMessage,
-          fullScreen: true,
         }),
 
         // content

ui/app/components/loading-screen/loading-screen.component.js

@@ -1,7 +1,6 @@
 const { Component } = require('react')
 const h = require('react-hyperscript')
 const PropTypes = require('prop-types')
-const classnames = require('classnames')
 const Spinner = require('../spinner')
 
 class LoadingScreen extends Component {
@@ -12,9 +11,7 @@ class LoadingScreen extends Component {
 
   render () {
     return (
-      h('.loading-overlay', {
-        className: classnames({ 'loading-overlay--full-screen': this.props.fullScreen }),
-      }, [
+      h('.loading-overlay', [
         h('.loading-overlay__container', [
           h(Spinner, {
             color: '#F7C06C',
@@ -29,7 +26,6 @@ class LoadingScreen extends Component {
 
 LoadingScreen.propTypes = {
   loadingMessage: PropTypes.string,
-  fullScreen: PropTypes.bool,
 }
 
 module.exports = LoadingScreen

ui/app/components/pending-tx/index.js

@@ -130,7 +130,6 @@ PendingTx.prototype.render = function () {
 
   if (isFetching) {
     return h(Loading, {
-      fullScreen: true,
       loadingMessage: this.context.t('generatingTransaction'),
     })
   }
@@ -157,9 +156,7 @@ PendingTx.prototype.render = function () {
         sendTransaction,
       })
     default:
-      return h(Loading, {
-        fullScreen: true,
-      })
+      return h(Loading)
   }
 }
 

ui/app/css/itcss/components/loading-overlay.scss

@@ -11,8 +11,8 @@
   background: rgba(255, 255, 255, .8);
 
   @media screen and (max-width: 575px) {
-    margin-top: 56px;
-    height: calc(100% - 56px);
+    margin-top: 66px;
+    height: calc(100% - 66px);
   }
 
   @media screen and (min-width: 576px) {