Merge remote-tracking branch 'origin/enhancement-hover-styling' into …

…staging
ECN · Feb 2, 2021 · c5f48d4 · c5f48d4
2 parents acaf76c + e6c4877
commit c5f48d4
Showing 1 changed file with 13 additions and 10 deletions.
diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
@@ -1,7 +1,7 @@
 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 { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper, Grid, ButtonGroup, IconButton, makeStyles, useTheme } from "@material-ui/core";
 import { useHistory } from "react-router-dom";
 import RelativeTime from "react-relative-time";
 import ItemTableFilter from "../ItemTableFilter/"
@@ -10,17 +10,16 @@ import ItemTableCell from "../ItemTableCell";
 import LastUpdatedCell from "../LastUpdatedCell/";
 
 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 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],
@@ -132,14 +131,18 @@ 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 => (