fix(UI): Remove 'CTRL + Enter' on CTA for mobile (#46239)

Co-authored-by: ahmad abdolsaheb <ahmad.abdolsaheb@gmail.com>

client/i18n/locales/english/translations.json

@@ -51,6 +51,7 @@
     "run": "Run",
     "run-test": "Run the Tests (Ctrl + Enter)",
     "check-code": "Check Your Code (Ctrl + Enter)",
+    "check-code-2": "Check Your Code",
     "reset": "Reset",
     "reset-code": "Reset All Code",
     "help": "Help",

client/src/templates/Challenges/classic/lower-jaw.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import Fail from '../../../assets/icons/fail';
 import LightBulb from '../../../assets/icons/lightbulb';
 import GreenPass from '../../../assets/icons/green-pass';
+import { MAX_MOBILE_WIDTH } from '../../../../../config/misc';
 
 interface LowerJawProps {
   hint?: string;
@@ -201,6 +202,8 @@ const LowerJaw = ({
       );
   };
 
+  const showDesktopButton = window.innerWidth > MAX_MOBILE_WIDTH;
+
   const renderButtons = () => {
     return (
       <>
@@ -212,7 +215,9 @@ const LowerJaw = ({
           aria-hidden={testBtnariaHidden}
           onClick={tryToExecuteChallenge}
         >
-          {t('buttons.check-code')}
+          {showDesktopButton
+            ? t('buttons.check-code')
+            : t('buttons.check-code-2')}
         </button>
         <div id='action-buttons-container'>
           <button

client/src/templates/Challenges/classic/show.tsx

@@ -11,6 +11,7 @@ import store from 'store';
 import { editor } from 'monaco-editor';
 import { challengeTypes } from '../../../../utils/challenge-types';
 import LearnLayout from '../../../components/layouts/learn';
+import { MAX_MOBILE_WIDTH } from '../../../../../config/misc';
 
 import {
   ChallengeFiles,
@@ -128,7 +129,6 @@ interface ReflexLayout {
   testsPane: { flex: number };
 }
 
-const MAX_MOBILE_WIDTH = 767;
 const REFLEX_LAYOUT = 'challenge-layout';
 const BASE_LAYOUT = {
   codePane: { flex: 1 },

config/misc.js

@@ -1 +1,2 @@
 exports.defaultUserImage = 'https://freecodecamp.com/sample-image.png';
+exports.MAX_MOBILE_WIDTH = 767;

cypress/integration/learn/challenges/multifile.js

@@ -1,5 +1,9 @@
 const location =
   '/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-2';
+const selectors = {
+  testButton: '#test-button',
+  monacoTabs: '.monaco-editor-tabs'
+};
 
 describe('Challenge with multifile editor', () => {
   before(() => {
@@ -7,8 +11,16 @@ describe('Challenge with multifile editor', () => {
   });
 
   it('renders the file tab buttons', () => {
-    cy.get('.monaco-editor-tabs').should('exist');
-    cy.get('.monaco-editor-tabs').contains('index.html');
-    cy.get('.monaco-editor-tabs').contains('styles.css');
+    cy.get(selectors.monacoTabs).should('exist');
+    cy.get(selectors.monacoTabs).contains('index.html');
+    cy.get(selectors.monacoTabs).contains('styles.css');
+  });
+
+  it('checks for correct text at different widths', () => {
+    cy.viewport(768, 660)
+      .get(selectors.testButton)
+      .contains('Check Your Code (Ctrl + Enter)');
+
+    cy.viewport(767, 660).get(selectors.testButton).contains('Check Your Code');
   });
 });