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

ECN · Nov 4, 2020 · 44865c2 · 44865c2
1 parent 989f148
commit 44865c2
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
@@ -20,9 +20,7 @@ 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)': {
@@ -134,8 +132,10 @@ export default function ItemTable({ data }) {
                                     history.push(`/${row.original.queue}/${row.original.number}`);
                                     setSelecetedRow({ 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 ? classes.rowSelected : classes.bandedRows }}
-                                selected={selectedRow.queue === row.original.queue && selectedRow.number === row.original.number}
                                 {...row.getRowProps()} >
                                 {row.cells.map(cell => (
                                     <TableCell classes={{ root: classes.columnBorders }} {...cell.getCellProps()}>