Implemented code for hover styling in ItemTable

ECN · Jan 12, 2021 · 0df01d7 · 0df01d7
1 parent 781cfd4
commit 0df01d7
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
@@ -21,6 +21,12 @@ export default function ItemTable({ data, rowCanBeSelected }) {
         inactiveSortIcon: {
             opacity: 0.2,
         },
+        hoverBackgroundColor: {
+            "&.MuiTableRow-root.MuiTableRow-hover:hover":{
+                backgroundColor: theme.palette.primary[200],
+
+            },       
+        },
         rowSelected: {
             backgroundColor: theme.palette.type === 'light' ? theme.palette.primary[100] : theme.palette.primary[600],
         },
@@ -126,14 +132,16 @@ 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