From c93db9533ea308457b8a8decedea0774c4e9891a Mon Sep 17 00:00:00 2001 From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com> Date: Fri, 5 Jan 2024 19:07:37 +0700 Subject: [PATCH] refactor(client): migrate Bootstrap button in challenge templates (#52577) --- client/src/components/helpers/spacer.tsx | 1 + client/src/components/landing/landing.css | 4 -- client/src/components/layouts/global.css | 2 + .../Challenges/classic/lower-jaw.tsx | 14 ++---- .../templates/Challenges/codeally/show.tsx | 6 +-- .../components/completion-modal.tsx | 19 +++++--- .../Challenges/components/help-modal.tsx | 13 ++++-- .../components/project-preview-modal.tsx | 7 +-- .../Challenges/components/reset-modal.tsx | 7 +-- .../Challenges/components/shortcuts-modal.tsx | 7 +-- .../Challenges/components/tool-panel.tsx | 46 +++++++++---------- .../templates/Challenges/dialogue/show.tsx | 15 ++---- .../exam/components/exam-results.tsx | 9 ++-- .../exam/components/exit-exam-modal.tsx | 9 ++-- .../exam/components/finish-exam-modal.tsx | 13 ++++-- .../foundational-c-sharp-survey.tsx | 13 ++++-- client/src/templates/Challenges/exam/show.tsx | 16 +++---- .../Challenges/fill-in-the-blank/show.tsx | 13 ++---- .../Challenges/ms-trophy/link-ms-user.tsx | 10 ++-- .../templates/Challenges/ms-trophy/show.tsx | 10 ++-- client/src/templates/Challenges/odin/show.tsx | 13 +++--- .../Challenges/projects/tool-panel.tsx | 34 +++++++------- .../src/templates/Challenges/video/show.tsx | 13 ++---- .../components/cert-challenge.tsx | 8 ++-- client/src/templates/Introduction/intro.css | 2 +- .../default/learn/challenges/c-sharp-exam.ts | 12 ++--- .../e2e/default/learn/challenges/c-sharp.ts | 12 ++--- .../e2e/default/learn/challenges/projects.ts | 3 +- e2e/reset-modal.spec.ts | 6 ++- 29 files changed, 163 insertions(+), 174 deletions(-) diff --git a/client/src/components/helpers/spacer.tsx b/client/src/components/helpers/spacer.tsx index a89cc91688a..2dfaa28acee 100644 --- 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 index 40861f9001f..187659acbde 100644 --- 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 index cf4113f1954..b67e09f5663 100644 --- 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 index 0b4a51dbd97..dac2bc2d1f0 100644 --- 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 (
{showSignInButton && ( - + )} + {this.state.downloadURL ? (
+ {isSignedIn && challengeType === challengeTypes.multifileCertProject && ( - + <> + + + )} {challengeType !== challengeTypes.multifileCertProject && ( - + <> + + + )} + { - diff --git a/client/src/templates/Challenges/exam/components/exam-results.tsx b/client/src/templates/Challenges/exam/components/exam-results.tsx index 031b04a9d66..6eef8e81251 100644 --- 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) })}
+ + + + - diff --git a/client/src/templates/Challenges/ms-trophy/link-ms-user.tsx b/client/src/templates/Challenges/ms-trophy/link-ms-user.tsx index 0a29ef95e19..3dd906d5ed8 100644 --- 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({

{t('learn.ms.linked', { msUsername })}

+ + + <> + + + )} - - +
); } diff --git a/client/src/templates/Challenges/video/show.tsx b/client/src/templates/Challenges/video/show.tsx index 1a26ed9d4cb..8da0cf59686 100644 --- 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 { - diff --git a/client/src/templates/Introduction/components/cert-challenge.tsx b/client/src/templates/Introduction/components/cert-challenge.tsx index 4ade1f78ab0..7f92b7e8a95 100644 --- 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 ( -
+
{isSignedIn && (