LastUpdated cell does not support hover or banded row styling

[campb303]

The LastUpdatedCell component does not work with the rest of the table to support banded rows or hover effects. This is likely due to the background color being set to white by default. Instead, this may need to be set to inherit by default with the :hover psuedo class also being inherited.

[wrigh393]

To address this issue I made two changes to how this styling works.

LastUpdatedCell styling

Addressing the non-colored cells just required changing the default value of backgroundColor to inherit. Here is a code diff for reference

Code

 const timeToBackgroundColor = (time) => {
        const lastUpdated = new Date(time).getTime();
        const now = new Date().getTime();
        const timeDelta = now - lastUpdated;

        const day = 24 * 60 * 60 * 1000;
        const week = day * 7;
        const month = week * 4;

+       let backgroundColor = "inherit";
-        let backgroundColor = theme.palette.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;
    }

Hover styling

Next in the ItemTable where the hover styles are defined, I added the child combinator (>) to the CSS that is applied when the rows are hovered over. What this does is select the elements that are direct descendants of the parent element. In our case, the parent element is the row containing the cells so this will apply the hover styles to all children of a row, which would be all the cells. Below is a code diff and a screenshot of the UI.

Code

    hoverBackgroundColor: {
+            "&:hover > *": {
-            "&:hover ": {
                // The !important is placed here to enforce CSS specificity.
                // See: https://material-ui.com/styles/advanced/#css-injection-order
                backgroundColor: `${theme.palette.primary[200]} !important`,
            },
        },

UI