Put bottom links on all pages

Author: eltoder

src/App.js

@@ -5,6 +5,7 @@ import CssBaseline from "@material-ui/core/CssBaseline";
 import { ThemeProvider } from "@material-ui/core/styles";
 
 import ConnectionsTracker from "./components/ConnectionsTracker";
+import Footer from "./components/Footer";
 import Navbar from "./components/Navbar";
 import WelcomeDialog from "./components/WelcomeDialog";
 import { SettingsContext, UserContext } from "./context";
@@ -185,6 +186,7 @@ function App() {
                 <Route exact path="/profile/:id" component={ProfilePage} />
                 <Route component={NotFoundPage} />
               </Switch>
+              <Footer />
             </SettingsContext.Provider>
           </UserContext.Provider>
         )}

src/components/Footer.js

@@ -0,0 +1,27 @@
+import Link from "@material-ui/core/Link";
+import Typography from "@material-ui/core/Typography";
+
+import InternalLink from "./InternalLink";
+
+function Footer() {
+  return (
+    <Typography variant="body1" align="center" style={{ padding: "16px 0" }}>
+      <InternalLink to="/help">Help</InternalLink> •{" "}
+      <InternalLink to="/about">About</InternalLink> •{" "}
+      <InternalLink to="/conduct">Conduct</InternalLink> •{" "}
+      <Link
+        target="_blank"
+        rel="noopener"
+        href="https://github.com/eltoder/setwithfriends"
+      >
+        GitHub
+      </Link>
+      {" • "}
+      <Link target="_blank" rel="noopener" href="https://discord.gg/XbjJyc9">
+        Discord
+      </Link>
+    </Typography>
+  );
+}
+
+export default Footer;

src/pages/AboutPage.js

@@ -51,13 +51,6 @@ function AboutPage() {
           <InternalLink to="/legal">terms of service</InternalLink>.
         </Typography>
       </Paper>
-      <Typography
-        variant="body1"
-        align="center"
-        style={{ marginTop: 12, paddingBottom: 12 }}
-      >
-        <InternalLink to="/">Return to home</InternalLink>
-      </Typography>
     </Container>
   );
 }

src/pages/ConductPage.js

@@ -3,8 +3,6 @@ import Link from "@material-ui/core/Link";
 import Paper from "@material-ui/core/Paper";
 import Typography from "@material-ui/core/Typography";
 
-import InternalLink from "../components/InternalLink";
-
 function ConductPage() {
   return (
     <Container>
@@ -93,13 +91,6 @@ function ConductPage() {
           and contact a moderator.
         </Typography>
       </Paper>
-      <Typography
-        variant="body1"
-        align="center"
-        style={{ marginTop: 12, paddingBottom: 12 }}
-      >
-        <InternalLink to="/">Return to home</InternalLink>
-      </Typography>
     </Container>
   );
 }

src/pages/HelpPage.js

@@ -6,7 +6,6 @@ import Link from "@material-ui/core/Link";
 import Paper from "@material-ui/core/Paper";
 import Typography from "@material-ui/core/Typography";
 
-import InternalLink from "../components/InternalLink";
 import ScrollToHash from "../components/ScrollToHash";
 import SetCard from "../components/SetCard";
 import { SettingsContext } from "../context";
@@ -655,13 +654,6 @@ function HelpPage() {
           and computed as a floating-point number.
         </Typography>
       </Paper>
-      <Typography
-        variant="body1"
-        align="center"
-        style={{ marginTop: 12, paddingBottom: 12 }}
-      >
-        <InternalLink to="/">Return to home</InternalLink>
-      </Typography>
     </Container>
   );
 }

src/pages/LegalPage.js

@@ -7,8 +7,6 @@ import Tab from "@material-ui/core/Tab";
 import Tabs from "@material-ui/core/Tabs";
 import Typography from "@material-ui/core/Typography";
 
-import InternalLink from "../components/InternalLink";
-
 // Created with GetTerms - https://getterms.io/
 
 const TermsOfService = () => (
@@ -201,13 +199,6 @@ function LegalPage() {
       <Paper style={{ padding: "1rem", maxWidth: 720, margin: "12px auto" }}>
         {tab === "terms" ? <TermsOfService /> : <PrivacyPolicy />}
       </Paper>
-      <Typography
-        variant="body1"
-        align="center"
-        style={{ marginTop: 12, paddingBottom: 12 }}
-      >
-        <InternalLink to="/">Return to home</InternalLink>
-      </Typography>
     </Container>
   );
 }

src/pages/LobbyPage.js

@@ -309,22 +309,6 @@ function LobbyPage() {
           </Grid>
         </Box>
       </Grid>
-      <Typography variant="body1" align="center" style={{ padding: "16px 0" }}>
-        <InternalLink to="/help">Help</InternalLink> •{" "}
-        <InternalLink to="/about">About</InternalLink> •{" "}
-        <InternalLink to="/conduct">Conduct</InternalLink> •{" "}
-        <Link
-          target="_blank"
-          rel="noopener"
-          href="https://github.com/eltoder/setwithfriends"
-        >
-          GitHub
-        </Link>{" "}
-        •{" "}
-        <Link target="_blank" rel="noopener" href="https://discord.gg/XbjJyc9">
-          Discord
-        </Link>
-      </Typography>
     </Container>
   );
 }

src/pages/NotFoundPage.js

@@ -2,7 +2,6 @@ import Container from "@material-ui/core/Container";
 import Typography from "@material-ui/core/Typography";
 
 import cowImage from "../assets/cow_404.png";
-import InternalLink from "../components/InternalLink";
 
 function NotFoundPage() {
   return (
@@ -15,13 +14,6 @@ function NotFoundPage() {
         alt="404"
         style={{ display: "block", maxWidth: "100%", margin: "0 auto 8px" }}
       />
-      <Typography
-        variant="body1"
-        align="center"
-        style={{ marginTop: 12, paddingBottom: 12 }}
-      >
-        <InternalLink to="/">Return to home</InternalLink>
-      </Typography>
     </Container>
   );
 }