Create structure of basic UI components

src/App.css

@@ -1,5 +1,8 @@
 .App {
-  text-align: center;
+    height: 100%;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
 }
 
 .App-logo {

src/App.js

@@ -1,29 +1,21 @@
 import './App.css';
 import React, { Component } from 'react';
-
+import NavigationDrawer from './components/NavigationDrawer.js'
+import Header from './components/Header.js'
+import PageArea from './components/PageArea.js'
+import BottomMenu from './components/BottomMenu.js'
 
 class App extends Component {
     render() {
         return (
-            <div id="App">
+            <div className="App">
-                <div id="navDrawer"></div>
+                <NavigationDrawer />                
-
+                <Header />
-                <header>
+                <PageArea />
-                    <button id="navDrawBtn"></button>
+                <BottomMenu />
-                </header>
-
-                <div id="pageArea"></div>
-
-                <div id="bottomMenu">
-                    <button>Biljetter</button>
-                    <button>Köp biljett</button>
-                    <button>Reseplanering</button>
-                </div>
             </div>
         );
     }
 }
 
-const app = document.getElementById('App');
-
 export default App;

src/components/BottomMenu.js

@@ -0,0 +1,16 @@
+import './css/BottomMenu.css';
+import React, { Component } from 'react';
+
+class BottomMenu extends Component {
+    render() {
+        return (
+            <div id="bottomMenu">
+                <button>Biljetter</button>
+                <button>Köp biljett</button>
+                <button>Reseplanering</button>
+            </div>
+        );
+    }
+}
+
+export default BottomMenu;

src/components/Header.js

@@ -0,0 +1,14 @@
+import './css/Header.css';
+import React, { Component } from 'react';
+
+class Header extends Component {
+    render() {
+        return (
+            <header>
+                <button id="navDrawBtn"></button>
+            </header>
+        );
+    }
+}
+
+export default Header;

src/components/NavigationDrawer.js

@@ -0,0 +1,12 @@
+import './css/NavigationDrawer.css';
+import React, { Component } from 'react';
+
+class NavigationDrawer extends Component {
+    render() {
+        return (
+            <div id="navDrawer"></div>
+        );
+    }
+}
+
+export default NavigationDrawer;

src/components/PageArea.js

@@ -0,0 +1,12 @@
+import './css/PageArea.css';
+import React, { Component } from 'react';
+
+class PageArea extends Component {
+    render() {
+        return (
+            <div id="pageArea"></div>
+        );
+    }
+}
+
+export default PageArea;

src/components/css/BottomMenu.css

@@ -0,0 +1,18 @@
+#bottomMenu {
+    width: 100%;
+    height: 8vh;
+    background: lightcoral;
+    display: flex;
+    justify-content: space-evenly;
+}
+
+#bottomMenu button {
+    background: none;
+    border: none;
+    font-size: 0.9em;
+    margin-bottom: 5px;
+    flex-basis: calc(100%/3);
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-evenly;
+}

src/components/css/Header.css

@@ -0,0 +1,5 @@
+header {
+    width: 100vw;
+    height: 15vh;
+    background: burlywood;
+}

src/components/css/PageArea.css

@@ -0,0 +1,4 @@
+#pageArea {
+    width: 100vw;
+    flex: 1 1 auto;
+}

src/index.css

@@ -14,42 +14,3 @@ html, body, #root, #app {
     width: 100%;
     height: 100%;
 }
-
-#app {
-    display: flex;
-    flex-direction: column;
-}
-
-header {
-    width: 100vw;
-    height: 15vh;
-    background: burlywood;
-}
-
-#pageArea {
-    width: 100vw;
-    flex: 1 1 auto;
-}
-
-#bottomMenu {
-    width: 100%;
-    height: 8vh;
-    background: lightcoral;
-    display: flex;
-    justify-content: space-evenly;
-}
-
-#bottomMenu button {
-    background: none;
-    border: none;
-    font-size: 0.9em;
-    margin-bottom: 5px;
-    flex-basis: calc(100%/3);
-    display: flex;
-    align-items: flex-end;
-    justify-content: space-evenly;
-}
-
-#bottomMenu button:active {
-    
-}