Fix BulkActions contrast once and for all(?)

ui/src/common/AddToPlaylistButton.js

@@ -1,10 +1,11 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { useDispatch } from 'react-redux'
 import { Button, useTranslate, useUnselectAll } from 'react-admin'
 import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd'
 import { openAddToPlaylist } from '../dialogs/dialogState'
 
-const AddToPlaylistButton = ({ resource, selectedIds }) => {
+const AddToPlaylistButton = ({ resource, selectedIds, className }) => {
   const translate = useTranslate()
   const dispatch = useDispatch()
   const unselectAll = useUnselectAll()
@@ -20,7 +21,7 @@ const AddToPlaylistButton = ({ resource, selectedIds }) => {
       aria-controls="simple-menu"
       aria-haspopup="true"
       onClick={handleClick}
-      color="secondary"
+      className={className}
       label={translate('resources.song.actions.addToPlaylist')}
     >
       <PlaylistAddIcon />
@@ -28,4 +29,10 @@ const AddToPlaylistButton = ({ resource, selectedIds }) => {
   )
 }
 
+AddToPlaylistButton.propTypes = {
+  resource: PropTypes.string.isRequired,
+  selectedIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+  className: PropTypes.object,
+}
+
 export default AddToPlaylistButton

ui/src/common/BatchPlayButton.js

@@ -9,7 +9,14 @@ import {
 } from 'react-admin'
 import { useDispatch } from 'react-redux'
 
-const BatchPlayButton = ({ resource, selectedIds, action, label, icon }) => {
+const BatchPlayButton = ({
+  resource,
+  selectedIds,
+  action,
+  label,
+  icon,
+  className,
+}) => {
   const dispatch = useDispatch()
   const translate = useTranslate()
   const dataProvider = useDataProvider()
@@ -35,7 +42,12 @@ const BatchPlayButton = ({ resource, selectedIds, action, label, icon }) => {
   }
 
   return (
-    <Button color="secondary" onClick={addToQueue} label={translate(label)}>
+    <Button
+      color="secondary"
+      onClick={addToQueue}
+      label={translate(label)}
+      className={className}
+    >
       {icon}
     </Button>
   )
@@ -45,6 +57,7 @@ BatchPlayButton.propTypes = {
   action: PropTypes.func.isRequired,
   label: PropTypes.string.isRequired,
   icon: PropTypes.object.isRequired,
+  className: PropTypes.object,
 }
 
 export default BatchPlayButton

ui/src/common/SongBulkActions.js

@@ -5,8 +5,16 @@ import { RiPlayList2Fill, RiPlayListAddFill } from 'react-icons/ri'
 import PlayArrowIcon from '@material-ui/icons/PlayArrow'
 import { BatchPlayButton } from './index'
 import AddToPlaylistButton from './AddToPlaylistButton'
+import { makeStyles } from '@material-ui/core/styles'
+
+const useStyles = makeStyles((theme) => ({
+  button: {
+    color: theme.palette.type === 'dark' ? 'white' : undefined,
+  },
+}))
 
 const SongBulkActions = (props) => {
+  const classes = useStyles()
   const unselectAll = useUnselectAll()
   useEffect(() => {
     unselectAll(props.resource)
@@ -18,20 +26,23 @@ const SongBulkActions = (props) => {
         action={playTracks}
         label={'resources.song.actions.playNow'}
         icon={<PlayArrowIcon />}
+        className={classes.button}
       />
       <BatchPlayButton
         {...props}
         action={playNext}
         label={'resources.song.actions.playNext'}
         icon={<RiPlayList2Fill />}
+        className={classes.button}
       />
       <BatchPlayButton
         {...props}
         action={addTracks}
         label={'resources.song.actions.addToQueue'}
         icon={<RiPlayListAddFill />}
+        className={classes.button}
       />
-      <AddToPlaylistButton {...props} />
+      <AddToPlaylistButton {...props} className={classes.button} />
     </Fragment>
   )
 }

ui/src/themes/dark.js

@@ -4,7 +4,7 @@ export default {
   themeName: 'Dark',
   palette: {
     primary: {
-      main: '#00fcf4',
+      main: '#90caf9',
     },
     secondary: blue,
     type: 'dark',