diff --git a/components/frontend/src/header_footer/Footer.css b/components/frontend/src/header_footer/Footer.css index acf926facc..1d6848b613 100644 --- a/components/frontend/src/header_footer/Footer.css +++ b/components/frontend/src/header_footer/Footer.css @@ -1,11 +1,11 @@ -@media print { - div.footer { - display: none; - } +.MuiDivider-root { + padding: 20px; } -div.footer { - background-color: var(--inverted-menu-background-color) !important; - margin: 5em 0em 0em !important; - padding: 5em 0em 3em !important; +.MuiDivider-root:before { + border-top: thin solid rgba(255, 255, 255, 0.3) !important; +} + +.MuiDivider-root:after { + border-top: thin solid rgba(255, 255, 255, 0.3) !important; } diff --git a/components/frontend/src/header_footer/Footer.js b/components/frontend/src/header_footer/Footer.js index 80391fca3b..a4a97eec6f 100644 --- a/components/frontend/src/header_footer/Footer.js +++ b/components/frontend/src/header_footer/Footer.js @@ -1,122 +1,112 @@ import "./Footer.css" -import { number, object, oneOfType, string } from "prop-types" -import { Container, Divider, Grid, Header, Icon, Image, List, Segment } from "semantic-ui-react" +import BugReportIcon from "@mui/icons-material/BugReport" +import CopyrightIcon from "@mui/icons-material/Copyright" +import FeedbackIcon from "@mui/icons-material/Feedback" +import GitHubIcon from "@mui/icons-material/GitHub" +import HistoryIcon from "@mui/icons-material/History" +import MenuBookIcon from "@mui/icons-material/MenuBook" +import PersonIcon from "@mui/icons-material/Person" +import ScienceIcon from "@mui/icons-material/Science" +import { + Container, + Divider, + List, + ListItem, + ListItemButton, + ListItemIcon, + ListItemText, + Stack, + Typography, +} from "@mui/material" +import { element, object, oneOfType, string } from "prop-types" import { alignmentPropType, childrenPropType, datePropType, reportPropType } from "../sharedPropTypes" function FooterItem({ children, icon, url }) { - const item = icon ? ( - <> - {children} - - ) : ( - children - ) - return url ? ( - - {item} - - ) : ( - {item} - ) + const color = "silver" + let item = {children} + if (icon) { + item = ( + <> + {icon} + {item} + + ) + } + if (url) { + item = ( + + {item} + + ) + } + return {item} } FooterItem.propTypes = { children: childrenPropType, - icon: string, + icon: element, url: string, } -function FooterColumn({ children, header, textAlign, width }) { +function FooterColumn({ children, header, textAlign }) { return ( - -
- {header || <>‌} -
- - {children} - - + + {header || <>‌} + {children} + ) } FooterColumn.propTypes = { children: childrenPropType, header: oneOfType([object, string]), textAlign: alignmentPropType, - width: number, -} - -function FooterCenterColumn({ header, children }) { - return ( - - {children} - - ) -} -FooterCenterColumn.propTypes = { - header: oneOfType([object, string]), - children: childrenPropType, -} - -function FooterSideColumn({ header, children }) { - return ( - - {children} - - ) -} -FooterSideColumn.propTypes = { - header: oneOfType([object, string]), - children: childrenPropType, } function AboutAppColumn() { return ( - - Quality-time v{process.env.REACT_APP_VERSION} - - } - > - + Quality-time v{process.env.REACT_APP_VERSION}}> + } url="https://www.ictu.nl/about-us"> Created by ICTU - + } url="https://github.com/ICTU/quality-time/blob/master/LICENSE"> License } url={`https://quality-time.readthedocs.io/en/v${process.env.REACT_APP_VERSION}/changelog.html`} > Changelog - + } url="https://github.com/ICTU/quality-time"> Source code - + ) } function SupportColumn() { return ( - - + + } + url={`https://quality-time.readthedocs.io/en/v${process.env.REACT_APP_VERSION}/`} + > Documentation } url={`https://quality-time.readthedocs.io/en/v${process.env.REACT_APP_VERSION}/usage.html`} > User manual - + } url="https://github.com/ICTU/quality-time/issues"> Known issues - + } url="https://github.com/ICTU/quality-time/issues/new"> Report an issue - + ) } @@ -126,12 +116,12 @@ function AboutReportColumn({ lastUpdate, report }) { // browser pass the correct URL as search parameter and use that instead: const reportURL = new URLSearchParams(window.location.search).get("report_url") ?? window.location.href return ( - + {report.title} {report.subtitle} {lastUpdate.toLocaleDateString()} {lastUpdate.toLocaleTimeString()} - + ) } AboutReportColumn.propTypes = { @@ -149,7 +139,7 @@ function QuoteColumn() { ] const randomQuote = quotes[Math.floor(Math.random() * quotes.length)] return ( - + {randomQuote[0]} @@ -157,27 +147,30 @@ function QuoteColumn() { {randomQuote[1]} {randomQuote[2]} - + ) } export function Footer({ lastUpdate, report }) { return ( - - - - - - - {report ? : } - - - - - - + + + + + {report ? : } + + + - + ) } Footer.propTypes = {