feat(client): fix the position of flash message (#48911)

* feat(client): fix the position of flash message

* WIP: move the alert message to header

* fix: cypress

* remove the spacing effect

* Revert "WIP: move the alert message to header"

This reverts commit f5242d261a.

* feat: new feature!

* Revert "feat: new feature!"

This reverts commit f6c403cc80.

* Revert "fix: cypress"

This reverts commit c24c1d8440.

* feat: add reverted cypress test

Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>

* center the close alert button

Co-authored-by: Sanjeev <sanjeevranjan.singh08@gmail.com>

Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>
Co-authored-by: Sanjeev <sanjeevranjan.singh08@gmail.com>

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 (
-    <>
-      <TransitionGroup>
-        <CSSTransition classNames='flash-message' key={id} timeout={500}>
-          <Alert
-            bsStyle={type}
-            className='flash-message'
-            closeLabel={t('buttons.close')}
-            onDismiss={handleClose}
-          >
-            {t(message, variables)}
-          </Alert>
-        </CSSTransition>
-      </TransitionGroup>
-      {flashMessage && (
-        <div
-          style={{
-            height: `${flashMessageHeight}px`
-          }}
-        />
-      )}
-    </>
+    <TransitionGroup>
+      <CSSTransition classNames='flash-message' key={id} timeout={500}>
+        <Alert
+          bsStyle={type}
+          className='flash-message'
+          closeLabel={t('buttons.close')}
+          onDismiss={handleClose}
+        >
+          {t(message, variables)}
+        </Alert>
+      </CSSTransition>
+    </TransitionGroup>
   );
 }
 

client/src/components/layouts/global.css

@@ -644,6 +644,10 @@ blockquote .small {
   border-color: #31708f;
 }
 
+.alert-dismissable .close {
+  top: 0;
+}
+
 .annual-donation-alert {
   background: linear-gradient(
       -10deg,