mirror of
https://github.com/navidrome/navidrome.git
synced 2025-12-23 15:08:04 -05:00
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:
@@ -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) => (
|
||||
<>
|
||||
<ChangePublicStatusButton public={true} {...props} />
|
||||
<ChangePublicStatusButton public={false} {...props} />
|
||||
<BulkDeleteButton {...props} />
|
||||
</>
|
||||
)
|
||||
const PlaylistListBulkActions = (props) => {
|
||||
const classes = useStyles()
|
||||
return (
|
||||
<>
|
||||
<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'))
|
||||
|
||||
Reference in New Issue
Block a user