Enhancement hover styling

src/components/ItemTable/ItemTable.js

@@ -2,24 +2,23 @@ import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { useTable, useFilters, useFlexLayout, useSortBy } from "react-table";
 import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper, Grid, ButtonGroup, IconButton, makeStyles, useTheme } from "@material-ui/core";
+import { ArrowDownward, ArrowUpward } from "@material-ui/icons";
 import { useHistory } from "react-router-dom";
 import RelativeTime from "react-relative-time";
 import ItemTableFilter from "../ItemTableFilter/"
-import { ArrowDownward, ArrowUpward } from "@material-ui/icons";
 
 
 export default function ItemTable({ data, rowCanBeSelected }) {
-    const [selectedRow, setSelectedRow] = useState({ queue: null, number: null});
+    const [selectedRow, setSelectedRow] = useState({ queue: null, number: null });
 
-    const theme = useTheme(); 
+    const theme = useTheme();
     const useStyles = makeStyles({
-        // Fully visible for active icons
-        activeSortIcon: {
-            opacity: 1,
-        },
-        // Half visible for inactive icons
-        inactiveSortIcon: {
-            opacity: 0.2,
+        hoverBackgroundColor: {
+            "&: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`,
+            },
         },
         rowSelected: {
             backgroundColor: theme.palette.type === 'light' ? theme.palette.primary[100] : theme.palette.primary[600],
@@ -73,7 +72,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
     const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance;
 
     return (
-        <TableContainer component={Paper} >
+        <TableContainer component={Paper}>
             <Table {...getTableProps} aria-label="Table of Queue Items" >
                 <TableHead>
                     {headerGroups.map(headerGroup => (
@@ -126,17 +125,22 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                         let isSelected = selectedRow.queue === row.original.queue && selectedRow.number === row.original.number
                         return (
                             <TableRow
+                                hover
                                 onClick={() => {
                                     history.push(`/${row.original.queue}/${row.original.number}`);
                                     setSelectedRow({ queue: row.original.queue, number: row.original.number });
                                 }}
                                 // This functionality should be achieved by using the selected prop and 
                                 // overriding the selected class but this applied the secondary color at 0.08% opacity.
                                 // Overridding the root class is a workaround.
-                                classes={{ root: (isSelected && rowCanBeSelected) ? classes.rowSelected : classes.bandedRows }}
+                                classes={{
+                                    root: (isSelected && rowCanBeSelected) ? classes.rowSelected : classes.bandedRows,
+                                    hover: classes.hoverBackgroundColor
+                                }}
+
                                 {...row.getRowProps()} >
                                 {row.cells.map(cell => (
-                                    <TableCell 
+                                    <TableCell
                                         classes={{ root: classes.columnBorders }}
                                         {...cell.getCellProps()}
                                     >