clear up a dom-locations.

and updated: status-bar style.

app/components/app.js

@@ -1,6 +1,10 @@
 'use strict'
 
 import React, { Fragment } from 'react'
+import { connect } from 'react-redux'
+
+import SCREEN from '../consts/screen'
+
 import IntroContainer from '../containers/intro'
 import HeaderContainer from '../containers/header'
 import TableContainer from '../containers/table'
@@ -9,17 +13,36 @@ import StatusBarContainer from '../containers/status-bar'
 import InspectContainer from '../containers/inspect'
 import DragDropContainer from '../containers/drag-drop'
 
-const App = () => (
-  <Fragment>
-    <IntroContainer />
-    <HeaderContainer />
-    <TableContainer />
-    <Dialog.LinkContainer />
-    <Dialog.ConfirmContainer />
-    <InspectContainer />
-    <StatusBarContainer />
-    <DragDropContainer />
-  </Fragment>
-)
-
-export default App
+const mapStateToProps = state => ({
+  screen: state.screen
+})
+
+const mapDispatchToProps = dispatch => ({})
+
+export default connect(mapStateToProps, mapDispatchToProps)(function ({
+  screen
+}) {
+  if (screen === SCREEN.INTRO) {
+    return <IntroContainer />
+  }
+  return (
+    <Fragment>
+      {/* header */}
+      <HeaderContainer />
+      {/* /header */}
+
+      {/* footer */}
+      <StatusBarContainer />
+      {/* /footer */}
+
+      {/* main */}
+      <TableContainer />
+      <InspectContainer />
+      {/* /main */}
+
+      <Dialog.LinkContainer />
+      <Dialog.ConfirmContainer />
+      <DragDropContainer />
+    </Fragment>
+  )
+})

app/components/header.js

@@ -9,12 +9,17 @@ import * as Button from './button'
 import Icon from './icon'
 
 const Container = styled.header`
+  position: fixed;
+  z-index: 1;
+  width: 100%;
   height: 2.5rem;
   padding: 0.25rem 0.75rem;
   -webkit-app-region: drag;
   background-color: var(--color-neutral);
   color: var(--color-white);
-  z-index: 4;
+  & ~ main {
+    margin-top: 2.5rem;
+  }
 `
 
 const HideLayer = styled.div`
@@ -24,7 +29,6 @@ const HideLayer = styled.div`
   height: 100%;
   left: 0;
   top: 0;
-  z-index: 5;
 `
 
 const Header = ({ onShare, onMenu, onReport, menuVisible, version }) => {

app/components/status-bar.js

@@ -2,25 +2,28 @@ import React from 'react'
 import styled from 'styled-components'
 import bytes from 'prettier-bytes'
 
-const Bar = styled.div`
+const StatusBar = styled.footer`
   position: fixed;
+  z-index: 1;
   left: 0;
   bottom: 0;
   width: 100vw;
+  min-width: 800px;
   padding: 0.5rem 1rem 0.75rem;
   background-color: var(--color-neutral-04);
   color: var(--color-neutral-60);
+  & ~ main {
+    margin-bottom: 3rem;
+  }
 `
 
-const StatusBar = ({ up, down, show }) => {
+export default function ({ up, down, show }) {
   if (!show) return null
 
   return (
-    <Bar id='status-bar'>
+    <StatusBar>
       <span className='f7 mr3'>Download: {bytes(down)}/s</span>
       <span className='f7'>Upload: {bytes(up)}/s</span>
-    </Bar>
+    </StatusBar>
   )
 }
-
-export default StatusBar

app/containers/status-bar.js

@@ -1,13 +1,12 @@
 'use strict'
 
-import SCREEN from '../consts/screen'
 import StatusBar from '../components/status-bar'
 import { connect } from 'react-redux'
 
 const mapStateToProps = state => ({
   up: state.speed.up,
   down: state.speed.down,
-  show: state.screen === SCREEN.DATS
+  show: true
 })
 
 const mapDispatchToProps = dispatch => ({})