Changed color of selected row to a color that is easier to see

src/App.js

@@ -73,7 +73,7 @@ function App() {
 
 				<Box className={classes.leftCol}>
 					<ItemTableAppBar title="webqueue2" setDarkMode={setDarkMode} />
-					<ItemTable data={items} onRowClick={ _ => console.log("Clicked!") }/>
+					<ItemTable data={items} rowCanBeSelected={sidebarOpen} />
 				</Box>
 
 				<Box className={clsx(classes.rightCol, sidebarOpen && classes.rightColShift)}>

src/components/ItemTable/ItemTable.js

@@ -7,9 +7,9 @@ import RelativeTime from "react-relative-time";
 import ItemTableFilter from "../ItemTableFilter/"
 import { ArrowDownward, ArrowUpward } from "@material-ui/icons";
 
-export default function ItemTable({ data }) {
+export default function ItemTable({ data, rowCanBeSelected }) {
 
-    const theme = useTheme();
+    const theme = useTheme(); 
     const useStyles = makeStyles({
         // Fully visible for active icons
         activeSortIcon: {
@@ -20,21 +20,18 @@ export default function ItemTable({ data }) {
             opacity: 0.2,
         },
         rowSelected: {
-            "&$selected, &$selected:hover": {
-                backgroundColor: theme.palette.primary,
-            },
+            backgroundColor: theme.palette.type === 'light' ? theme.palette.primary[100] : theme.palette.primary[600],
         },
         bandedRows: {
             '&:nth-of-type(even)': {
                 backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[700],
             },
         },
-
         columnBorders: {
             borderLeftWidth: "1px",
             borderLeftStyle: "solid",
             borderColor: theme.palette.type === "light" ? theme.palette.grey[300] : theme.palette.grey[500]
-        }
+        },
     });
     const classes = useStyles();
 
@@ -134,11 +131,16 @@ export default function ItemTable({ data }) {
                                     history.push(`/${row.original.queue}/${row.original.number}`);
                                     setSelecetedRow({ queue: row.original.queue, number: row.original.number })
                                 }}
-                                classes={{ root: isSelected ? classes.rowSelected : classes.bandedRows }}
-                                selected={selectedRow.queue === row.original.queue && selectedRow.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 }}
                                 {...row.getRowProps()} >
                                 {row.cells.map(cell => (
-                                    <TableCell classes={{ root: classes.columnBorders }} {...cell.getCellProps()}>
+                                    <TableCell 
+                                        classes={{ root: classes.columnBorders }}
+                                        {...cell.getCellProps()}
+                                    >
                                         {cell.render("Cell")}
                                     </TableCell>
                                 ))}
@@ -153,9 +155,12 @@ export default function ItemTable({ data }) {
 
 ItemTable.propTypes = {
     /** Array of items from all active queues to display in table. */
-    "items": PropTypes.array
+    "items": PropTypes.array,
+    /** State variable indicating if rows can be selected. When false, all rows are deselected. */
+    "rowCanBeSelected": PropTypes.bool
 };
 
 ItemTable.defaultProps = {
-    "items": []
+    "items": [],
+    "rowCanBeSelected": true
 };