From 0df01d799edee0f695a547f9735239a667861936 Mon Sep 17 00:00:00 2001 From: wrigh393 Date: Tue, 12 Jan 2021 13:06:20 -0500 Subject: [PATCH 1/3] Implemented code for hover styling in ItemTable --- src/components/ItemTable/ItemTable.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index e45dc63..22250e1 100644 --- 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,6 +132,7 @@ export default function ItemTable({ data, rowCanBeSelected }) { let isSelected = selectedRow.queue === row.original.queue && selectedRow.number === row.original.number return ( { history.push(`/${row.original.queue}/${row.original.number}`); setSelectedRow({ queue: row.original.queue, number: row.original.number }); @@ -133,7 +140,8 @@ export default function ItemTable({ data, rowCanBeSelected }) { // 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 => ( Date: Mon, 1 Feb 2021 10:21:31 -0500 Subject: [PATCH 2/3] Minor formatting changes --- src/components/ItemTable/ItemTable.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index 22250e1..9fad0f0 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -9,9 +9,9 @@ import { ArrowDownward, ArrowUpward } from "@material-ui/icons"; 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 theme = useTheme(); const useStyles = makeStyles({ // Fully visible for active icons activeSortIcon: { @@ -22,10 +22,10 @@ export default function ItemTable({ data, rowCanBeSelected }) { opacity: 0.2, }, hoverBackgroundColor: { - "&.MuiTableRow-root.MuiTableRow-hover:hover":{ + "&.MuiTableRow-root.MuiTableRow-hover:hover": { backgroundColor: theme.palette.primary[200], - - }, + + }, }, rowSelected: { backgroundColor: theme.palette.type === 'light' ? theme.palette.primary[100] : theme.palette.primary[600], @@ -140,11 +140,11 @@ export default function ItemTable({ data, rowCanBeSelected }) { // 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 , hover: classes.hoverBackgroundColor}} + classes={{ root: (isSelected && rowCanBeSelected) ? classes.rowSelected : classes.bandedRows, hover: classes.hoverBackgroundColor }} {...row.getRowProps()} > {row.cells.map(cell => ( - From e6c487701978586699e2f50ed1360cc765c66d52 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Mon, 1 Feb 2021 18:00:13 -0500 Subject: [PATCH 3/3] Formatting, reorder imports, remove unused styles, simplify hover rule --- src/components/ItemTable/ItemTable.js | 24 ++++++++++-------------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index 9fad0f0..081e344 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -2,10 +2,10 @@ 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 { ArrowDownward, ArrowUpward } from "@material-ui/icons"; import { useHistory } from "react-router-dom"; import RelativeTime from "react-relative-time"; import ItemTableFilter from "../ItemTableFilter/" -import { ArrowDownward, ArrowUpward } from "@material-ui/icons"; export default function ItemTable({ data, rowCanBeSelected }) { @@ -13,18 +13,11 @@ export default function ItemTable({ data, rowCanBeSelected }) { const theme = useTheme(); const useStyles = makeStyles({ - // Fully visible for active icons - activeSortIcon: { - opacity: 1, - }, - // Half visible for inactive icons - inactiveSortIcon: { - opacity: 0.2, - }, hoverBackgroundColor: { - "&.MuiTableRow-root.MuiTableRow-hover:hover": { - backgroundColor: theme.palette.primary[200], - + "&: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: { @@ -79,7 +72,7 @@ export default function ItemTable({ data, rowCanBeSelected }) { const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance; return ( - + {headerGroups.map(headerGroup => ( @@ -140,7 +133,10 @@ export default function ItemTable({ data, rowCanBeSelected }) { // 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, hover: classes.hoverBackgroundColor }} + classes={{ + root: (isSelected && rowCanBeSelected) ? classes.rowSelected : classes.bandedRows, + hover: classes.hoverBackgroundColor + }} {...row.getRowProps()} > {row.cells.map(cell => (