diff --git a/client/src/assets/icons/help.tsx b/client/src/assets/icons/help.tsx new file mode 100644 index 00000000000..f745414e83a --- /dev/null +++ b/client/src/assets/icons/help.tsx @@ -0,0 +1,24 @@ +import React from 'react'; + +function Help( + props: JSX.IntrinsicAttributes & React.SVGProps +): JSX.Element { + return ( + <> + + + ); +} + +Help.displayName = 'Help'; + +export default Help; diff --git a/client/src/assets/icons/reset.tsx b/client/src/assets/icons/reset.tsx new file mode 100644 index 00000000000..5598b6de7c2 --- /dev/null +++ b/client/src/assets/icons/reset.tsx @@ -0,0 +1,24 @@ +import React from 'react'; + +function Reset( + props: JSX.IntrinsicAttributes & React.SVGProps +): JSX.Element { + return ( + <> + + + ); +} + +Reset.displayName = 'Reset'; + +export default Reset; diff --git a/client/src/templates/Challenges/classic/editor.css b/client/src/templates/Challenges/classic/editor.css index f1370abaf66..38a09aa891a 100644 --- a/client/src/templates/Challenges/classic/editor.css +++ b/client/src/templates/Challenges/classic/editor.css @@ -170,3 +170,21 @@ textarea.inputarea { opacity: 1; } } + +.lower-jaw-icon-bar { + overflow: hidden; + display: flex; + flex-direction: row; +} +.lower-jaw-icon-bar > button { + line-height: 0; + margin-right: 10px; +} + +.lower-jaw-icon-bar > button:focus { + outline: 2px solid var(--blue-mid); +} + +.lower-jaw-icon-bar > button:last-child { + margin-right: 0; +} diff --git a/client/src/templates/Challenges/classic/lower-jaw.tsx b/client/src/templates/Challenges/classic/lower-jaw.tsx index 40c444f4684..04e032cc1e2 100644 --- a/client/src/templates/Challenges/classic/lower-jaw.tsx +++ b/client/src/templates/Challenges/classic/lower-jaw.tsx @@ -5,6 +5,9 @@ import { Button } from '@freecodecamp/react-bootstrap'; import Fail from '../../../assets/icons/fail'; import LightBulb from '../../../assets/icons/lightbulb'; import GreenPass from '../../../assets/icons/green-pass'; +import Help from '../../../assets/icons/help'; +import Reset from '../../../assets/icons/reset'; + import { MAX_MOBILE_WIDTH } from '../../../../../config/misc'; import { apiLocation } from '../../../../../config/env.json'; @@ -181,32 +184,35 @@ const LowerJaw = ({ testsLength && (currentAttempts >= testsLength || currentAttempts >= 3); - if (isAttemptsLargerThanTest && !challengeIsCompleted) { - return ( -
-
+ return ( +
+
+
- + + {isAttemptsLargerThanTest && !challengeIsCompleted ? ( + + ) : null}
- ); - } else { - return ( -
-
- -
- ); - } +
+ ); }; const showDesktopButton = window.innerWidth > MAX_MOBILE_WIDTH; diff --git a/cypress/e2e/default/learn/challenges/multifile.js b/cypress/e2e/default/learn/challenges/multifile.js index 53f925a113f..9c10d561149 100644 --- a/cypress/e2e/default/learn/challenges/multifile.js +++ b/cypress/e2e/default/learn/challenges/multifile.js @@ -6,6 +6,7 @@ const selectors = { monacoTabs: '.monaco-editor-tabs', signInButton: '#action-buttons-container a[href$="/signin"]', submitButton: '[data-cy=submit-button]', + resetCodeButton: '[data-cy=reset-code-button]', instructionContainer: '.action-row-container' }; @@ -34,7 +35,7 @@ describe('Challenge with multifile editor', () => { cy.contains('Check Your Code').click(); cy.get('[data-cy=failing-test-feedback]').should('be.visible'); - cy.contains('Restart Step').click(); + cy.get(selectors.resetCodeButton).click(); cy.get('[data-cy=reset-modal-confirm').click(); cy.get('[data-cy=failing-test-feedback]').should('not.exist');