diff --git a/src/contexts/toasts-manager/index.tsx b/src/contexts/toasts-manager/index.tsx index f8ffd643..343b2897 100644 --- a/src/contexts/toasts-manager/index.tsx +++ b/src/contexts/toasts-manager/index.tsx @@ -36,16 +36,6 @@ function ToastsManagerController({ children }: { children: ReactNode }) { [t], ) - const defaultIcons = useMemo>( - () => ({ - [BusEvents.success]: 'check', - [BusEvents.error]: 'errorOutline', - [BusEvents.warning]: 'warningAmber', - [BusEvents.info]: 'info', - }), - [], - ) - const defaultMessages = useMemo( () => ({ [BusEvents.success]: t('notifications.default-message-success'), @@ -56,6 +46,16 @@ function ToastsManagerController({ children }: { children: ReactNode }) { [t], ) + const defaultIcons = useMemo>( + () => ({ + [BusEvents.success]: 'check', + [BusEvents.error]: 'errorOutline', + [BusEvents.warning]: 'warningAmber', + [BusEvents.info]: 'info', + }), + [], + ) + const showToast = useCallback( (messageType = BusEvents.info, payload: ToastPayload) => { const title = payload?.title || defaultTitles[messageType] diff --git a/src/contexts/toasts-manager/toasts/DefaultToast.tsx b/src/contexts/toasts-manager/toasts/DefaultToast.tsx index 20568176..785821f4 100644 --- a/src/contexts/toasts-manager/toasts/DefaultToast.tsx +++ b/src/contexts/toasts-manager/toasts/DefaultToast.tsx @@ -1,4 +1,4 @@ -import { Alert, AlertColor, AlertTitle } from '@mui/material' +import { Alert, AlertColor, AlertTitle, Typography } from '@mui/material' import { CustomContentProps, SnackbarContent, useSnackbar } from 'notistack' import { forwardRef, useMemo } from 'react' @@ -46,7 +46,7 @@ const DefaultToast = forwardRef((props: Props, ref) => { onClose={() => closeSnackbar(id)} > {title} - {message} + {message} ) diff --git a/src/theme/components.ts b/src/theme/components.ts index 53cc092c..b52ce190 100644 --- a/src/theme/components.ts +++ b/src/theme/components.ts @@ -1,4 +1,4 @@ -import { Components, Theme } from '@mui/material' +import { AlertColor, alpha, Components, Theme } from '@mui/material' import { ICON_COMPONENTS } from '@/enums' @@ -373,4 +373,43 @@ export const components: Components> = { }), }, }, + MuiAlert: { + styleOverrides: { + root: ({ theme }) => ({ + width: '100%', + borderRadius: theme.spacing(4), + backgroundColor: theme.palette.additional.pureBlack, + color: alpha(theme.palette.common.white, 0.7), + }), + icon: ({ ownerState, theme }) => { + const severityToBgColor: Record = { + success: alpha(theme.palette.success.main, 0.2), + warning: alpha(theme.palette.warning.main, 0.2), + error: alpha(theme.palette.error.main, 0.2), + info: alpha(theme.palette.info.main, 0.2), + } + + return { + backgroundColor: severityToBgColor[ownerState.severity ?? 'info'], + marginRight: theme.spacing(4), + marginTop: 'auto', + marginBottom: 'auto', + padding: theme.spacing(2), + borderRadius: theme.spacing(25), + } + }, + message: ({ theme }) => ({ + paddingTop: theme.spacing(4), + paddingBottom: theme.spacing(4), + }), + }, + }, + MuiAlertTitle: { + styleOverrides: { + root: ({ theme }) => ({ + ...typography.subtitle4, + color: theme.palette.common.white, + }), + }, + }, }