fix(ui): improve playlist bulk action button contrast on dark themes

The bulk action buttons (Make Public, Make Private, Delete) on the playlists list were displaying with poor text contrast when using dark themes like AMusic. The buttons had pinkish text (theme's primary color) on a dark red background, making them difficult to read.

This fix applies the same styling pattern used for song bulk actions by adding a makeStyles hook that sets white text color for dark themes. This ensures proper contrast between the button text and background while maintaining correct styling on light themes.

Tested on AMusic (dark) and Light themes to verify contrast improvement and backward compatibility.

Signed-off-by: Deluan <deluan@navidrome.org>
This commit is contained in:
Deluan
2025-12-03 14:36:47 -05:00
parent 5bc26de0e7
commit 86f929499e

View File

@@ -16,6 +16,7 @@ import {
usePermissions,
} from 'react-admin'
import Switch from '@material-ui/core/Switch'
import { makeStyles } from '@material-ui/core/styles'
import { useMediaQuery } from '@material-ui/core'
import {
DurationField,
@@ -28,6 +29,12 @@ import {
import PlaylistListActions from './PlaylistListActions'
import ChangePublicStatusButton from './ChangePublicStatusButton'
const useStyles = makeStyles((theme) => ({
button: {
color: theme.palette.type === 'dark' ? 'white' : undefined,
},
}))
const PlaylistFilter = (props) => {
const { permissions } = usePermissions()
return (
@@ -112,13 +119,24 @@ const ToggleAutoImport = ({ resource, source }) => {
) : null
}
const PlaylistListBulkActions = (props) => (
const PlaylistListBulkActions = (props) => {
const classes = useStyles()
return (
<>
<ChangePublicStatusButton public={true} {...props} />
<ChangePublicStatusButton public={false} {...props} />
<BulkDeleteButton {...props} />
<ChangePublicStatusButton
public={true}
{...props}
className={classes.button}
/>
<ChangePublicStatusButton
public={false}
{...props}
className={classes.button}
/>
<BulkDeleteButton {...props} className={classes.button} />
</>
)
}
const PlaylistList = (props) => {
const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))