Simplify status + content display (#7264)

js/src/Application/application.css

@@ -19,7 +19,9 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  height: 100vh;
+  overflow: hidden;
+  width: 100%;
 
   .logo {
     top: 0;
@@ -27,8 +29,8 @@
     left: 0;
     bottom: 0;
     opacity: 0.2;
-    position: fixed;
-    padding: 7em;
+    position: absolute;
+    padding: 2em;
     text-align: center;
     z-index: 0;
 
@@ -37,21 +39,24 @@
       margin: 0 auto;
     }
   }
-}
 
-.container {
-  box-sizing: border-box;
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-}
+  .content {
+    box-sizing: border-box;
+    display: flex;
+    flex-grow: 1;
+    overflow: hidden;
+    position: relative;
 
-.content {
-  padding: 0;
-}
+    > div:not(.logo) {
+      display: flex;
+      flex-grow: 1;
+      overflow-y: scroll;
+    }
+  }
 
-.error {
-  padding: 2em;
-  background: red;
-  color: white;
+  .error {
+    padding: 2em;
+    background: red;
+    color: white;
+  }
 }

js/src/Application/application.js

@@ -109,32 +109,30 @@ class Application extends Component {
   renderApp () {
     const { children } = this.props;
 
-    return (
-      <div className={ styles.container }>
-        <Extension />
-        <FirstRun />
-        <Snackbar />
-        <UpgradeParity upgradeStore={ this.upgradeStore } />
-        <Errors />
-        <div className={ styles.content }>
-          { children }
-        </div>
+    return [
+      <Extension key='extension' />,
+      <FirstRun key='firstrun' />,
+      <Snackbar key='snackbar' />,
+      <UpgradeParity key='upgrade' upgradeStore={ this.upgradeStore } />,
+      <Errors key='errors' />,
+      <div key='content' className={ styles.content }>
+        { children }
       </div>
-    );
+    ];
   }
 
   renderMinimized () {
     const { children } = this.props;
 
-    return (
-      <div className={ styles.container }>
+    return [
+      <Errors key='errors' />,
+      <div key='content' className={ styles.content }>
         <div className={ styles.logo }>
           <img src={ parityLogo } />
         </div>
-        <Errors />
         { children }
       </div>
-    );
+    ];
   }
 }
 

js/src/Dapp/dapp.css

@@ -15,22 +15,20 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-.frame {
+.frame,
+.full {
   background: white;
   box-sizing: border-box;
   border: 0;
   flex-grow: 1;
+  margin: 0;
+  padding: 0;
   opacity: 0;
   width: 100%;
   z-index: 1;
 }
 
 .full {
-  width: 100vw;
-  height: 100vh;
-  margin: 0;
-  padding: 0;
-  background: white;
   font-family: 'Roboto', sans-serif;
   font-size: 16px;
   font-weight: 300;

js/src/Dapps/dapps.js

@@ -50,19 +50,17 @@ class Dapps extends Component {
     const applications = [].concat(this.store.visibleLocal, this.store.visibleViews, this.store.visibleBuiltin, this.store.visibleNetwork);
 
     return (
-      <Page>
-        <div className={ styles.dapps }>
-          {
-            applications.map((app, index) => (
-              <DappCard
-                app={ app }
-                availability={ availability }
-                className={ styles.dapp }
-                key={ `${index}_${app.id}` }
-              />
-            ))
-          }
-        </div>
+      <Page className={ styles.dapps }>
+        {
+          applications.map((app, index) => (
+            <DappCard
+              app={ app }
+              availability={ availability }
+              className={ styles.dapp }
+              key={ `${index}_${app.id}` }
+            />
+          ))
+        }
         {
           this.store.externalOverlayVisible
             ? (

js/src/Status/status.css

@@ -16,6 +16,7 @@
 */
 
 $textColor: #ccc;
+$statusHeight: 2.75em;
 
 .home {
   color: $textColor !important;
@@ -26,15 +27,9 @@ $textColor: #ccc;
 .container {
   flex: 0;
   box-sizing: border-box;
-  height: 2.75em;
 
-  .fixed {
-    box-sizing: border-box;
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    height: 2.75em;
+  .bar {
+    height: $statusHeight;
     z-index: 1000;
     border-bottom: 1px solid #405161;
     color: $textColor;

js/src/Status/status.js

@@ -44,7 +44,7 @@ function Status ({ className = '', upgradeStore }, { api }) {
 
   return (
     <div className={ `${styles.container} ${className}` }>
-      <GradientBg className={ styles.fixed }>
+      <GradientBg className={ styles.bar }>
         <div className={ styles.status }>
           <a href='#/' className={ styles.home }>
             <HomeIcon />
@@ -93,8 +93,8 @@ function Status ({ className = '', upgradeStore }, { api }) {
             <NetChain className={ styles.chain } />
           </div>
         </div>
-        <SyncWarning className={ styles.warning } />
       </GradientBg>
+      <SyncWarning className={ styles.warning } />
     </div>
   );
 }