Body/Home/Elements/Footer.js

import React from "react";
import clsx from "clsx";
import { makeStyles } from "@material-ui/core/styles";
import styles from "../styles/Footer.module.css";
import CustomTooltip from "../../../Utils/DataDisplay/CustomTooltip";
import { StyledIconButton } from "../../../Utils/Buttons";
import Typography from "@material-ui/core/Typography";
import GitHub from "@material-ui/icons/GitHub";

const useStyles = makeStyles(theme => ({
    root: {
        backgroundColor: theme.palette.background.main1,
        color: theme.palette.text.main1
    }
}), {name: "Footer"});

/**
 * <h3>Overview</h3>
 * An element displayed at the bottom of the {@link Home} page. There is a list of authors on the left
 * and a button linking to a GitHub repository on the right.
 *
 * @constructor
 * @category Home
 * @subcategory Elements
 * @returns {React.ReactElement}
 */
function Footer() {
    const classes = useStyles();
    return (
        <footer className={clsx(styles.Root, classes.root)} id={"home-footer"}>
            <Typography variant={"caption"}>
                {"Copyright \u00A9 2020 Tomasz Dzięcioł, Dominik Szmyt, Michał Zimny"}
            </Typography>
            <CustomTooltip
                arrow={true}
                enterDelay={500}
                enterNextDelay={500}
                placement={"top"}
                title={"Open GitHub repository"}
            >
                <StyledIconButton
                    component={"a"}
                    href={"https://github.com/dominieq/rule-studio"}
                    rel={"external"}
                    target={"_blank"}
                >
                    <GitHub />
                </StyledIconButton>
            </CustomTooltip>
        </footer>
    );
}

export default Footer;