chore(client): Swap Spacer component (#56765)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Co-authored-by: Ilenia M <nethleen@gmail.com>

client/src/client-only-routes/show-certification.tsx

@@ -5,14 +5,14 @@ import { Trans, useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Row, Image, Button } from '@freecodecamp/ui';
+import { Container, Col, Row, Image, Button, Spacer } from '@freecodecamp/ui';
 
 import envData from '../../config/env.json';
 import { getLangCode } from '../../../shared/config/i18n';
 import FreeCodeCampLogo from '../assets/icons/freecodecamp';
 import MicrosoftLogo from '../assets/icons/microsoft-logo';
 import { createFlashMessage } from '../components/Flash/redux';
-import { Loader, Spacer } from '../components/helpers';
+import { Loader } from '../components/helpers';
 import RedirectHome from '../components/redirect-home';
 import { Themes } from '../components/settings/theme';
 import { showCert, fetchProfileForUser } from '../redux/actions';
@@ -253,7 +253,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
       className='donation-section'
       data-playwright-test-label='donation-section'
     >
-      <Spacer size='large' />
+      <Spacer size='l' />
       {!isDonationSubmitted && (
         <Row>
           <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
@@ -280,13 +280,13 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
           />
         </Col>
       </Row>
-      <Spacer size='medium' />
+      <Spacer size='m' />
       <Row>
         <Col sm={4} smOffset={4} xs={6} xsOffset={3}>
           {isDonationSubmitted && donationCloseBtn}
         </Col>
       </Row>
-      <Spacer size='large' />
+      <Spacer size='l' />
     </div>
   );
 
@@ -308,7 +308,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
         >
           {t('profile.add-linkedin')}
         </Button>
-        <Spacer size='medium' />
+        <Spacer size='m' />
         <Button
           block={true}
           size='large'
@@ -323,7 +323,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
           {t('profile.add-twitter')}
         </Button>
       </Col>
-      <Spacer size='large' />
+      <Spacer size='l' />
     </Row>
   );
 
@@ -484,11 +484,11 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
         className='row certificate-links'
         data-playwright-test-label='cert-links'
       >
-        <Spacer size='large' />
+        <Spacer size='l' />
         {signedInUserName === username ? shareCertBtns : ''}
-        <Spacer size='large' />
+        <Spacer size='l' />
         <ShowProjectLinks certName={certTitle} name={displayName} user={user} />
-        <Spacer size='large' />
+        <Spacer size='l' />
       </div>
     </Container>
   );

client/src/client-only-routes/show-project-links.tsx

