Merge pull request #167 from ECN/enhancement-lastupdated-styling

Enhancement lastupdated styling
ECN · Jan 22, 2021 · ebcda1d · ebcda1d
2 parents f3aa06f + 34b73ca
commit ebcda1d
Showing 1 changed file with 35 additions and 31 deletions.
diff --git 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 = {