diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx index 8e6a5d42551..f7b149d78e8 100644 --- a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx +++ b/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx @@ -197,16 +197,7 @@ const PREFIX = 'RaBulkDeleteWithConfirmButton'; const StyledButton = styled(Button, { name: PREFIX, overridesResolver: (props, styles) => styles.root, -})(({ theme }) => ({ - color: (theme.vars || theme).palette.error.main, - '&:hover': { - backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.error.main}, transparent 12%)`, - // Reset on mouse devices - '@media (hover: none)': { - backgroundColor: 'transparent', - }, - }, -})); +})(() => ({})); const defaultIcon = ; diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx b/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx index bf215ba0dd7..e8950e0b23a 100644 --- a/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx +++ b/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx @@ -98,6 +98,7 @@ export const BulkDeleteWithUndoButton = ( onClick={handleClick} label={label} disabled={isPending} + color="error" {...sanitizeRestProps(rest)} > {icon} @@ -131,16 +132,7 @@ const PREFIX = 'RaBulkDeleteWithUndoButton'; const StyledButton = styled(Button, { name: PREFIX, overridesResolver: (props, styles) => styles.root, -})(({ theme }) => ({ - color: (theme.vars || theme).palette.error.main, - '&:hover': { - backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.error.main}, transparent 12%)`, - // Reset on mouse devices - '@media (hover: none)': { - backgroundColor: 'transparent', - }, - }, -})); +})(() => ({})); declare module '@mui/material/styles' { interface ComponentNameToClassKey { diff --git a/packages/ra-ui-materialui/src/button/BulkUpdateWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/BulkUpdateWithConfirmButton.tsx index a32df5fe412..6358ba332ab 100644 --- a/packages/ra-ui-materialui/src/button/BulkUpdateWithConfirmButton.tsx +++ b/packages/ra-ui-materialui/src/button/BulkUpdateWithConfirmButton.tsx @@ -195,16 +195,7 @@ const PREFIX = 'RaBulkUpdateWithConfirmButton'; const StyledButton = styled(Button, { name: PREFIX, overridesResolver: (props, styles) => styles.root, -})(({ theme }) => ({ - color: (theme.vars || theme).palette.primary.main, - '&:hover': { - backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.primary.main}, transparent 12%)`, - // Reset on mouse devices - '@media (hover: none)': { - backgroundColor: 'transparent', - }, - }, -})); +})(() => ({})); const defaultIcon = ; diff --git a/packages/ra-ui-materialui/src/button/BulkUpdateWithUndoButton.tsx b/packages/ra-ui-materialui/src/button/BulkUpdateWithUndoButton.tsx index cd5fe33dcd9..e612ceb30cf 100644 --- a/packages/ra-ui-materialui/src/button/BulkUpdateWithUndoButton.tsx +++ b/packages/ra-ui-materialui/src/button/BulkUpdateWithUndoButton.tsx @@ -141,16 +141,7 @@ const PREFIX = 'RaBulkUpdateWithUndoButton'; const StyledButton = styled(Button, { name: PREFIX, overridesResolver: (props, styles) => styles.root, -})(({ theme }) => ({ - color: (theme.vars || theme).palette.primary.main, - '&:hover': { - backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.primary.main}, transparent 12%)`, - // Reset on mouse devices - '@media (hover: none)': { - backgroundColor: 'transparent', - }, - }, -})); +})(() => ({})); declare module '@mui/material/styles' { interface ComponentNameToClassKey { diff --git a/packages/ra-ui-materialui/src/button/SelectAllButton.tsx b/packages/ra-ui-materialui/src/button/SelectAllButton.tsx index 4e3c73c81fb..b559515313c 100644 --- a/packages/ra-ui-materialui/src/button/SelectAllButton.tsx +++ b/packages/ra-ui-materialui/src/button/SelectAllButton.tsx @@ -107,15 +107,7 @@ const PREFIX = 'RaSelectAllButton'; const StyledButton = styled(Button, { name: PREFIX, overridesResolver: (props, styles) => styles.root, -})(({ theme }) => ({ - '&:hover': { - backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.primary.main}, transparent 12%)`, - // Reset on mouse devices - '@media (hover: none)': { - backgroundColor: 'transparent', - }, - }, -})); +})(() => ({})); declare module '@mui/material/styles' { interface ComponentNameToClassKey { diff --git a/packages/ra-ui-materialui/src/list/BulkActionsToolbar.tsx b/packages/ra-ui-materialui/src/list/BulkActionsToolbar.tsx index 3e9ab58faa8..4e56111a3ad 100644 --- a/packages/ra-ui-materialui/src/list/BulkActionsToolbar.tsx +++ b/packages/ra-ui-materialui/src/list/BulkActionsToolbar.tsx @@ -10,6 +10,7 @@ import { styled, useThemeProps, lighten, + darken, } from '@mui/material/styles'; import clsx from 'clsx'; import Toolbar from '@mui/material/Toolbar'; @@ -69,7 +70,7 @@ export const BulkActionsToolbar = (inProps: BulkActionsToolbarProps) => { color: theme => (theme.vars || theme).palette.text.primary, }} - variant="subtitle1" + variant="body1" > {translate(label, { _: label, @@ -124,7 +125,7 @@ const Root = styled('div', { ? theme.vars.palette.bulkActionsToolbarBackgroundColor : theme.palette.mode === 'light' ? lighten(theme.palette.primary.light, 0.8) - : theme.palette.primary.dark, + : darken(theme.palette.primary.dark, 0.5), minHeight: theme.spacing(6), height: theme.spacing(6), paddingRight: theme.spacing(2), @@ -158,14 +159,12 @@ const Root = styled('div', { [`& .${BulkActionsToolbarClasses.title}`]: { display: 'flex', flex: '0 0 auto', + alignItems: 'center', gap: theme.spacing(1), }, [`& .${BulkActionsToolbarClasses.icon}`]: { marginLeft: '-0.5em', - '&:hover': { - backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.primary.main}, transparent 12%)`, - }, }, })); diff --git a/packages/ra-ui-materialui/src/theme/bwTheme.ts b/packages/ra-ui-materialui/src/theme/bwTheme.ts index 1bdf11da728..061a0e3631f 100644 --- a/packages/ra-ui-materialui/src/theme/bwTheme.ts +++ b/packages/ra-ui-materialui/src/theme/bwTheme.ts @@ -144,6 +144,37 @@ const createBWTheme = (mode: 'light' | 'dark'): ThemeOptions => { }, MuiIconButton: { defaultProps: { disableRipple: true }, + styleOverrides: { + root: { + textTransform: 'none', + boxShadow: 'none', + }, + colorPrimary: { + '&:hover': { + backgroundColor: GREY, + }, + }, + colorSuccess: { + borderColor: isDarkMode + ? alpha(green['500'], 0.7) + : alpha(green['800'], 0.5), + '&:hover': { + borderColor: isDarkMode + ? green['500'] + : green['800'], + }, + }, + colorError: { + borderColor: isDarkMode + ? alpha(deepOrange['600'], 0.7) + : alpha(red['900'], 0.5), + '&:hover': { + borderColor: isDarkMode + ? deepOrange['600'] + : red['900'], + }, + }, + }, }, MuiListItemButton: { defaultProps: { disableRipple: true }, diff --git a/packages/ra-ui-materialui/src/theme/houseTheme.ts b/packages/ra-ui-materialui/src/theme/houseTheme.ts index 5ea059db6b2..0d2bb3bb325 100644 --- a/packages/ra-ui-materialui/src/theme/houseTheme.ts +++ b/packages/ra-ui-materialui/src/theme/houseTheme.ts @@ -61,7 +61,7 @@ const componentsOverrides = (theme: Theme): ThemeOptions['components'] => ({ }, '&.Mui-selected, &.Mui-selected:hover': { color: theme.palette.primary.contrastText, - zIndex: 5, + zIndex: 2, }, '&:hover': { color: theme.palette.primary.main, @@ -165,6 +165,13 @@ const componentsOverrides = (theme: Theme): ThemeOptions['components'] => ({ fullWidth: true, }, }, + RaBulkActionsToolbar: { + styleOverrides: { + toolbar: { + zIndex: 10, + }, + }, + }, }); const alert = { diff --git a/packages/ra-ui-materialui/src/theme/radiantTheme.ts b/packages/ra-ui-materialui/src/theme/radiantTheme.ts index e1d6543e08c..84ef9c6a70d 100644 --- a/packages/ra-ui-materialui/src/theme/radiantTheme.ts +++ b/packages/ra-ui-materialui/src/theme/radiantTheme.ts @@ -144,6 +144,13 @@ const componentsOverrides = (theme: Theme): ThemeOptions['components'] => { fullWidth: true, }, }, + RaBulkActionsToolbar: { + styleOverrides: { + toolbar: { + zIndex: 10, + }, + }, + }, }; };