Update alert style (#45)

* feat: redesign notification * Fix review issues --------- Co-authored-by: ardier16 <[email protected]>
rarimo · Feb 13, 2024 · aec7573 · aec7573
1 parent c9200e3
commit aec7573
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 13 deletions.
diff --git 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<Record<BusEvents, Icons | keyof typeof ICON_COMPONENTS>>(
-    () => ({
-      [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<Record<BusEvents, Icons | keyof typeof ICON_COMPONENTS>>(
+    () => ({
+      [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
@@ -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<HTMLDivElement, Props>((props: Props, ref) => {
         onClose={() => closeSnackbar(id)}
       >
         <AlertTitle>{title}</AlertTitle>
-        {message}
+        <Typography variant={'body4'}>{message}</Typography>
       </Alert>
     </SnackbarContent>
   )

diff --git 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<Omit<Theme, '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<AlertColor, string> = {
+          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,
+      }),
+    },
+  },
 }