diff --git a/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.tsx b/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.tsx index fb6241f58dd6..5c5fabc175ae 100644 --- a/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.tsx +++ b/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.tsx @@ -1,5 +1,5 @@ -import Check from '@mui/icons-material/Check'; -import Close from '@mui/icons-material/Close'; +import Check from '@mui/icons-material/CheckCircle'; +import Warning from '@mui/icons-material/Warning'; import { styled } from '@mui/material'; interface ICheckMarkBadgeProps { @@ -7,40 +7,25 @@ interface ICheckMarkBadgeProps { type?: string; } -const StyledBatch = styled('div')(({ theme }) => ({ - backgroundColor: theme.palette.background.alternative, - width: '75px', - height: '75px', - borderRadius: '50px', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - [theme.breakpoints.down('sm')]: { - width: '50px', - height: '50px', - }, +const StyledCheck = styled(Check)(({ theme }) => ({ + color: + theme.mode === 'light' + ? theme.palette.secondary.border + : theme.palette.primary.main, })); -const StyledClose = styled(Close)(({ theme }) => ({ - color: theme.palette.common.white, - width: '35px', - height: '35px', -})); -const StyledCheck = styled(Check)(({ theme }) => ({ - color: theme.palette.common.white, - width: '35px', - height: '35px', +const StyledCancel = styled(Warning)(({ theme }) => ({ + color: + theme.mode === 'light' + ? theme.palette.warning.border + : theme.palette.warning.main, })); -const CheckMarkBadge = ({ type, className }: ICheckMarkBadgeProps) => { - return ( - - {type === 'error' ? ( - - ) : ( - - )} - +const CheckMarkBadge = ({ type }: ICheckMarkBadgeProps) => { + return type === 'error' ? ( + + ) : ( + ); }; diff --git a/frontend/src/component/common/ToastRenderer/Toast/Toast.styles.ts b/frontend/src/component/common/ToastRenderer/Toast/Toast.styles.ts index 40b68f1f6f7a..cfc8d56b4de9 100644 --- a/frontend/src/component/common/ToastRenderer/Toast/Toast.styles.ts +++ b/frontend/src/component/common/ToastRenderer/Toast/Toast.styles.ts @@ -2,56 +2,49 @@ import { makeStyles } from 'tss-react/mui'; export const useStyles = makeStyles()((theme) => ({ container: { - maxWidth: '450px', - background: theme.palette.background.paper, + alignItems: 'center', + background: + // the background color for this doesn't exist in the theme yet and it's not synchronized across dark/light modes yet. + theme.mode === 'light' ? '#201E42' : theme.palette.background.paper, + + borderRadius: theme.shape.borderRadiusMedium, boxShadow: theme.boxShadows.popup, - zIndex: 500, + display: 'flex', + flexDirection: 'row', + gap: theme.spacing(2), margin: '0 0.8rem', - borderRadius: '12.5px', - padding: '2rem', - }, - innerContainer: { - position: 'relative', + maxWidth: '450px', + padding: theme.spacing(1), + paddingLeft: theme.spacing(2), + zIndex: theme.zIndex.snackbar, + color: theme.palette.common.white, }, starting: { opacity: 0, }, - headerContainer: { - display: 'flex', - alignItems: 'center', - }, - confettiContainer: { - position: 'relative', - maxWidth: '600px', - margin: '0 auto', - display: 'flex', - }, - textContainer: { - marginLeft: '1rem', - wordBreak: 'break-word', - }, headerStyles: { + fontSize: theme.typography.body1.fontSize, fontWeight: 'normal', margin: 0, - marginBottom: '0.5rem', - }, - createdContainer: { - display: 'flex', - alignItems: 'center', - flexDirection: 'column', + maxHeight: '75vh', + overflowY: 'auto', + '&::first-letter': { + textTransform: 'uppercase', + }, }, anim: { animation: `$drop 10s 3s`, }, checkMark: { - width: '65px', - height: '65px', + marginLeft: theme.spacing(1), }, buttonStyle: { - position: 'absolute', - top: '-33px', - right: '-33px', + color: theme.palette.common.white, + svg: { + fontSize: '1em', + }, }, + '@keyframes drop': { '0%': { opacity: '0%', diff --git a/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx b/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx index 52b06f172615..9651009f0b04 100644 --- a/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx +++ b/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx @@ -4,52 +4,13 @@ import { useContext } from 'react'; import { IconButton, Tooltip } from '@mui/material'; import CheckMarkBadge from 'component/common/CheckmarkBadge/CheckMarkBadge'; import UIContext from 'contexts/UIContext'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import Close from '@mui/icons-material/Close'; import type { IToast } from 'interfaces/toast'; -import { TOAST_TEXT } from 'utils/testIds'; -const Toast = ({ title, text, type, confetti }: IToast) => { +const Toast = ({ title, type }: IToast) => { const { setToast } = useContext(UIContext); const { classes: styles } = useStyles(); - const confettiColors = ['#d13447', '#ffbf00', '#263672']; - const confettiAmount = 200; - - const getRandomNumber = (input: number) => { - return Math.floor(Math.random() * input) + 1; - }; - - const renderConfetti = () => { - const elements = new Array(confettiAmount).fill(1); - - const styledElements = elements.map((el, index) => { - const width = getRandomNumber(8); - const length = getRandomNumber(100); - - const style = { - position: 'absolute' as const, - width: `${width}px`, - height: `${width * 0.4}px`, - backgroundColor: confettiColors[getRandomNumber(2)], - left: `${length}%`, - transform: `rotate(${getRandomNumber(101)}deg)`, - animationDelay: `${getRandomNumber(5)}s`, - animationDuration: `${getRandomNumber(3)}s`, - animationEase: `${getRandomNumber(2)}s`, - }; - - return ( -
- ); - }); - - return styledElements; - }; const hide = () => { setToast((prev: IToast) => ({ ...prev, show: false })); @@ -57,40 +18,19 @@ const Toast = ({ title, text, type, confetti }: IToast) => { return (
-
-
- {confetti && renderConfetti()} -
-
-
- -
-
-

{title}

- - {text}

- } - /> -
-
- - - - - -
-
-
+ + +

{title}

+ + + + + +
); }; diff --git a/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx b/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx index 67bb6e3d076c..b354e1710f71 100644 --- a/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx +++ b/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx @@ -22,7 +22,6 @@ const ToastRenderer = () => { const timeout = setTimeout(() => { hide(); }, toastData.autoHideDuration); - return () => { clearTimeout(timeout); }; @@ -36,7 +35,7 @@ const ToastRenderer = () => { right: 0, left: 0, margin: '0 auto', - maxWidth: '450px', + width: 'fit-content', }, enter: fadeInBottomEnter, leave: fadeInBottomLeave, diff --git a/frontend/src/component/user/PasswordAuth.test.tsx b/frontend/src/component/user/PasswordAuth.test.tsx index 38d7699f6355..bffdda6539c5 100644 --- a/frontend/src/component/user/PasswordAuth.test.tsx +++ b/frontend/src/component/user/PasswordAuth.test.tsx @@ -47,9 +47,6 @@ test('should show deleted stale sessions info for Password Auth', async () => { button.click(); await screen.findByText('Maximum Session Limit Reached'); - await screen.findByText( - 'You can have up to 3 active sessions at a time. To enhance your account security, we’ve ended 1 session(s) on other browsers.', - ); }); test('should show deleted stale sessions info for Hosted Auth', async () => { @@ -76,7 +73,4 @@ test('should show deleted stale sessions info for Hosted Auth', async () => { button.click(); await screen.findByText('Maximum Session Limit Reached'); - await screen.findByText( - 'You can have up to 3 active sessions at a time. To enhance your account security, we’ve ended 1 session(s) on other browsers.', - ); }); diff --git a/frontend/src/component/user/Profile/ProfileTab/ProductivityEmailSubscription.test.tsx b/frontend/src/component/user/Profile/ProfileTab/ProductivityEmailSubscription.test.tsx index a06615264e4e..127266787cbc 100644 --- a/frontend/src/component/user/Profile/ProfileTab/ProductivityEmailSubscription.test.tsx +++ b/frontend/src/component/user/Profile/ProfileTab/ProductivityEmailSubscription.test.tsx @@ -100,6 +100,6 @@ test('handle error', async () => { checkbox.click(); - await screen.findByText('user error'); + await screen.findByText('Something went wrong'); expect(changed).toBe(true); });