fix(UI): replace button with icons in challenge lower jaw (freeCodeCamp#48014)

* fix: replace button with icons in challenge lower jaw

* fix: update icon buttons to add data-cy, align right, and cleaner conditional display

* fix: update cypress test with correct selector, update conditional button syntax

* fix: add reset and help icon components, move lowerjaw.css to editor.css

* feat: adjust icon buttons order

Co-authored-by: ahmad abdolsaheb <[email protected]>

Author: mehdibouaziz

client/src/assets/icons/help.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+function Help(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
+  return (
+    <>
+      <svg
+        fill='currentColor'
+        xmlns='http://www.w3.org/2000/svg'
+        height='24'
+        width='24'
+        aria-hidden='true'
+        {...props}
+      >
+        <path d='M11.95 18q.525 0 .888-.363.362-.362.362-.887t-.362-.887q-.363-.363-.888-.363t-.888.363q-.362.362-.362.887t.362.887q.363.363.888.363Zm-.9-3.85h1.85q0-.825.188-1.3.187-.475 1.062-1.3.65-.65 1.025-1.238.375-.587.375-1.412 0-1.4-1.025-2.15T12.1 6q-1.425 0-2.312.75-.888.75-1.238 1.8l1.65.65q.125-.45.563-.975Q11.2 7.7 12.1 7.7q.8 0 1.2.437.4.438.4.963 0 .5-.3.937-.3.438-.75.813-1.1.975-1.35 1.475-.25.5-.25 1.825ZM12 22q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q3.35 0 5.675-2.325Q20 15.35 20 12q0-3.35-2.325-5.675Q15.35 4 12 4 8.65 4 6.325 6.325 4 8.65 4 12q0 3.35 2.325 5.675Q8.65 20 12 20Zm0-8Z' />
+      </svg>
+    </>
+  );
+}
+
+Help.displayName = 'Help';
+
+export default Help;

client/src/assets/icons/reset.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+function Reset(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
+  return (
+    <>
+      <svg
+        fill='currentColor'
+        xmlns='http://www.w3.org/2000/svg'
+        height='24'
+        width='24'
+        aria-hidden='true'
+        {...props}
+      >
+        <path d='M12 20q-3.35 0-5.675-2.325Q4 15.35 4 12q0-3.35 2.325-5.675Q8.65 4 12 4q1.725 0 3.3.713 1.575.712 2.7 2.037V4h2v7h-7V9h4.2q-.8-1.4-2.187-2.2Q13.625 6 12 6 9.5 6 7.75 7.75T6 12q0 2.5 1.75 4.25T12 18q1.925 0 3.475-1.1T17.65 14h2.1q-.7 2.65-2.85 4.325Q14.75 20 12 20Z' />
+      </svg>
+    </>
+  );
+}
+
+Reset.displayName = 'Reset';
+
+export default Reset;

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;
+}

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 (
-        <div>
-          <hr />
+    return (
+      <div>
+        <hr />
+        <div className='lower-jaw-icon-bar'>
           <button
-            className='btn-block btn fade-in'
-            id='help-button'
-            onClick={openHelpModal}
+            className='btn fade-in'
+            title={t('buttons.reset-code')}
+            aria-label={t('buttons.reset-code')}
+            data-cy='reset-code-button'
+            onClick={openResetModal}
           >
-            {t('buttons.ask-for-help')}
-          </button>
-          <button className='btn-block btn fade-in' onClick={openResetModal}>
-            {t('learn.editor-tabs.restart-step')}
-          </button>
-        </div>
-      );
-    } else {
-      return (
-        <div>
-          <hr />
-          <button className='btn-block btn fade-in' onClick={openResetModal}>
-            {t('learn.editor-tabs.restart-step')}
+            <Reset />
           </button>
+
+          {isAttemptsLargerThanTest && !challengeIsCompleted ? (
+            <button
+              className='btn fade-in'
+              id='get-help-button'
+              title={t('buttons.get-help')}
+              aria-label={t('buttons.get-help')}
+              data-cy='get-help-button'
+              onClick={openHelpModal}
+            >
+              <Help />
+            </button>
+          ) : null}
         </div>
-      );
-    }
+      </div>
+    );
   };
 
   const showDesktopButton = window.innerWidth > MAX_MOBILE_WIDTH;

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');