diff --git a/src/app/components/analysis_cards/alanysis_card.module.css b/src/app/components/analysis_cards/alanysis_card.module.css index 173318b..f452376 100644 --- a/src/app/components/analysis_cards/alanysis_card.module.css +++ b/src/app/components/analysis_cards/alanysis_card.module.css @@ -51,6 +51,7 @@ cursor: pointer; height: 2.4rem; text-indent: 15px; + line-height: 2.4rem; } .form select, .form .long_input { diff --git a/src/app/components/utilities/toast/toast.tsx b/src/app/components/utilities/toast/toast.tsx index 256adc9..4e3cc22 100644 --- a/src/app/components/utilities/toast/toast.tsx +++ b/src/app/components/utilities/toast/toast.tsx @@ -7,9 +7,10 @@ import styles from './toast.module.css'; const Toast = () => { - const { message, status } = useContext(StatusContext); + const { message, setMessage, status } = useContext(StatusContext); const [open, setOpen] = useState(false); const [openTimeout, setOpenTimeout] = useState(null); + const [messageTimeout, setMessageTimeout] = useState(null); const progressRef = useRef(null); const progress: Animation | undefined = progressRef.current?.animate([ @@ -20,15 +21,9 @@ const Toast = () => { fill: 'forwards' }); - useEffect(() => { - const removeMessage = () => { - setOpen(false); - }; - document.addEventListener("click", removeMessage); - }, []); - useEffect(() => { clearTimeout(openTimeout!); + clearTimeout(messageTimeout!); progress?.cancel(); if (message) { @@ -36,17 +31,22 @@ const Toast = () => { setOpen(true); progress?.play(); }, 100); - if(status == StatusType.SUCCESS) { - const openTimeout = setTimeout(() => { - setOpen(false); - }, 4000); - setOpenTimeout(openTimeout); - } + const openTimeout = setTimeout(() => { + setOpen(false); + }, 4000); + setOpenTimeout(openTimeout); + const messageTimeout = setTimeout(() => { + setMessage(null); + }, 4500); + setMessageTimeout(messageTimeout); } }, [message, status]); const onClose = () => { setOpen(false); + setTimeout(() => { + setMessage(null); + }, 500); } return ( @@ -62,7 +62,7 @@ const Toast = () => { - {status == StatusType.SUCCESS &&
} +
); }