import { TableCell, TableRow } from "@material-ui/core"
import { withStyles } from "@material-ui/core/styles"

export const StyledTableCell = withStyles(theme => ({
  head: {
    backgroundColor: theme.palette.secondary.light,
    color: theme.palette.secondary.contrastText,
  },
}))(TableCell)

export const StyledSmallTableCell = withStyles(() => ({
  body: {
    fontSize: "small",
    color: "inherit",
  },
}))(TableCell)

export const StyledTableRow = withStyles(theme => ({
  root: {
    "&:nth-of-type(odd)": {
      backgroundColor: theme.palette.background.light,
      color: theme.palette.background.secondary,
    },
    "&:nth-of-type(even)": {
      backgroundColor: theme.palette.background.alternateLight,
      color: theme.palette.background.secondary,
    },
  },
}))(TableRow)
