diff --git a/src/Footer/alertDialog.js b/src/Footer/alertDialog.js
new file mode 100644
index 0000000..91447d7
--- /dev/null
+++ b/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 (
+
+ {this.label}
+
+ {this.title}
+
+
+ {this.contentText}
+
+
+
+
+ );
+ }
+}
+
+export default AlertDialog;
diff --git a/src/Footer/footer.js b/src/Footer/footer.js
new file mode 100644
index 0000000..5c1db2b
--- /dev/null
+++ b/src/Footer/footer.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import AlertDialog from './alertDialog';
+
+import "../styles.css";
+
+const footer = props => (
+
+);
+
+export default footer;
diff --git a/src/GithubLinks/LinkTypes/link.js b/src/GithubLinks/LinkTypes/link.js
index fe35c43..1e927a2 100644
--- a/src/GithubLinks/LinkTypes/link.js
+++ b/src/GithubLinks/LinkTypes/link.js
@@ -1,7 +1,7 @@
import React from 'react';
const link = props => (
-
+
{props.children}
);
diff --git a/src/GithubLinks/githubLinks.js b/src/GithubLinks/githubLinks.js
index 6743a82..8b529ca 100644
--- a/src/GithubLinks/githubLinks.js
+++ b/src/GithubLinks/githubLinks.js
@@ -4,10 +4,10 @@ import Link from './LinkTypes/link';
import "../styles.css";
const githubLinks = props => (
-
-
Made by 5k-mirrors
-
Hosted by GitHub
-
Report issue
+
+ Made by 5k-mirrors
+ Hosted by GitHub
+ Report issue
);
diff --git a/src/index.js b/src/index.js
index f4d41c9..1d2ca01 100644
--- a/src/index.js
+++ b/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 {
PoE Relic Checklist
+
);
diff --git a/src/list.js b/src/list.js
index 5d11834..05b6ed0 100644
--- a/src/list.js
+++ b/src/list.js
@@ -110,7 +110,7 @@ class List extends React.Component {
return (
-
+
{this.state.checklist.length} / {this.sumOfRelics}
diff --git a/src/styles.css b/src/styles.css
index 223352c..96615e2 100644
--- a/src/styles.css
+++ b/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;
}