add contact page

Author: while-loop

Diff for: Makefile

@@ -96,4 +96,4 @@ mongo:
 
 domains: context
 	gcloud beta run domain-mappings create --service osrs-loadouts-api --platform managed --domain api.osrsloadouts.app
-	gcloud beta run domain-mappings create --service osrs-loadouts-web --platform managed --domain osrsloadouts.app
+	gcloud beta run domain-mappings create --service osrs-loadouts-web --platform managed --domain osrsloadouts.app

Diff for: web/src/components/App/App.js

@@ -43,6 +43,8 @@ class Header extends React.Component {
                      - 
                     {loadouts}
                     <Link to="/browse">Browse Loadouts</Link>
+                    &nbsp;-&nbsp;
+                    <Link to="/contact">Contact</Link>
                 </div>
                 <div style={{float: 'right'}}>
                     {account}

Diff for: web/src/components/Contact/Contact.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import discord from './discord.png';
+import github from './github.png';
+
+const DISCORD_URL = 'https://discord.com/channels/@me/107680246739767296'
+const DISCORD_USERNAME = 'while-loop#6157'
+const GITHUB_URL = 'https://github.com/while-loop/osrsinvy/issues'
+const GITHUB_USERNAME = 'while-loop'
+
+function Contact() {
+    return (
+        <div style={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between",
+        }}>
+            <h4>Contact Me</h4>
+
+            <div>
+                <a href={DISCORD_URL} target='_blank'><img style={{verticalAlign: 'middle'}} src={discord} alt={"discord logo"} width={50}/></a>
+                &nbsp;
+                <a href={DISCORD_URL} target='_blank'>{DISCORD_USERNAME}</a>
+            </div>
+            <br/>
+            <div>
+                <a href={GITHUB_URL} target='_blank'><img style={{verticalAlign: 'middle'}} src={github} alt={"github logo"} width={50}/></a>
+                &nbsp;
+                <a href={GITHUB_URL} target='_blank'>{GITHUB_USERNAME}</a>
+            </div>
+
+
+        </div>
+    );
+}
+
+export default Contact;

Diff for: web/src/components/Contact/discord.png

@@ -10,6 +10,7 @@ import app, {refreshToken} from "../utils/base"
 import Login from "../components/Login/Login";
 import Account from "../components/Account/Account";
 import Profile from "../components/Account/Profile";
+import Contact from "../components/Contact/Contact";
 
 class AppRouter extends React.Component {
     state = {
@@ -49,6 +50,7 @@ class AppRouter extends React.Component {
                 <App authenticated={authenticated}>
                     <div>
                         <Route exact path="/" component={Home}/>
+                        <Route exact path="/contact" component={Contact}/>
 
                         <Route exact path="/login" component={Login}/>
                         <PrivateRoute exact path="/account" component={Account} authenticated={authenticated}/>