refactor(client): migrate link to Button (#55019)

client/src/components/layouts/global.css

@@ -227,37 +227,24 @@ input[type='submit'],
 
 button:hover,
 input[type='submit']:hover,
-.btn:hover,
-.btn-default.active:hover,
-.btn-default.active,
-.btn-primary:hover {
+.btn:hover {
   border-color: var(--secondary-color);
   background-color: var(--secondary-color);
   color: var(--secondary-background);
   cursor: pointer;
 }
 
-.btn:active,
-.btn-primary:active {
+.btn:active {
   background-color: var(--secondary-background);
 }
 
-.btn:focus,
-.btn-primary:focus,
-.btn-primary.focus {
+.btn:focus {
   background-color: var(--quaternary-background);
   color: var(--secondary-color);
   border-color: var(--secondary-color);
 }
 
-.btn:active:hover,
-.btn-primary:hover,
-.btn-primary:active:hover,
-.btn-primary.active:hover,
-.btn-primary:active:focus,
-.btn-primary.active:focus,
-.btn-primary:active.focus,
-.btn-primary.active.focus {
+.btn:active:hover {
   background-color: var(--secondary-color);
   color: var(--secondary-background);
 }
@@ -266,16 +253,7 @@ button[aria-disabled='true'],
 button[aria-disabled='true']:hover,
 .btn.disabled,
 .btn[disabled],
-fieldset[disabled] .btn,
-.btn-primary.disabled:hover,
-.btn-primary[disabled]:hover,
-fieldset[disabled] .btn-primary:hover,
-.btn-primary.disabled:focus,
-.btn-primary[disabled]:focus,
-fieldset[disabled] .btn-primary:focus,
-.btn-primary.disabled.focus,
-.btn-primary[disabled].focus,
-fieldset[disabled] .btn-primary.focus {
+fieldset[disabled] .btn {
   cursor: not-allowed;
   background-color: var(--quaternary-background);
   border-color: var(--quaternary-color);
@@ -473,12 +451,6 @@ hr {
   border-top: 1px solid var(--quaternary-background);
 }
 
-.btn-primary:active,
-.btn-primary.active {
-  background-color: var(--secondary-color);
-  color: var(--secondary-background);
-}
-
 .challenge-output span {
   font-size: 1rem;
 }

client/src/components/profile/components/certifications.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import { Button } from '@freecodecamp/ui';
 
 import { certificatesByNameSelector } from '../../../redux/selectors';
 import type { CurrentCert } from '../../../redux/prop-types';
-import { FullWidthRow, Link, Spacer } from '../../helpers';
+import { FullWidthRow, Spacer } from '../../helpers';
 
 const mapStateToProps = (
   state: Record<string, unknown>,
@@ -46,15 +47,16 @@ function CertButton({ username, cert }: CertButtonProps): JSX.Element {
   const { t } = useTranslation();
   return (
     <>
-      <Link
-        className='btn btn-lg btn-primary btn-block'
-        to={`/certification/${username}/${cert.certSlug}`}
+      <Button
+        block
+        size='large'
+        href={`/certification/${username}/${cert.certSlug}`}
         data-cy='claimed-certification'
       >
         {t('buttons.view-cert-title', {
           certTitle: t(`certification.title.${cert.certSlug}`)
         })}
-      </Link>
+      </Button>
       <Spacer size='small' />
     </>
   );

client/src/templates/Introduction/components/challenges.tsx

@@ -2,6 +2,8 @@ import { Link } from 'gatsby';
 import React from 'react';
 import { withTranslation, useTranslation } from 'react-i18next';
 
+import { Button } from '@freecodecamp/ui';
+
 import GreenNotCompleted from '../../../assets/icons/green-not-completed';
 import GreenPass from '../../../assets/icons/green-pass';
 import { ChallengeWithCompletedNode } from '../../../redux/prop-types';
@@ -66,15 +68,12 @@ function Challenges({
     <>
       {firstIncompleteChallenge && (
         <div className='challenge-jump-link'>
-          <Link
-            className='btn btn-primary'
-            to={firstIncompleteChallenge.fields.slug}
-          >
+          <Button size='small' href={firstIncompleteChallenge.fields.slug}>
             {!isChallengeStarted
               ? t('buttons.start-project')
               : t('buttons.resume-project')}{' '}
             {blockTitle && <span className='sr-only'>{blockTitle}</span>}
-          </Link>
+          </Button>
         </div>
       )}
       <nav

client/src/templates/Introduction/intro.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 
-import { Container } from '@freecodecamp/ui';
+import { Container, Button } from '@freecodecamp/ui';
 import Spacer from '../../components/helpers/spacer';
 import FullWidthRow from '../../components/helpers/full-width-row';
 import LearnLayout from '../../components/layouts/learn';
@@ -58,16 +58,13 @@ function IntroductionPage({
           />
         </FullWidthRow>
         <FullWidthRow>
-          <Link
-            className='btn btn-lg btn-primary btn-block'
-            to={firstLessonPath}
-          >
+          <Button block size='large' href={firstLessonPath}>
             {t('buttons.first-lesson')}
-          </Link>
+          </Button>
           <Spacer size='small' />
-          <Link className='btn btn-lg btn-primary btn-block' to='/learn'>
+          <Button block size='large' href='/learn'>
             {t('buttons.view-curriculum')}
-          </Link>
+          </Button>
           <Spacer size='small' />
           <hr />
         </FullWidthRow>