add create league link, use logos in link_div

simmadome/src/index.css

@@ -58,23 +58,51 @@ h2 {
 #link_div {
     text-align: right;
     position: absolute;
-    top: 0px;
+    top: 1rem;
-    right: 30px;
+    right: 2rem;
+    display: flex;
 }
 
-#link_div > a {
+.github_logo, .twitter_logo, .patreon_container {
+    height: 2rem;
+    width: 2rem;
+    margin-left: 0.75rem;
+}
+
+.patreon_container {
+    border-radius: 1rem;
+    background: #FF424D;
+}
+
+.patreon_logo {
+    box-sizing: border-box;
+    padding: 0.35rem;
+    height: 2rem;
+    width: 2rem;
+    position: relative;
+    left: 0.1rem;
+    bottom: 0.05rem;
+}
+
+a {
     background-color: transparent;
     text-decoration: underline;
 }
 
-#link_div > a:link, #link_div > a:visited {
+a:link, a:visited {
     color: lightblue;
 }
 
-#link_div > a:hover {
+a:hover {
     color: white;
 }
 
+#utility_links {
+    position: absolute;
+    top: 1rem;
+    left: 2rem;
+}
+
 img.emoji {
    height: 1em;
    width: 1em;

simmadome/src/index.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
 import './index.css';
 import GamesPage from './GamesPage';
 import GamePage from './GamePage';
 import CreateLeague from './CreateLeague';
 import discordlogo from "./img/discord.png";
 import reportWebVitals from './reportWebVitals';
+import patreonLogo from './img/patreon.png';
+import githubLogo from './img/github.png';
+import twitterLogo from './img/twitter.png';
 
 ReactDOM.render(
   <React.StrictMode>
@@ -27,9 +30,20 @@ function Header() {
   return (
     <div id="header">
         <div id="link_div">
-            <a href="https://www.patreon.com/sixteen" className="link" target="_blank" rel="noopener noreferrer">Patreon</a><br />
+          <a href="https://www.patreon.com/sixteen" className="patreon_link" target="_blank" rel="noopener noreferrer">
-            <a href="https://github.com/Sakimori/matteo-the-prestige" className="link" target="_blank" rel="noopener noreferrer">Github</a><br />
+            <div className="patreon_container">
-            <a href="https://twitter.com/intent/follow?screen_name=SIBR_XVI" className="link" target="_blank" rel="noopener noreferrer">Twitter</a>
+              <img className="patreon_logo" src={patreonLogo} />
+            </div>
+          </a>
+          <a href="https://github.com/Sakimori/matteo-the-prestige" className="github_link" target="_blank" rel="noopener noreferrer">
+            <img className="github_logo" src={githubLogo} />
+          </a>
+          <a href="https://twitter.com/intent/follow?screen_name=SIBR_XVI" className="twitter_link" target="_blank" rel="noopener noreferrer">
+            <img className="twitter_logo" src={twitterLogo} />
+          </a>
+        </div>
+        <div id="utility_links">
+          <Link to="/create_league">Create a League</Link>
         </div>
         <a href="/" className="page_header"><h2 className="page_header" style={{fontSize:"50px"} as React.CSSProperties}>THE SIMMADOME</h2></a>
         <h2 className="page_header">Join SIBR on <a href="https://discord.gg/UhAajY2NCW" className="link"><img src={discordlogo} alt="" height="30"/></a> to start your own games!</h2>