refactor(client): migrate Bootstrap button in challenge templates (#52577)

2026-02-14 16:00:30 -05:00 · 2024-01-05 19:07:37 +07:00
parent 829e195a0b
commit c93db9533e
29 changed files with 163 additions and 174 deletions
--- a/client/src/components/helpers/spacer.tsx
+++ b/client/src/components/helpers/spacer.tsx
@@ -1,6 +1,7 @@
 import React from 'react';

 const Padding = Object.freeze({
+  xxSmall: 2.5,
  small: 5,
  xSmall: 10,
  medium: 15,
--- a/client/src/components/landing/landing.css
+++ b/client/src/components/landing/landing.css
@@ -9,10 +9,6 @@
  white-space: pre-line;
 }

-.cert-btn {
-  margin-top: 40px;
-}
-
 .landing-page ul {
  list-style: none;
  padding-inline-start: 0;
--- a/client/src/components/layouts/global.css
+++ b/client/src/components/layouts/global.css
@@ -269,6 +269,8 @@ input[type='submit']:hover,
  color: var(--secondary-background);
 }

+button[aria-disabled='true'],
+button[aria-disabled='true']:hover,
 .btn.disabled,
 .btn[disabled],
 fieldset[disabled] .btn,
--- a/client/src/templates/Challenges/classic/lower-jaw.tsx
+++ b/client/src/templates/Challenges/classic/lower-jaw.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button } from '@freecodecamp/react-bootstrap';

 import { createSelector } from 'reselect';
 import { connect } from 'react-redux';
@@ -22,8 +21,6 @@ import {
  completedPercentageSelector
 } from '../redux/selectors';

-const lowerJawButtonStyle = 'btn-block btn';
-
 interface LowerJawPanelProps extends ShareProps {
  resetButtonText: string;
  helpButtonText: string;
@@ -297,18 +294,17 @@ const LowerJaw = ({
  return (
    <div className='action-row-container'>
      {showSignInButton && (
-        <Button
+        <a
          data-cy='sign-in-button'
-          block={true}
          href={`${apiLocation}/signin`}
-          className='btn-cta'
+          className='btn-cta btn btn-block'
        >
          {t('learn.sign-in-save')}
-        </Button>
+        </a>
      )}
      <button
        data-playwright-test-label='lowerJaw-submit-button'
-        className={lowerJawButtonStyle}
+        className='btn-block btn'
        data-cy='submit-lowerJaw-button'
        onClick={tryToSubmitChallenge}
        {...(!challengeIsCompleted && { 'aria-hidden': true })}
@@ -318,7 +314,7 @@ const LowerJaw = ({
      </button>
      <button
        data-playwright-test-label='lowerJaw-check-button'
-        className={lowerJawButtonStyle}
+        className='btn-block btn'
        data-cy='check-lowerJaw-button'
        onClick={tryToExecuteChallenge}
        {...(challengeIsCompleted &&
--- a/client/src/templates/Challenges/codeally/show.tsx
+++ b/client/src/templates/Challenges/codeally/show.tsx
@@ -1,5 +1,4 @@
 // Package Utilities
-import { Button } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React, { Component } from 'react';
 import Helmet from 'react-helmet';
@@ -9,7 +8,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Row, Alert } from '@freecodecamp/ui';
+import { Container, Col, Row, Alert, Button } from '@freecodecamp/ui';

 // Local Utilities
 import Spacer from '../../../components/helpers/spacer';
@@ -311,7 +310,7 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                <Button
                  aria-describedby='codeally-cookie-warning'
                  block={true}
-                  bsStyle='primary'
+                  variant='primary'
                  data-cy='start-codeally'
                  onClick={tryToShowCodeAlly}
                >
@@ -343,6 +342,7 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                      />
                    </>
                  )}
+                <Spacer size='xxSmall' />
                <ProjectToolPanel />
                <br />
                <Spacer size='medium' />
--- a/client/src/templates/Challenges/components/completion-modal.tsx
+++ b/client/src/templates/Challenges/components/completion-modal.tsx
@@ -1,12 +1,13 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
-import { Button, Modal } from '@freecodecamp/react-bootstrap';
+import { Modal } from '@freecodecamp/react-bootstrap';
 import { noop } from 'lodash-es';
 import React, { Component } from 'react';
 import type { TFunction } from 'i18next';
 import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import { Button } from '@freecodecamp/ui';

 import Login from '../../../components/Header/components/login';
 import { executeGA } from '../../../redux/actions';
@@ -26,6 +27,7 @@ import {
 } from '../redux/selectors';
 import Progress from '../../../components/Progress';
 import GreenPass from '../../../assets/icons/green-pass';
+import { Spacer } from '../../../components/helpers';

 import './completion-modal.css';

@@ -194,12 +196,15 @@ class CompletionModal extends Component<
        </Modal.Body>
        <Modal.Footer>
          {isSignedIn ? null : (
-            <Login block={true}>{t('learn.sign-in-save')}</Login>
+            <>
+              <Login block={true}>{t('learn.sign-in-save')}</Login>
+              <Spacer size='xxSmall' />
+            </>
          )}
          <Button
            block={true}
-            bsSize='large'
-            bsStyle='primary'
+            size='large'
+            variant='primary'
            disabled={isSubmitting}
            data-cy='submit-challenge'
            onClick={() => submitChallenge()}
@@ -207,12 +212,12 @@ class CompletionModal extends Component<
            {isSignedIn ? t('buttons.submit-and-go') : t('buttons.go-to-next')}
            <span className='hidden-xs'> (Ctrl + Enter)</span>
          </Button>
+          <Spacer size='xxSmall' />
          {this.state.downloadURL ? (
            <Button
              block={true}
-              bsSize='lg'
-              bsStyle='primary'
-              className='btn-invert'
+              size='large'
+              variant='primary'
              download={`${dashedName}.txt`}
              href={this.state.downloadURL}
            >
--- a/client/src/templates/Challenges/components/help-modal.tsx
+++ b/client/src/templates/Challenges/components/help-modal.tsx
@@ -1,15 +1,17 @@
 import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, Modal } from '@freecodecamp/react-bootstrap';
+import { Modal } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { Trans, withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
+import { Button } from '@freecodecamp/ui';

 import envData from '../../../../config/env.json';
 import { executeGA } from '../../../redux/actions';
 import { createQuestion, closeModal } from '../redux/actions';
 import { isHelpModalOpenSelector } from '../redux/selectors';
+import { Spacer } from '../../../components/helpers';

 import './help-modal.css';

@@ -93,16 +95,17 @@ function HelpModal({
        </div>
        <Button
          block={true}
-          bsSize='lg'
-          bsStyle='primary'
+          size='large'
+          variant='primary'
          onClick={createQuestion}
        >
          {t('buttons.create-post')}
        </Button>
+        <Spacer size='xxSmall' />
        <Button
          block={true}
-          bsSize='lg'
-          bsStyle='primary'
+          size='large'
+          variant='primary'
          onClick={closeHelpModal}
        >
          {t('buttons.cancel')}
--- a/client/src/templates/Challenges/components/project-preview-modal.tsx
+++ b/client/src/templates/Challenges/components/project-preview-modal.tsx
@@ -1,6 +1,7 @@
-import { Button, Modal } from '@freecodecamp/react-bootstrap';
+import { Modal } from '@freecodecamp/react-bootstrap';
 import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
+import { Button } from '@freecodecamp/ui';

 import type { CompletedChallenge } from '../../../redux/prop-types';
 import {
@@ -87,8 +88,8 @@ function ProjectPreviewModal({
      <Modal.Footer>
        <Button
          block={true}
-          bsSize='lg'
-          bsStyle='primary'
+          size='large'
+          variant='primary'
          data-playwright-test-label='project-preview-modal-closeButton'
          onClick={() => {
            closeModal('projectPreview');
--- a/client/src/templates/Challenges/components/reset-modal.tsx
+++ b/client/src/templates/Challenges/components/reset-modal.tsx
@@ -1,10 +1,11 @@
 // Package Utilities
-import { Button, Modal } from '@freecodecamp/react-bootstrap';
+import { Modal } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
+import { Button } from '@freecodecamp/ui';

 // Local Utilities
 import { executeGA } from '../../../redux/actions';
@@ -74,8 +75,8 @@ function ResetModal({ reset, close, isOpen }: ResetModalProps): JSX.Element {
        <Button
          data-cy='reset-modal-confirm'
          block={true}
-          bsSize='large'
-          bsStyle='danger'
+          size='large'
+          variant='danger'
          onClick={withActions(reset, close)}
        >
          {t('buttons.reset-lesson')}
--- a/client/src/templates/Challenges/components/shortcuts-modal.tsx
+++ b/client/src/templates/Challenges/components/shortcuts-modal.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import { Button, Modal } from '@freecodecamp/react-bootstrap';
+import { Modal } from '@freecodecamp/react-bootstrap';
 import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
+import { Button } from '@freecodecamp/ui';

 import { closeModal } from '../redux/actions';
 import { isShortcutsModalOpenSelector } from '../redux/selectors';
@@ -103,8 +104,8 @@ function ShortcutsModal({
        />
        <Button
          block={true}
-          bsSize='sm'
-          bsStyle='primary'
+          size='small'
+          variant='primary'
          onClick={closeShortcutsModal}
        >
          {t('buttons.close')}
--- a/client/src/templates/Challenges/components/tool-panel.tsx
+++ b/client/src/templates/Challenges/components/tool-panel.tsx
@@ -1,5 +1,4 @@
-import { Button } from '@freecodecamp/react-bootstrap';
-import { Dropdown, MenuItem } from '@freecodecamp/ui';
+import { Dropdown, MenuItem, Button } from '@freecodecamp/ui';
 import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
@@ -15,6 +14,7 @@ import { challengeMetaSelector } from '../redux/selectors';

 import { saveChallenge } from '../../../redux/actions';
 import { isSignedInSelector } from '../../../redux/selectors';
+import { Spacer } from '../../../components/helpers';

 const mapStateToProps = createSelector(
  challengeMetaSelector,
@@ -74,35 +74,31 @@ function ToolPanel({
        isMobile ? 'tool-panel-group-mobile' : ''
      }`}
    >
-      <Button
-        aria-label='Run the tests use shortcut Ctrl+enter'
-        block={true}
-        bsStyle='primary'
-        onClick={handleRunTests}
-      >
+      <Button block={true} variant='primary' onClick={handleRunTests}>
        {isMobile ? t('buttons.run') : t('buttons.run-test')}
      </Button>
      {isSignedIn && challengeType === challengeTypes.multifileCertProject && (
-        <Button
-          block={true}
-          bsStyle='primary'
-          data-cy='save-code-to-database-btn'
-          className='btn-invert'
-          onClick={saveChallenge}
-        >
-          {isMobile ? t('buttons.save') : t('buttons.save-code')}
-        </Button>
+        <>
+          <Spacer size='xxSmall' />
+          <Button
+            block={true}
+            variant='primary'
+            data-cy='save-code-to-database-btn'
+            onClick={saveChallenge}
+          >
+            {isMobile ? t('buttons.save') : t('buttons.save-code')}
+          </Button>
+        </>
      )}
      {challengeType !== challengeTypes.multifileCertProject && (
-        <Button
-          block={true}
-          bsStyle='primary'
-          className='btn-invert'
-          onClick={openResetModal}
-        >
-          {isMobile ? t('buttons.reset') : t('buttons.reset-lesson')}
-        </Button>
+        <>
+          <Spacer size='xxSmall' />
+          <Button block={true} variant='primary' onClick={openResetModal}>
+            {isMobile ? t('buttons.reset') : t('buttons.reset-lesson')}
+          </Button>
+        </>
      )}
+      <Spacer size='xxSmall' />
      <Dropdown dropup>
        <Dropdown.Toggle
          id={'get-help-dropdown'}
--- a/client/src/templates/Challenges/dialogue/show.tsx
+++ b/client/src/templates/Challenges/dialogue/show.tsx
@@ -1,5 +1,4 @@
 // Package Utilities
-import { Button } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React, { Component } from 'react';
 import Helmet from 'react-helmet';
@@ -10,7 +9,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Row } from '@freecodecamp/ui';
+import { Container, Col, Row, Button } from '@freecodecamp/ui';

 // Local Utilities
 import Spacer from '../../../components/helpers/spacer';
@@ -273,20 +272,14 @@ class ShowDialogue extends Component<ShowDialogueProps, ShowDialogueState> {
                <Spacer size='medium' />
                <Button
                  block={true}
-                  bsSize='large'
-                  bsStyle='primary'
+                  variant='primary'
                  disabled={!this.state.allAssignmentsCompleted}
                  onClick={() => this.handleSubmit()}
                >
                  {t('buttons.submit')}
                </Button>
-                <Button
-                  block={true}
-                  bsSize='large'
-                  bsStyle='primary'
-                  className='btn-invert'
-                  onClick={openHelpModal}
-                >
+                <Spacer size='xxSmall' />
+                <Button block={true} variant='primary' onClick={openHelpModal}>
                  {t('buttons.ask-for-help')}
                </Button>
                <Spacer size='large' />
--- a/client/src/templates/Challenges/exam/components/exam-results.tsx
+++ b/client/src/templates/Challenges/exam/components/exam-results.tsx
@@ -1,6 +1,7 @@
-import { Button } from '@freecodecamp/react-bootstrap';
 import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Button } from '@freecodecamp/ui';
+
 import Spacer from '../../../../components/helpers/spacer';
 import { formatSecondsToTime } from '../../../../utils/format-seconds';
 import { GeneratedExamResults } from '../../../../redux/prop-types';
@@ -97,17 +98,17 @@ ${t('learn.exam.time', { t: formatSecondsToTime(examTimeInSeconds) })}
      <div className='exam-results-buttons'>
        <Button
          block={true}
-          bsStyle='primary'
-          className='btn-invert'
+          variant='primary'
          data-playwright-test-label='download-exam-results'
          download={`${dashedName}.txt`}
          href={downloadURL}
        >
          {t('learn.download-results')}
        </Button>
+        <Spacer size='xxSmall' />
        <Button
          block={true}
-          bsStyle='primary'
+          variant='primary'
          data-cy='exit-exam'
          data-playwright-test-label='exit-exam'
          onClick={exitExam}
--- a/client/src/templates/Challenges/exam/components/exit-exam-modal.tsx
+++ b/client/src/templates/Challenges/exam/components/exit-exam-modal.tsx
@@ -1,14 +1,16 @@
 // Package Utilities
-import { Button, Modal } from '@freecodecamp/react-bootstrap';
+import { Modal } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
 import { useTranslation } from 'react-i18next';
+import { Button } from '@freecodecamp/ui';

 // Local Utilities
 import { closeModal } from '../../redux/actions';
 import { isExitExamModalOpenSelector } from '../../redux/selectors';
+import { Spacer } from '../../../../components/helpers';

 // Types
 interface ExitExamModalProps {
@@ -61,15 +63,16 @@ function ExitExamModal({
        <Button
          data-cy='exit-exam-modal-deny'
          block={true}
-          bsStyle='primary'
+          variant='primary'
          onClick={closeExitExamModal}
        >
          {t('learn.exam.exit-no')}
        </Button>
+        <Spacer size='xxSmall' />
        <Button
          data-cy='exit-exam-modal-confirm'
          block={true}
-          bsStyle='danger'
+          variant='danger'
          onClick={exitExam}
        >
          {t('learn.exam.exit-yes')}
--- a/client/src/templates/Challenges/exam/components/finish-exam-modal.tsx
+++ b/client/src/templates/Challenges/exam/components/finish-exam-modal.tsx
@@ -1,14 +1,16 @@
 // Package Utilities
-import { Button, Modal } from '@freecodecamp/react-bootstrap';
+import { Modal } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
 import { useTranslation } from 'react-i18next';
+import { Button } from '@freecodecamp/ui';

 // Local Utilities
 import { closeModal } from '../../redux/actions';
 import { isFinishExamModalOpenSelector } from '../../redux/selectors';
+import { Spacer } from '../../../../components/helpers';

 // Types
 interface FinishExamModalProps {
@@ -61,17 +63,18 @@ function FinishExamModal({
        <Button
          data-cy='finish-exam-modal-confirm'
          block={true}
-          bsSize='medium'
-          bsStyle='primary'
+          size='medium'
+          variant='primary'
          onClick={finishExam}
        >
          {t('learn.exam.finish-yes')}
        </Button>
+        <Spacer size='xxSmall' />
        <Button
          data-cy='finish-exam-modal-deny'
          block={true}
-          bsSize='medium'
-          bsStyle='primary'
+          size='medium'
+          variant='primary'
          onClick={closeFinishExamModal}
        >
          {t('learn.exam.finish-no')}
--- a/client/src/templates/Challenges/exam/components/foundational-c-sharp-survey.tsx
+++ b/client/src/templates/Challenges/exam/components/foundational-c-sharp-survey.tsx
@@ -1,10 +1,12 @@
-import { Button, Modal } from '@freecodecamp/react-bootstrap';
+import { Modal } from '@freecodecamp/react-bootstrap';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
+import { Button } from '@freecodecamp/ui';
+
 import { SurveyResults, SurveyResponse } from '../../../../redux/prop-types';
 import { Spacer } from '../../../../components/helpers';
 import { setIsProcessing, submitSurvey } from '../../../../redux/actions';
@@ -168,18 +170,19 @@ function FoundationalCSharpSurvey({
      <Modal.Footer className='reset-modal-footer'>
        <Button
          block={true}
-          bsSize='medium'
-          bsStyle='primary'
+          size='medium'
+          variant='primary'
          data-cy='submit-csharp-survey-btn'
          disabled={cantSubmitSurvey || isProcessing}
          onClick={createSurveyResults}
        >
          {t('survey.misc.submit')}
        </Button>
+        <Spacer size='xxSmall' />
        <Button
          block={true}
-          bsSize='medium'
-          bsStyle='primary'
+          size='medium'
+          variant='primary'
          disabled={isProcessing}
          onClick={closeSurveyModal}
        >
--- a/client/src/templates/Challenges/exam/show.tsx
+++ b/client/src/templates/Challenges/exam/show.tsx
@@ -1,5 +1,4 @@
 // Package Utilities
-import { Button } from '@freecodecamp/react-bootstrap';
 import { graphql, navigate } from 'gatsby';

 import React, { Component, RefObject } from 'react';
@@ -10,7 +9,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Alert, Row } from '@freecodecamp/ui';
+import { Container, Col, Alert, Row, Button } from '@freecodecamp/ui';
 import { micromark } from 'micromark';

 // Local Utilities
@@ -468,7 +467,7 @@ class ShowExam extends Component<ShowExamProps, ShowExamState> {
                    block={true}
                    className='exam-button'
                    disabled={currentQuestionIndex <= 0}
-                    bsStyle='primary'
+                    variant='primary'
                    data-cy='previous-exam-question-btn'
                    onClick={this.goToPreviousQuestion}
                  >
@@ -483,7 +482,7 @@ class ShowExam extends Component<ShowExamProps, ShowExamState> {
                        !userExamQuestions[currentQuestionIndex].answer.id
                      }
                      className='exam-button'
-                      bsStyle='primary'
+                      variant='primary'
                      data-cy='finish-exam-btn'
                      onClick={openFinishExamModal}
                    >
@@ -496,7 +495,7 @@ class ShowExam extends Component<ShowExamProps, ShowExamState> {
                        !userExamQuestions[currentQuestionIndex].answer.id
                      }
                      className='exam-button'
-                      bsStyle='primary'
+                      variant='primary'
                      data-cy='next-exam-question-btn'
                      onClick={this.goToNextQuestion}
                    >
@@ -511,7 +510,7 @@ class ShowExam extends Component<ShowExamProps, ShowExamState> {
                  <Button
                    block={true}
                    className='exam-button'
-                    bsStyle='primary'
+                    variant='primary'
                    data-cy='exit-exam-btn'
                    onClick={openExitExamModal}
                  >
@@ -559,16 +558,17 @@ class ShowExam extends Component<ShowExamProps, ShowExamState> {
                    )}
                  </>
                )}
-
                <PrismFormatted text={description} />
                <Spacer size='medium' />
                <PrismFormatted text={instructions} />

                <Button
                  block={true}
-                  bsStyle='primary'
+                  variant='primary'
                  data-cy='start-exam-btn'
                  disabled={!qualifiedForExam}
+                  // `this.runExam` being an async callback is acceptable
+                  //eslint-disable-next-line @typescript-eslint/no-misused-promises
                  onClick={this.runExam}
                >
                  {t('buttons.click-start-exam')}
--- a/client/src/templates/Challenges/fill-in-the-blank/show.tsx
+++ b/client/src/templates/Challenges/fill-in-the-blank/show.tsx
@@ -1,5 +1,4 @@
 // Package Utilities
-import { Button } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React, { Component, Fragment } from 'react';
 import Helmet from 'react-helmet';
@@ -10,7 +9,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Row } from '@freecodecamp/ui';
+import { Container, Col, Row, Button } from '@freecodecamp/ui';

 // Local Utilities
 import Spacer from '../../../components/helpers/spacer';
@@ -393,18 +392,14 @@ class ShowFillInTheBlank extends Component<
                <Spacer size='medium' />
                <Button
                  block={true}
-                  bsStyle='primary'
+                  variant='primary'
                  disabled={!allBlanksFilled}
                  onClick={() => this.handleSubmit()}
                >
                  {t('buttons.check-answer')}
                </Button>
-                <Button
-                  block={true}
-                  bsStyle='primary'
-                  className='btn-invert'
-                  onClick={openHelpModal}
-                >
+                <Spacer size='xxSmall' />
+                <Button block={true} variant='primary' onClick={openHelpModal}>
                  {t('buttons.ask-for-help')}
                </Button>
                <Spacer size='large' />
--- a/client/src/templates/Challenges/ms-trophy/link-ms-user.tsx
+++ b/client/src/templates/Challenges/ms-trophy/link-ms-user.tsx
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { Button } from '@freecodecamp/react-bootstrap';
 import { ConnectedProps, connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
@@ -9,7 +8,8 @@ import {
  ControlLabel,
  FormControl,
  FormGroup,
-  HelpBlock
+  HelpBlock,
+  Button
 } from '@freecodecamp/ui';

 import { Spacer } from '../../../components/helpers';
@@ -102,8 +102,7 @@ function LinkMsUser({
          <p>{t('learn.ms.linked', { msUsername })}</p>
          <Button
            block={true}
-            bsStyle='primary'
-            className='btn-invert'
+            variant='primary'
            disabled={isProcessing}
            onClick={unlinkMsUsername}
          >
@@ -165,8 +164,7 @@ function LinkMsUser({
            <Button
              disabled={isDisabled}
              block={true}
-              bsStyle='primary'
-              className='btn-invert'
+              variant='primary'
              onClick={handleLinkUsername}
            >
              {t('buttons.link-account')}
--- a/client/src/templates/Challenges/ms-trophy/show.tsx
+++ b/client/src/templates/Challenges/ms-trophy/show.tsx
@@ -1,4 +1,3 @@
-import { Col, Row, Button } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React, { Component } from 'react';
 import Helmet from 'react-helmet';
@@ -9,7 +8,7 @@ import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';

-import { Container } from '@freecodecamp/ui';
+import { Container, Col, Row, Button } from '@freecodecamp/ui';
 import Spacer from '../../../components/helpers/spacer';
 import LearnLayout from '../../../components/layouts/learn';
 import { ChallengeNode, ChallengeMeta } from '../../../redux/prop-types';
@@ -204,19 +203,18 @@ class MsTrophy extends Component<MsTrophyProps> {
                <hr />
                <Button
                  block={true}
-                  bsStyle='primary'
+                  variant='primary'
                  data-playwright-test-label='verify-trophy-button'
-                  className='btn-invert'
                  disabled={!msUsername || isProcessing}
                  onClick={this.handleSubmit}
                >
                  {t('buttons.verify-trophy')}
                </Button>
+                <Spacer size='xxSmall' />
                <Button
                  block={true}
-                  bsStyle='primary'
+                  variant='primary'
                  data-playwright-test-label='ask-for-help-button'
-                  className='btn-invert'
                  onClick={openHelpModal}
                >
                  {t('buttons.ask-for-help')}
--- a/client/src/templates/Challenges/odin/show.tsx
+++ b/client/src/templates/Challenges/odin/show.tsx
@@ -1,5 +1,4 @@
 // Package Utilities
-import { Button } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React, { Component } from 'react';
 import Helmet from 'react-helmet';
@@ -10,7 +9,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Row } from '@freecodecamp/ui';
+import { Container, Col, Row, Button } from '@freecodecamp/ui';

 // Local Utilities
 import Loader from '../../../components/helpers/loader';
@@ -400,8 +399,8 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                <Spacer size='medium' />
                <Button
                  block={true}
-                  bsSize='medium'
-                  bsStyle='primary'
+                  size='medium'
+                  variant='primary'
                  onClick={() =>
                    this.handleSubmit(
                      solution,
@@ -412,11 +411,11 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                >
                  {t('buttons.check-answer')}
                </Button>
+                <Spacer size='xxSmall' />
                <Button
                  block={true}
-                  bsSize='medium'
-                  bsStyle='primary'
-                  className='btn-invert'
+                  size='medium'
+                  variant='primary'
                  onClick={openHelpModal}
                >
                  {t('buttons.ask-for-help')}
--- a/client/src/templates/Challenges/projects/tool-panel.tsx
+++ b/client/src/templates/Challenges/projects/tool-panel.tsx
@@ -1,11 +1,12 @@
-import { Button } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import type { TFunction } from 'i18next';
 import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
+import { Button } from '@freecodecamp/ui';

 import { openModal } from '../redux/actions';
+import { Spacer } from '../../../components/helpers';

 const mapStateToProps = () => ({});

@@ -29,27 +30,24 @@ function ToolPanel({
  t
 }: ToolPanelProps): JSX.Element {
  return (
-    <>
+    <div>
      {guideUrl && (
-        <Button
-          block={true}
-          bsStyle='primary'
-          className='btn-invert'
-          href={guideUrl}
-          target='_blank'
-        >
-          {t('buttons.get-hint')}
-        </Button>
+        <>
+          <Button
+            block={true}
+            variant='primary'
+            href={guideUrl}
+            target='_blank'
+          >
+            {t('buttons.get-hint')}
+          </Button>
+          <Spacer size='xxSmall' />
+        </>
      )}
-      <Button
-        block={true}
-        bsStyle='primary'
-        className='btn-invert'
-        onClick={openHelpModal}
-      >
+      <Button block={true} variant='primary' onClick={openHelpModal}>
        {t('buttons.ask-for-help')}
      </Button>
-    </>
+    </div>
  );
 }

--- a/client/src/templates/Challenges/video/show.tsx
+++ b/client/src/templates/Challenges/video/show.tsx
@@ -1,5 +1,4 @@
 // Package Utilities
-import { Button } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React, { Component } from 'react';
 import Helmet from 'react-helmet';
@@ -10,7 +9,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Row } from '@freecodecamp/ui';
+import { Container, Col, Row, Button } from '@freecodecamp/ui';

 // Local Utilities
 import Loader from '../../../components/helpers/loader';
@@ -319,19 +318,15 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
                <Spacer size='medium' />
                <Button
                  block={true}
-                  bsStyle='primary'
+                  variant='primary'
                  onClick={() =>
                    this.handleSubmit(solution, openCompletionModal)
                  }
                >
                  {t('buttons.check-answer')}
                </Button>
-                <Button
-                  block={true}
-                  bsStyle='primary'
-                  className='btn-invert'
-                  onClick={openHelpModal}
-                >
+                <Spacer size='xxSmall' />
+                <Button block={true} variant='primary' onClick={openHelpModal}>
                  {t('buttons.ask-for-help')}
                </Button>
                <Spacer size='large' />
--- a/client/src/templates/Introduction/components/cert-challenge.tsx
+++ b/client/src/templates/Introduction/components/cert-challenge.tsx
@@ -1,9 +1,10 @@
-import { Button } from '@freecodecamp/react-bootstrap';
 import { navigate } from 'gatsby-link';
 import React, { useState, useEffect, MouseEvent } from 'react';
 import { useTranslation, withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import { Button } from '@freecodecamp/ui';
+
 import {
  certSlugTypeMap,
  superBlockCertTypeMap
@@ -123,12 +124,11 @@ const CertChallenge = ({
        : createFlashMessage(honestyInfoMessage);
    };
  return (
-    <div className='block'>
+    <div>
      {isSignedIn && (
        <Button
          block={true}
-          bsStyle='primary'
-          className='cert-btn'
+          variant='primary'
          href={isCertified ? certLocation : `/settings#certification-settings`}
          onClick={() => (isCertified ? createClickHandler(certSlug) : false)}
        >
--- a/client/src/templates/Introduction/intro.css
+++ b/client/src/templates/Introduction/intro.css
@@ -161,7 +161,7 @@ button.map-title {
  background-color: var(--tertiary-background);
 }

-.block-ui .block {
+.block-ui div.block {
  background: var(--primary-background);
 }

--- a/cypress/e2e/default/learn/challenges/c-sharp-exam.ts
+++ b/cypress/e2e/default/learn/challenges/c-sharp-exam.ts
@@ -32,7 +32,7 @@ describe('C# Exam Challenge', () => {
        'be.visible'
      );
      cy.get(el.surveyAlert).should('not.exist');
-      cy.get(el.startExamBtn).should('be.disabled');
+      cy.get(el.startExamBtn).should('have.attr', 'aria-disabled');
    });
  });

@@ -51,10 +51,10 @@ describe('C# Exam Challenge', () => {
      cy.get(el.qualifiedAlert).should('not.exist');
      cy.get(el.prerequisitesAlert).should('not.exist');
      cy.get(el.surveyAlert).should('be.visible');
-      cy.get(el.startExamBtn).should('be.disabled');
+      cy.get(el.startExamBtn).should('have.attr', 'aria-disabled');
      cy.get(el.startSurveyBtn).click();
      cy.get(el.surveyModal).should('be.visible');
-      cy.get(el.submitSurveyBtn).should('be.disabled');
+      cy.get(el.submitSurveyBtn).should('have.attr', 'aria-disabled');
      cy.contains('Student developer').click();
      cy.contains('Novice (no prior experience').click();
      cy.get(el.submitSurveyBtn).should('be.enabled');
@@ -81,8 +81,8 @@ describe('C# Exam Challenge', () => {
      );
      cy.get(el.examTime).should('be.visible');
      cy.contains('Question 1 of 5').should('be.visible');
-      cy.get(el.prevQuestionBtn).should('be.disabled');
-      cy.get(el.nextQuestionBtn).should('be.disabled');
+      cy.get(el.prevQuestionBtn).should('have.attr', 'aria-disabled');
+      cy.get(el.nextQuestionBtn).should('have.attr', 'aria-disabled');
      cy.get(el.finishExamBtn).should('not.exist');
      cy.get(el.exitExamBtn).should('be.visible');

@@ -90,7 +90,7 @@ describe('C# Exam Challenge', () => {
      cy.get(el.examInput).eq(0).click();
      cy.get(el.nextQuestionBtn).click();
      cy.get(el.prevQuestionBtn).should('be.enabled');
-      cy.get(el.nextQuestionBtn).should('be.disabled');
+      cy.get(el.nextQuestionBtn).should('have.attr', 'aria-disabled');
      cy.contains('Question 2 of 5').should('be.visible');

      // answer the rest of the questions
--- a/cypress/e2e/default/learn/challenges/c-sharp.ts
+++ b/cypress/e2e/default/learn/challenges/c-sharp.ts
@@ -15,9 +15,8 @@ describe('C Sharp', () => {
    });

    it('renders the correct buttons', () => {
-      cy.get('.btn-primary').should('have.length', 2);
-      cy.contains('.btn-primary', 'Check your answer').should('be.visible');
-      cy.contains('.btn-primary', 'Ask for Help').should('be.visible');
+      cy.contains('Check your answer').should('be.visible');
+      cy.contains('Ask for Help').should('be.visible');
    });
  });

@@ -28,10 +27,9 @@ describe('C Sharp', () => {
    });

    it('renders the correct buttons', () => {
-      cy.get('.btn-primary').should('have.length', 3);
-      cy.contains('.btn-primary', 'Link Account').should('be.visible');
-      cy.contains('.btn-primary', 'Verify Trophy').should('be.visible');
-      cy.contains('.btn-primary', 'Ask for Help').should('be.visible');
+      cy.contains('Link Account').should('be.visible');
+      cy.contains('Verify Trophy').should('be.visible');
+      cy.contains('Ask for Help').should('be.visible');
    });
  });
 });
--- a/cypress/e2e/default/learn/challenges/projects.ts
+++ b/cypress/e2e/default/learn/challenges/projects.ts
@@ -245,9 +245,10 @@ describe('project submission', () => {
      .type('https://replit.com/@camperbot/python-project#main.py');

    cy.contains("I've completed this challenge").click();
+    cy.get('[data-cy=completion-modal]').should('exist');
    cy.get('[data-cy=submit-challenge]').as('submitChallenge');
    cy.get('@submitChallenge').click();
-    cy.get('@submitChallenge').should('be.disabled');
+    cy.get('@submitChallenge').should('have.attr', 'aria-disabled');
    // After the api responds, the button is enabled, but since the modal leaves
    // the DOM we just check for that.
    cy.get('[data-cy=completion-modal]').should('not.exist');
--- a/e2e/reset-modal.spec.ts
+++ b/e2e/reset-modal.spec.ts
@@ -86,7 +86,7 @@ test('User can reset challenge', async ({ page }) => {
  ).not.toBeVisible();
 });

-test('User can reset classic challenge', async ({ page }) => {
+test('User can reset classic challenge', async ({ page, isMobile }) => {
  await page.goto(
    '/learn/javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code'
  );
@@ -97,7 +97,9 @@ test('User can reset classic challenge', async ({ page }) => {

  await page.getByLabel(editorPaneLabel).fill(challengeSolution);

-  const submitButton = page.getByLabel('Run the tests use shortcut Ctrl+enter');
+  const submitButton = page.getByRole('button', {
+    name: isMobile ? translations.buttons.run : translations.buttons['run-test']
+  });
  await submitButton.click();

  await expect(