Styling: Add footer, favicon, and minor tweaks

atribed · Jul 5, 2020 · 8e345bb · 8e345bb · vercel · Jul 5, 2020
1 parent 9c0270e
commit 8e345bb
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 10 deletions.
diff --git a/frontend/dist/favicon.png b/frontend/dist/favicon.png
diff --git a/frontend/dist/index.html b/frontend/dist/index.html
@@ -1,14 +1,17 @@
 
 <!DOCTYPE html>
-<head>
-  <meta
-    name="viewport"
-    content="minimum-scale=1, initial-scale=1, width=device-width"
-  />
-</head>
 <html>
+  <head>
+    <title>Roll - Your Favorite Dice Roller</title>
+    <meta name="description" content="Dice roller for D&D and other RPG adventures.">
+    <meta
+      name="viewport"
+      content="minimum-scale=1, initial-scale=1, width=device-width"
+    />
+    <link rel="icon" type="image/png" href="/favicon.png"/>
+  </head>
   <body>
     <div id="roll"></div>
-    <script type="text/javascript" src="dist/js/main.js"></script>
+    <script type="text/javascript" src="js/main.js"></script>
   </body>
 </html>
diff --git a/frontend/js/components/Footer.js b/frontend/js/components/Footer.js
@@ -0,0 +1,19 @@
+import React from "react";
+import { Box, Link } from "@material-ui/core";
+
+const Footer = () => (
+  <Box textAlign="center" fontSize={"10px"} color="#606060" mt={6}>
+    Created and maintained by{" "}
+    <Link
+      target="_blank"
+      rel="noopener"
+      rel="noreferrer"
+      href="https://github.com/atribed/"
+    >
+      @atribed
+    </Link>
+    .
+  </Box>
+);
+
+export default Footer;
diff --git a/frontend/js/components/Results.js b/frontend/js/components/Results.js
@@ -18,9 +18,9 @@ const Results = ({ dice }) => {
             {dice.map(
               (d) =>
                 d.result && (
-                  <Box 
-                    display="flex" 
-                    alignItems="center" 
+                  <Box
+                    display="flex"
+                    alignItems="center"
                     key={d.sides}
                     minWidth="50px"
                   >

diff --git a/frontend/js/components/Roller.js b/frontend/js/components/Roller.js
@@ -8,6 +8,7 @@ import { enableShake, roll } from "../utils";
 import DiceSelect from "./DiceSelect";
 import Results from "./Results";
 import Staging from "./Staging";
+import Footer from "./Footer";
 
 const Roller = () => {
   const [selectedDice, setSelectedDice] = useState([]);
@@ -63,6 +64,7 @@ const Roller = () => {
           Enable Shake to Roll
         </Button>
       </Box>
+      <Footer />
     </Container>
   );
 };