diff --git a/client/src/components/Flash/index.tsx b/client/src/components/Flash/index.tsx index 6accd829365..e753212cf45 100644 --- a/client/src/components/Flash/index.tsx +++ b/client/src/components/Flash/index.tsx @@ -1,5 +1,5 @@ import { Alert } from '@freecodecamp/react-bootstrap'; -import React, { useState, useEffect } from 'react'; +import React from 'react'; import { useTranslation } from 'react-i18next'; import { TransitionGroup, CSSTransition } from 'react-transition-group'; import { FlashState } from '../../redux/types'; @@ -15,45 +15,24 @@ type FlashProps = { function Flash({ flashMessage, removeFlashMessage }: FlashProps): JSX.Element { const { type, message, id, variables } = flashMessage; const { t } = useTranslation(); - const [flashMessageHeight, setFlashMessageHeight] = useState(0); - - useEffect(() => { - const flashMessageElem: HTMLElement | null = - document.querySelector('.flash-message'); - setFlashMessageHeight(flashMessageElem?.offsetHeight || 0); - document.documentElement.style.setProperty( - '--flash-message-height', - `${flashMessageHeight}px` - ); - }, [flashMessageHeight]); function handleClose() { - document.documentElement.style.setProperty('--flash-message-height', '0px'); removeFlashMessage(); } return ( - <> - - - - {t(message, variables)} - - - - {flashMessage && ( -
- )} - + + + + {t(message, variables)} + + + ); }