Add basic VT UI design

src/components/BottomMenu.js

@@ -1,13 +1,17 @@
-import './css/BottomMenu.css';
 import React, { Component } from 'react';
+import './css/BottomMenu.css';
+import ticketsIcon from '../img/tickets.svg';
+import buyTicketsIcon from '../img/tickets+.svg';
+import travelIcon from '../img/tram.svg';
+import BottomMenuButton from './BottomMenuButton';
 
 class BottomMenu extends Component {
     render() {
         return (
             <div id="bottomMenu">
-                <button>Biljetter</button>
-                <button>Köp biljett</button>
-                <button>Reseplanering</button>
+                <BottomMenuButton label="Biljetter" icon={ticketsIcon}/>
+                <BottomMenuButton label="Köp biljett" icon={buyTicketsIcon}/>
+                <BottomMenuButton label="Reseplanering" icon={travelIcon}/>
             </div>
         );
     }

src/components/BottomMenuButton.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import './css/BottomMenu.css';
+
+class BottomMenuButton extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render(label, icon) {
+        return (
+        <button>
+            <img src={this.props.icon}/>
+            <span>{this.props.label}</span>
+        </button>
+        );
+    }
+}
+
+export default BottomMenuButton;

src/components/Header.js

@@ -1,11 +1,13 @@
-import './css/Header.css';
 import React, { Component } from 'react';
+import './css/Header.css';
+import navIcon from '../img/menu.svg'
 
 class Header extends Component {
     render() {
         return (
             <header>
-                <button id="navDrawBtn"></button>
+                <button id="navBtn"><img src={navIcon} /></button>
+                <h1 id="pageTitle">{this.props.title}</h1>
             </header>
         );
     }

src/components/PageArea.js

@@ -4,7 +4,9 @@ import React, { Component } from 'react';
 class PageArea extends Component {
     render() {
         return (
-            <div id="pageArea"></div>
+            <main>
+                <div id="topSection"/>
+            </main>
         );
     }
 }

src/components/css/BottomMenu.css

@@ -1,18 +1,32 @@
 #bottomMenu {
     width: 100%;
-    height: 8vh;
-    background: lightcoral;
+    height: 9vh;
+    min-height: 60px;
+    background: white;
     display: flex;
     justify-content: space-evenly;
+    border-top: 2px solid rgba(0, 0, 0, 0.05);
 }
 
 #bottomMenu button {
     background: none;
     border: none;
     font-size: 0.9em;
-    margin-bottom: 5px;
     flex-basis: calc(100%/3);
     display: flex;
-    align-items: flex-end;
+    flex-direction: column;
+    align-items: center;
     justify-content: space-evenly;
+}
+
+#bottomMenu button:active {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+#bottomMenu button span {
+    color: black;
+}
+
+#bottomMenu button img {
+    width: 25px;
 }

src/components/css/Header.css

@@ -1,5 +1,21 @@
 header {
     width: 100vw;
-    height: 15vh;
-    background: burlywood;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 15px;
+    position: fixed;
+    top: 0;
+}
+
+#navBtn img {
+    height: 1.4em;
+}
+
+#pageTitle {
+    font-size: 1.2em;
+    letter-spacing: 0.3px;
+    color: white;
+    font-family: 'Roboto Light', sans-serif;
+    padding: 0 0 0 25px;
 }