Formatting, reorder imports, remove unused styles, simplify hover rule

ECN · Feb 1, 2021 · e6c4877 · e6c4877
1 parent 86b3395
commit e6c4877
Showing 1 changed file with 10 additions and 14 deletions.
diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
@@ -2,29 +2,22 @@ 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 }) {
     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: {
-            "&.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 (
-        <TableContainer component={Paper} >
+        <TableContainer component={Paper}>
             <Table {...getTableProps} aria-label="Table of Queue Items" >
                 <TableHead>
                     {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 => (