refactor(client): replace Bootstrap button in modals and solution widget (#52378)

Co-authored-by: Sboonny <muhammedelruby@gmail.com>

client/src/components/SolutionViewer/exam-results-modal.tsx

@@ -1,8 +1,8 @@
-import { Button, Modal } from '@freecodecamp/react-bootstrap';
+import { Modal } from '@freecodecamp/react-bootstrap';
 import { connect } from 'react-redux';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Row } from '@freecodecamp/ui';
+import { Row, Button } from '@freecodecamp/ui';
 
 import type { GeneratedExamResults } from '../../redux/prop-types';
 import { closeModal } from '../../templates/Challenges/redux/actions';

client/src/components/SolutionViewer/project-modal.tsx

@@ -1,6 +1,8 @@
-import { Button, Modal } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { Modal } from '@freecodecamp/react-bootstrap';
+import { Button } from '@freecodecamp/ui';
+
 import { CompletedChallenge } from '../../redux/prop-types';
 import SolutionViewer from './solution-viewer';
 

client/src/components/profile/components/time-line.tsx

@@ -1,4 +1,3 @@
-import { Button, Modal } from '@freecodecamp/react-bootstrap';
 import Loadable from '@loadable/component';
 import { graphql, useStaticQuery } from 'gatsby';
 import { reverse, sortBy } from 'lodash-es';
@@ -6,7 +5,8 @@ import React, { useMemo, useState } from 'react';
 import type { TFunction } from 'i18next';
 import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
-import { Table } from '@freecodecamp/ui';
+import { Modal } from '@freecodecamp/react-bootstrap';
+import { Table, Button } from '@freecodecamp/ui';
 
 import envData from '../../../../config/env.json';
 import { getLangCode } from '../../../../../shared/config/i18n';

client/src/components/signout-modal/index.tsx

@@ -1,17 +1,16 @@
 import React from 'react';
-import { Button, Modal } from '@freecodecamp/react-bootstrap';
+import { Modal } from '@freecodecamp/react-bootstrap';
 import { bindActionCreators, Dispatch, AnyAction } from 'redux';
 import { createSelector } from 'reselect';
 import { connect } from 'react-redux';
 import { useTranslation } from 'react-i18next';
+import { Button } from '@freecodecamp/ui';
 
 import { Spacer } from '../helpers';
 import { hardGoTo as navigate, closeSignoutModal } from '../../redux/actions';
 import { isSignoutModalOpenSelector } from '../../redux/selectors';
 import { apiLocation } from '../../../config/env.json';
 
