refactor(client): migrate Bootstrap button in challenge templates (fr…

…eeCodeCamp#52577)
weilirs · Jan 5, 2024 · c93db95 · c93db95
1 parent 829e195
commit c93db95
Show file tree

Hide file tree

Showing 29 changed files with 163 additions and 174 deletions.
diff --git 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,

diff --git 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;

diff --git 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,

diff --git 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 &&

diff --git 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' />

diff --git 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,25 +196,28 @@ 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()}
           >
             {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}
             >

diff --git 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')}

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

diff --git 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')}

diff --git 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')}

diff --git 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'}

diff --git 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' />