Add Help Button

Author: JustMaier

src/components/Help.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import styled from 'styled-components/macro'
+import { MdHelp } from 'react-icons/md'
+
+const HelpBox = styled.a`
+  position: fixed;
+  bottom: 8px;
+  left: 10px;
+  opacity: .3;
+  color: #fff;
+  &:hover {
+    opacity: .7
+  }
+`
+
+const Help = () => (
+  <HelpBox href='https://medium.com/the-gathering/the-gathering-in-a-nutshell-eb5c81572b9c' target='_blank'><MdHelp size='2em' /></HelpBox>
+)
+
+export default Help

src/containers/Debug.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
-import { Header, ListGroup, ListGroupItem, Button, Box, LinkButton } from '../components/UI'
+import { Header, ListGroup, ListGroupItem, Button } from '../components/UI'
 import db from '../db'
-import { MdComputer, MdCheck, MdReceipt } from 'react-icons/md'
+import { MdComputer, MdCheck } from 'react-icons/md'
 
 const sumArray = arr => arr.reduce((total, cur) => total + cur, 0)
 

src/hoc/Layout.js

@@ -1,12 +1,14 @@
 import React from 'react'
 import Navbar from '../components/Navbar/Navbar'
 import { Main } from '../components/UI'
+import Help from '../components/Help'
 
 const Layout = ({ children }) => {
   return (
     <React.Fragment>
       <Navbar />
       <Main>{children}</Main>
+      <Help />
     </React.Fragment>
   )
 }