diff --git a/src/components/LastUpdatedCell/LastUpdatedCell.js b/src/components/LastUpdatedCell/LastUpdatedCell.js index 6729508..82221fc 100644 --- a/src/components/LastUpdatedCell/LastUpdatedCell.js +++ b/src/components/LastUpdatedCell/LastUpdatedCell.js @@ -1,45 +1,49 @@ import React from 'react' import PropTypes from "prop-types"; +import { useTheme } from '@material-ui/core'; import { red } from '@material-ui/core/colors'; import RelativeTime from 'react-relative-time'; import ItemTableCell from '../ItemTableCell'; -/** - * Returns a color showing how old an item is. - * @param {string} time ISO 8601 formatted time string. - * @example - * // Returns "#e57373" - * timeToBackgroundColor("2021-01-04T11:47:00-0500") - * @returns {string} Hex color code. - */ -const timeToBackgroundColor = (time) => { - const lastUpdated = new Date(time).getTime(); - const now = new Date().getTime(); - const timeDelta = now - lastUpdated; +export default function LastUpdatedCell({ time, ItemTableCellProps }) { - const day = 24 * 60 * 60 * 1000; - const week = day * 7; - const month = week * 4; + const theme = useTheme(); - let backgroundColor = "white"; + /** + * Returns a color showing how old an item is. + * @param {string} time ISO 8601 formatted time string. + * @example + * // Returns "#e57373" + * timeToBackgroundColor("2021-01-04T11:47:00-0500") + * @returns {string} Hex color code. + */ + const timeToBackgroundColor = (time) => { + const lastUpdated = new Date(time).getTime(); + const now = new Date().getTime(); + const timeDelta = now - lastUpdated; - // 1-6 days old - if (timeDelta > day && timeDelta <= week) { - backgroundColor = red[100]; - } - // 7-28 days old - else if (timeDelta > week && timeDelta <= month) { - backgroundColor = red[300]; - } - // 29+ days old - else if (timeDelta > month) { - backgroundColor = red[500]; - } + const day = 24 * 60 * 60 * 1000; + const week = day * 7; + const month = week * 4; - return backgroundColor; -} + let backgroundColor = theme.palette.background.paper; + + // 1-6 days old + if (timeDelta > day && timeDelta <= week) { + backgroundColor = red[100]; + } + // 7-28 days old + else if (timeDelta > week && timeDelta <= month) { + backgroundColor = red[300]; + } + // 29+ days old + else if (timeDelta > month) { + backgroundColor = red[500]; + } + + return backgroundColor; + } -export default function LastUpdatedCell({ time, ItemTableCellProps }) { // Insert the calculated background color into props so it isn't overriden. // Inspired by: https://github.com/mui-org/material-ui/issues/19479 ItemTableCellProps = {