diff --git a/ui/src/album/AlbumGridView.js b/ui/src/album/AlbumGridView.js index b0021671..0e53c003 100644 --- a/ui/src/album/AlbumGridView.js +++ b/ui/src/album/AlbumGridView.js @@ -73,7 +73,7 @@ const useStyles = makeStyles( textDecoration: 'none', }, albumContainer: {}, - albumPlayButton: {}, + albumPlayButton: { color: 'white' }, }), { name: 'NDAlbumGridView' } ) @@ -128,7 +128,6 @@ const AlbumGridTile = ({ showArtist, record, basePath }) => { subtitle={ diff --git a/ui/src/common/PlayButton.js b/ui/src/common/PlayButton.js index d2716495..43c3c10b 100644 --- a/ui/src/common/PlayButton.js +++ b/ui/src/common/PlayButton.js @@ -5,16 +5,8 @@ import { IconButton } from '@material-ui/core' import { useDispatch } from 'react-redux' import { useDataProvider } from 'react-admin' import { playTracks } from '../actions' -import { makeStyles } from '@material-ui/core/styles' -const useStyles = makeStyles({ - icon: { - color: (props) => props.color, - }, -}) - -export const PlayButton = ({ record, color, size, ...rest }) => { - const classes = useStyles({ color }) +export const PlayButton = ({ record, size, className }) => { let extractSongsData = function (response) { const data = response.data.reduce( (acc, cur) => ({ ...acc, [cur.id]: cur }), @@ -46,8 +38,7 @@ export const PlayButton = ({ record, color, size, ...rest }) => { playAlbum(record) }} aria-label="play" - className={classes.icon} - {...rest} + className={className} size={size} > @@ -56,9 +47,9 @@ export const PlayButton = ({ record, color, size, ...rest }) => { } PlayButton.propTypes = { - record: PropTypes.object, - color: PropTypes.string, + record: PropTypes.object.isRequired, size: PropTypes.string, + className: PropTypes.string, } PlayButton.defaultProps = {