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)} + + + ); } diff --git a/client/src/components/layouts/global.css b/client/src/components/layouts/global.css index 4029c81b4bf..aa638bfb0b1 100644 --- a/client/src/components/layouts/global.css +++ b/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, diff --git a/cypress/e2e/default/learn/challenges/multifile-cert-project.ts b/cypress/e2e/default/learn/challenges/multifile-cert-project.ts index 02103ba9f0d..9b402a6af38 100644 --- a/cypress/e2e/default/learn/challenges/multifile-cert-project.ts +++ b/cypress/e2e/default/learn/challenges/multifile-cert-project.ts @@ -1,9 +1,10 @@ const save1text = 'save 1'; const save2text = 'save 2'; -const selectors = { +const editorElements = { editor: '.react-monaco-editor-container', - saveCodeBtn: '[data-cy="save-code-to-database-btn"]' + saveCodeBtn: '[data-cy="save-code-to-database-btn"]', + closeFlash: '.close' }; describe('multifileCertProjects', function () { @@ -21,33 +22,41 @@ describe('multifileCertProjects', function () { it('should save and reload user code', function () { // save to database (savedChallenges) when clicking save code button - cy.get(selectors.editor).click().focused().clear().type(save1text); - cy.get(selectors.saveCodeBtn).click(); + cy.get(editorElements.editor).click().focused().clear().type(save1text); + cy.get(editorElements.saveCodeBtn).click(); cy.contains('Your code was saved to the database.'); // load saved code on a hard refresh cy.reload(); cy.contains(save1text); }); - it('should save to using ctrl+s hotkey and persist through navigation', function () { + it('should save using ctrl+s hotkey and persist through navigation', function () { // since rapid clicks will cause the save requests to be ignored, we have to // purge the db: cy.exec('npm run seed'); // and the redux store: cy.reload(); - cy.get(selectors.editor) + cy.get(editorElements.editor) .click() .focused() .clear() .type(`${save2text}{ctrl+s}`); cy.contains('Your code was saved to the database.'); + cy.get(editorElements.closeFlash).click(); // load saved code when navigating site (no hard refresh)' cy.contains('Responsive Web Design Projects').click(); cy.contains('In this Responsive Web Design Certification'); cy.contains('Build a Tribute Page').click(); cy.contains(save2text); // trigger the warning about saving too quickly - cy.get(selectors.saveCodeBtn).click().click(); + cy.reload(); + cy.get(editorElements.editor) + .click() + .focused() + .type(`{ctrl+s}`) + // wait a few ms or it's too fast + .wait(500) + .type(`{ctrl+s}`); cy.contains('Your code was not saved.'); }); });