refactor(client): migrate buttons on the settings page to ui-components

client/src/components/Header/components/login.tsx

@@ -1,4 +1,3 @@
-import { Button } from '@freecodecamp/react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faRightToBracket } from '@fortawesome/free-solid-svg-icons';
 import React, { ReactNode } from 'react';
@@ -32,8 +31,7 @@ const Login = ({
 
   const href = isSignedIn ? `${homeLocation}/learn` : `${apiLocation}/signin`;
   return (
-    <Button
-      bsStyle='default'
+    <a
       className={(block ? 'btn-cta-big btn-block' : '') + ' signup-btn btn-cta'}
       data-test-label={dataTestLabel}
       data-playwright-test-label='header-sign-in-button'
@@ -44,7 +42,7 @@ const Login = ({
         <span className='sr-only'> {t('buttons.sign-in')}</span>
       </span>
       <span className='login-btn-text'>{children || t('buttons.sign-in')}</span>
-    </Button>
+    </a>
   );
 };
 

client/src/components/Header/components/universal-nav.css

@@ -342,6 +342,7 @@ li > button.nav-link-signout:not([aria-disabled='true']):is(:hover, :focus) {
   max-height: var(--header-element-size);
   min-width: var(--header-element-size);
   padding: 0 4px;
+  text-decoration: none;
 }
 
 @media (min-width: 601px) {

client/src/components/formHelpers/form.test.tsx

@@ -29,7 +29,7 @@ test('should render', () => {
 
   const button = screen.getByText(/submit/i);
   expect(button).toHaveAttribute('type', 'submit');
-  expect(button).toBeDisabled();
+  expect(button).toHaveAttribute('aria-disabled', 'true');
 });
 
 test('should render with default values', () => {

client/src/components/helpers/form/__snapshots__/block-save-button.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<BlockSaveButton /> snapshot 1`] = `
 <div>
   <button
-    class="btn btn-primary btn-block"
+    class=" 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-3 py-1.5 text-md"
     type="submit"
   >
     buttons.save

client/src/components/helpers/form/block-save-button.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@freecodecamp/react-bootstrap';
+import { Button, type ButtonProps } from '@freecodecamp/ui';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -9,7 +9,7 @@ function BlockSaveButton({
 }: {
   children?: React.ReactNode;
   disabled?: boolean;
-  bgSize?: string;
+  bgSize?: ButtonProps['size'];
 }): JSX.Element {
   const { t } = useTranslation();
 
@@ -18,8 +18,7 @@ function BlockSaveButton({
       block={true}
       // the button is used to submit solutions in projects that require external URL
       // these buttons don't use bgSize, that's why the bgSize is optional.
-      bsSize={bgSize}
-      bsStyle='primary'
+      size={bgSize}
       type='submit'
       {...restProps}
     >

client/src/components/layouts/global.css

@@ -285,16 +285,14 @@ fieldset[disabled] .btn-primary.focus {
 .btn-cta {
   background-color: #feac32;
   background-image: linear-gradient(#fecc4c, #ffac33);
-  border-width: 3px;
-  border-color: #feac32;
+  border: 3px solid #feac32;
   color: #0a0a23 !important;
 }
 .btn-cta:hover,
 .btn-cta:focus,
 .btn-cta:active:hover {
   background-color: #fecc4c !important;
-  border-width: 3px;
-  border-color: #f1a02a;
+  border: 3px solid #f1a02a;
   background-image: none;
   color: #0a0a23 !important;
 }

client/src/components/settings/__snapshots__/honesty.test.tsx.snap

@@ -44,13 +44,10 @@ exports[`<Honesty /> <Honesty /> snapshot when isHonest is false: Honesty 1`] =
       </p>
     </y>
     <Button
-      active={false}
-      aria-disabled={false}
       block={true}
-      bsClass="btn"
-      bsStyle="primary"
       disabled={false}
       onClick={[Function]}
+      variant="primary"
     >
       buttons.agree-honesty
     </Button>
@@ -102,13 +99,10 @@ exports[`<Honesty /> <Honesty /> snapshot when isHonest is true: HonestyAccepted
       </p>
     </y>
     <Button
-      active={false}
-      aria-disabled={true}
       block={true}
-      bsClass="btn"
-      bsStyle="primary"
-      disabled={false}
+      disabled={true}
       onClick={[Function]}
+      variant="primary"
     >
       buttons.accepted-honesty
     </Button>

client/src/components/settings/about.tsx

@@ -267,8 +267,8 @@ class AboutSettings extends Component<AboutProps, AboutState> {
               </FormGroup>
             </div>
             <BlockSaveButton
-              aria-disabled={this.isFormPristine()}
-              bgSize='lg'
+              disabled={this.isFormPristine()}
+              bgSize='large'
               {...(this.isFormPristine() && { tabIndex: -1 })}
             >
               {t('buttons.save')}{' '}

client/src/components/settings/certification.tsx

@@ -1,4 +1,3 @@
-import { Button } from '@freecodecamp/react-bootstrap';
 import { Link, navigate } from 'gatsby';
 import { find } from 'lodash-es';
 import React, { MouseEvent, useState } from 'react';
@@ -7,7 +6,7 @@ import type { TFunction } from 'i18next';
 import { createSelector } from 'reselect';
 import ScrollableAnchor, { configureAnchors } from 'react-scrollable-anchor';
 import { connect } from 'react-redux';
-import { Table } from '@freecodecamp/ui';
+import { Table, Button } from '@freecodecamp/ui';
 
 import { regeneratePathAndHistory } from '../../../../shared/utils/polyvinyl';
 import ProjectPreviewModal from '../../templates/Challenges/components/project-preview-modal';
@@ -180,12 +179,6 @@ const LegacyFullStack = (props: CertificationSettingsProps) => {
   const certSlug = Certification.LegacyFullStack;
   const certLocation = `/certification/${username}/${certSlug}`;
 
-  const buttonStyle = {
-    marginBottom: '30px',
-    padding: '6px 12px',
-    fontSize: '18px'
-  };
-
   const createClickHandler =
     (certSlug: keyof typeof certSlugTypeMap) =>
     (e: MouseEvent<HTMLButtonElement>) => {
@@ -225,29 +218,28 @@ const LegacyFullStack = (props: CertificationSettingsProps) => {
         </ul>
       </div>
 
-      <div className={'col-xs-12'}>
+      <div>
         {fullStackClaimable ? (
           <Button
-            bsSize='sm'
-            bsStyle='primary'
-            className={'col-xs-12'}
+            size='small'
+            variant='primary'
+            block={true}
             href={certLocation}
             id={'button-' + certSlug}
+            // This floating promise is acceptable
+            // eslint-disable-next-line @typescript-eslint/no-misused-promises
             onClick={createClickHandler(certSlug)}
-            style={buttonStyle}
             target='_blank'
           >
             {isFullStackCert ? t('buttons.show-cert') : t('buttons.claim-cert')}
           </Button>
         ) : (
           <Button
-            bsSize='sm'
-            bsStyle='primary'
-            className={'col-xs-12'}
+            size='small'
+            variant='primary'
+            block={true}
             disabled={true}
             id={'button-' + certSlug}
-            style={buttonStyle}
-            target='_blank'
           >
             {t('buttons.claim-cert')}
           </Button>
@@ -402,10 +394,11 @@ function CertificationSettings(props: CertificationSettingsProps) {
           <td colSpan={2}>
             <Button
               block={true}
-              bsStyle='primary'
-              className={'col-xs-12'}
+              variant='primary'
               href={certLocation}
               data-cy={`btn-for-${certSlug}`}
+              // This floating promise is acceptable
+              // eslint-disable-next-line @typescript-eslint/no-misused-promises
               onClick={clickHandler}
             >
               {isCert ? t('buttons.show-cert') : t('buttons.claim-cert')}{' '}

client/src/components/settings/danger-zone.tsx

@@ -1,19 +1,16 @@
-import { Button } from '@freecodecamp/react-bootstrap';
 import React, { useState } from 'react';
 import type { TFunction } from 'i18next';
 import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
-import { Panel } from '@freecodecamp/ui';
+import { Panel, Button } from '@freecodecamp/ui';
 
 import { deleteAccount, resetProgress } from '../../redux/settings/actions';
 import { FullWidthRow, Spacer } from '../helpers';
 import DeleteModal from './delete-modal';
 import ResetModal from './reset-modal';
 
-import './danger-zone.css';
-
 interface DangerZoneProps {
   deleteAccount: () => void;
   resetProgress: () => void;
@@ -52,9 +49,8 @@ function DangerZone({ deleteAccount, resetProgress, t }: DangerZoneProps) {
         <FullWidthRow>
           <Button
             block={true}
-            bsSize='lg'
-            bsStyle='danger'
-            className='btn-danger'
+            size='large'
+            variant='danger'
             onClick={toggleResetModal}
             type='button'
           >
@@ -63,9 +59,8 @@ function DangerZone({ deleteAccount, resetProgress, t }: DangerZoneProps) {
           <Spacer size='small' />
           <Button
             block={true}
-            bsSize='lg'
-            bsStyle='danger'
-            className='btn-danger'
+            size='large'
+            variant='danger'
             onClick={toggleDeleteModal}
             type='button'
           >

client/src/components/settings/delete-modal.tsx

@@ -1,11 +1,10 @@
-import { Button, Modal } from '@freecodecamp/react-bootstrap';
+import { Modal } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { Button } from '@freecodecamp/ui';
 
 import { Spacer } from '../helpers';
 
-import './danger-zone.css';
-
 type DeleteModalProps = {
   delete: () => void;
   onHide: () => void;
@@ -44,9 +43,8 @@ function DeleteModal(props: DeleteModalProps): JSX.Element {
         <hr />
         <Button
           block={true}
-          bsSize='lg'
-          bsStyle='primary'
-          className='btn-invert'
+          size='large'
+          variant='primary'
           onClick={props.onHide}
           type='button'
         >
@@ -55,9 +53,8 @@ function DeleteModal(props: DeleteModalProps): JSX.Element {
         <Spacer size='small' />
         <Button
           block={true}
-          bsSize='lg'
-          bsStyle='danger'
-          className='btn-danger'
+          size='large'
+          variant='danger'
           onClick={props.delete}
           type='button'
         >