Add legal link and dialog

src/Footer/alertDialog.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import { withStyles } from '@material-ui/core/styles';
+
+class AlertDialog extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      open: false,
+    };
+
+    this.label=props.label;
+    this.title=props.title;
+    this.contentText=props.contentText;
+  }
+
+  handleClickOpen = () => {
+    this.setState({ open: true });
+  };
+
+  handleClose = () => {
+    this.setState({ open: false });
+  };
+
+  render() {
+    const StyledButton = withStyles({
+      root: {
+        color: 'white',
+      },
+    })(Button);
+
+    return (
+      <div>
+        <StyledButton onClick={this.handleClickOpen}>{this.label}</StyledButton>
+        <Dialog
+          open={this.state.open}
+          onClose={this.handleClose}
+          aria-labelledby="alert-dialog-title"
+          aria-describedby="alert-dialog-description"
+        >
+          <DialogTitle id="alert-dialog-title">{this.title}</DialogTitle>
+          <DialogContent>
+            <DialogContentText id="alert-dialog-description">
+              {this.contentText}
+            </DialogContentText>
+          </DialogContent>
+        </Dialog>
+      </div>
+    );
+  }
+}
+
+export default AlertDialog;

src/Footer/footer.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import AlertDialog from './alertDialog';
+
+import "../styles.css";
+
+const footer = props => (
+  <div className="counter transparent-tile">
+    <AlertDialog
+      label="Legal"
+      title="Legal"
+      contentText="Path of Exile content and materials are trademarks and copyrights of Grinding Gear Games or its licensors.
+      This site is fan-made and not affiliated with Grinding Gear Games in any way. Unfortunately. C'mon Chris hire us."
+    />
+    <AlertDialog
+      label="Privacy"
+      title="Privacy"
+      contentText={"We're not interested in your personal data, we're just here to have fun. If you'd like a more official sounding privacy statement contact us and we'll hit up Harvey Specter to write it."}
+    /> 
+  </div>
+);
+
+export default footer;

src/GithubLinks/LinkTypes/link.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const link = props => (
-  <a href={props.linkTo} target="_blank">
+  <a href={props.linkTo} target="_blank" class={props.class}>
     {props.children}
   </a>
 );

src/GithubLinks/githubLinks.js

@@ -4,10 +4,10 @@ import Link from './LinkTypes/link';
 import "../styles.css";
 
 const githubLinks = props => (
-  <div className="links">
-    <Link linkTo="https://github.com/5k-mirrors" text="5k-mirrors">Made by 5k-mirrors</Link>
-    <Link linkTo="https://github.com/5k-mirrors/relic-checklist">Hosted by GitHub</Link>
-    <Link linkTo="https://github.com/5k-mirrors/relic-checklist/issues/new">Report issue</Link>
+  <div className="transparent-tile">
+    <Link linkTo="https://github.com/5k-mirrors" class="tileItem">Made by 5k-mirrors</Link>
+    <Link linkTo="https://github.com/5k-mirrors/relic-checklist" class="tileItem">Hosted by GitHub</Link>
+    <Link linkTo="https://github.com/5k-mirrors/relic-checklist/issues/new" class="tileItem">Report issue</Link>
   </div>
 );
 

src/index.js

@@ -4,6 +4,7 @@ import ReactDOM from "react-dom";
 import "./styles.css";
 import List from './list';
 import GithubLinks from './GithubLinks/githubLinks';
+import Footer from './Footer/footer';
 import Logo from './logo/logo';
 import Favicon from 'Favicon';
 import DelveBG from 'DelveBG';
@@ -29,6 +30,7 @@ class App extends React.Component {
           <h1>PoE Relic Checklist</h1>
           <GithubLinks />
           <List />
+          <Footer />
         </div>
       </div>
     );

src/list.js

@@ -110,7 +110,7 @@ class List extends React.Component {
     return (
       <div>
         <div>
-          <h3 className="counter transparent-tile">
+          <h3 className="transparent-tile">
            {this.state.checklist.length} / {this.sumOfRelics}
           </h3>
           <StyledButton variant="contained" onClick={this.clearChecklistAndLocalStorage} color="secondary">

src/styles.css

@@ -63,29 +63,19 @@ input[type="checkbox"] {
   text-align: center;
 }
 
-.links {
-  background: rgba(0, 0, 0, 0.5);
-  padding: 15px 20px;
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  border-radius: 5px;
-  width: 500px;
-  margin: 0 auto;
-}
-
-.links a {
+.transparent-tile a {
   text-decoration: none;
   font-weight: bold;
   color: #fff;
-  margin: 3px;
 }
 
-.links a::after {
-  content: "|";
-  margin: 5px;
+.tileItem {
+  border-right: 0.05em solid white;
+  padding: 0.5em;
 }
 
-.links a:last-child::after {
-  content: "";
+.tileItem:last-child {
+  border-right: none;
 }
 
 .logo {
@@ -102,12 +92,9 @@ input[type="checkbox"] {
 
 .transparent-tile {
   background: rgba(0, 0, 0, 0.5);
-  margin: 10px 15px 25px 0;
+  margin: 10px 10px 10px 0;
   padding: 15px 20px;
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 5px;
-}
-
-.counter {
-  display: inline-block;
+  display: inline-flex;
 }