From fcf2dd7254a1c0b91790b76a538b016a84984e56 Mon Sep 17 00:00:00 2001
From: Jordan Moore <jordanmooree1@gmail.com>
Date: Tue, 7 Jun 2022 07:50:16 -0500
Subject: [PATCH] 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  |  1 +
 .../templates/Challenges/classic/lower-jaw.tsx |  7 ++++++-
 .../src/templates/Challenges/classic/show.tsx  |  2 +-
 config/misc.js                                 |  1 +
 .../integration/learn/challenges/multifile.js  | 18 +++++++++++++++---
 5 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json
index 9d2554f365d..78926b20df1 100644
--- a/client/i18n/locales/english/translations.json
+++ b/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",
diff --git a/client/src/templates/Challenges/classic/lower-jaw.tsx b/client/src/templates/Challenges/classic/lower-jaw.tsx
index 796a24368b1..16041845d5a 100644
--- a/client/src/templates/Challenges/classic/lower-jaw.tsx
+++ b/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
diff --git a/client/src/templates/Challenges/classic/show.tsx b/client/src/templates/Challenges/classic/show.tsx
index 50533cb61bc..a6cb42ae96c 100644
--- a/client/src/templates/Challenges/classic/show.tsx
+++ b/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 },
diff --git a/config/misc.js b/config/misc.js
index d2a04e7c7f2..c852bf41cda 100644
--- a/config/misc.js
+++ b/config/misc.js
@@ -1 +1,2 @@
 exports.defaultUserImage = 'https://freecodecamp.com/sample-image.png';
+exports.MAX_MOBILE_WIDTH = 767;
diff --git a/cypress/integration/learn/challenges/multifile.js b/cypress/integration/learn/challenges/multifile.js
index 05b174c06b1..0575951cbf7 100644
--- a/cypress/integration/learn/challenges/multifile.js
+++ b/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');
   });
 });