diff --git a/src/App.js b/src/App.js index 75bc102..756d5a6 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,8 @@ import './variables.css'; 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' @@ -17,7 +19,7 @@ class App extends Component { /> */} -
+
diff --git a/src/components/BottomMenu.js b/src/components/BottomMenu.js index aec7f52..0f98a17 100644 --- a/src/components/BottomMenu.js +++ b/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 (
- - - + + +
); } diff --git a/src/components/BottomMenuButton.js b/src/components/BottomMenuButton.js new file mode 100644 index 0000000..04cf455 --- /dev/null +++ b/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 ( + + ); + } +} + +export default BottomMenuButton; \ No newline at end of file diff --git a/src/components/Header.js b/src/components/Header.js index ec3aae6..d27a838 100644 --- a/src/components/Header.js +++ b/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 (
- + +

{this.props.title}

); } diff --git a/src/components/PageArea.js b/src/components/PageArea.js index 6b25283..df7e58e 100644 --- a/src/components/PageArea.js +++ b/src/components/PageArea.js @@ -4,7 +4,9 @@ import React, { Component } from 'react'; class PageArea extends Component { render() { return ( -
+
+
+
); } } diff --git a/src/components/css/BottomMenu.css b/src/components/css/BottomMenu.css index e227caa..5aa7d54 100644 --- a/src/components/css/BottomMenu.css +++ b/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; } \ No newline at end of file diff --git a/src/components/css/Header.css b/src/components/css/Header.css index 16482b5..0ffe297 100644 --- a/src/components/css/Header.css +++ b/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; } \ No newline at end of file diff --git a/src/img/calendar.svg b/src/img/calendar.svg new file mode 100644 index 0000000..670873d --- /dev/null +++ b/src/img/calendar.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/img/clock.svg b/src/img/clock.svg new file mode 100644 index 0000000..5ee5644 --- /dev/null +++ b/src/img/clock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/img/menu.svg b/src/img/menu.svg new file mode 100644 index 0000000..416f1f9 --- /dev/null +++ b/src/img/menu.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/img/redo.svg b/src/img/redo.svg new file mode 100644 index 0000000..c68d924 --- /dev/null +++ b/src/img/redo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/img/tickets+.svg b/src/img/tickets+.svg new file mode 100644 index 0000000..fa9f687 --- /dev/null +++ b/src/img/tickets+.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/img/tickets.svg b/src/img/tickets.svg new file mode 100644 index 0000000..071a4c7 --- /dev/null +++ b/src/img/tickets.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/img/tram.svg b/src/img/tram.svg new file mode 100644 index 0000000..2d919e3 --- /dev/null +++ b/src/img/tram.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/index.css b/src/index.css index d90fde9..60de5e1 100644 --- a/src/index.css +++ b/src/index.css @@ -18,4 +18,9 @@ html, body, #root, #app { width: 100%; height: 100%; +} + +button { + background: none; + border: none; } \ No newline at end of file