Ui components (#162)

addresses part of #67

gui/web/package.json

@@ -3,8 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "classnames": "^2.2.6",
+    "node-sass": "^4.11.0",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
+    "react-router-dom": "^5.0.0",
     "react-scripts": "2.1.8"
   },
   "scripts": {

gui/web/src/App.js

@@ -1,26 +1,20 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { BrowserRouter as Router, Route } from "react-router-dom";
+
+import Header from './components/molecules/Header/Header';
+import Bots from './components/screens/Bots/Bots';
+import NewBot from './components/screens/NewBot/NewBot';
+import Details from './components/screens/Details/Details';
 
 class App extends Component {
   render() {
     return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
-      </div>
+      <Router>
+        <Header version="v1.04"/>
+        <Route exact path="/" component={Bots} />
+        <Route path="/new" component={NewBot} />
+        <Route path="/details" component={Details} />
+      </Router>
     );
   }
 }