From c57fa7a8fcdd9ba30e68678154005b4ab14de1b8 Mon Sep 17 00:00:00 2001
From: Shishir A S <shishir.srik@gmail.com>
Date: Tue, 6 Apr 2021 19:32:44 +0530
Subject: [PATCH] Fixes play icon color in "Light" theme (#972)

* fix(ui/src/album): White play button on hover for all themes - #960

* fix(PlayButton) : White play button for light theme - #960

* fix(PlayButton) : White play button for light theme - #960

* bug(AlbumGridView.js) - Album play button defaults to white, can be overridden - #960

Signed-off-by: Shishir <shishir.srik@gmail.com>

* bug(AlbumGridView.js) - Album play button defaults to white, can be overridden - #960

* Reverted package.json and package-lock.json - #960

Signed-off-by: Shishir <shishir.srik@gmail.com>

* Missing lint script added - #960

Signed-off-by: Shishir <shishir.srik@gmail.com>

* Removed color, added className and made record required in PlayButton.propTypes - #960
---
 ui/src/album/AlbumGridView.js |  3 +--
 ui/src/common/PlayButton.js   | 17 ++++-------------
 2 files changed, 5 insertions(+), 15 deletions(-)

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={
             <PlayButton
               className={classes.albumPlayButton}
-              color={'white'}
               record={record}
               size="small"
             />
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}
     >
       <PlayArrowIcon fontSize={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 = {