-import './signout-modal.css';
-
 const mapStateToProps = createSelector(
   isSignoutModalOpenSelector,
   (show: boolean) => ({
@@ -71,22 +70,18 @@ function SignoutModal(props: SignoutModalProps): JSX.Element {
         <hr />
         <Button
           block={true}
-          bsStyle='primary'
+          variant='primary'
           data-test-label='cancel-signout'
-          className='btn-invert'
           onClick={handleModalHide}
-          type='button'
         >
           {t('signout.nevermind')}
         </Button>
         <Spacer size='small' />
         <Button
           block={true}
-          bsStyle='danger'
+          variant='danger'
           data-test-label='signout'
-          className='btn-signout'
           onClick={handleSignout}
-          type='button'
         >
           {t('signout.certain')}
         </Button>

client/src/components/signout-modal/signout-modal.css

@@ -1,12 +0,0 @@
-.btn-signout {
-  background-color: var(--danger-color);
-  color: var(--danger-background);
-  border-color: var(--danger-background);
-}
-
-.btn-signout:hover,
-.btn-signout:focus {
-  color: var(--danger-color);
-  background-color: var(--danger-background);
-  border-color: var(--danger-background);
-}

client/src/components/solution-display-widget/index.tsx

@@ -1,9 +1,9 @@
+import React from 'react';
 import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button } from '@freecodecamp/react-bootstrap';
-import { Dropdown, MenuItem } from '@freecodecamp/ui';
-import React from 'react';
+import { Dropdown, MenuItem, Button } from '@freecodecamp/ui';
 import { useTranslation } from 'react-i18next';
+
 import { CompletedChallenge } from '../../redux/prop-types';
 import { getSolutionDisplayType } from '../../utils/solution-display-type';
 import './solution-display-widget.css';
@@ -54,7 +54,10 @@ export function SolutionDisplayWidget({
       <Dropdown.Menu>
         <MenuItem
           variant='primary'
-          href={solution ?? ''}
+          // This expression is only to resolve TypeScript error.
+          // There won't be a case where the link has an invalid `href`
+          // as this component is only rendered if `solution` is truthy.
+          href={solution ?? undefined}
           rel='noopener noreferrer'
           target='_blank'
         >
@@ -78,8 +81,10 @@ export function SolutionDisplayWidget({
   const ShowProjectLinkForCertification = (
     <Button
       block={true}
-      className='btn-invert'
-      href={solution ?? ''}
+      // This expression is only to resolve TypeScript error.
+      // There won't be a case where the link has an invalid `href`
+      // as this component is only rendered if `solution` is truthy.
+      href={solution ?? undefined}
       rel='noopener noreferrer'
       target='_blank'
     >
@@ -98,7 +103,6 @@ export function SolutionDisplayWidget({
     <Button
       block={true}
       variant='primary'
-      className='btn-invert'
       data-cy={dataCy}
       onClick={showUserCode}
     >
@@ -152,7 +156,10 @@ export function SolutionDisplayWidget({
         <Dropdown.Menu>
           <MenuItem
             variant='primary'
-            href={solution}
+            // This expression is only to resolve TypeScript error.
+            // There won't be a case where the link has an invalid `href`
+            // as this component is only rendered if `solution` is truthy.
+            href={solution ?? undefined}
             rel='noopener noreferrer'
             target='_blank'
           >
@@ -177,9 +184,11 @@ export function SolutionDisplayWidget({
   const ShowProjectLink = (
     <Button
       block={true}
-      bsStyle='primary'
-      className='btn-invert'
-      href={solution}
+      variant='primary'
+      // This expression is only to resolve TypeScript error.
+      // There won't be a case where the link has an invalid `href`
+      // as this component is only rendered if `solution` is truthy.
+      href={solution ?? undefined}
       rel='noopener noreferrer'
       target='_blank'
     >
@@ -194,8 +203,7 @@ export function SolutionDisplayWidget({
   const ShowExamResults = (
     <Button
       block={true}
-      bsStyle='primary'
-      className='btn-invert'
+      variant='primary'
       data-cy={dataCy}
       onClick={showExamResults}
     >

client/src/components/staging-warning-modal/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
-import { Button, Modal } from '@freecodecamp/react-bootstrap';
+import { Modal } from '@freecodecamp/react-bootstrap';
 import { Trans, useTranslation } from 'react-i18next';
+import { Button } from '@freecodecamp/ui';
 
 import store from 'store';
 import { Spacer } from '../helpers';
@@ -51,11 +52,9 @@ function StagingWarningModal(): JSX.Element {
         <hr />
         <Button
           block={true}
-          bsStyle='danger'
+          variant='danger'
           data-testid='accepts-warning'
-          className='btn-invert'
           onClick={handleClick}
-          type='button'
         >
           {t('staging-warning.certain')}
         </Button>

client/src/pages/__snapshots__/email-sign-up.test.js.snap

@@ -161,10 +161,8 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
         }
       />
       <a
-        className="big-cta-btn btn btn-lg btn-primary btn-block"
+        className=" relative inline-block mt-[0.5px] border-solid border-3 active:before:w-full active:before:h-full active:before:absolute active:before:inset-0 active:before:border-3 active:before:border-transparent active:before:bg-gray-900 active:before:opacity-20 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 focus:outline-none focus-visible:ring focus-visible:ring-focus-outline-color text-center cursor-pointer no-underline block w-full border-foreground-secondary bg-background-quaternary text-foreground-secondary hover:bg-foreground-primary hover:text-background-primary hover:border-foreground-secondary dark:hover:bg-background-primary dark:hover:text-foreground-primary px-4 py-2.5 text-lg"
         href="http://localhost:3000/signin"
-        onClick={[Function]}
-        onKeyDown={[Function]}
       >
         buttons.sign-up-email-list
       </a>

client/src/pages/email-sign-up.tsx

@@ -1,4 +1,3 @@
-import { Button } from '@freecodecamp/react-bootstrap';
 import React, { useEffect, useRef } from 'react';
 import Helmet from 'react-helmet';
 import { useTranslation, Trans } from 'react-i18next';
@@ -6,7 +5,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';
 
 import IntroDescription from '../components/Intro/components/intro-description';
 import createRedirect from '../components/create-redirect';
@@ -66,9 +65,8 @@ function EmailListOptIn({
           <Col md={4} mdOffset={2} sm={5} smOffset={1} xs={12}>
             <Button
               block={true}
-              bsSize='lg'
-              bsStyle='primary'
-              className='big-cta-btn'
+              size='large'
+              variant='primary'
               onClick={() => acceptTerms(true)}
             >
               {t('buttons.yes-please')}
@@ -78,9 +76,8 @@ function EmailListOptIn({
           <Col md={4} sm={5} xs={12}>
             <Button
               block={true}
-              bsSize='lg'
-              bsStyle='primary'
-              className='big-cta-btn'
+              size='large'
+              variant='primary'
               onClick={() => acceptTerms(false)}
             >
               {t('buttons.no-thanks')}
@@ -96,9 +93,8 @@ function EmailListOptIn({
         <Spacer size='small' />
         <Button
           block={true}
-          bsSize='lg'
-          bsStyle='primary'
-          className='big-cta-btn'
+          size='large'
+          variant='primary'
           href={`${apiLocation}/signin`}
         >
           {t('buttons.sign-up-email-list')}

tools/ui-components/src/button/button.tsx

@@ -59,6 +59,10 @@ const computeClassNames = ({
           : [
               'hover:bg-foreground-danger',
               'hover:text-background-danger',
+              // This hover rule is redundant for the component library,
+              // but is needed to override the border color set in client's `global.css`.
+              // We can remove it once we have completely removed the CSS overrides in client.
+              'hover:border-foreground-danger',
               'dark:hover:bg-background-danger',
               'dark:hover:text-foreground-danger'
             ])
@@ -74,6 +78,10 @@ const computeClassNames = ({
           : [
               'hover:bg-foreground-info',
               'hover:text-background-info',
+              // This hover rule is redundant for the component library,
+              // but is needed to override the border color set in client's `global.css`.
+              // We can remove it once we have completely removed the CSS overrides in client.
+              'hover:border-foreground-info',
               'dark:hover:bg-background-info',
               'dark:hover:text-foreground-info'
             ])
@@ -90,6 +98,10 @@ const computeClassNames = ({
           : [
               'hover:bg-foreground-primary',
               'hover:text-background-primary',
+              // This hover rule is redundant for the component library,
+              // but is needed to override the border color set in client's `global.css`.
+              // We can remove it once we have completely removed the CSS overrides in client.
+              'hover:border-foreground-secondary',
               'dark:hover:bg-background-primary',
               'dark:hover:text-foreground-primary'
             ])