Get SPA working

web/src/App.css

@@ -24,6 +24,17 @@
   color: white;
 }
 
+.pageWrapper {
+  background-color: #282c34;
+  padding-top: 100px;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
 .App-link {
   color: #61dafb;
 }

web/src/Components/Pages/About.css

@@ -0,0 +1,4 @@
+.aboutBody {
+    padding-top: 20px;
+    font-size: 16pt;
+}

web/src/Components/Pages/About.js

@@ -1,21 +1,15 @@
-import logo from '../../logo.svg';
 import '../../App.css';
+import './About.css';
 
 function About() {
   return (
-    <div>
+    <div className="pageWrapper">
-      <img src={logo} className="App-logo" alt="logo" />
+      <h1>
-      <p>
+        About GoScrobble.com
-        TEST!!!
+      </h1>
+      <p className="aboutBody">
+        Go-Scrobble is an open source music scorbbling service written in Go and React.<br/>
       </p>
-      <a
-        className="App-link"
-        href="https://git.m2.nz/idanoo/go-scrobble"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        TEST@!@@
-      </a>
     </div>
   );
 }

web/src/Components/Pages/Navigation.css

@@ -0,0 +1,9 @@
+.navLink {
+    padding: 10px;
+    color: #CCCCCC;
+}
+
+.navLink:hover {
+    color: #666666;
+    text-decoration: none;
+}

web/src/Components/Pages/Navigation.js

@@ -1,13 +1,15 @@
 import React from 'react';
-import { Navbar, NavbarBrand, NavLink } from 'reactstrap';
+import { Navbar, NavbarBrand } from 'reactstrap';
+import { Link } from 'react-router-dom';
+import './Navigation.css';
 
 const Navigation = () => {
     return (
     <div>
       <Navbar color="dark" dark fixed="top">
         <NavbarBrand exact href="/" className="mr-auto">GoScrobble</NavbarBrand>
-        <NavLink exact href="/">Home</NavLink>
+        <Link class="navLink" to="/">Home</Link>
-        <NavLink href="/about">About</NavLink>
+        <Link class="navLink" to="/about">About</Link>
       </Navbar>
     </div>
     );

web/src/index.js

@@ -2,10 +2,11 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
+import { BrowserRouter } from 'react-router-dom'
 
 ReactDOM.render(
-  <React.StrictMode>
+  <BrowserRouter>
     <App />
-  </React.StrictMode>,
+  </BrowserRouter>,
   document.getElementById('root')
 );