fix

osstotalsoft · Nov 29, 2024 · 5bf3253 · 5bf3253
1 parent 73ea17e
commit 5bf3253
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 58 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -10,7 +10,7 @@ const withThemeProvider = (Story, context) => {
   const theme = getTheme(context)
   return (
     <ThemeProvider theme={theme}>
-      <ToastContainer />
+      <ToastContainer textSize='medium' />
       <Story />
     </ThemeProvider>
   )

diff --git a/src/components/feedback/Toast/ToastStyles.ts b/src/components/feedback/Toast/ToastStyles.ts
@@ -1,7 +1,5 @@
 import { styled } from '@mui/material/styles'
-import { maxHeight } from '@mui/system'
-import { white } from 'components/themes/common/palette/basicColors'
-import { includes } from 'ramda'
+import { always, cond, equals, includes, T } from 'ramda'
 
 const PREFIX = 'StyledToast'
 
@@ -16,57 +14,62 @@ export const classes = {
 
 const Container: any = styled('div', {
   shouldForwardProp: prop => !includes(prop, ['textSize'])
-})(({ theme, textSize }: any) => ({
-  [`& .${classes.default}`]: { borderRadius: '6px', padding: '6px 20px' },
-  [`& .${classes.success}`]: {
-    '--toastify-color-success': theme.palette.success.main,
-    '--toastify-text-color-success': theme.palette.success.contrastText,
-    '--toastify-icon-color-success': theme.palette.success.main,
-    '--toastify-color-progress-success': theme.palette.success.main
-  },
-  [`& .${classes.info}`]: {
-    '--toastify-color-info': theme.palette.info.main,
-    '--toastify-text-color-info': theme.palette.info.contrastText,
-    '--toastify-icon-color-info': theme.palette.info.main,
-    '--toastify-color-progress-info': theme.palette.info.main
-  },
-  [`& .${classes.error}`]: {
-    '--toastify-color-error': theme.palette.error.main,
-    '--toastify-text-color-error': theme.palette.error.contrastText,
-    '--toastify-icon-color-error': theme.palette.error.main,
-    '--toastify-color-progress-error': theme.palette.error.main
-  },
-  [`& .${classes.warning}`]: {
-    '--toastify-color-warning': theme.palette.warning.main,
-    '--toastify-text-color-warning': theme.palette.warning.contrastText,
-    '--toastify-icon-color-warning': theme.palette.warning.main,
-    '--toastify-color-progress-warning': theme.palette.warning.main
-  },
-  [`& .${classes.toastWrapper}`]: {
-    borderRadius: '6px',
-    width: '350px',
-    overflowWrap: 'anywhere',
-    // whiteSpace: 'noWrap',
-    // maxHeight: '100%',
-    textOverflow: 'scroll'
-  },
-  ['.Toastify__toast-icon']: {
-    alignSelf: 'auto'
-  },
-  ['.Toastify__close-button']: {
-    background: 'transparent',
-    outline: 'none',
-    border: 'none',
-    padding: 0,
-    cursor: 'pointer',
-    opacity: 1,
-    transition: '0.3s ease',
-    alignSelf: 'auto'
-  },
-  ['.Toastify__toast']: {
-    // ...theme.typography.defaultFont,
-    // fontSize: theme.typography.h6.fontSize
+})(({ theme, textSize }: any) => {
+  const fontSize = cond([
+    [equals('medium'), always(theme.typography.body2.fontSize)],
+    [equals('large'), always(theme.typography.h6.fontSize)],
+    [T, always(theme.typography.defaultFont.fontSize)]
+  ])(textSize)
+
+  return {
+    [`& .${classes.default}`]: { borderRadius: '6px', padding: '6px 20px' },
+    [`& .${classes.success}`]: {
+      '--toastify-color-success': theme.palette.success.main,
+      '--toastify-text-color-success': theme.palette.success.contrastText,
+      '--toastify-icon-color-success': theme.palette.success.main,
+      '--toastify-color-progress-success': theme.palette.success.main
+    },
+    [`& .${classes.info}`]: {
+      '--toastify-color-info': theme.palette.info.main,
+      '--toastify-text-color-info': theme.palette.info.contrastText,
+      '--toastify-icon-color-info': theme.palette.info.main,
+      '--toastify-color-progress-info': theme.palette.info.main
+    },
+    [`& .${classes.error}`]: {
+      '--toastify-color-error': theme.palette.error.main,
+      '--toastify-text-color-error': theme.palette.error.contrastText,
+      '--toastify-icon-color-error': theme.palette.error.main,
+      '--toastify-color-progress-error': theme.palette.error.main
+    },
+    [`& .${classes.warning}`]: {
+      '--toastify-color-warning': theme.palette.warning.main,
+      '--toastify-text-color-warning': theme.palette.warning.contrastText,
+      '--toastify-icon-color-warning': theme.palette.warning.main,
+      '--toastify-color-progress-warning': theme.palette.warning.main
+    },
+    [`& .${classes.toastWrapper}`]: {
+      borderRadius: '6px',
+      width: '350px',
+      overflowWrap: 'anywhere',
+    },
+    ['.Toastify__toast-icon']: {
+      alignSelf: 'auto'
+    },
+    ['.Toastify__close-button']: {
+      background: 'transparent',
+      outline: 'none',
+      border: 'none',
+      padding: 0,
+      cursor: 'pointer',
+      opacity: 1,
+      transition: '0.3s ease',
+      alignSelf: 'auto'
+    },
+    ['.Toastify__toast']: {
+      ...theme.typography.defaultFont,
+      fontSize
+    }
   }
-}))
+})
 
 export default Container
diff --git a/src/components/feedback/Toast/utils.tsx b/src/components/feedback/Toast/utils.tsx
@@ -1,14 +1,13 @@
 import React, { isValidElement } from 'react'
 import { ToastContent } from 'react-toastify'
-import { Stack } from '@mui/material'
 import { is } from 'ramda'
 
 export const renderEnrichedMessage = (message: ToastContent, actions: React.ReactNode) => {
   return actions && (isValidElement(message) || is(String, message)) ? (
-    <Stack rowGap={1}>
+    <>
       {message}
       {actions}
-    </Stack>
+    </>
   ) : (
     message
   )