From 44865c2ef7a276097f86d8576f50e1c412a4eaba Mon Sep 17 00:00:00 2001 From: Tyler Jordan Wright Date: Wed, 4 Nov 2020 14:25:46 -0500 Subject: [PATCH] Changed color of selected row to a color that is easier to see --- src/components/ItemTable/ItemTable.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index a45d8ed..cbc1bf2 100644 --- 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 => (