@@ -2,9 +2,9 @@ import { find } from 'lodash-es';
 import React, { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
-import { Table } from '@freecodecamp/ui';
+import { Table, Spacer } from '@freecodecamp/ui';
 
-import { Link, Spacer } from '../components/helpers';
+import { Link } from '../components/helpers';
 import ProjectModal from '../components/SolutionViewer/project-modal';
 import type { CompletedChallenge, User } from '../redux/prop-types';
 import {
@@ -186,7 +186,7 @@ const ShowProjectLinks = (props: ShowProjectLinksProps): JSX.Element => {
   return (
     <div data-playwright-test-label='project-links'>
       {t(getCertHeading(certName), { user: name })}
-      <Spacer size='medium' />
+      <Spacer size='m' />
       <Table striped>
         <thead>
           <tr>
@@ -199,7 +199,7 @@ const ShowProjectLinks = (props: ShowProjectLinksProps): JSX.Element => {
           <ProjectsFor certName={certName} />
         </tbody>
       </Table>
-      <Spacer size='medium' />
+      <Spacer size='m' />
       <ProjectModal
         challengeFiles={completedChallenge?.challengeFiles ?? null}
         handleSolutionModalHide={handleSolutionModalHide}

client/src/client-only-routes/show-settings.tsx

@@ -4,13 +4,13 @@ import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 
-import { Callout, Container } from '@freecodecamp/ui';
+import { Callout, Container, Spacer } from '@freecodecamp/ui';
 import { useFeatureIsOn } from '@growthbook/growthbook-react';
 
 import store from 'store';
 import envData from '../../config/env.json';
 import { createFlashMessage } from '../components/Flash/redux';
-import { FullWidthRow, Loader, Spacer } from '../components/helpers';
+import { FullWidthRow, Loader } from '../components/helpers';
 import Certification from '../components/settings/certification';
 import MiscSettings from '../components/settings/misc-settings';
 import DangerZone from '../components/settings/danger-zone';
@@ -145,7 +145,7 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
       <Helmet title={`${t('buttons.settings')} | freeCodeCamp.org`} />
       <Container>
         <main>
-          <Spacer size='large' />
+          <Spacer size='l' />
           <FullWidthRow>
             <Callout variant='info'>{t('settings.profile-note')}</Callout>
           </FullWidthRow>
@@ -165,18 +165,18 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
             toggleNightMode={toggleNightMode}
             toggleSoundMode={toggleSoundMode}
           />
-          <Spacer size='medium' />
+          <Spacer size='m' />
           <Privacy />
-          <Spacer size='medium' />
+          <Spacer size='m' />
           <Email
             email={email}
             isEmailVerified={isEmailVerified}
             sendQuincyEmail={sendQuincyEmail}
             updateQuincyEmail={updateQuincyEmail}
           />
-          <Spacer size='medium' />
+          <Spacer size='m' />
           <Honesty isHonest={isHonest} updateIsHonest={updateIsHonest} />
-          <Spacer size='medium' />
+          <Spacer size='m' />
           {examTokenFlag && <ExamToken />}
           <Certification
             completedChallenges={completedChallenges}
@@ -207,11 +207,11 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
           />
           {userToken && (
             <>
-              <Spacer size='medium' />
+              <Spacer size='m' />
               <UserToken />
             </>
           )}
-          <Spacer size='medium' />
+          <Spacer size='m' />
           <DangerZone />
         </main>
       </Container>

client/src/client-only-routes/show-unsubscribed.tsx

@@ -2,10 +2,9 @@ import type { RouteComponentProps } from '@reach/router';
 import React from 'react';
 import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
-import { Container, Panel, Button } from '@freecodecamp/ui';
+import { Container, Panel, Button, Spacer } from '@freecodecamp/ui';
 
 import envData from '../../config/env.json';
-import { Spacer } from '../components/helpers';
 import FullWidthRow from '../components/helpers/full-width-row';
 
 const { apiLocation } = envData;
@@ -26,9 +25,9 @@ function ShowUnsubscribed({
       <Container>
         <main>
           <FullWidthRow>
-            <Spacer size='large' />
+            <Spacer size='l' />
             <Panel variant='primary' className='text-center'>
-              <Spacer size='medium' />
+              <Spacer size='m' />
               <h2 data-playwright-test-label='main-heading'>
                 {t('misc.unsubscribed')}
               </h2>
@@ -49,7 +48,7 @@ function ShowUnsubscribed({
               </Button>
             </FullWidthRow>
           ) : null}
-          <Spacer size='large' />
+          <Spacer size='l' />
         </main>
       </Container>
     </>

client/src/client-only-routes/show-update-email.tsx

@@ -16,11 +16,12 @@ import {
   ControlLabel,
   Col,
   Row,
-  Button
+  Button,
+  Spacer
 } from '@freecodecamp/ui';
 
 import envData from '../../config/env.json';
-import { Spacer, Loader, Link } from '../components/helpers';
+import { Loader, Link } from '../components/helpers';
 import './show-update-email.css';
 import { isSignedInSelector, userSelector } from '../redux/selectors';
 import { hardGoTo as navigate } from '../redux/actions';
@@ -87,7 +88,7 @@ function ShowUpdateEmail({
         <title>{t('misc.update-email-1')} | freeCodeCamp.org</title>
       </Helmet>
       <Container>
-        <Spacer size='medium' />
+        <Spacer size='m' />
         <h2 className='text-center'>{t('misc.update-email-2')}</h2>
         <Row>
           <Col sm={6} smOffset={3}>

client/src/client-only-routes/show-user.tsx

@@ -11,11 +11,12 @@ import {
   Panel,
   Col,
   Row,
-  Button
+  Button,
+  Spacer
 } from '@freecodecamp/ui';
 
 import Login from '../components/Header/components/login';
-import { Spacer, Loader, FullWidthRow } from '../components/helpers';
+import { Loader, FullWidthRow } from '../components/helpers';
 import { reportUser } from '../redux/actions';
 import {
   userFetchStateSelector,
@@ -83,17 +84,17 @@ function ShowUser({
     return (
       <main>
         <FullWidthRow>
-          <Spacer size='large' />
+          <Spacer size='l' />
           <Panel variant='primary' className='text-center'>
             <Panel.Heading>
               <Panel.Title>{t('report.sign-in')}</Panel.Title>
             </Panel.Heading>
             <Panel.Body className='text-center'>
-              <Spacer size='large' />
+              <Spacer size='l' />
               <Col md={6} mdOffset={3} sm={8} smOffset={2} xs={12}>
                 <Login block={true}>{t('buttons.click-here')}</Login>
               </Col>
-              <Spacer size='exLarge' />
+              <Spacer size='xl' />
             </Panel.Body>
           </Panel>
         </FullWidthRow>
@@ -106,7 +107,7 @@ function ShowUser({
       <Helmet>
         <title>{t('report.portfolio')} | freeCodeCamp.org</title>
       </Helmet>
-      <Spacer size='large' />
+      <Spacer size='l' />
       <Row className='text-center overflow-fix'>
         <Col sm={8} smOffset={2} xs={12}>
           <h2>{t('report.portfolio-2', { username: username })}</h2>
@@ -133,7 +134,7 @@ function ShowUser({
             <Button block={true} variant='primary' type='submit'>
               {t('report.submit')}
             </Button>
-            <Spacer size='medium' />
+            <Spacer size='m' />
           </form>
         </Col>
       </Row>

client/src/components/Donation/donate-completion.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import Spinner from 'react-spinkit';
-import { Alert } from '@freecodecamp/ui';
+import { Alert, Spacer } from '@freecodecamp/ui';
 
-import { Link, Spacer } from '../helpers';
+import { Link } from '../helpers';
 
 type DonateCompletionProps = {
   error: string | null;
@@ -37,7 +37,7 @@ function DonateCompletion({
   return (
     <Alert variant={style} className='donation-completion'>
       <b>{heading}</b>
-      <Spacer size={'medium'} />
+      <Spacer size='m' />
       <div className='donation-completion-body'>
         {(processing || redirecting) && (
           <Spinner

client/src/components/Donation/donate-form.tsx

@@ -6,6 +6,7 @@ import { connect } from 'react-redux';
 import Spinner from 'react-spinkit';
 import { createSelector } from 'reselect';
 import type { TFunction } from 'i18next';
+import { Spacer } from '@freecodecamp/ui';
 
 import {
   defaultDonation,
@@ -22,7 +23,6 @@ import {
   donationFormStateSelector,
   completedChallengesSelector
 } from '../../redux/selectors';
-import Spacer from '../helpers/spacer';
 import { Themes } from '../settings/theme';
 import { DonateFormState } from '../../redux/types';
 import type { CompletedChallenge } from '../../redux/prop-types';
@@ -242,7 +242,7 @@ class DonateForm extends Component<DonateFormProps, DonateFormComponentState> {
     return (
       <>
         <div className={confirmationClass()}>{confirmationWithEditAmount}</div>
-        <Spacer size={editAmount ? 'small' : 'medium'} />
+        <Spacer size={editAmount ? 'xs' : 'm'} />
         <fieldset
           data-playwright-test-label='donation-form'
           className={'donate-btn-group security-legend'}

client/src/components/Donation/donation-modal-body.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Col, Row, Modal } from '@freecodecamp/ui';
+import { Col, Row, Modal, Spacer } from '@freecodecamp/ui';
 import { closeDonationModal } from '../../redux/actions';
-import { Spacer } from '../helpers';
 import { PaymentContext } from '../../../../shared/config/donation-settings'; //
 import donationAnimation from '../../assets/images/donation-bear-animation.svg';
 import supporterBear from '../../assets/images/supporter-bear.svg';
@@ -58,7 +57,7 @@ function ModalHeader({
                   )
                 })}
               </b>
-              <Spacer size='small' />
+              <Spacer size='xs' />
             </>
           )}
 
@@ -109,7 +108,7 @@ const Benefits = ({ setShowForm }: { setShowForm: (arg: boolean) => void }) => {
     <Row className={'donate-btn-group'}>
       <Col xs={12}>
         <ModalBenefitList />
-        <Spacer size='small' />
+        <Spacer size='xs' />
         <button
           className='text-center confirm-donation-btn donate-btn-group'
           type='submit'
@@ -117,7 +116,7 @@ const Benefits = ({ setShowForm }: { setShowForm: (arg: boolean) => void }) => {
         >
           {t('donate.become-supporter')}
         </button>
-        <Spacer size='medium' />
+        <Spacer size='m' />
       </Col>
     </Row>
   );
@@ -195,7 +194,7 @@ const BecomeASupporterConfirmation = ({
         donationAttempted={donationAttempted}
         showForm={showForm}
       />
-      <Spacer size='small' />
+      <Spacer size='xs' />
       {showForm ? (
         <MultiTierDonationForm
           setShowHeaderAndFooter={setShowHeaderAndFooter}

client/src/components/Donation/donation-text-components.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 import { useFeature } from '@growthbook/growthbook-react';
+import { Spacer } from '@freecodecamp/ui';
 
 import Caret from '../../assets/icons/caret';
-import { Spacer } from '../helpers';
 import GreenPass from '../../assets/icons/green-pass';
 
 const POBOX = (
@@ -25,7 +25,7 @@ export const CtaText = (): JSX.Element => {
       <h1 data-playwright-test-label='main-head' id='content-start'>
         {t('donate.help-more')}
       </h1>
-      <Spacer size='medium' />
+      <Spacer size='m' />
       <p data-playwright-test-label='donate-text-1'>{t('donate.efficiency')}</p>
       <p data-playwright-test-label='donate-text-2'>
         {t('donate.why-donate-1')}
@@ -50,7 +50,7 @@ export const ThankYouMessage = ({
       <h1 data-playwright-test-label='main-head'>{t('donate.thank-you')}</h1>
       {(askForDonation || thankContributon) && (
         <>
-          <Spacer size='medium' />
+          <Spacer size='m' />
           <p>{t('donate.crucial-contribution')}</p>
         </>
       )}
@@ -201,7 +201,7 @@ export const DonationFaqText = (): JSX.Element => {
   return (
     <>
       <h2 data-playwright-test-label='faq-head'>{t('donate.faq')}</h2>
-      <Spacer size='small' />
+      <Spacer size='xs' />
       {faqItems.map((item, iterator) => FaqItem(item.Q, item.A, iterator))}
     </>
   );
@@ -311,7 +311,7 @@ export const GetSupporterBenefitsText = ({
   const { t } = useTranslation();
   return (
     <>
-      <Spacer size='large' />
+      <Spacer size='l' />
       <p>{t('donate.as-you-see')}</p>
       {!isDonating ? <p>{t('donate.get-benefits')}</p> : null}
     </>

client/src/components/Donation/multi-tier-donation-form.tsx

@@ -5,11 +5,11 @@ import {
   TabsTrigger,
   TabsList,
   Col,
-  Row
+  Row,
+  Spacer
 } from '@freecodecamp/ui';
 import { useFeature } from '@growthbook/growthbook-react';
 import { useTranslation } from 'react-i18next';
-import { Spacer } from '../helpers';
 
 import {
   PaymentContext,
@@ -57,7 +57,7 @@ function SelectionTabs({
             usd: formattedAmountLabel(donationAmount)
           })}
         </b>
-        <Spacer size='small' />
+        <Spacer size='xs' />
         <Tabs
           className={'donate-btn-group'}
           defaultValue={donationAmount.toString()}
@@ -74,7 +74,7 @@ function SelectionTabs({
               </TabsTrigger>
             ))}
           </TabsList>
-          <Spacer size='small' />
+          <Spacer size='xs' />
           {subscriptionAmounts.map(value => {
             const usd = formattedAmountLabel(donationAmount);
             const hours = convertToTimeContributed(donationAmount);
@@ -103,7 +103,7 @@ function SelectionTabs({
             ? t('buttons.confirm-amount')
             : t('buttons.donate')}
         </button>
-        <Spacer size='medium' />
+        <Spacer size='m' />
       </Col>
     </Row>
   );
@@ -132,7 +132,7 @@ function DonationFormRow({
           editAmount={() => setShowDonateForm(false)}
           selectedDonationAmount={donationAmount}
         />
-        <Spacer size='medium' />
+        <Spacer size='m' />
       </Col>
     </Row>
   );

client/src/components/Footer/__snapshots__/footer.test.tsx.snap

@@ -317,12 +317,7 @@ exports[`<Footer /> matches snapshot 1`] = `
         </li>
       </ul>
       <div
-        className="spacer"
-        style={
-          {
-            "padding": "15px 0",
-          }
-        }
+        className="h-[30px]"
       />
       <div>
         <h2

client/src/components/Footer/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { Col } from '@freecodecamp/ui';
+import { Col, Spacer } from '@freecodecamp/ui';
 
 import appleStoreBadge from '../../assets/images/footer-ads/apple-store-badge.svg';
 import googlePlayBadge from '../../assets/images/footer-ads/google-play-badge.svg';
-import { Spacer, Link } from '../helpers';
+import { Link } from '../helpers';
 import './footer.css';
 
 function Footer(): JSX.Element {
@@ -187,7 +187,7 @@ function Footer(): JSX.Element {
             </li>
           </ul>
 
-          <Spacer size='medium' />
+          <Spacer size='m' />
 
           <div>
             <h2 id='mobile-app' className='col-header'>

client/src/components/FourOhFour/index.tsx

@@ -2,10 +2,11 @@ import { RouteComponentProps } from '@reach/router';
 import React from 'react';
 import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
+import { Spacer } from '@freecodecamp/ui';
 
 import notFoundLogo from '../../assets/images/freeCodeCamp-404.svg';
 import { randomQuote } from '../../utils/get-words';
-import { Spacer, Link } from '../helpers';
+import { Link } from '../helpers';
 
 import './404.css';
 
@@ -21,16 +22,16 @@ const FourOhFour = (_props: RouteComponentProps): JSX.Element => {
         src={notFoundLogo}
         data-playwright-test-label='not-found-image'
       />
-      <Spacer size='medium' />
+      <Spacer size='m' />
       <h1 id='content-start' data-playwright-test-label='not-found-heading'>
         {t('404.page-not-found')}.
       </h1>
-      <Spacer size='medium' />
+      <Spacer size='m' />
       <div>
         <p data-playwright-test-label='heres-quote-paragraph'>
           {t('404.heres-a-quote')}
         </p>
-        <Spacer size='medium' />
+        <Spacer size='m' />
         <blockquote
           className='quote-wrapper'
           data-playwright-test-label='quote-wrapper'
@@ -43,7 +44,7 @@ const FourOhFour = (_props: RouteComponentProps): JSX.Element => {
           </p>
         </blockquote>
       </div>
-      <Spacer size='large' />
+      <Spacer size='l' />
       <Link
         className='btn btn-cta'
         to='/learn'

client/src/components/Intro/components/intro-description.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { Spacer } from '@freecodecamp/ui';
 import envData from '../../../../config/env.json';
-import { Link, Spacer } from '../../helpers';
+import { Link } from '../../helpers';
 
 import '../intro.css';
 
@@ -14,14 +15,14 @@ function IntroDescription(): JSX.Element {
       className='intro-description'
       data-playwright-test-label='learn-read-this-section'
     >
-      <Spacer size='medium' />
+      <Spacer size='m' />
       <p
         className='text-center'
         data-playwright-test-label='learn-read-this-heading'
       >
         <strong>{t('learn.read-this.heading')}</strong>
       </p>
-      <Spacer size='medium' />
+      <Spacer size='m' />
       {[...Array(8).keys()].map(i => (
         <p key={i} data-playwright-test-label='learn-read-this-p'>
           {t(`learn.read-this.p${i + 1}`)}

client/src/components/Intro/index.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { Spacer } from '@freecodecamp/ui';
 import { randomQuote } from '../../utils/get-words';
 import Login from '../Header/components/login';
-import { Link, Spacer, Loader } from '../helpers';
+import { Link, Loader } from '../helpers';
 import IntroDescription from './components/intro-description';
 
 import './intro.css';
@@ -34,22 +35,22 @@ const Intro = ({
   if (pending && !complete) {
     return (
       <>
-        <Spacer size='medium' />
+        <Spacer size='m' />
         <Loader />
-        <Spacer size='medium' />
+        <Spacer size='m' />
       </>
     );
   } else if (isSignedIn) {
     const { quote, author } = randomQuote();
     return (
       <>
-        <Spacer size='medium' />
+        <Spacer size='m' />
         <h1 id='content-start' className='text-center'>
           {name
             ? `${t('learn.welcome-1', { name: name })}`
             : `${t('learn.welcome-2')}`}
         </h1>
-        <Spacer size='medium' />
+        <Spacer size='m' />
         <div className='text-center quote-partial'>
           <blockquote className='blockquote' data-testid='quote-block'>
             <span>
@@ -66,7 +67,7 @@ const Intro = ({
         />
         {completedChallengeCount && slug && completedChallengeCount < 15 ? (
           <div className='intro-description'>
-            <Spacer size='medium' />
+            <Spacer size='m' />
             <p>
               <Trans i18nKey='learn.start-at-beginning'>
                 <Link to={slug} />
@@ -81,7 +82,7 @@ const Intro = ({
   } else {
     return (
       <>
-        <Spacer size='medium' />
+        <Spacer size='m' />
         <h1
           id='content-start'
           className='text-center'
@@ -89,11 +90,11 @@ const Intro = ({
         >
           {t('learn.heading')}
         </h1>
-        <Spacer size='medium' />
+        <Spacer size='m' />
         <IntroDescription />
-        <Spacer size='medium' />
+        <Spacer size='m' />
         <Login block={true}>{t('buttons.logged-out-cta-btn')}</Login>
-        <Spacer size='medium' />
+        <Spacer size='m' />
       </>
     );
   }

client/src/components/Intro/learn-alert.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Alert } from '@freecodecamp/ui';
+import { Alert, Spacer } from '@freecodecamp/ui';
 import { useFeature } from '@growthbook/growthbook-react';
 import { useTranslation } from 'react-i18next';
-import { Link, Spacer } from '../helpers';
+import { Link } from '../helpers';
 import { ProgressBar } from '../Progress/progress-bar';
 
 interface LearnAlertProps {
@@ -24,7 +24,7 @@ const LearnAlert = ({
         <>
           <div className='text-center'>
             <h2>{t('learn.donation-heading')}</h2>
-            <Spacer size='small' />
+            <Spacer size='xs' />
             <b className='m-0 progress-percent-value'>{`${value}%`}</b>
           </div>
           <div aria-hidden='true' className='progress-wrapper'>
@@ -35,7 +35,7 @@ const LearnAlert = ({
         </>
       )}
       <p>{text}</p>
-      <Spacer size='medium' />
+      <Spacer size='m' />
       <div className={'text-center'}>
         <Link
           className='btn donate-button'
@@ -82,7 +82,7 @@ const LearnAlert = ({
         <b>{t('learn.building-a-university')}</b>
       </p>
       <p>{t('learn.if-help-university')}</p>
-      <Spacer size='medium' />
+      <Spacer size='m' />
       <p className={'text-center'}>
         <Link
           className='btn donate-button'

client/src/components/Map/index.tsx

@@ -2,6 +2,7 @@ import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import { Spacer } from '@freecodecamp/ui';
 import {
   type SuperBlocks,
   SuperBlockStage,
@@ -10,7 +11,7 @@ import {
 } from '../../../../shared/config/curriculum';
 import { SuperBlockIcon } from '../../assets/icons/superblock-icon';
 import LinkButton from '../../assets/icons/link-button';
-import { Spacer, ButtonLink } from '../helpers';
+import { ButtonLink } from '../helpers';
 import { getSuperBlockTitleForMap } from '../../utils/superblock-map-titles';
 import {
   showUpcomingChanges,
@@ -179,7 +180,7 @@ function Map({
               />
             ))}
           </ul>
-          <Spacer size='medium' />
+          <Spacer size='m' />
         </Fragment>
       ))}
     </div>

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

@@ -1,13 +1,12 @@
 import { connect } from 'react-redux';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Row, Button, Modal } from '@freecodecamp/ui';
+import { Row, Button, Modal, Spacer } from '@freecodecamp/ui';
 
 import type { GeneratedExamResults } from '../../redux/prop-types';
 import { closeModal } from '../../templates/Challenges/redux/actions';
 import { isExamResultsModalOpenSelector } from '../../templates/Challenges/redux/selectors';
 import { formatSecondsToTime } from '../../utils/format-seconds';
-import { Spacer } from '../helpers';
 
 type ExamResultsModalProps = {
   projectTitle: string;
@@ -60,27 +59,27 @@ const ExamResultsModal = ({
         {t('settings.labels.results-for', { projectTitle })}
       </Modal.Header>
       <Modal.Body alignment='start'>
-        <Spacer size='medium' />
+        <Spacer size='m' />
         <div style={{ paddingLeft: '30px' }}>
           <Row>
             {t('learn.exam.number-of-questions', {
               n: numberOfQuestionsInExam
             })}
           </Row>{' '}
-          <Spacer size='medium' />
+          <Spacer size='m' />
           <Row>
             {t('learn.exam.correct-answers', { n: numberOfCorrectAnswers })}
           </Row>{' '}
-          <Spacer size='medium' />
+          <Spacer size='m' />
           <Row>{t('learn.exam.percent-correct', { n: percentCorrect })}</Row>
-          <Spacer size='medium' />{' '}
+          <Spacer size='m' />{' '}
           <Row>
             {t('learn.exam.time', {
               t: formatSecondsToTime(examTimeInSeconds)
             })}
           </Row>
         </div>
-        <Spacer size='medium' />
+        <Spacer size='m' />
       </Modal.Body>
       <Modal.Footer alignment='end'>
         <Button

client/src/components/growth-book/codeally-down.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { Alert } from '@freecodecamp/ui';
+import { Alert, Spacer } from '@freecodecamp/ui';
 import { useFeature } from '@growthbook/growthbook-react';
-import Spacer from '../../components/helpers/spacer';
 
 const Down = () => {
   const { t } = useTranslation();
@@ -19,7 +18,7 @@ const Down = () => {
           </a>
         </Trans>
       </p>
-      <Spacer size='small' />
+      <Spacer size='xs' />
       <p>{t('intro:misc-text.progress-wont-save')}</p>
     </Alert>
   );
@@ -40,7 +39,7 @@ const Disabled = () => {
           </a>
         </Trans>
       </p>
-      <Spacer size='small' />
+      <Spacer size='xs' />
       <p>{t('intro:misc-text.progress-wont-save')}</p>
     </Alert>
   );

client/src/components/helpers/index.ts

@@ -1,7 +1,6 @@
 export { default as FullWidthRow } from './full-width-row';
 export { default as Loader } from './loader';
 export { default as SkeletonSprite } from './skeleton-sprite';
-export { default as Spacer } from './spacer';
 export { default as Link } from './link';
 export { default as LazyImage } from './lazy-image';
 export { default as AvatarRenderer } from './avatar-renderer';

client/src/components/helpers/spacer.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-
-const Padding = Object.freeze({
-  xxSmall: 2.5,
-  small: 5,
-  xSmall: 10,
-  medium: 15,
-  large: 30,
-  exLarge: 45,
-  doubleXL: 90
-});
-
-type PaddingKeys = keyof typeof Padding;
-interface SpacerProps {
-  size: PaddingKeys;
-  children?: React.ReactNode;
-}
-
-const Spacer = ({ size, children }: SpacerProps): JSX.Element => (
-  <div className='spacer' style={{ padding: `${Padding[size]}px 0` }}>
-    {children}
-  </div>
-);
-
-export default Spacer;

client/src/components/landing/components/benefits.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Col, Row, Container } from '@freecodecamp/ui';
+import { Col, Row, Container, Spacer } from '@freecodecamp/ui';
 
-import { Spacer } from '../../helpers';
 import FreeIcon from '../../../assets/icons/free';
 import CapIcon from '../../../assets/icons/cap';
 import CommunityIcon from '../../../assets/icons/community';
@@ -32,7 +31,7 @@ const Benefits = (): JSX.Element => {
             </h2>
           </Col>
         </Row>
-        <Spacer size='small' />
+        <Spacer size='xs' />
         <Row>
           <Col xs={12} className='landing-benefits'>
             {benefitItems.map((benefit, index) => {
@@ -43,10 +42,10 @@ const Benefits = (): JSX.Element => {
                   data-playwright-test-label='landing-page-description'
                 >
                   <IconComponent /> {/* Dynamically render the icon */}
-                  <Spacer size='small' />
+                  <Spacer size='xs' />
                   <h3>{benefit.title}</h3>
                   <p>{benefit.description}</p>
-                  <Spacer size='small' />
+                  <Spacer size='xs' />
                 </div>
               );
             })}
@@ -54,7 +53,7 @@ const Benefits = (): JSX.Element => {
         </Row>
         <Row>
           <Col xs={12}>
-            <Spacer size='medium' />
+            <Spacer size='m' />
             <BigCallToAction text={t('landing.benefits.cta')} />
           </Col>
         </Row>

client/src/components/landing/components/certifications.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { Col } from '@freecodecamp/ui';
+import { Col, Spacer } from '@freecodecamp/ui';
 
 import Map from '../../Map/index';
-import { Spacer } from '../../helpers';
 import { type SuperBlocks } from '../../../../../shared/config/curriculum';
 import BigCallToAction from './big-call-to-action';
 
@@ -24,9 +23,9 @@ const Certifications = ({
       xs={12}
     >
       <Map allChallenges={allChallenges} forLanding={true} />
-      <Spacer size='medium' />
+      <Spacer size='m' />
       <BigCallToAction />
-      <Spacer size='medium' />
+      <Spacer size='m' />
     </Col>
   );
 };

client/src/components/landing/components/faq.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Col } from '@freecodecamp/ui';
+import { Col, Spacer } from '@freecodecamp/ui';
 
-import { Spacer } from '../../helpers';
 import BigCallToAction from './big-call-to-action';
 
 interface FaqItem {
@@ -24,7 +23,7 @@ const Faq = (): JSX.Element => {
       className='faq-section'
     >
       <h2 className='big-heading'>{t('landing.faq')}</h2>
-      <Spacer size='small' />
+      <Spacer size='xs' />
       {faqItems.map((faq, i) => (
         <div
           data-test-label='landing-page-faq'
@@ -35,13 +34,13 @@ const Faq = (): JSX.Element => {
           {faq.answer.map((answer, i) => (
             <p key={i}>{answer}</p>
           ))}
-          <Spacer size='small' />
+          <Spacer size='xs' />
         </div>
       ))}
       <h2 className='landing-page-happy'>{t('learn.read-this.p12')}</h2>
-      <Spacer size='medium' />
+      <Spacer size='m' />
       <BigCallToAction />
-      <Spacer size='large' />
+      <Spacer size='l' />
     </Col>
   );
 };

client/src/components/landing/components/landing-top-b.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { Container, Col, Row } from '@freecodecamp/ui';
+import { Container, Col, Row, Spacer } from '@freecodecamp/ui';
 import { clientLocale } from '../../../../config/env.json';
 import {
   AmazonLogo,
@@ -11,7 +11,6 @@ import {
   TencentLogo,
   AlibabaLogo
 } from '../../../assets/images/components';
-import { Spacer } from '../../helpers';
 import BigCallToAction from './big-call-to-action';
 import CampersImage from './campers-image';
 
@@ -57,7 +56,7 @@ function LandingTop(): JSX.Element {
   return (
     <Container fluid={true} className='gradient-container'>
       <Container className='landing-top landing-top-b'>
-        <Spacer size='medium' />
+        <Spacer size='m' />
         <Row>
           <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
             <h1
@@ -86,14 +85,14 @@ function LandingTop(): JSX.Element {
               {t('landing.big-heading-4')}
             </p>
             <LogoRow />
-            <Spacer size='medium' />
+            <Spacer size='m' />
             <BigCallToAction />
           </Col>
         </Row>
         <Row>
           <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
             <CampersImage />
-            <Spacer size='medium' />
+            <Spacer size='m' />
           </Col>
         </Row>
       </Container>

client/src/components/landing/components/landing-top.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Container, Col, Row } from '@freecodecamp/ui';
+import { Container, Col, Row, Spacer } from '@freecodecamp/ui';
 
 import { clientLocale } from '../../../../config/env.json';
 import {
@@ -12,7 +12,6 @@ import {
   TencentLogo,
   AlibabaLogo
 } from '../../../assets/images/components';
-import { Spacer } from '../../helpers';
 import BigCallToAction from './big-call-to-action';
 import CampersImage from './campers-image';
 
@@ -24,7 +23,7 @@ function LandingTop(): JSX.Element {
   return (
     <Container className='landing-top landing-top-a'>
       <Row>
-        <Spacer size='medium' />
+        <Spacer size='m' />
         <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
           <h1
             id='content-start'
@@ -68,10 +67,10 @@ function LandingTop(): JSX.Element {
               </>
             )}
           </div>
-          <Spacer size='medium' />
+          <Spacer size='m' />
           <BigCallToAction />
           <CampersImage />
-          <Spacer size='medium' />
+          <Spacer size='m' />
         </Col>
       </Row>
     </Container>

client/src/components/landing/components/ui-images.tsx

@@ -1,9 +1,10 @@
 // eslint-disable-next-line filenames-simple/naming-convention
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { Spacer } from '@freecodecamp/ui';
 import Media from 'react-responsive';
 import landingPageb from '../../../assets/images/landing/landing-page-b.svg';
-import { LazyImage, Spacer } from '../../helpers';
+import { LazyImage } from '../../helpers';
 
 const LARGE_SCREEN_SIZE = 1200;
 
@@ -18,7 +19,7 @@ function UIImages(): JSX.Element {
       >
         <LazyImage alt={t('landing.hero-img-uis')} src={landingPageb} />
       </figure>
-      <Spacer size='exLarge' />
+      <Spacer size='xl' />
     </Media>
   );
 }

client/src/components/layouts/default.tsx

@@ -5,6 +5,7 @@ import { useMediaQuery } from 'react-responsive';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
+import { Spacer } from '@freecodecamp/ui';
 import envData, { clientLocale } from '../../../config/env.json';
 
 import latoBoldURL from '../../../static/fonts/lato/Lato-Bold.woff';
@@ -43,7 +44,7 @@ import StagingWarningModal from '../staging-warning-modal';
 import Footer from '../Footer';
 import Header from '../Header';
 import OfflineWarning from '../OfflineWarning';
-import { Loader, Spacer } from '../helpers';
+import { Loader } from '../helpers';
 import {
   MAX_MOBILE_WIDTH,
   EX_SMALL_VIEWPORT_HEIGHT
@@ -292,7 +293,7 @@ function DefaultLayout({
                 />
               </div>
             ) : (
-              <Spacer size={isExSmallViewportHeight ? 'xxSmall' : 'small'} />
+              <Spacer size={isExSmallViewportHeight ? 'xxs' : 'xs'} />
             ))}
           {fetchState.complete && children}
         </div>

client/src/components/profile/__snapshots__/profile.test.tsx.snap

@@ -3,15 +3,13 @@
 exports[`<Profile/> renders correctly 1`] = `
 <div>
   <div
-    class="spacer"
-    style="padding: 15px 0px;"
+    class="h-[30px]"
   />
   <div
     class="mx-auto px-[15px] my-0 md:w-[750px] min-[992px]:w-[970px] min-[1200px]:w-[1170px] "
   >
     <div
-      class="spacer"
-      style="padding: 15px 0px;"
+      class="h-[30px]"
     />
     <div
       class="bio-container"
@@ -185,8 +183,7 @@ exports[`<Profile/> renders correctly 1`] = `
           </div>
           
           <div
-            class="spacer"
-            style="padding: 5px 0px;"
+            class="h-[10px]"
           />
           
           <div
@@ -296,8 +293,7 @@ exports[`<Profile/> renders correctly 1`] = `
       </div>
     </div>
     <div
-      class="spacer"
-      style="padding: 15px 0px;"
+      class="h-[30px]"
     />
     <div
       class="mx-[-15px] text-center"
@@ -309,8 +305,7 @@ exports[`<Profile/> renders correctly 1`] = `
       </a>
     </div>
     <div
-      class="spacer"
-      style="padding: 15px 0px;"
+      class="h-[30px]"
     />
   </div>
 </div>

client/src/components/profile/components/__snapshots__/timeline-buttons.test.js.snap

@@ -11,12 +11,7 @@ exports[`should check certification page consistency 1`] = `
       profile.timeline
     </h2>
     <div
-      className="spacer"
-      style={
-        {
-          "padding": "5px 0",
-        }
-      }
+      className="h-[10px]"
     />
     <table
       className="table-auto w-full max-w-full border-collapse text-start text-foreground-tertiary [&_th]:font-normal [&_td]:p-1 [&_th]:p-1 [&>tbody>tr:nth-of-type(odd)]:bg-background-tertiary"

client/src/components/profile/components/bio.tsx

@@ -6,8 +6,8 @@ import {
   faPen
 } from '@fortawesome/free-solid-svg-icons';
 import { useTranslation } from 'react-i18next';
-import { Button } from '@freecodecamp/ui';
-import { AvatarRenderer, FullWidthRow, Spacer } from '../../helpers';
+import { Button, Spacer } from '@freecodecamp/ui';
+import { AvatarRenderer, FullWidthRow } from '../../helpers';
 import { parseDate } from './utils';
 import SocialIcons from './social-icons';
 import { type CamperProps } from './camper';
@@ -55,7 +55,7 @@ const Bio = ({
         )}
       </div>
       {name && <h2>{name}</h2>}
-      <Spacer size={'small'} />
+      <Spacer size='xs' />
       {about && <p>{about}</p>}
       <div className='profile-meta-container'>
         {joinDate && (

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 { Spacer } from '@freecodecamp/ui';
 
 import { certificatesByNameSelector } from '../../../redux/selectors';
 import type { CurrentCert } from '../../../redux/prop-types';
-import { FullWidthRow, Spacer, ButtonLink } from '../../helpers';
+import { FullWidthRow, ButtonLink } from '../../helpers';
 import './certifications.css';
 
 const mapStateToProps = (
@@ -56,7 +57,7 @@ function CertButton({ username, cert }: CertButtonProps): JSX.Element {
           certTitle: t(`certification.title.${cert.certSlug}`)
         })}
       </ButtonLink>
-      <Spacer size='small' />
+      <Spacer size='xs' />
     </li>
   );
 }
@@ -86,11 +87,11 @@ function Certificates({
       )}
       {hasLegacyCert && (
         <div>
-          <Spacer size='medium' />
+          <Spacer size='m' />
           <h3 id='legacy-certifications'>
             {t('settings.headings.legacy-certs')}
           </h3>
-          <Spacer size='medium' />
+          <Spacer size='m' />
           {legacyCerts && (
             <>
               <ul aria-labelledby='legacy-certifications'>
@@ -104,7 +105,7 @@ function Certificates({
                     />
                   ))}
               </ul>
-              <Spacer size='medium' />
+              <Spacer size='m' />
             </>
           )}
         </div>

client/src/components/profile/components/heat-map.tsx

@@ -9,7 +9,7 @@ import React, { Component } from 'react';
 import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import ReactTooltip from 'react-tooltip';
-import { Row } from '@freecodecamp/ui';
+import { Row, Spacer } from '@freecodecamp/ui';
 
 import '@freecodecamp/react-calendar-heatmap/dist/styles.css';
 import './heatmap.css';
@@ -20,7 +20,6 @@ import envData from '../../../../config/env.json';
 import { getLangCode } from '../../../../../shared/config/i18n';
 import { User } from '../../../redux/prop-types';
 import FullWidthRow from '../../helpers/full-width-row';
-import Spacer from '../../helpers/spacer';
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 const { clientLocale } = envData;
@@ -98,7 +97,7 @@ class HeatMapInner extends Component<HeatMapInnerProps, HeatMapInnerState> {
 
     return (
       <FullWidthRow>
-        <Spacer size='medium' />
+        <Spacer size='m' />
 
         <CalendarHeatMap
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -162,7 +161,7 @@ class HeatMapInner extends Component<HeatMapInnerProps, HeatMapInnerState> {
             &gt;
           </button>
         </Row>
-        <Spacer size='medium' />
+        <Spacer size='m' />
         <hr />
       </FullWidthRow>
     );

client/src/components/profile/components/portfolio-projects.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { Spacer } from '@freecodecamp/ui';
 import type { PortfolioProjectData } from '../../../redux/prop-types';
 import './portfolio-projects.css';
-import { FullWidthRow, Spacer } from '../../helpers';
+import { FullWidthRow } from '../../helpers';
 
 interface PortfolioProjectsProps {
   portfolioProjects: PortfolioProjectData[];
@@ -48,7 +49,7 @@ export const PortfolioProjects = ({
           </div>
         </a>
       ))}
-      <Spacer size='medium' />
+      <Spacer size='m' />
       <hr />
     </FullWidthRow>
   );

client/src/components/profile/components/portfolio.tsx

@@ -8,7 +8,8 @@ import {
   ControlLabel,
   HelpBlock,
   FormGroupProps,
-  Button
+  Button,
+  Spacer
 } from '@freecodecamp/ui';
 import { withTranslation } from 'react-i18next';
 import isURL from 'validator/lib/isURL';
@@ -16,7 +17,7 @@ import { PortfolioProjectData } from '../../../redux/prop-types';
 
 import { hasProtocolRE } from '../../../utils';
 
-import { FullWidthRow, Spacer } from '../../helpers';
+import { FullWidthRow } from '../../helpers';
 import BlockSaveButton from '../../helpers/form/block-save-button';
 import SectionHeader from '../../settings/section-header';
 
@@ -361,7 +362,7 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
           >
             {t('buttons.save-portfolio')}
           </BlockSaveButton>
-          <Spacer size='small' />
+          <Spacer size='xs' />
           <Button
             block={true}
             size='large'
@@ -374,9 +375,9 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
         </form>
         {index + 1 !== arr.length && (
           <>
-            <Spacer size='medium' />
+            <Spacer size='m' />
             <hr />
-            <Spacer size='medium' />
+            <Spacer size='m' />
           </>
         )}
       </FullWidthRow>
@@ -391,7 +392,7 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
         <SectionHeader>{t('settings.headings.portfolio')}</SectionHeader>
         <FullWidthRow>
           <p>{t('settings.share-projects')}</p>
-          <Spacer size='small' />
+          <Spacer size='xs' />
           <Button
             block={true}
             size='large'
@@ -403,7 +404,7 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
             {t('buttons.add-portfolio')}
           </Button>
         </FullWidthRow>
-        <Spacer size='large' />
+        <Spacer size='l' />
         {portfolio.length ? portfolio.map(this.renderPortfolio) : null}
       </section>
     );

client/src/components/profile/components/stats.tsx

@@ -3,9 +3,10 @@ import { useTranslation } from 'react-i18next';
 import addDays from 'date-fns/addDays';
 import addMonths from 'date-fns/addMonths';
 import isEqual from 'date-fns/isEqual';
+import { Spacer } from '@freecodecamp/ui';
 import startOfDay from 'date-fns/startOfDay';
 import { User } from '../../../redux/prop-types';
-import { FullWidthRow, Spacer } from '../../helpers';
+import { FullWidthRow } from '../../helpers';
 import './stats.css';
 
 interface StatsProps {
@@ -113,7 +114,7 @@ function Stats({ points, calendar }: StatsProps): JSX.Element {
   return (
     <FullWidthRow>
       <h2>{t('profile.stats')}</h2>
-      <Spacer size='small' />
+      <Spacer size='xs' />
       <dl className='stats'>
         <div>
           <dt>

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

@@ -5,7 +5,7 @@ import React, { useMemo, useState } from 'react';
 import type { TFunction } from 'i18next';
 import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
-import { Table, Button, Modal } from '@freecodecamp/ui';
+import { Table, Button, Modal, Spacer } from '@freecodecamp/ui';
 
 import envData from '../../../../config/env.json';
 import { getLangCode } from '../../../../../shared/config/i18n';
@@ -16,7 +16,7 @@ import { CompletedChallenge } from '../../../redux/prop-types';
 import ProjectPreviewModal from '../../../templates/Challenges/components/project-preview-modal';
 import ExamResultsModal from '../../SolutionViewer/exam-results-modal';
 import { openModal } from '../../../templates/Challenges/redux/actions';
-import { Link, FullWidthRow, Spacer } from '../../helpers';
+import { Link, FullWidthRow } from '../../helpers';
 import { SolutionDisplayWidget } from '../../solution-display-widget';
 import { SuperBlocks } from '../../../../../shared/config/curriculum';
 import TimelinePagination from './timeline-pagination';
@@ -177,7 +177,7 @@ function TimelineInner({
   return (
     <FullWidthRow>
       <h2>{t('profile.timeline')}</h2>
-      <Spacer size='small' />
+      <Spacer size='xs' />
       {completedMap.length === 0 ? (
         <p className='text-center'>
           {t('profile.none-completed')}&nbsp;

client/src/components/profile/profile.tsx

@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 import Helmet from 'react-helmet';
 import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
-import { Alert, Container, Modal, Row } from '@freecodecamp/ui';
-import { FullWidthRow, Link, Spacer } from '../helpers';
+import { Alert, Container, Modal, Row, Spacer } from '@freecodecamp/ui';
+import { FullWidthRow, Link } from '../helpers';
 import Portfolio from './components/portfolio';
 
 import UsernameSettings from './components/username';
@@ -45,7 +45,7 @@ const UserMessage = ({ t }: Pick<MessageProps, 't'>) => {
   return (
     <FullWidthRow>
       <Alert variant='info'>{t('profile.you-change-privacy')}</Alert>
-      <Spacer size='medium' />
+      <Spacer size='m' />
     </FullWidthRow>
   );
 };
@@ -77,7 +77,7 @@ const EditModal = ({
       <Modal.Header>{t('profile.edit-my-profile')}</Modal.Header>
       <Modal.Body alignment='left'>
         <UsernameSettings username={username} setIsEditing={setIsEditing} />
-        <Spacer size='medium' />
+        <Spacer size='m' />
         <About
           about={about}
           location={location}
@@ -88,7 +88,7 @@ const EditModal = ({
           setIsEditing={setIsEditing}
           isSessionUser={isSessionUser}
         />
-        <Spacer size='medium' />
+        <Spacer size='m' />
         <Internet
           githubProfile={githubProfile}
           linkedin={linkedin}
@@ -97,7 +97,7 @@ const EditModal = ({
           setIsEditing={setIsEditing}
           website={website}
         />
-        <Spacer size='medium' />
+        <Spacer size='m' />
         <Portfolio
           portfolio={portfolio}
           updatePortfolio={updateMyPortfolio}
@@ -117,7 +117,7 @@ const VisitorMessage = ({
       <Alert variant='info'>
         {t('profile.username-change-privacy', { username })}
       </Alert>
-      <Spacer size='medium' />
+      <Spacer size='m' />
     </FullWidthRow>
   );
 };
@@ -206,7 +206,7 @@ function UserProfile({
       {showTimeLine ? (
         <Timeline completedMap={completedChallenges} username={username} />
       ) : null}
-      <Spacer size='medium' />
+      <Spacer size='m' />
     </>
   );
 }
@@ -231,9 +231,9 @@ function Profile({
       <Helmet>
         <title>{t('buttons.profile')} | freeCodeCamp.org</title>
       </Helmet>
-      <Spacer size='medium' />
+      <Spacer size='m' />
       <Container>
-        <Spacer size='medium' />
+        <Spacer size='m' />
         {isLocked && (
           <Message username={username} isSessionUser={isSessionUser} t={t} />
         )}
@@ -253,7 +253,7 @@ function Profile({
             </Link>
           </Row>
         )}
-        <Spacer size='medium' />
+        <Spacer size='m' />
       </Container>
     </>
   );

client/src/components/settings/certification.tsx

@@ -5,7 +5,7 @@ import type { TFunction } from 'i18next';
 import { createSelector } from 'reselect';
 import ScrollableAnchor, { configureAnchors } from 'react-scrollable-anchor';
 import { connect } from 'react-redux';
-import { Table, Button } from '@freecodecamp/ui';
+import { Table, Button, Spacer } from '@freecodecamp/ui';
 
 import { regeneratePathAndHistory } from '../../../../shared/utils/polyvinyl';
 import ProjectPreviewModal from '../../templates/Challenges/components/project-preview-modal';
@@ -20,7 +20,7 @@ import {
 } from '../../../config/cert-and-project-map';
 import { FlashMessages } from '../Flash/redux/flash-messages';
 import ProjectModal from '../SolutionViewer/project-modal';
-import { FullWidthRow, Spacer, Link } from '../helpers';
+import { FullWidthRow, Link } from '../helpers';
 import { SolutionDisplayWidget } from '../solution-display-widget';
 import {
   Certification,
@@ -190,7 +190,7 @@ const LegacyFullStack = (props: CertificationSettingsProps) => {
 
   return (
     <FullWidthRow key={certSlug}>
-      <Spacer size='medium' />
+      <Spacer size='m' />
       <h3 className='text-center'>
         {t('certification.title.Legacy Full Stack Certification')}
       </h3>
@@ -247,7 +247,7 @@ const LegacyFullStack = (props: CertificationSettingsProps) => {
           </Button>
         )}
       </div>
-      <Spacer size='medium' />
+      <Spacer size='m' />
     </FullWidthRow>
   );
 };
@@ -338,7 +338,7 @@ function CertificationSettings(props: CertificationSettingsProps) {
       <ScrollableAnchor id={`cert-${certSlug}`}>
         <section>
           <FullWidthRow>
-            <Spacer size='medium' />
+            <Spacer size='m' />
             <h3 className='text-center'>
               {t(`certification.title.${certName}`, certName)}
             </h3>
@@ -422,7 +422,7 @@ function CertificationSettings(props: CertificationSettingsProps) {
       {currentCertTitles.map(title => (
         <Certification key={title} certName={title} t={t} />
       ))}
-      <Spacer size='medium' />
+      <Spacer size='m' />
       <SectionHeader>{t('settings.headings.legacy-certs')}</SectionHeader>
       <LegacyFullStack {...props} />
       {legacyCertTitles.map(title => (

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

@@ -4,10 +4,10 @@ import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
-import { Panel, Button } from '@freecodecamp/ui';
+import { Panel, Button, Spacer } from '@freecodecamp/ui';
 
 import { deleteAccount, resetProgress } from '../../redux/settings/actions';
-import { FullWidthRow, Spacer } from '../helpers';
+import { FullWidthRow } from '../helpers';
 import DeleteModal from './delete-modal';
 import ResetModal from './reset-modal';
 
@@ -44,7 +44,7 @@ function DangerZone({ deleteAccount, resetProgress, t }: DangerZoneProps) {
     <FullWidthRow className='text-center'>
       <Panel variant='danger' id='danger-zone'>
         <Panel.Heading>{t('settings.danger.heading')}</Panel.Heading>
-        <Spacer size='medium' />
+        <Spacer size='m' />
         <p>{t('settings.danger.be-careful')}</p>
         <FullWidthRow>
           <Button
@@ -56,7 +56,7 @@ function DangerZone({ deleteAccount, resetProgress, t }: DangerZoneProps) {
           >
             {t('settings.danger.reset')}
           </Button>
-          <Spacer size='small' />
+          <Spacer size='xs' />
           <Button
             block={true}
             size='large'
@@ -66,7 +66,7 @@ function DangerZone({ deleteAccount, resetProgress, t }: DangerZoneProps) {
           >
             {t('settings.danger.delete')}
           </Button>
-          <Spacer size='medium' />
+          <Spacer size='m' />
         </FullWidthRow>
       </Panel>
 

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

@@ -5,11 +5,10 @@ import {
   ControlLabel,
   FormControl,
   FormGroup,
-  Modal
+  Modal,
+  Spacer
 } from '@freecodecamp/ui';
 
-import { Spacer } from '../helpers';
-
 type DeleteModalProps = {
   delete: () => void;
   onHide: () => void;
@@ -54,21 +53,21 @@ function DeleteModal(props: DeleteModalProps): JSX.Element {
         >
           {t('settings.danger.nevermind')}
         </Button>
-        <Spacer size='small' />
+        <Spacer size='xs' />
         <FormGroup controlId='verify-delete'>
           <ControlLabel htmlFor='verify-delete-input'>
             {t('settings.danger.verify-text', {
               verifyText: t('settings.danger.verify-delete-text')
             })}
           </ControlLabel>
-          <Spacer size='small' />
+          <Spacer size='xs' />
           <FormControl
             onChange={handleVerifyTextChange}
             value={verifyText}
             id='verify-delete-input'
           />
         </FormGroup>
-        <Spacer size='small' />
+        <Spacer size='xs' />
         <Button
           block={true}
           size='large'

client/src/components/settings/email.tsx

@@ -5,7 +5,8 @@ import {
   FormGroupProps,
   FormControl,
   ControlLabel,
-  Button
+  Button,
+  Spacer
 } from '@freecodecamp/ui';
 import React, { useState } from 'react';
 import type { TFunction } from 'i18next';
@@ -20,7 +21,6 @@ import { maybeEmailRE } from '../../utils';
 
 import BlockSaveButton from '../helpers/form/block-save-button';
 import FullWidthRow from '../helpers/full-width-row';
-import Spacer from '../helpers/spacer';
 import Link from '../helpers/link';
 import SectionHeader from './section-header';
 import ToggleButtonSetting from './toggle-button-setting';
@@ -246,7 +246,7 @@ function EmailSettings({
           </BlockSaveButton>
         </form>
       </FullWidthRow>
-      <Spacer size='medium' />
+      <Spacer size='m' />
       <FullWidthRow>
         <ToggleButtonSetting
           action={t('settings.email.weekly')}

client/src/components/settings/keyboard-shortcuts.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Spacer } from '../helpers';
+import { Spacer } from '@freecodecamp/ui';
 
 import ToggleButtonSetting from './toggle-button-setting';
 
@@ -30,7 +30,7 @@ export default function KeyboardShortcutsSettings({
           toggleKeyboardShortcuts(keyboardShortcuts ? false : true);
         }}
       />
-      <Spacer size='medium'></Spacer>
+      <Spacer size='m' />
     </>
   );
 }

client/src/components/settings/misc-settings.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Spacer, FullWidthRow } from '../helpers';
+import { Spacer } from '@freecodecamp/ui';
+import { FullWidthRow } from '../helpers';
 import ThemeSettings, { ThemeProps } from '../../components/settings/theme';
 import SoundSettings from '../../components/settings/sound';
 import KeyboardShortcutsSettings from '../../components/settings/keyboard-shortcuts';
@@ -27,7 +28,7 @@ const MiscSettings = ({
 
   return (
     <>
-      <Spacer size='medium' />
+      <Spacer size='m' />
       <FullWidthRow>
         <ThemeSettings
           currentTheme={currentTheme}

client/src/components/settings/privacy.tsx

@@ -4,14 +4,13 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Button } from '@freecodecamp/ui';
+import { Button, Spacer } from '@freecodecamp/ui';
 
 import { userSelector } from '../../redux/selectors';
 import type { ProfileUI } from '../../redux/prop-types';
 import { submitProfileUI } from '../../redux/settings/actions';
 
 import FullWidthRow from '../helpers/full-width-row';
-import Spacer from '../helpers/spacer';
 import SectionHeader from './section-header';
 import ToggleRadioSetting from './toggle-radio-setting';
 
@@ -157,7 +156,7 @@ function PrivacySettings({ submitProfileUI, user }: PrivacyProps): JSX.Element {
         </form>
       </FullWidthRow>
       <FullWidthRow>
-        <Spacer size='medium' />
+        <Spacer size='m' />
         <p>{t('settings.data')}</p>
         <Button
           block={true}

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

@@ -5,11 +5,10 @@ import {
   ControlLabel,
   FormControl,
   FormGroup,
-  Modal
+  Modal,
+  Spacer
 } from '@freecodecamp/ui';
 
-import { Spacer } from '../helpers';
-
 type ResetModalProps = {
   onHide: () => void;
   reset: () => void;
@@ -52,21 +51,21 @@ function ResetModal(props: ResetModalProps): JSX.Element {
         >
           {t('settings.danger.nevermind-2')}
         </Button>
-        <Spacer size='small' />
+        <Spacer size='xs' />
         <FormGroup controlId='verify-reset'>
           <ControlLabel htmlFor='verify-reset-input'>
             {t('settings.danger.verify-text', {
               verifyText: t('settings.danger.verify-reset-text')
             })}
           </ControlLabel>
-          <Spacer size='small' />
+          <Spacer size='xs' />
           <FormControl
             onChange={handleVerifyTextChange}
             value={verifyText}
             id='verify-reset-input'
           />
         </FormGroup>
-        <Spacer size='small' />
+        <Spacer size='xs' />
         <Button
           block={true}
           size='large'

client/src/components/settings/scrollbar-width.tsx

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, useState, useRef } from 'react';
 import store from 'store';
 import { useTranslation } from 'react-i18next';
-import { Spacer } from '../helpers';
+import { Spacer } from '@freecodecamp/ui';
 import { getScrollbarWidth } from '../../utils/scrollbar-width';
 import './scrollbar-width.css';
 
@@ -78,7 +78,7 @@ export default function ScrollbarWidthSettings(): JSX.Element {
           ))}
         </div>
       </div>
-      <Spacer size='medium'></Spacer>
+      <Spacer size='m' />
     </>
   );
 }

client/src/components/settings/sound.tsx

@@ -1,9 +1,9 @@
 import React, { ChangeEvent, useState } from 'react';
 import store from 'store';
 import { useTranslation } from 'react-i18next';
-import { Spacer } from '../helpers';
 
 import './sound.css';
+import { Spacer } from '@freecodecamp/ui';
 import { playTone } from '../../utils/tone';
 import ToggleButtonSetting from './toggle-button-setting';
 
@@ -64,7 +64,7 @@ export default function SoundSettings({
         className='soundbar'
         onInput={handleVolumeChange}
       />
-      <Spacer size='medium'></Spacer>
+      <Spacer size='m' />
     </>
   );
 }

client/src/components/settings/user-token.tsx

@@ -2,10 +2,10 @@ import React, { Component } from 'react';
 import type { TFunction } from 'i18next';
 import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
-import { Panel, Button } from '@freecodecamp/ui';
+import { Panel, Button, Spacer } from '@freecodecamp/ui';
 
 import { deleteUserToken } from '../../redux/actions';
-import { FullWidthRow, Spacer } from '../helpers';
+import { FullWidthRow } from '../helpers';
 
 type UserTokenProps = {
   deleteUserToken: () => void;
@@ -30,11 +30,11 @@ class UserToken extends Component<UserTokenProps> {
       <FullWidthRow>
         <Panel variant='info' className='text-center'>
           <Panel.Heading>{t('user-token.title')}</Panel.Heading>
-          <Spacer size='medium' />
+          <Spacer size='m' />
           <Panel.Body>
             <p>{t('user-token.delete-p1')}</p>
             <FullWidthRow>
-              <Spacer size='small' />
+              <Spacer size='xs' />
               <Button
                 block={true}
                 size='large'
@@ -44,7 +44,7 @@ class UserToken extends Component<UserTokenProps> {
               >
                 {t('user-token.delete')}
               </Button>
-              <Spacer size='medium' />
+              <Spacer size='m' />
             </FullWidthRow>
           </Panel.Body>
         </Panel>

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

@@ -3,9 +3,8 @@ import { bindActionCreators, Dispatch, AnyAction } from 'redux';
 import { createSelector } from 'reselect';
 import { connect } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import { Button, Modal } from '@freecodecamp/ui';
+import { Button, Modal, Spacer } 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';
@@ -64,7 +63,7 @@ function SignoutModal(props: SignoutModalProps): JSX.Element {
         >
           {t('signout.nevermind')}
         </Button>
-        <Spacer size='small' />
+        <Spacer size='xs' />
         <Button
           block={true}
           variant='danger'

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

@@ -1,9 +1,8 @@
 import React, { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { Button, Modal } from '@freecodecamp/ui';
+import { Button, Modal, Spacer } from '@freecodecamp/ui';
 
 import store from 'store';
-import { Spacer } from '../helpers';
 
 function StagingWarningModal(): JSX.Element {
   const { t } = useTranslation();
@@ -45,7 +44,7 @@ function StagingWarningModal(): JSX.Element {
         >
           {t('staging-warning.certain')}
         </Button>
-        <Spacer size='small' />
+        <Spacer size='xs' />
       </Modal.Body>
     </Modal>
   );

client/src/pages/blocked.tsx

@@ -1,21 +1,19 @@
 import React from 'react';
 import Helmet from 'react-helmet';
-import { Container, Col, Row } from '@freecodecamp/ui';
-
-import { Spacer } from '../components/helpers';
+import { Container, Col, Row, Spacer } from '@freecodecamp/ui';
 
 function BlockedPage(): JSX.Element {
   return (
     <>
       <Helmet title={`Access Denied | freeCodeCamp.org`} />
       <Container className='text-center'>
-        <Spacer size='large' />
+        <Spacer size='l' />
         <Row>
           <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
             <h1 id='content-start' data-playwright-test-label='main-heading'>
               We can&apos;t log you in.
             </h1>
-            <Spacer size='large' />
+            <Spacer size='l' />
             <Col lg={10} lgOffset={1} sm={10} smOffset={1} xs={12}>
               <div
                 className='text-start'
@@ -40,7 +38,7 @@ function BlockedPage(): JSX.Element {
             </Col>
           </Col>
         </Row>
-        <Spacer size='large' />
+        <Spacer size='l' />
       </Container>
     </>
   );

client/src/pages/donate.tsx

@@ -1,4 +1,4 @@
-import { Container, Col, Row } from '@freecodecamp/ui';
+import { Container, Col, Row, Spacer } from '@freecodecamp/ui';
 import type { TFunction } from 'i18next';
 import React, { useEffect } from 'react';
 import Helmet from 'react-helmet';
@@ -16,7 +16,7 @@ import {
   CommunityAchievementsText,
   GetSupporterBenefitsText
 } from '../components/Donation/donation-text-components';
-import { Spacer, Loader } from '../components/helpers';
+import { Loader } from '../components/helpers';
 import {
   signInLoadingSelector,
   userSelector,
@@ -93,19 +93,19 @@ function DonatePage({
       <Container className='donate-supporter-page-section'>
         <Row>
           <Col lg={6} lgOffset={0} md={8} mdOffset={2} sm={10}>
-            <Spacer size='large' />
+            <Spacer size='l' />
             <SupportBenefitsText />
           </Col>
         </Row>
         <Row>
           <Col lg={6} lgOffset={0} md={8} mdOffset={2} sm={10}>
-            <Spacer size='large' />
+            <Spacer size='l' />
             <CurrentInitiativesText />
           </Col>
         </Row>
         <Row>
           <Col lg={6} lgOffset={0} md={8} mdOffset={2} sm={10}>
-            <Spacer size='large' />
+            <Spacer size='l' />
             <CommunityAchievementsText />
           </Col>
         </Row>
@@ -118,9 +118,9 @@ function DonatePage({
       <Container fluid={true}>
         <Row>
           <Col sm={12}>
-            <Spacer size='large' />
+            <Spacer size='l' />
             <hr />
-            <Spacer size='large' />
+            <Spacer size='l' />
           </Col>
         </Row>
       </Container>
@@ -130,7 +130,7 @@ function DonatePage({
             <DonationFaqText />
           </Col>
         </Row>
-        <Spacer size='large' />
+        <Spacer size='l' />
       </Container>
     </>
   );

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

@@ -5,11 +5,11 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Row, Button } from '@freecodecamp/ui';
+import { Container, Col, Row, Button, Spacer } from '@freecodecamp/ui';
 
 import IntroDescription from '../components/Intro/components/intro-description';
 import createRedirect from '../components/create-redirect';
-import { Spacer, Loader, Link } from '../components/helpers';
+import { Loader, Link } from '../components/helpers';
 import { apiLocation } from '../../config/env.json';
 
 import { acceptTerms } from '../redux/actions';
@@ -71,7 +71,7 @@ function EmailListOptIn({
             >
               {t('buttons.yes-please')}
             </Button>
-            <Spacer size='small' />
+            <Spacer size='xs' />
           </Col>
           <Col md={4} sm={5} xs={12}>
             <Button
@@ -82,7 +82,7 @@ function EmailListOptIn({
             >
               {t('buttons.no-thanks')}
             </Button>
-            <Spacer size='small' />
+            <Spacer size='xs' />
           </Col>
         </Row>
       </Container>
@@ -90,7 +90,7 @@ function EmailListOptIn({
   } else {
     return (
       <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-        <Spacer size='small' />
+        <Spacer size='xs' />
         <Button
           block={true}
           size='large'
@@ -99,7 +99,7 @@ function EmailListOptIn({
         >
           {t('buttons.sign-up-email-list')}
         </Button>
-        <Spacer size='small' />
+        <Spacer size='xs' />
       </Col>
     );
   }
@@ -133,9 +133,9 @@ function AcceptPrivacyTerms({
         {isSignedIn && completedChallengeCount < 1 ? (
           <Row>
             <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-              <Spacer size='large' />
+              <Spacer size='l' />
               <h1 className='text-center'>{t('misc.brand-new-account')}</h1>
-              <Spacer size='small' />
+              <Spacer size='xs' />
               <p>
                 <Trans i18nKey='misc.duplicate-account-warning'>
                   <Link className='inline' to='/settings#danger-zone' />
@@ -148,16 +148,16 @@ function AcceptPrivacyTerms({
         )}
         <Row>
           <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-            <Spacer size='small' />
+            <Spacer size='xs' />
             <IntroDescription />
             <hr />
           </Col>
         </Row>
         <Row className='email-sign-up'>
           <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-            <Spacer size='small' />
+            <Spacer size='xs' />
             <p>{t('misc.email-blast')}</p>
-            <Spacer size='small' />
+            <Spacer size='xs' />
           </Col>
           {showLoading ? (
             <Loader fullScreen={true} />
@@ -165,7 +165,7 @@ function AcceptPrivacyTerms({
             <EmailListOptIn isSignedIn={isSignedIn} acceptTerms={acceptTerms} />
           )}
           <Col xs={12}>
-            <Spacer size='medium' />
+            <Spacer size='m' />
           </Col>
         </Row>
       </Container>

client/src/pages/learn.tsx

@@ -4,11 +4,10 @@ import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Row } from '@freecodecamp/ui';
+import { Container, Col, Row, Spacer } from '@freecodecamp/ui';
 
 import Intro from '../components/Intro';
 import Map from '../components/Map';
-import { Spacer } from '../components/helpers';
 import LearnLayout from '../components/layouts/learn';
 import {
   isSignedInSelector,
@@ -107,7 +106,7 @@ function LearnPage({
               isDonating={isDonating}
             />
             <Map allChallenges={challengeNodes.map(node => node.challenge)} />
-            <Spacer size='large' />
+            <Spacer size='l' />
           </Col>
         </Row>
       </Container>

client/src/pages/supporters.tsx

@@ -3,10 +3,9 @@ import Helmet from 'react-helmet';
 import { withTranslation, useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { Container, Row, Col } from '@freecodecamp/ui';
+import { Container, Row, Col, Spacer } from '@freecodecamp/ui';
 import BigCallToAction from '../components/landing/components/big-call-to-action';
 
-import { Spacer } from '../components/helpers';
 import {
   isSignedInSelector,
   isDonatingSelector,
@@ -62,13 +61,13 @@ function ConditionalContent({
   if (isSignedIn && !isDonating) {
     return (
       <Col md={12}>
-        <Spacer size='large' />
+        <Spacer size='l' />
         <h1 id='content-start' className='text-center'>
           {t('learn.donation-record-not-found')}
         </h1>
-        <Spacer size='medium' />
+        <Spacer size='m' />
         <p className='text-center'>{t('learn.contact-support-mistake')}</p>
-        <Spacer size='large' />
+        <Spacer size='l' />
       </Col>
     );
   } else if (isSignedIn && isDonating) {
@@ -82,7 +81,7 @@ function ConditionalContent({
         </Col>
         <Col lg={6} lgOffset={0} md={8} mdOffset={1} sm={12}>
           <CurrentInitiativesText isSupportersPage={true} />
-          <Spacer size='medium' />
+          <Spacer size='m' />
           <SupportBenefitsText isSupportersPage={true} />
         </Col>
       </>
@@ -90,13 +89,13 @@ function ConditionalContent({
   } else
     return (
       <Col md={12}>
-        <Spacer size='large' />
+        <Spacer size='l' />
         <h1 id='content-start' className='text-center'>
           {t('learn.sign-in-see-benefits')}
         </h1>
-        <Spacer size='large' />
+        <Spacer size='l' />
         <BigCallToAction text={t('buttons.sign-in')} />
-        <Spacer size='large' />
+        <Spacer size='l' />
       </Col>
     );
 }
@@ -132,13 +131,13 @@ function SupportersPage({ isSignedIn, isDonating }: SupportersPageProps) {
         </Row>
       </Container>
       <Container className='donate-supporter-page-section'>
-        <Spacer size='large' />
+        <Spacer size='l' />
         <Row>
           <Col lg={10} lgOffset={0} md={8} mdOffset={2} sm={10}>
             <DonationFaqText />
           </Col>
         </Row>
-        <Spacer size='large' />
+        <Spacer size='l' />
       </Container>
     </>
   );

client/src/pages/update-stripe-card.tsx

@@ -5,10 +5,9 @@ import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { Container, Row, Col, Button } from '@freecodecamp/ui';
+import { Container, Row, Col, Button, Spacer } from '@freecodecamp/ui';
 import BigCallToAction from '../components/landing/components/big-call-to-action';
 
-import { Spacer } from '../components/helpers';
 import {
   isSignedInSelector,
   isDonatingSelector,
@@ -62,7 +61,7 @@ function ConditionalContent({
     return (
       <>
         <h1 className='text-center'>{t('learn.donation-record-not-found')}</h1>
-        <Spacer size='medium' />
+        <Spacer size='m' />
         <p className='text-center'>{t('learn.contact-support-mistake')}</p>
       </>
     );
@@ -80,7 +79,7 @@ function ConditionalContent({
     } else
       return (
         <>
-          <Spacer size='medium' />
+          <Spacer size='m' />
           <Button block={true} onClick={handleClick}>
             {t('buttons.update-card')}
           </Button>
@@ -90,7 +89,7 @@ function ConditionalContent({
     return (
       <>
         <h1 className='text-center'>{t('learn.sign-in-card-update')}</h1>
-        <Spacer size='medium' />
+        <Spacer size='m' />
         <BigCallToAction text={t('buttons.sign-in')} />
       </>
     );
@@ -126,14 +125,14 @@ function UpdateStripeCard({
       <Container className='page-wrapper-80'>
         <Row>
           <Col sm={6} smOffset={3}>
-            <Spacer size='large' />
+            <Spacer size='l' />
             <ConditionalContent
               isSignedIn={isSignedIn}
               isDonating={isDonating}
               handleClick={handleClick}
               updateCardState={updateCardState}
             />
-            <Spacer size='large' />
+            <Spacer size='l' />
           </Col>
         </Row>
       </Container>

client/src/templates/Challenges/classic/lower-jaw.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { createSelector } from 'reselect';
-import { Button } from '@freecodecamp/ui';
+import { Button, Spacer } from '@freecodecamp/ui';
 import { connect } from 'react-redux';
 import Fail from '../../../assets/icons/fail';
 import LightBulb from '../../../assets/icons/lightbulb';
@@ -22,7 +22,6 @@ import {
   completedPercentageSelector
 } from '../redux/selectors';
 import callGA from '../../../analytics/call-ga';
-import { Spacer } from '../../../components/helpers';
 
 interface LowerJawPanelProps extends ShareProps {
   resetButtonText: string;
@@ -320,7 +319,7 @@ const LowerJaw = ({
           >
             {t('learn.sign-in-save')}
           </a>
-          <Spacer size='xxSmall' />
+          <Spacer size='xxs' />
         </>
       )}
       <Button

client/src/templates/Challenges/codeally/show.tsx

@@ -8,10 +8,9 @@ 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, Spacer } from '@freecodecamp/ui';
 
 // Local Utilities
-import Spacer from '../../../components/helpers/spacer';
 import LearnLayout from '../../../components/layouts/learn';
 import ChallengeTitle from '../components/challenge-title';
 import ChallengeHeading from '../components/challenge-heading';
@@ -271,18 +270,18 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
           <Container>
             <Row>
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-                <Spacer size='medium' />
+                <Spacer size='m' />
                 {superBlock === SuperBlocks.RelationalDb && <CodeAllyDown />}
-                <Spacer size='medium' />
+                <Spacer size='m' />
                 <ChallengeTitle
                   isCompleted={isChallengeCompleted}
                   translationPending={translationPending}
                 >
                   {title}
                 </ChallengeTitle>
-                <Spacer size='medium' />
+                <Spacer size='m' />
                 <PrismFormatted text={description} />
-                <Spacer size='medium' />
+                <Spacer size='m' />
                 <div className='ca-description'>
                   <p>{t('learn.gitpod.intro')}</p>
 
@@ -316,7 +315,7 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                   </ol>
                 </div>
 
-                <Spacer size='medium' />
+                <Spacer size='m' />
                 {isSignedIn &&
                   challengeType === challengeTypes.codeAllyCert && (
                     <>
@@ -324,18 +323,18 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                         {t('learn.complete-both-steps')}
                       </div>
                       <hr />
-                      <Spacer size='medium' />
+                      <Spacer size='m' />
                       <ChallengeHeading
                         heading={t('learn.step-1')}
                         isCompleted={isPartiallyCompleted || isCompleted}
                       />
-                      <Spacer size='medium' />
+                      <Spacer size='m' />
                       <div className='ca-description'>
                         {t('learn.runs-in-vm')}
                       </div>
-                      <Spacer size='medium' />
+                      <Spacer size='m' />
                       <PrismFormatted text={instructions} />
-                      <Spacer size='medium' />
+                      <Spacer size='m' />
                     </>
                   )}
                 <Alert variant='info'>
@@ -382,18 +381,18 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                   challengeType === challengeTypes.codeAllyCert && (
                     <>
                       <hr />
-                      <Spacer size='medium' />
+                      <Spacer size='m' />
                       <ChallengeHeading
                         heading={t('learn.step-2')}
                         isCompleted={isCompleted}
                       />
-                      <Spacer size='medium' />
+                      <Spacer size='m' />
                       <div className='ca-description'>
                         {t('learn.submit-public-url')}
                       </div>
-                      <Spacer size='medium' />
+                      <Spacer size='m' />
                       <PrismFormatted text={notes} />
-                      <Spacer size='medium' />
+                      <Spacer size='m' />
                       <SolutionForm
                         challengeType={challengeType}
                         description={description}
@@ -402,10 +401,10 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                       />
                     </>
                   )}
-                <Spacer size='xxSmall' />
+                <Spacer size='xxs' />
                 <ProjectToolPanel />
                 <br />
-                <Spacer size='medium' />
+                <Spacer size='m' />
               </Col>
               <CompletionModal />
               <HelpModal challengeTitle={title} challengeBlock={block} />

client/src/templates/Challenges/components/assignments.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { Spacer } from '@freecodecamp/ui';
 
-import Spacer from '../../../components/helpers/spacer';
 import ChallengeHeading from './challenge-heading';
 import PrismFormatted from './prism-formatted';
 
@@ -36,19 +36,19 @@ function Assignments({
               }
             />
             <PrismFormatted className={'video-quiz-option'} text={assignment} />
-            <Spacer size='medium' />
+            <Spacer size='m' />
           </label>
         ))}
       </div>
       {!allAssignmentsCompleted && (
         <>
-          <Spacer size='medium' />
+          <Spacer size='m' />
           <div className='assignments-not-complete'>
             {t('learn.assignment-not-complete')}
           </div>
         </>
       )}
-      <Spacer size='medium' />
+      <Spacer size='m' />
     </>
   );
 }

client/src/templates/Challenges/components/challenge-explanation.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import Spacer from '../../../components/helpers/spacer';
+import { Spacer } from '@freecodecamp/ui';
 import PrismFormatted from './prism-formatted';
 
 interface ChallengeExplanationProps {
@@ -16,10 +16,10 @@ function ChallengeExplanation({
     <>
       <details className='explanation'>
         <summary>{t('learn.explanation')}</summary>
-        <Spacer size='medium' />
+        <Spacer size='m' />
         <PrismFormatted className={'line-numbers'} text={explanation} />
       </details>
-      <Spacer size='medium' />
+      <Spacer size='m' />
     </>
   );
 }

client/src/templates/Challenges/components/completion-modal.tsx

@@ -5,7 +5,7 @@ import type { TFunction } from 'i18next';
 import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { Button, Modal } from '@freecodecamp/ui';
+import { Button, Modal, Spacer } from '@freecodecamp/ui';
 
 import Login from '../../../components/Header/components/login';
 import { isSignedInSelector } from '../../../redux/selectors';
@@ -21,7 +21,6 @@ import {
 } from '../redux/selectors';
 import Progress from '../../../components/Progress';
 import GreenPass from '../../../assets/icons/green-pass';
-import { Spacer } from '../../../components/helpers';
 import { MAX_MOBILE_WIDTH } from '../../../../config/misc';
 import './completion-modal.css';
 import callGA from '../../../analytics/call-ga';
@@ -206,7 +205,7 @@ class CompletionModal extends Component<
           {isSignedIn ? null : (
             <div className='completion-modal-login-btn'>
               <Login block={true}>{t('learn.sign-in-save')}</Login>
-              <Spacer size='xxSmall' />
+              <Spacer size='xxs' />
             </div>
           )}
           <Button
@@ -218,7 +217,7 @@ class CompletionModal extends Component<
           >
             {buttonText}
           </Button>
-          <Spacer size='xxSmall' />
+          <Spacer size='xxs' />
           {this.state.downloadURL ? (
             <Button
               block={true}

client/src/templates/Challenges/components/fill-in-the-blanks.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { Spacer } from '@freecodecamp/ui';
 import { parseBlanks } from '../fill-in-the-blank/parse-blanks';
-import Spacer from '../../../components/helpers/spacer';
 import PrismFormatted from '../components/prism-formatted';
 import { FillInTheBlank } from '../../../redux/prop-types';
 import ChallengeHeading from './challenge-heading';
@@ -38,7 +38,7 @@ function FillInTheBlanks({
   return (
     <>
       <ChallengeHeading heading={t('learn.fill-in-the-blank')} />
-      <Spacer size='small' />
+      <Spacer size='xs' />
       <div className='fill-in-the-blank-wrap'>
         {paragraphs.map((p, i) => {
           return (
@@ -68,11 +68,11 @@ function FillInTheBlanks({
           );
         })}
       </div>
-      <Spacer size='medium' />
+      <Spacer size='m' />
       {showFeedback && feedback && (
         <>
           <PrismFormatted text={feedback} />
-          <Spacer size='medium' />
+          <Spacer size='m' />
         </>
       )}
       <div className='text-center'>

client/src/templates/Challenges/components/help-modal.tsx

@@ -2,10 +2,9 @@ import React, { useMemo, useState, useRef, useEffect } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { Dispatch, bindActionCreators } from 'redux';
-import { Button, FormControl, Modal } from '@freecodecamp/ui';
+import { Button, FormControl, Modal, Spacer } from '@freecodecamp/ui';
 
 import envData from '../../../../config/env.json';
-import { Spacer } from '../../../components/helpers';
 import { createQuestion, closeModal } from '../redux/actions';
 import { isHelpModalOpenSelector } from '../redux/selectors';
 
@@ -169,7 +168,7 @@ function HelpModal({
                 href={RSA}
               />
 
-              <Spacer size='small' />
+              <Spacer size='xs' />
 
               <Checkbox
                 name='similar-questions-checkbox'
@@ -183,7 +182,7 @@ function HelpModal({
               />
             </fieldset>
 
-            <Spacer size='xSmall' />
+            <Spacer size='s' />
 
             <label htmlFor='help-modal-form-description'>
               {t('forum-help.whats-happening')}
@@ -205,7 +204,7 @@ function HelpModal({
               required
             />
 
-            <Spacer size='xSmall' />
+            <Spacer size='s' />
 
             {description.length < DESCRIPTION_MIN_CHARS ? (
               <p>
@@ -221,7 +220,7 @@ function HelpModal({
               </p>
             )}
 
-            <Spacer size='xxSmall' />
+            <Spacer size='xxs' />
 
             <Button
               block={true}
@@ -232,7 +231,7 @@ function HelpModal({
             >
               {t('buttons.submit')}
             </Button>
-            <Spacer size='xxSmall' />
+            <Spacer size='xxs' />
             <Button
               block={true}
               size='large'
@@ -276,7 +275,7 @@ function HelpModal({
             >
               {t('buttons.create-post')}
             </Button>
-            <Spacer size='xxSmall' />
+            <Spacer size='xxs' />
             <Button
               block={true}
               size='large'

client/src/templates/Challenges/components/multiple-choice-questions.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { Spacer } from '@freecodecamp/ui';
 import { Question } from '../../../redux/prop-types';
-import Spacer from '../../../components/helpers/spacer';
 import ChallengeHeading from './challenge-heading';
 import PrismFormatted from './prism-formatted';
 
@@ -107,10 +107,10 @@ function MultipleChoiceQuestions({
               );
             })}
           </div>
-          <Spacer size='medium' />
+          <Spacer size='m' />
         </div>
       ))}
-      <Spacer size='medium' />
+      <Spacer size='m' />
     </>
   );
 }

client/src/templates/Challenges/components/scene/scene.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState, useRef } from 'react'; //, ReactElement } from 'react';
-import { Col } from '@freecodecamp/ui';
+import { Col, Spacer } from '@freecodecamp/ui';
 import { useTranslation } from 'react-i18next';
 import { FullScene } from '../../../../redux/prop-types';
-import { Loader, Spacer } from '../../../../components/helpers';
+import { Loader } from '../../../../components/helpers';
 import ClosedCaptionsIcon from '../../../../assets/icons/closedcaptions';
 import { sounds, images, backgrounds, characterAssets } from './scene-assets';
 import Character from './character';
@@ -299,7 +299,7 @@ export function Scene({
           </>
         )}
       </div>
-      <Spacer size='medium' />
+      <Spacer size='m' />
     </Col>
   );
 }

client/src/templates/Challenges/components/side-panel.tsx

@@ -2,13 +2,13 @@ import React, { useEffect, ReactElement, ReactNode } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { Trans } from 'react-i18next';
+import { Spacer } from '@freecodecamp/ui';
 
 import { Test } from '../../../redux/prop-types';
 import { SuperBlocks } from '../../../../../shared/config/curriculum';
 import { initializeMathJax } from '../../../utils/math-jax';
 import { challengeTestsSelector } from '../redux/selectors';
 import { openModal } from '../redux/actions';
-import { Spacer } from '../../../components/helpers';
 import TestSuite from './test-suite';
 
 import './side-panel.css';
@@ -84,7 +84,7 @@ export function SidePanel({
         </p>
       )}
       {challengeDescription}
-      <Spacer size='medium' />
+      <Spacer size='m' />
       {toolPanel}
       <TestSuite tests={tests} />
     </div>

client/src/templates/Challenges/components/tool-panel.tsx

@@ -1,4 +1,4 @@
-import { Dropdown, MenuItem, Button } from '@freecodecamp/ui';
+import { Dropdown, MenuItem, Button, Spacer } from '@freecodecamp/ui';
 import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
@@ -14,7 +14,6 @@ import { challengeMetaSelector } from '../redux/selectors';
 
 import { saveChallenge } from '../../../redux/actions';
 import { isSignedInSelector } from '../../../redux/selectors';
-import { Spacer } from '../../../components/helpers';
 import { isProjectBased } from '../../../utils/curriculum-layout';
 
 const mapStateToProps = createSelector(
@@ -82,14 +81,14 @@ function ToolPanel({
         (challengeType === challengeTypes.multifileCertProject ||
           challengeType === challengeTypes.multifilePythonCertProject) && (
           <>
-            <Spacer size='xxSmall' />
+            <Spacer size='xxs' />
             <Button block={true} variant='primary' onClick={saveChallenge}>
               {isMobile ? t('buttons.save') : t('buttons.save-code')}
             </Button>
           </>
         )}
       <>
-        <Spacer size='xxSmall' />
+        <Spacer size='xxs' />
         <Button block={true} variant='primary' onClick={openResetModal}>
           {isMobile
             ? t(
@@ -104,7 +103,7 @@ function ToolPanel({
               )}
         </Button>
       </>
-      <Spacer size='xxSmall' />
+      <Spacer size='xxs' />
       <Dropdown dropup>
         <Dropdown.Toggle
           id={'get-help-dropdown'}

client/src/templates/Challenges/exam/components/exam-results.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button } from '@freecodecamp/ui';
+import { Button, Spacer } from '@freecodecamp/ui';
 
-import Spacer from '../../../../components/helpers/spacer';
 import { formatSecondsToTime } from '../../../../utils/format-seconds';
 import { GeneratedExamResults } from '../../../../redux/prop-types';
 
@@ -66,7 +65,7 @@ ${t('learn.exam.time', { t: formatSecondsToTime(examTimeInSeconds) })}
         {t('learn.exam.results-header', { title })}
       </div>
       <hr />
-      <Spacer size='medium' />
+      <Spacer size='m' />
 
       <div
         className='exam-results-message'
@@ -74,7 +73,7 @@ ${t('learn.exam.time', { t: formatSecondsToTime(examTimeInSeconds) })}
       >
         {examResultsMessage}
       </div>
-      <Spacer size='medium' />
+      <Spacer size='m' />
       <div className='exam-results'>
         <div data-playwright-test-label='exam-results-question-results'>
           {t('learn.exam.question-results', {
@@ -93,8 +92,8 @@ ${t('learn.exam.time', { t: formatSecondsToTime(examTimeInSeconds) })}
           {t('learn.exam.time', { t: formatSecondsToTime(examTimeInSeconds) })}
         </div>
       </div>
-      <Spacer size='medium' />
-      <Spacer size='medium' />
+      <Spacer size='m' />
+      <Spacer size='m' />
       <div>
         <Button
           block={true}
@@ -105,7 +104,7 @@ ${t('learn.exam.time', { t: formatSecondsToTime(examTimeInSeconds) })}
         >
           {t('learn.download-results')}
         </Button>
-        <Spacer size='xxSmall' />
+        <Spacer size='xxs' />
         <Button
           block={true}
           variant='primary'

client/src/templates/Challenges/exam/components/exit-exam-modal.tsx

@@ -4,12 +4,11 @@ import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
 import { useTranslation } from 'react-i18next';
-import { Button, Modal } from '@freecodecamp/ui';
+import { Button, Modal, Spacer } from '@freecodecamp/ui';
 
 // Local Utilities
 import { closeModal } from '../../redux/actions';
 import { isExitExamModalOpenSelector } from '../../redux/selectors';
-import { Spacer } from '../../../../components/helpers';
 
 // Types
 interface ExitExamModalProps {
@@ -58,7 +57,7 @@ function ExitExamModal({
         <Button block={true} variant='primary' onClick={closeExitExamModal}>
           {t('learn.exam.exit-no')}
         </Button>
-        <Spacer size='xxSmall' />
+        <Spacer size='xxs' />
         <Button block={true} variant='danger' onClick={exitExam}>
           {t('learn.exam.exit-yes')}
         </Button>

client/src/templates/Challenges/exam/components/finish-exam-modal.tsx

@@ -4,12 +4,11 @@ import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
 import { useTranslation } from 'react-i18next';
-import { Button, Modal } from '@freecodecamp/ui';
+import { Button, Modal, Spacer } from '@freecodecamp/ui';
 
 // Local Utilities
 import { closeModal } from '../../redux/actions';
 import { isFinishExamModalOpenSelector } from '../../redux/selectors';
-import { Spacer } from '../../../../components/helpers';
 
 // Types
 interface FinishExamModalProps {
@@ -59,7 +58,7 @@ function FinishExamModal({
         >
           {t('learn.exam.finish-yes')}
         </Button>
-        <Spacer size='xxSmall' />
+        <Spacer size='xxs' />
         <Button
           block={true}
           size='medium'

client/src/templates/Challenges/exam/components/foundational-c-sharp-survey-alert.tsx

@@ -2,9 +2,8 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { useTranslation } from 'react-i18next';
-import { Panel, Button } from '@freecodecamp/ui';
+import { Panel, Button, Spacer } from '@freecodecamp/ui';
 import { openModal } from '../../redux/actions';
-import Spacer from '../../../../components/helpers/spacer';
 import SurveyModal from './survey-modal';
 
 const mapDispatchToProps = (dispatch: Dispatch) =>
@@ -29,7 +28,7 @@ function FoundationalCSharpSurveyAlert({
       <Panel.Heading>{t('survey.foundational-c-sharp.title')}</Panel.Heading>
       <Panel.Body className='text-center'>
         <p>{t('survey.misc.two-questions')}</p>
-        <Spacer size='small' />
+        <Spacer size='xs' />
         <Button
           block={true}
           variant='info'

client/src/templates/Challenges/exam/components/foundational-c-sharp-survey.tsx

@@ -4,10 +4,9 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Button, Modal } from '@freecodecamp/ui';
+import { Button, Modal, Spacer } from '@freecodecamp/ui';
 
 import { SurveyResults, SurveyResponse } from '../../../../redux/prop-types';
-import { Spacer } from '../../../../components/helpers';
 import { setIsProcessing, submitSurvey } from '../../../../redux/actions';
 import { closeModal } from '../../redux/actions';
 import { isProcessingSelector } from '../../../../redux/selectors';
@@ -137,9 +136,9 @@ function FoundationalCSharpSurvey({
       <Modal.Body>
         {i18nSurvey.map((question, i) => (
           <div key={i}>
-            <Spacer size='medium' />
+            <Spacer size='m' />
             <div>{question.question}</div>
-            <Spacer size='small' />
+            <Spacer size='xs' />
             <div className='video-quiz-options'>
               {question.options.map((option, j) => (
                 <label className='video-quiz-option-label' key={j}>
@@ -173,7 +172,7 @@ function FoundationalCSharpSurvey({
         >
           {t('survey.misc.submit')}
         </Button>
-        <Spacer size='xxSmall' />
+        <Spacer size='xxs' />
         <Button
           block={true}
           size='medium'

client/src/templates/Challenges/exam/components/missing-prerequisites.tsx

@@ -1,9 +1,8 @@
 import { useStaticQuery, graphql } from 'gatsby';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Alert } from '@freecodecamp/ui';
+import { Alert, Spacer } from '@freecodecamp/ui';
 
-import Spacer from '../../../../components/helpers/spacer';
 import {
   AllChallengeNode,
   PrerequisiteChallenge
@@ -39,7 +38,7 @@ function MissingPrerequisites({
   return (
     <Alert variant='danger'>
       <p>{t('learn.exam.not-qualified')}</p>
-      <Spacer size='small' />
+      <Spacer size='xs' />
       <ul>
         {newMissingPrerequisites.map(({ title, id, slug }) =>
           slug ? (

client/src/templates/Challenges/exam/show.tsx

@@ -9,11 +9,10 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Alert, Row, Button } from '@freecodecamp/ui';
+import { Container, Col, Alert, Row, Button, Spacer } from '@freecodecamp/ui';
 import { micromark } from 'micromark';
 
 // Local Utilities
-import Spacer from '../../../components/helpers/spacer';
 import LearnLayout from '../../../components/layouts/learn';
 import ChallengeTitle from '../components/challenge-title';
 import PrismFormatted from '../components/prism-formatted';
@@ -393,7 +392,7 @@ class ShowExam extends Component<ShowExamProps, ShowExamState> {
     return examInProgress ? (
       <Container>
         <Row>
-          <Spacer size='medium' />
+          <Spacer size='m' />
           <Col md={10} mdOffset={1} sm={10} smOffset={1} xs={12}>
             {examResults ? (
               <ExamResults
@@ -423,7 +422,7 @@ class ShowExam extends Component<ShowExamProps, ShowExamState> {
                   </div>
                 </div>
                 <hr />
-                <Spacer size='medium' />
+                <Spacer size='m' />
 
                 <div className='exam-questions'>
                   <PrismFormatted
@@ -432,7 +431,7 @@ class ShowExam extends Component<ShowExamProps, ShowExamState> {
                     )}
                   />
 
-                  <Spacer size='large' />
+                  <Spacer size='l' />
                   <div className='exam-answers'>
                     {generatedExamQuestions[currentQuestionIndex].answers.map(
                       ({ answer, id }) => (
@@ -466,7 +465,7 @@ class ShowExam extends Component<ShowExamProps, ShowExamState> {
                     )}
                   </div>
                 </div>
-                <Spacer size='large' />
+                <Spacer size='l' />
 
                 <div className='exam-buttons'>
                   <Button
@@ -507,7 +506,7 @@ class ShowExam extends Component<ShowExamProps, ShowExamState> {
                   )}
                 </div>
 
-                <Spacer size='medium' />
+                <Spacer size='m' />
 
                 <div className='exam-buttons'>
                   <Button
@@ -543,7 +542,7 @@ class ShowExam extends Component<ShowExamProps, ShowExamState> {
                 >
                   {title}
                 </ChallengeTitle>
-                <Spacer size='medium' />
+                <Spacer size='m' />
 
                 {qualifiedForExam ? (
                   <Alert variant='info'>
@@ -561,7 +560,7 @@ class ShowExam extends Component<ShowExamProps, ShowExamState> {
                   </>
                 )}
                 <PrismFormatted text={description} />
-                <Spacer size='medium' />
+                <Spacer size='m' />
                 <PrismFormatted text={instructions} />
 
                 <Button

client/src/templates/Challenges/fill-in-the-blank/show.tsx

@@ -9,11 +9,10 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Row, Button } from '@freecodecamp/ui';
+import { Container, Col, Row, Button, Spacer } from '@freecodecamp/ui';
 import ShortcutsModal from '../components/shortcuts-modal';
 
 // Local Utilities
-import Spacer from '../../../components/helpers/spacer';
 import LearnLayout from '../../../components/layouts/learn';
 import { ChallengeNode, ChallengeMeta, Test } from '../../../redux/prop-types';
 import Hotkeys from '../components/hotkeys';
@@ -288,7 +287,7 @@ class ShowFillInTheBlank extends Component<
           />
           <Container>
             <Row>
-              <Spacer size='medium' />
+              <Spacer size='m' />
               <ChallengeTitle
                 isCompleted={isChallengeCompleted}
                 translationPending={translationPending}
@@ -298,7 +297,7 @@ class ShowFillInTheBlank extends Component<
 
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
                 <PrismFormatted text={description} />
-                <Spacer size='medium' />
+                <Spacer size='m' />
               </Col>
 
               {scene && (
@@ -313,7 +312,7 @@ class ShowFillInTheBlank extends Component<
                 {instructions && (
                   <>
                     <PrismFormatted text={instructions} />
-                    <Spacer size='small' />
+                    <Spacer size='xs' />
                   </>
                 )}
 
@@ -333,7 +332,7 @@ class ShowFillInTheBlank extends Component<
                 {explanation ? (
                   <ChallegeExplanation explanation={explanation} />
                 ) : (
-                  <Spacer size='medium' />
+                  <Spacer size='m' />
                 )}
 
                 <Button
@@ -344,11 +343,11 @@ class ShowFillInTheBlank extends Component<
                 >
                   {t('buttons.check-answer')}
                 </Button>
-                <Spacer size='xxSmall' />
+                <Spacer size='xxs' />
                 <Button block={true} variant='primary' onClick={openHelpModal}>
                   {t('buttons.ask-for-help')}
                 </Button>
-                <Spacer size='large' />
+                <Spacer size='l' />
               </Col>
               <CompletionModal />
               <HelpModal challengeTitle={title} challengeBlock={blockName} />

client/src/templates/Challenges/generic/show.tsx

@@ -3,10 +3,9 @@ import React, { useEffect, useRef, useState } from 'react';
 import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
-import { Container, Col, Row, Button } from '@freecodecamp/ui';
+import { Container, Col, Row, Button, Spacer } from '@freecodecamp/ui';
 
 // Local Utilities
-import Spacer from '../../../components/helpers/spacer';
 import LearnLayout from '../../../components/layouts/learn';
 import { ChallengeNode, ChallengeMeta, Test } from '../../../redux/prop-types';
 import ChallengeDescription from '../components/challenge-description';
@@ -164,7 +163,7 @@ const ShowGeneric = ({
         />
         <Container>
           <Row>
-            <Spacer size='medium' />
+            <Spacer size='m' />
             <ChallengeTitle
               isCompleted={isChallengeCompleted}
               translationPending={translationPending}
@@ -175,7 +174,7 @@ const ShowGeneric = ({
             {description && (
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
                 <ChallengeDescription description={description} />
-                <Spacer size='medium' />
+                <Spacer size='m' />
               </Col>
             )}
 
@@ -205,7 +204,7 @@ const ShowGeneric = ({
                 <ChallengeDescription instructions={instructions} />
               )}
 
-              <Spacer size='medium' />
+              <Spacer size='m' />
 
               {assignments.length > 0 && (
                 <Assignments
@@ -221,7 +220,7 @@ const ShowGeneric = ({
                   : t('buttons.check-answer')}
               </Button>
 
-              <Spacer size='large' />
+              <Spacer size='l' />
             </Col>
             <CompletionModal />
           </Row>

client/src/templates/Challenges/ms-trophy/link-ms-user.tsx

@@ -9,10 +9,10 @@ import {
   FormControl,
   FormGroup,
   HelpBlock,
-  Button
+  Button,
+  Spacer
 } from '@freecodecamp/ui';
 
-import { Spacer } from '../../../components/helpers';
 import { isMicrosoftTranscriptLink } from '../../../../../shared/utils/validate';
 import {
   linkMsUsername,
@@ -88,7 +88,7 @@ function LinkMsUser({
   return !isSignedIn ? (
     <>
       <ChallengeHeading heading={t('learn.ms.link-header')} />
-      <Spacer size='small' />
+      <Spacer size='xs' />
 
       <p>{t('learn.ms.link-signin')}</p>
       <Login />
@@ -110,7 +110,7 @@ function LinkMsUser({
       ) : (
         <div>
           <ChallengeHeading heading={'learn.ms.link-header'} />
-          <Spacer size='small' />
+          <Spacer size='xs' />
 
           <p>{t('learn.ms.unlinked')}</p>
           <ol className='link-ms-user-ol'>
@@ -136,7 +136,7 @@ function LinkMsUser({
             <li>{t('learn.ms.link-li-6')}</li>
           </ol>
 
-          <Spacer size='medium' />
+          <Spacer size='m' />
           <form onSubmit={handleLinkUsername}>
             <FormGroup validationState={isValid ? 'success' : 'error'}>
               <ControlLabel htmlFor='transcript-link'>

client/src/templates/Challenges/ms-trophy/show.tsx

@@ -8,8 +8,7 @@ import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
 
-import { Container, Col, Row, Button } from '@freecodecamp/ui';
-import Spacer from '../../../components/helpers/spacer';
+import { Container, Col, Row, Button, Spacer } from '@freecodecamp/ui';
 import LearnLayout from '../../../components/layouts/learn';
 import { ChallengeNode, ChallengeMeta, Test } from '../../../redux/prop-types';
 import ChallengeDescription from '../components/challenge-description';
@@ -198,7 +197,7 @@ class MsTrophy extends Component<MsTrophyProps> {
           <Container>
             <Row>
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-                <Spacer size='medium' />
+                <Spacer size='m' />
                 <ChallengeTitle
                   isCompleted={isChallengeCompleted}
                   translationPending={translationPending}
@@ -220,7 +219,7 @@ class MsTrophy extends Component<MsTrophyProps> {
                 >
                   {t('buttons.verify-trophy')}
                 </Button>
-                <Spacer size='xxSmall' />
+                <Spacer size='xxs' />
                 <Button
                   block={true}
                   variant='primary'
@@ -230,7 +229,7 @@ class MsTrophy extends Component<MsTrophyProps> {
                   {t('buttons.ask-for-help')}
                 </Button>
                 <br />
-                <Spacer size='medium' />
+                <Spacer size='m' />
               </Col>
               <CompletionModal />
               <HelpModal challengeTitle={title} challengeBlock={blockName} />

client/src/templates/Challenges/odin/show.tsx

@@ -10,11 +10,10 @@ import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
 import { isEqual } from 'lodash-es';
-import { Container, Col, Row, Button } from '@freecodecamp/ui';
+import { Container, Col, Row, Button, Spacer } from '@freecodecamp/ui';
 import ShortcutsModal from '../components/shortcuts-modal';
 
 // Local Utilities
-import Spacer from '../../../components/helpers/spacer';
 import LearnLayout from '../../../components/layouts/learn';
 import { ChallengeNode, ChallengeMeta, Test } from '../../../redux/prop-types';
 import Hotkeys from '../components/hotkeys';
@@ -292,7 +291,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
             <Row>
               {videoId && (
                 <Col lg={10} lgOffset={1} md={10} mdOffset={1}>
-                  <Spacer size='medium' />
+                  <Spacer size='m' />
                   <VideoPlayer
                     bilibiliIds={bilibiliIds}
                     onVideoLoad={this.onVideoLoad}
@@ -305,7 +304,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
               )}
 
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-                <Spacer size='medium' />
+                <Spacer size='m' />
                 <ChallengeTitle
                   isCompleted={isChallengeCompleted}
                   translationPending={translationPending}
@@ -313,7 +312,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                   {title}
                 </ChallengeTitle>
                 <PrismFormatted className={'line-numbers'} text={description} />
-                <Spacer size='medium' />
+                <Spacer size='m' />
               </Col>
 
               {scene && (
@@ -355,7 +354,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                 {explanation ? (
                   <ChallegeExplanation explanation={explanation} />
                 ) : (
-                  <Spacer size='medium' />
+                  <Spacer size='m' />
                 )}
 
                 <Button
@@ -366,7 +365,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                 >
                   {t('buttons.check-answer')}
                 </Button>
-                <Spacer size='xxSmall' />
+                <Spacer size='xxs' />
                 <Button
                   block={true}
                   size='medium'
@@ -375,7 +374,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                 >
                   {t('buttons.ask-for-help')}
                 </Button>
-                <Spacer size='large' />
+                <Spacer size='l' />
               </Col>
               <CompletionModal />
               <HelpModal challengeTitle={title} challengeBlock={blockName} />

client/src/templates/Challenges/projects/backend/show.tsx

@@ -9,9 +9,8 @@ import { withTranslation } from 'react-i18next';
 import type { TFunction } from 'i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Row } from '@freecodecamp/ui';
+import { Container, Col, Row, Spacer } from '@freecodecamp/ui';
 
-import Spacer from '../../../../components/helpers/spacer';
 import LearnLayout from '../../../../components/layouts/learn';
 import { isSignedInSelector } from '../../../../redux/selectors';
 import {
@@ -231,7 +230,7 @@ class BackEnd extends Component<BackEndProps> {
           <Container>
             <Row>
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-                <Spacer size='medium' />
+                <Spacer size='m' />
                 <ChallengeTitle
                   isCompleted={isChallengeCompleted}
                   translationPending={translationPending}
@@ -242,7 +241,7 @@ class BackEnd extends Component<BackEndProps> {
                   description={description}
                   instructions={instructions}
                 />
-                <Spacer size='medium' />
+                <Spacer size='m' />
                 <SolutionForm
                   challengeType={challengeType}
                   // eslint-disable-next-line @typescript-eslint/unbound-method
@@ -263,7 +262,7 @@ class BackEnd extends Component<BackEndProps> {
                   output={output}
                 />
                 <TestSuite tests={tests} />
-                <Spacer size='medium' />
+                <Spacer size='m' />
               </Col>
               <CompletionModal />
               <HelpModal challengeTitle={title} challengeBlock={blockName} />

client/src/templates/Challenges/projects/frontend/show.tsx

@@ -7,9 +7,8 @@ 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, Spacer } from '@freecodecamp/ui';
 
-import Spacer from '../../../../components/helpers/spacer';
 import LearnLayout from '../../../../components/layouts/learn';
 import {
   ChallengeNode,
@@ -186,7 +185,7 @@ class Project extends Component<ProjectProps> {
           <Container>
             <Row>
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-                <Spacer size='medium' />
+                <Spacer size='m' />
                 <ChallengeTitle
                   isCompleted={isChallengeCompleted}
                   translationPending={translationPending}
@@ -197,7 +196,7 @@ class Project extends Component<ProjectProps> {
                   description={description}
                   instructions={instructions}
                 />
-                <Spacer size='medium' />
+                <Spacer size='m' />
                 <SolutionForm
                   challengeType={challengeType}
                   description={description}
@@ -209,7 +208,7 @@ class Project extends Component<ProjectProps> {
                   guideUrl={getGuideUrl({ forumTopicId, title })}
                 />
                 <br />
-                <Spacer size='medium' />
+                <Spacer size='m' />
               </Col>
               <CompletionModal />
               <HelpModal challengeTitle={title} challengeBlock={blockName} />

client/src/templates/Challenges/projects/tool-panel.tsx

@@ -3,10 +3,9 @@ import type { TFunction } from 'i18next';
 import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
-import { Button } from '@freecodecamp/ui';
+import { Button, Spacer } from '@freecodecamp/ui';
 
 import { openModal } from '../redux/actions';
-import { Spacer } from '../../../components/helpers';
 
 const mapStateToProps = () => ({});
 
@@ -41,7 +40,7 @@ function ToolPanel({
           >
             {t('buttons.get-hint')}
           </Button>
-          <Spacer size='xxSmall' />
+          <Spacer size='xxs' />
         </>
       )}
       <Button block={true} variant='primary' onClick={openHelpModal}>

client/src/templates/Challenges/video/show.tsx

@@ -10,10 +10,9 @@ import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
 import { isEqual } from 'lodash-es';
-import { Container, Col, Row, Button } from '@freecodecamp/ui';
+import { Container, Col, Row, Button, Spacer } from '@freecodecamp/ui';
 
 // Local Utilities
-import Spacer from '../../../components/helpers/spacer';
 import LearnLayout from '../../../components/layouts/learn';
 import { ChallengeNode, ChallengeMeta, Test } from '../../../redux/prop-types';
 import { challengeTypes } from '../../../../../shared/config/challenge-types';
@@ -254,7 +253,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
           />
           <Container>
             <Row>
-              <Spacer size='medium' />
+              <Spacer size='m' />
               <ChallengeTitle
                 isCompleted={isChallengeCompleted}
                 translationPending={translationPending}
@@ -286,7 +285,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
                     showFeedback={this.state.showFeedback}
                   />
                 </ObserveKeys>
-                <Spacer size='medium' />
+                <Spacer size='m' />
                 <Button
                   block={true}
                   variant='primary'
@@ -294,11 +293,11 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
                 >
                   {t('buttons.check-answer')}
                 </Button>
-                <Spacer size='xxSmall' />
+                <Spacer size='xxs' />
                 <Button block={true} variant='primary' onClick={openHelpModal}>
                   {t('buttons.ask-for-help')}
                 </Button>
-                <Spacer size='large' />
+                <Spacer size='l' />
               </Col>
               <CompletionModal />
               <HelpModal challengeTitle={title} challengeBlock={blockName} />

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

@@ -5,12 +5,13 @@ import { connect } from 'react-redux';
 import ScrollableAnchor from 'react-scrollable-anchor';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
+import { Spacer } from '@freecodecamp/ui';
 
 import { SuperBlocks } from '../../../../../shared/config/curriculum';
 import envData from '../../../../config/env.json';
 import { isAuditedSuperBlock } from '../../../../../shared/utils/is-audited';
 import Caret from '../../../assets/icons/caret';
-import { Link, Spacer } from '../../../components/helpers';
+import { Link } from '../../../components/helpers';
 import { completedChallengesSelector } from '../../../redux/selectors';
 import { ChallengeNode, CompletedChallenge } from '../../../redux/prop-types';
 import { playTone } from '../../../utils/tone';
@@ -427,7 +428,7 @@ class Block extends Component<BlockProps> {
     return (
       <>
         {blockRenderer()}
-        {isGridBlock && !isProjectBlock ? null : <Spacer size='medium' />}
+        {isGridBlock && !isProjectBlock ? null : <Spacer size='m' />}
       </>
     );
   }

client/src/templates/Introduction/components/help-translate.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { Spacer } from '@freecodecamp/ui';
 import { SuperBlocks } from '../../../../../shared/config/curriculum';
 import { isAuditedSuperBlock } from '../../../../../shared/utils/is-audited';
-import { Link, Spacer } from '../../../components/helpers';
+import { Link } from '../../../components/helpers';
 
 import envData from '../../../../config/env.json';
 
@@ -26,7 +27,7 @@ function HelpTranslate({ superBlock }: HelpTranslateProps): JSX.Element | null {
 
   return (
     <div style={{ textAlign: 'center' }}>
-      <Spacer size='medium' />
+      <Spacer size='m' />
       <p style={{ marginBottom: 0 }}>{t('learn.help-translate')} </p>
       <Link
         external={true}

client/src/templates/Introduction/components/super-block-intro.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Alert } from '@freecodecamp/ui';
+import { Alert, Spacer } from '@freecodecamp/ui';
 import { SuperBlocks } from '../../../../../shared/config/curriculum';
 import { SuperBlockIcon } from '../../../assets/icons/superblock-icon';
-import { Spacer, Link } from '../../../components/helpers';
+import { Link } from '../../../components/helpers';
 
 interface SuperBlockIntroProps {
   superBlock: SuperBlocks;
@@ -74,9 +74,9 @@ function SuperBlockIntro(props: SuperBlockIntroProps): JSX.Element {
       <h1 id='content-start' className='text-center big-heading'>
         {i18nSuperBlock}
       </h1>
-      <Spacer size='medium' />
+      <Spacer size='m' />
       <SuperBlockIcon className='cert-header-icon' superBlock={superBlock} />
-      <Spacer size='medium' />
+      <Spacer size='m' />
       {superBlockIntroText.map((str, i) => (
         <p dangerouslySetInnerHTML={{ __html: str }} key={i} />
       ))}

client/src/templates/Introduction/intro.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 
-import { Container } from '@freecodecamp/ui';
-import { Spacer, ButtonLink } from '../../components/helpers';
+import { Container, Spacer } from '@freecodecamp/ui';
+import { ButtonLink } from '../../components/helpers';
 import FullWidthRow from '../../components/helpers/full-width-row';
 import LearnLayout from '../../components/layouts/learn';
 import type { MarkdownRemark, AllChallengeNode } from '../../redux/prop-types';
@@ -47,11 +47,11 @@ function IntroductionPage({
           <ButtonLink block size='large' href={firstLessonPath}>
             {t('buttons.first-lesson')}
           </ButtonLink>
-          <Spacer size='small' />
+          <Spacer size='xs' />
           <ButtonLink block size='large' href='/learn'>
             {t('buttons.view-curriculum')}
           </ButtonLink>
-          <Spacer size='small' />
+          <Spacer size='xs' />
           <hr />
         </FullWidthRow>
       </Container>

client/src/templates/Introduction/super-block-intro.tsx

@@ -8,14 +8,13 @@ import { connect } from 'react-redux';
 import { configureAnchors } from 'react-scrollable-anchor';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Row } from '@freecodecamp/ui';
+import { Container, Col, Row, Spacer } from '@freecodecamp/ui';
 
 import { SuperBlocks } from '../../../../shared/config/curriculum';
 import { getSuperBlockTitleForMap } from '../../utils/superblock-map-titles';
 import DonateModal from '../../components/Donation/donation-modal';
 import Login from '../../components/Header/components/login';
 import Map from '../../components/Map';
-import { Spacer } from '../../components/helpers';
 import callGA from '../../analytics/call-ga';
 import { tryToShowDonationModal } from '../../redux/actions';
 import {
@@ -207,7 +206,7 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => {
         <main>
           <Row className='super-block-intro-page'>
             <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-              <Spacer size='large' />
+              <Spacer size='l' />
               <LegacyLinks superBlock={superBlock} />
               <SuperBlockIntro
                 superBlock={superBlock}
@@ -217,11 +216,11 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => {
                 isDonating={user.isDonating}
               />
               <HelpTranslate superBlock={superBlock} />
-              <Spacer size='large' />
+              <Spacer size='l' />
               <h2 className='text-center big-subheading'>
                 {t(`intro:misc-text.courses`)}
               </h2>
-              <Spacer size='medium' />
+              <Spacer size='m' />
               <div className='block-ui'>
                 {blocks.map(block => {
                   const blockChallenges = challenges.filter(
@@ -250,20 +249,20 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => {
               </div>
               {!isSignedIn && !signInLoading && (
                 <>
-                  <Spacer size='large' />
+                  <Spacer size='l' />
                   <Login block={true}>{t('buttons.logged-out-cta-btn')}</Login>
                 </>
               )}
-              <Spacer size='large' />
+              <Spacer size='l' />
               <h3
                 className='text-center big-block-title'
                 style={{ whiteSpace: 'pre-line' }}
               >
                 {t(`intro:misc-text.browse-other`)}
               </h3>
-              <Spacer size='medium' />
+              <Spacer size='m' />
               <Map allChallenges={allChallenges} />
-              <Spacer size='large' />
+              <Spacer size='l' />
             </Col>
           </Row>
         </main>