From 66f900dee9def666b25cfbdec7e80cda58f007ec Mon Sep 17 00:00:00 2001
From: Daniel Mason <daniel@m2.nz>
Date: Thu, 25 Mar 2021 21:52:06 +1300
Subject: [PATCH] Get SPA working

---
 web/src/App.css                         | 11 +++++++++++
 web/src/Components/Pages/About.css      |  4 ++++
 web/src/Components/Pages/About.js       | 20 +++++++-------------
 web/src/Components/Pages/Navigation.css |  9 +++++++++
 web/src/Components/Pages/Navigation.js  |  8 +++++---
 web/src/index.js                        |  5 +++--
 6 files changed, 39 insertions(+), 18 deletions(-)
 create mode 100644 web/src/Components/Pages/About.css
 create mode 100644 web/src/Components/Pages/Navigation.css

diff --git a/web/src/App.css b/web/src/App.css
index 74b5e053..c7c91f5b 100644
--- a/web/src/App.css
+++ b/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;
 }
diff --git a/web/src/Components/Pages/About.css b/web/src/Components/Pages/About.css
new file mode 100644
index 00000000..2d36d9fe
--- /dev/null
+++ b/web/src/Components/Pages/About.css
@@ -0,0 +1,4 @@
+.aboutBody {
+    padding-top: 20px;
+    font-size: 16pt;
+}
\ No newline at end of file
diff --git a/web/src/Components/Pages/About.js b/web/src/Components/Pages/About.js
index 7dfd447f..a5898837 100644
--- a/web/src/Components/Pages/About.js
+++ b/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>
-      <img src={logo} className="App-logo" alt="logo" />
-      <p>
-        TEST!!!
+    <div className="pageWrapper">
+      <h1>
+        About GoScrobble.com
+      </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>
   );
 }
diff --git a/web/src/Components/Pages/Navigation.css b/web/src/Components/Pages/Navigation.css
new file mode 100644
index 00000000..8a29451a
--- /dev/null
+++ b/web/src/Components/Pages/Navigation.css
@@ -0,0 +1,9 @@
+.navLink {
+    padding: 10px;
+    color: #CCCCCC;
+}
+
+.navLink:hover {
+    color: #666666;
+    text-decoration: none;
+}
\ No newline at end of file
diff --git a/web/src/Components/Pages/Navigation.js b/web/src/Components/Pages/Navigation.js
index f15feb44..8f5d14c7 100644
--- a/web/src/Components/Pages/Navigation.js
+++ b/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>
-        <NavLink href="/about">About</NavLink>
+        <Link class="navLink" to="/">Home</Link>
+        <Link class="navLink" to="/about">About</Link>
       </Navbar>
     </div>
     );
diff --git a/web/src/index.js b/web/src/index.js
index 6832e783..8dc17590 100644
--- a/web/src/index.js
+++ b/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')
 );