From 9136f8e4088cded40c0c3d80c49bf346b4d29322 Mon Sep 17 00:00:00 2001
From: Manabu Matsumoto <mmatsumoto1026@gmail.com>
Date: Tue, 21 Mar 2023 17:17:42 +0900
Subject: [PATCH] fix(UI): give the spacer a few standard sizes (#49723)

Co-authored-by: Muhammed Mustafa <muhammed@freecodecamp.org>
---
 .../client-only-routes/show-certification.tsx | 14 +++++-----
 .../client-only-routes/show-project-links.tsx |  4 +--
 .../src/client-only-routes/show-settings.tsx  | 18 ++++++-------
 .../client-only-routes/show-unsubscribed.tsx  |  6 ++---
 client/src/client-only-routes/show-user.tsx   | 10 +++----
 .../src/components/Donation/donate-form.tsx   |  2 +-
 .../components/Donation/donation-modal.tsx    |  4 +--
 client/src/components/FourOhFour/index.tsx    |  8 +++---
 .../Intro/components/intro-description.tsx    |  2 +-
 client/src/components/Intro/index.tsx         | 18 ++++++-------
 client/src/components/Map/index.tsx           |  2 +-
 client/src/components/helpers/spacer.tsx      | 14 +++++++---
 .../landing/components/certifications.tsx     |  4 +--
 .../landing/components/landing-top.tsx        |  6 ++---
 .../profile/components/certifications.tsx     |  4 +--
 .../profile/components/heat-map.tsx           |  4 +--
 client/src/components/profile/profile.tsx     | 12 ++++-----
 client/src/components/settings/about.tsx      |  4 +--
 .../src/components/settings/certification.js  |  6 ++---
 .../src/components/settings/danger-zone.tsx   |  6 ++---
 .../src/components/settings/delete-modal.tsx  |  2 +-
 client/src/components/settings/email.tsx      |  2 +-
 client/src/components/settings/portfolio.tsx  | 10 +++----
 client/src/components/settings/privacy.tsx    |  2 +-
 .../src/components/settings/reset-modal.tsx   |  2 +-
 client/src/components/settings/sound.tsx      |  2 +-
 .../components/settings/toggle-setting.tsx    |  2 +-
 client/src/components/settings/user-token.tsx |  6 ++---
 client/src/components/signout-modal/index.tsx |  2 +-
 client/src/pages/blocked.tsx                  |  6 ++---
 client/src/pages/donate.tsx                   | 10 +++----
 client/src/pages/email-sign-up.tsx            | 16 ++++++------
 client/src/pages/learn.tsx                    |  2 +-
 client/src/pages/update-email.tsx             |  2 +-
 .../templates/Challenges/codeally/show.tsx    | 26 +++++++++----------
 client/src/templates/Challenges/odin/show.tsx | 16 ++++++------
 .../Challenges/projects/backend/show.tsx      |  4 +--
 .../Challenges/projects/frontend/show.tsx     |  4 +--
 .../src/templates/Challenges/video/show.tsx   | 10 +++----
 .../Introduction/components/block.tsx         |  2 +-
 .../components/super-block-intro.tsx          |  4 +--
 client/src/templates/Introduction/intro.tsx   |  4 +--
 .../Introduction/super-block-intro.tsx        | 14 +++++-----
 43 files changed, 153 insertions(+), 145 deletions(-)

diff --git a/client/src/client-only-routes/show-certification.tsx b/client/src/client-only-routes/show-certification.tsx
index 541199ecc14..0acc5406e33 100644
--- a/client/src/client-only-routes/show-certification.tsx
+++ b/client/src/client-only-routes/show-certification.tsx
@@ -240,7 +240,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
 
   const donationSection = (
     <div className='donation-section'>
-      <Spacer paddingSize={30} />
+      <Spacer size='large' />
       {!isDonationSubmitted && (
         <Row>
           <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
@@ -263,7 +263,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
           {isDonationSubmitted && donationCloseBtn}
         </Col>
       </Row>
-      <Spacer paddingSize={30} />
+      <Spacer size='large' />
     </div>
   );
 
@@ -281,7 +281,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
         >
           {t('profile.add-linkedin')}
         </Button>
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
         <Button
           block={true}
           bsSize='lg'
@@ -295,7 +295,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
           {t('profile.add-twitter')}
         </Button>
       </Col>
-      <Spacer paddingSize={30} />
+      <Spacer size='large' />
     </Row>
   );
 
@@ -365,11 +365,11 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
         </footer>
       </Row>
       <div className='row certificate-links'>
-        <Spacer paddingSize={30} />
+        <Spacer size='large' />
         {signedInUserName === username ? shareCertBtns : ''}
-        <Spacer paddingSize={30} />
+        <Spacer size='large' />
         <ShowProjectLinks certName={certTitle} name={displayName} user={user} />
-        <Spacer paddingSize={30} />
+        <Spacer size='large' />
       </div>
     </Grid>
   );
diff --git a/client/src/client-only-routes/show-project-links.tsx b/client/src/client-only-routes/show-project-links.tsx
index 7f96f8f9a9d..012dbe92fcb 100644
--- a/client/src/client-only-routes/show-project-links.tsx
+++ b/client/src/client-only-routes/show-project-links.tsx
@@ -160,7 +160,7 @@ const ShowProjectLinks = (props: ShowProjectLinksProps): JSX.Element => {
           : 'certification.project.heading',
         { user: name }
       )}
-      <Spacer paddingSize={15} />
+      <Spacer size='medium' />
       <Table striped>
         <thead>
           <tr>
@@ -170,7 +170,7 @@ const ShowProjectLinks = (props: ShowProjectLinksProps): JSX.Element => {
         </thead>
         <tbody>{renderProjectsFor(certName)}</tbody>
       </Table>
-      <Spacer paddingSize={15} />
+      <Spacer size='medium' />
       <ProjectModal
         challengeFiles={completedChallenge?.challengeFiles ?? null}
         handleSolutionModalHide={handleSolutionModalHide}
diff --git a/client/src/client-only-routes/show-settings.tsx b/client/src/client-only-routes/show-settings.tsx
index 49e757369be..ce34aac2c8d 100644
--- a/client/src/client-only-routes/show-settings.tsx
+++ b/client/src/client-only-routes/show-settings.tsx
@@ -161,7 +161,7 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
       <Helmet title={`${t('buttons.settings')} | freeCodeCamp.org`} />
       <Grid>
         <main>
-          <Spacer paddingSize={30} />
+          <Spacer size='large' />
           <h1 className='text-center' style={{ overflowWrap: 'break-word' }}>
             {t('settings.for', { username: username })}
           </h1>
@@ -180,16 +180,16 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
             toggleKeyboardShortcuts={toggleKeyboardShortcuts}
             username={username}
           />
-          <Spacer paddingSize={15} />
+          <Spacer size='medium' />
           <Privacy />
-          <Spacer paddingSize={15} />
+          <Spacer size='medium' />
           <Email
             email={email}
             isEmailVerified={isEmailVerified}
             sendQuincyEmail={sendQuincyEmail}
             updateQuincyEmail={updateQuincyEmail}
           />
-          <Spacer paddingSize={15} />
+          <Spacer size='medium' />
           <Internet
             githubProfile={githubProfile}
             linkedin={linkedin}
@@ -197,12 +197,12 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
             updateSocials={updateSocials}
             website={website}
           />
-          <Spacer paddingSize={15} />
+          <Spacer size='medium' />
           {/* @ts-expect-error Portfolio types mismatch */}
           <Portfolio portfolio={portfolio} updatePortfolio={updatePortfolio} />
-          <Spacer paddingSize={15} />
+          <Spacer size='medium' />
           <Honesty isHonest={isHonest} updateIsHonest={updateIsHonest} />
-          <Spacer paddingSize={15} />
+          <Spacer size='medium' />
           <Certification
             completedChallenges={completedChallenges}
             createFlashMessage={createFlashMessage}
@@ -229,11 +229,11 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
           />
           {userToken && (
             <>
-              <Spacer paddingSize={15} />
+              <Spacer size='medium' />
               <UserToken />
             </>
           )}
-          <Spacer paddingSize={15} />
+          <Spacer size='medium' />
           <DangerZone />
         </main>
       </Grid>
diff --git a/client/src/client-only-routes/show-unsubscribed.tsx b/client/src/client-only-routes/show-unsubscribed.tsx
index ff809f2174e..fc701d47ebf 100644
--- a/client/src/client-only-routes/show-unsubscribed.tsx
+++ b/client/src/client-only-routes/show-unsubscribed.tsx
@@ -23,9 +23,9 @@ function ShowUnsubscribed({
       <Grid>
         <main>
           <FullWidthRow>
-            <Spacer paddingSize={30} />
+            <Spacer size='large' />
             <Panel bsStyle='primary' className='text-center'>
-              <Spacer paddingSize={15} />
+              <Spacer size='medium' />
               <h2>{t('misc.unsubscribed')}</h2>
               <p>{t('misc.keep-coding')}</p>
             </Panel>
@@ -42,7 +42,7 @@ function ShowUnsubscribed({
               </Button>
             </FullWidthRow>
           ) : null}
-          <Spacer paddingSize={30} />
+          <Spacer size='large' />
         </main>
       </Grid>
     </>
diff --git a/client/src/client-only-routes/show-user.tsx b/client/src/client-only-routes/show-user.tsx
index 7714c6712f2..efc15a22d54 100644
--- a/client/src/client-only-routes/show-user.tsx
+++ b/client/src/client-only-routes/show-user.tsx
@@ -83,7 +83,7 @@ function ShowUser({
     return (
       <main>
         <FullWidthRow>
-          <Spacer paddingSize={30} />
+          <Spacer size='large' />
           <Panel bsStyle='info' className='text-center'>
             <Panel.Heading>
               <Panel.Title componentClass='h3'>
@@ -91,11 +91,11 @@ function ShowUser({
               </Panel.Title>
             </Panel.Heading>
             <Panel.Body className='text-center'>
-              <Spacer paddingSize={30} />
+              <Spacer size='large' />
               <Col md={6} mdOffset={3} sm={8} smOffset={2} xs={12}>
                 <Login block={true}>{t('buttons.click-here')}</Login>
               </Col>
-              <Spacer paddingSize={45} />
+              <Spacer size='exLarge' />
             </Panel.Body>
           </Panel>
         </FullWidthRow>
@@ -108,7 +108,7 @@ function ShowUser({
       <Helmet>
         <title>{t('report.portfolio')} | freeCodeCamp.org</title>
       </Helmet>
-      <Spacer paddingSize={30} />
+      <Spacer size='large' />
       <Row className='text-center overflow-fix'>
         <Col sm={8} smOffset={2} xs={12}>
           <h2>{t('report.portfolio-2', { username: username })}</h2>
@@ -135,7 +135,7 @@ function ShowUser({
             <Button block={true} bsStyle='primary' type='submit'>
               {t('report.submit')}
             </Button>
-            <Spacer paddingSize={15} />
+            <Spacer size='medium' />
           </form>
         </Col>
       </Row>
diff --git a/client/src/components/Donation/donate-form.tsx b/client/src/components/Donation/donate-form.tsx
index bfbfc48ed41..9984f55cbc5 100644
--- a/client/src/components/Donation/donate-form.tsx
+++ b/client/src/components/Donation/donate-form.tsx
@@ -273,7 +273,7 @@ class DonateForm extends Component<DonateFormProps, DonateFormComponentState> {
         <b className={isMinimalForm ? 'donation-label-modal' : ''}>
           {this.getDonationButtonLabel()}:
         </b>
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
         <fieldset className={'donate-btn-group security-legend'}>
           <legend>
             <SecurityLockIcon />
diff --git a/client/src/components/Donation/donation-modal.tsx b/client/src/components/Donation/donation-modal.tsx
index 73e2bc3ce9f..ad6e32efb94 100644
--- a/client/src/components/Donation/donation-modal.tsx
+++ b/client/src/components/Donation/donation-modal.tsx
@@ -134,7 +134,7 @@ function DonateModal({
     >
       <Modal.Body>
         {donationText}
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
         <Row>
           <Col xs={12}>
             <DonateForm
@@ -144,7 +144,7 @@ function DonateModal({
             />
           </Col>
         </Row>
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
         <Row>
           <Col sm={4} smOffset={4} xs={8} xsOffset={2}>
             <Button
diff --git a/client/src/components/FourOhFour/index.tsx b/client/src/components/FourOhFour/index.tsx
index 16659a238b8..8377089ecaa 100644
--- a/client/src/components/FourOhFour/index.tsx
+++ b/client/src/components/FourOhFour/index.tsx
@@ -16,18 +16,18 @@ const FourOhFour = (): JSX.Element => {
     <div className='notfound-page-wrapper'>
       <Helmet title={t('404.page-not-found') + '| freeCodeCamp'} />
       <img alt={t('404.not-found')} src={notFoundLogo} />
-      <Spacer paddingSize={15} />
+      <Spacer size='medium' />
       <h1>{t('404.page-not-found')}.</h1>
-      <Spacer paddingSize={15} />
+      <Spacer size='medium' />
       <div>
         <p>{t('404.heres-a-quote')}</p>
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
         <blockquote className='quote-wrapper'>
           <p className='quote'>{quote.quote}</p>
           <p className='author'>- {quote.author}</p>
         </blockquote>
       </div>
-      <Spacer paddingSize={30} />
+      <Spacer size='large' />
       <Link className='btn btn-cta' to='/learn'>
         {t('buttons.view-curriculum')}
       </Link>
diff --git a/client/src/components/Intro/components/intro-description.tsx b/client/src/components/Intro/components/intro-description.tsx
index c3e772caf22..5d30be6c6ea 100644
--- a/client/src/components/Intro/components/intro-description.tsx
+++ b/client/src/components/Intro/components/intro-description.tsx
@@ -12,7 +12,7 @@ function IntroDescription(): JSX.Element {
   return (
     <div className='intro-description'>
       <strong>{t('learn.read-this.heading')}</strong>
-      <Spacer paddingSize={15} />
+      <Spacer size='medium' />
       <p>{t('learn.read-this.p1')}</p>
       <p>{t('learn.read-this.p2')}</p>
       <p>{t('learn.read-this.p3')}</p>
diff --git a/client/src/components/Intro/index.tsx b/client/src/components/Intro/index.tsx
index 3ce24dd00e3..97ca8b48469 100644
--- a/client/src/components/Intro/index.tsx
+++ b/client/src/components/Intro/index.tsx
@@ -34,22 +34,22 @@ const Intro = ({
   if (pending && !complete) {
     return (
       <>
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
         <Loader />
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
       </>
     );
   } else if (isSignedIn) {
     const { quote, author } = randomQuote();
     return (
       <>
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
         <h1 className='text-center'>
           {name
             ? `${t('learn.welcome-1', { name: name })}`
             : `${t('learn.welcome-2')}`}
         </h1>
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
         <div className='text-center quote-partial'>
           <blockquote className='blockquote'>
             <span>
@@ -66,7 +66,7 @@ const Intro = ({
         />
         {completedChallengeCount && slug && completedChallengeCount < 15 ? (
           <div className='intro-description'>
-            <Spacer paddingSize={15} />
+            <Spacer size='medium' />
             <p>
               <Trans i18nKey='learn.start-at-beginning'>
                 <Link to={slug} />
@@ -81,13 +81,13 @@ const Intro = ({
   } else {
     return (
       <>
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
         <h1>{t('learn.heading')}</h1>
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
         <IntroDescription />
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
         <Login block={true}>{t('buttons.logged-out-cta-btn')}</Login>
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
       </>
     );
   }
diff --git a/client/src/components/Map/index.tsx b/client/src/components/Map/index.tsx
index 566740a4e91..3206d48db1a 100644
--- a/client/src/components/Map/index.tsx
+++ b/client/src/components/Map/index.tsx
@@ -107,7 +107,7 @@ function renderLearnMap(currentSuperBlock: MapProps['currentSuperBlock']) {
             >
               {i18next.t('learn.help-translate-link')}
             </Link>
-            <Spacer paddingSize={15} />
+            <Spacer size='medium' />
           </div>
         </>
       )}
diff --git a/client/src/components/helpers/spacer.tsx b/client/src/components/helpers/spacer.tsx
index ac29b3e9185..f4c14fcb6a4 100644
--- a/client/src/components/helpers/spacer.tsx
+++ b/client/src/components/helpers/spacer.tsx
@@ -1,13 +1,21 @@
 import React from 'react';
 
+const Padding = Object.freeze({
+  small: 5,
+  medium: 15,
+  large: 30,
+  exLarge: 45
+});
+
+type PaddingKeys = keyof typeof Padding;
 interface SpacerProps {
-  paddingSize: number;
+  size: PaddingKeys;
 }
 
-const Spacer = ({ paddingSize }: SpacerProps): JSX.Element => (
+const Spacer = ({ size }: SpacerProps): JSX.Element => (
   <div
     className='spacer'
-    style={{ padding: `${paddingSize}px 0`, height: '1px' }}
+    style={{ padding: `${Padding[size]}px 0`, height: '1px' }}
   />
 );
 
diff --git a/client/src/components/landing/components/certifications.tsx b/client/src/components/landing/components/certifications.tsx
index 65288f5c627..6c60a9e39b2 100644
--- a/client/src/components/landing/components/certifications.tsx
+++ b/client/src/components/landing/components/certifications.tsx
@@ -19,9 +19,9 @@ const Certifications = ({
       <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
         <h1 className='big-heading'>{t('landing.certification-heading')}</h1>
         <Map forLanding={true} />
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
         <BigCallToAction pageName={pageName} />
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
       </Col>
     </Row>
   );
diff --git a/client/src/components/landing/components/landing-top.tsx b/client/src/components/landing/components/landing-top.tsx
index f847e1b7eb2..349cff1b6c3 100644
--- a/client/src/components/landing/components/landing-top.tsx
+++ b/client/src/components/landing/components/landing-top.tsx
@@ -28,7 +28,7 @@ function LandingTop({ pageName }: LandingTopProps): JSX.Element {
   return (
     <div className='landing-top'>
       <Row>
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
         <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
           <h1 className='big-heading' data-test-label={`${pageName}-header`}>
             {t('landing.big-heading-1')}
@@ -52,10 +52,10 @@ function LandingTop({ pageName }: LandingTopProps): JSX.Element {
               </>
             )}
           </div>
-          <Spacer paddingSize={15} />
+          <Spacer size='medium' />
           <BigCallToAction pageName={pageName} />
           <CampersImage pageName={pageName} />
-          <Spacer paddingSize={15} />
+          <Spacer size='medium' />
         </Col>
       </Row>
     </div>
diff --git a/client/src/components/profile/components/certifications.tsx b/client/src/components/profile/components/certifications.tsx
index 2a2588a8029..2306cb59a7d 100644
--- a/client/src/components/profile/components/certifications.tsx
+++ b/client/src/components/profile/components/certifications.tsx
@@ -61,7 +61,7 @@ function CertButton({ username, cert }: CertButtonProps): JSX.Element {
           </Link>
         </Col>
       </Row>
-      <Spacer paddingSize={5} />
+      <Spacer size='small' />
     </>
   );
 }
@@ -102,7 +102,7 @@ function Certificates({
                   username={username}
                 />
               ))}
-          <Spacer paddingSize={30} />
+          <Spacer size='large' />
         </div>
       ) : null}
       <hr />
diff --git a/client/src/components/profile/components/heat-map.tsx b/client/src/components/profile/components/heat-map.tsx
index 9f86f6346c7..e9594ed134c 100644
--- a/client/src/components/profile/components/heat-map.tsx
+++ b/client/src/components/profile/components/heat-map.tsx
@@ -124,7 +124,7 @@ class HeatMapInner extends Component<HeatMapInnerProps, HeatMapInnerState> {
             &gt;
           </button>
         </Row>
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
 
         <CalendarHeatMap
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -164,7 +164,7 @@ class HeatMapInner extends Component<HeatMapInnerProps, HeatMapInnerState> {
         />
         <ReactTooltip className='react-tooltip' effect='solid' html={true} />
 
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
         <Row>
           <div className='streak-container'>
             <span className='streak' data-testid='longest-streak'>
diff --git a/client/src/components/profile/profile.tsx b/client/src/components/profile/profile.tsx
index bf4352078ed..ec68412886b 100644
--- a/client/src/components/profile/profile.tsx
+++ b/client/src/components/profile/profile.tsx
@@ -29,7 +29,7 @@ function renderMessage(
       <FullWidthRow>
         <p className='alert alert-info'>{t('profile.you-change-privacy')}</p>
       </FullWidthRow>
-      <Spacer paddingSize={15} />
+      <Spacer size='medium' />
     </>
   ) : (
     <>
@@ -43,7 +43,7 @@ function renderMessage(
           {t('profile.username-change-privacy', { username: username })}
         </p>
       </FullWidthRow>
-      <Spacer paddingSize={15} />
+      <Spacer size='medium' />
     </>
   );
 }
@@ -103,7 +103,7 @@ function renderProfile(user: ProfileProps['user']): JSX.Element {
       {showTimeLine ? (
         <Timeline completedMap={completedChallenges} username={username} />
       ) : null}
-      <Spacer paddingSize={15} />
+      <Spacer size='medium' />
     </>
   );
 }
@@ -120,9 +120,9 @@ function Profile({ user, isSessionUser }: ProfileProps): JSX.Element {
       <Helmet>
         <title>{t('buttons.profile')} | freeCodeCamp.org</title>
       </Helmet>
-      <Spacer paddingSize={15} />
+      <Spacer size='medium' />
       <Grid>
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
         {isLocked ? renderMessage(isSessionUser, username, t) : null}
         {!isLocked || isSessionUser ? renderProfile(user) : null}
         {isSessionUser ? null : (
@@ -132,7 +132,7 @@ function Profile({ user, isSessionUser }: ProfileProps): JSX.Element {
             </Link>
           </Row>
         )}
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
       </Grid>
     </>
   );
diff --git a/client/src/components/settings/about.tsx b/client/src/components/settings/about.tsx
index 8b147491621..215071ced9d 100644
--- a/client/src/components/settings/about.tsx
+++ b/client/src/components/settings/about.tsx
@@ -208,7 +208,7 @@ class AboutSettings extends Component<AboutProps, AboutState> {
     return (
       <>
         <UsernameSettings username={username} />
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
         <SectionHeader>{t('settings.headings.personal-info')}</SectionHeader>
         <FullWidthRow>
           <form id='camper-identity' onSubmit={this.handleSubmit}>
@@ -271,7 +271,7 @@ class AboutSettings extends Component<AboutProps, AboutState> {
             </BlockSaveButton>
           </form>
         </FullWidthRow>
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
         <FullWidthRow>
           <ThemeSettings
             currentTheme={currentTheme}
diff --git a/client/src/components/settings/certification.js b/client/src/components/settings/certification.js
index bf7b8dbc5c4..89cf4b3ce9b 100644
--- a/client/src/components/settings/certification.js
+++ b/client/src/components/settings/certification.js
@@ -231,7 +231,7 @@ export class CertificationSettings extends Component {
     const { certSlug } = first(projectsMap[certName]);
     return (
       <FullWidthRow key={certName}>
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
         <h3 className='text-center' id={`cert-${certSlug}`}>
           {t(`certification.title.${certName}`, certName)}
         </h3>
@@ -345,7 +345,7 @@ export class CertificationSettings extends Component {
     };
     return (
       <FullWidthRow key={certSlug}>
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
         <h3 className='text-center'>
           {t('certification.title.Legacy Full Stack Certification')}
         </h3>
@@ -403,7 +403,7 @@ export class CertificationSettings extends Component {
             </Button>
           )}
         </div>
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
       </FullWidthRow>
     );
   };
diff --git a/client/src/components/settings/danger-zone.tsx b/client/src/components/settings/danger-zone.tsx
index 5e8a86bb12f..5f7cef2f4b5 100644
--- a/client/src/components/settings/danger-zone.tsx
+++ b/client/src/components/settings/danger-zone.tsx
@@ -45,7 +45,7 @@ function DangerZone({ deleteAccount, resetProgress, t }: DangerZoneProps) {
     <FullWidthRow className='danger-zone text-center'>
       <Panel bsStyle='danger'>
         <Panel.Heading>{t('settings.danger.heading')}</Panel.Heading>
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
         <p>{t('settings.danger.be-careful')}</p>
         <FullWidthRow>
           <Button
@@ -58,7 +58,7 @@ function DangerZone({ deleteAccount, resetProgress, t }: DangerZoneProps) {
           >
             {t('settings.danger.reset')}
           </Button>
-          <Spacer paddingSize={5} />
+          <Spacer size='small' />
           <Button
             block={true}
             bsSize='lg'
@@ -69,7 +69,7 @@ function DangerZone({ deleteAccount, resetProgress, t }: DangerZoneProps) {
           >
             {t('settings.danger.delete')}
           </Button>
-          <Spacer paddingSize={15} />
+          <Spacer size='medium' />
         </FullWidthRow>
       </Panel>
 
diff --git a/client/src/components/settings/delete-modal.tsx b/client/src/components/settings/delete-modal.tsx
index 07128525c2c..7c166347045 100644
--- a/client/src/components/settings/delete-modal.tsx
+++ b/client/src/components/settings/delete-modal.tsx
@@ -52,7 +52,7 @@ function DeleteModal(props: DeleteModalProps): JSX.Element {
         >
           {t('settings.danger.nevermind')}
         </Button>
-        <Spacer paddingSize={5} />
+        <Spacer size='small' />
         <Button
           block={true}
           bsSize='lg'
diff --git a/client/src/components/settings/email.tsx b/client/src/components/settings/email.tsx
index fc4101f6a07..f46f2a81008 100644
--- a/client/src/components/settings/email.tsx
+++ b/client/src/components/settings/email.tsx
@@ -223,7 +223,7 @@ function EmailSettings({
           </BlockSaveButton>
         </form>
       </FullWidthRow>
-      <Spacer paddingSize={15} />
+      <Spacer size='medium' />
       <FullWidthRow>
         <form id='form-quincy-email' onSubmit={handleSubmit}>
           <ToggleSetting
diff --git a/client/src/components/settings/portfolio.tsx b/client/src/components/settings/portfolio.tsx
index 79498e4033f..191744f6ba7 100644
--- a/client/src/components/settings/portfolio.tsx
+++ b/client/src/components/settings/portfolio.tsx
@@ -314,7 +314,7 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
           >
             {t('buttons.save-portfolio')}
           </BlockSaveButton>
-          <Spacer paddingSize={5} />
+          <Spacer size='small' />
           <Button
             block={true}
             bsSize='lg'
@@ -327,9 +327,9 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
         </form>
         {index + 1 !== arr.length && (
           <>
-            <Spacer paddingSize={15} />
+            <Spacer size='medium' />
             <hr />
-            <Spacer paddingSize={15} />
+            <Spacer size='medium' />
           </>
         )}
       </FullWidthRow>
@@ -348,7 +348,7 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
           </div>
         </FullWidthRow>
         <FullWidthRow>
-          <Spacer paddingSize={5} />
+          <Spacer size='small' />
           <Button
             block={true}
             bsSize='lg'
@@ -360,7 +360,7 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
             {t('buttons.add-portfolio')}
           </Button>
         </FullWidthRow>
-        <Spacer paddingSize={30} />
+        <Spacer size='large' />
         {portfolio.length ? portfolio.map(this.renderPortfolio) : null}
       </section>
     );
diff --git a/client/src/components/settings/privacy.tsx b/client/src/components/settings/privacy.tsx
index 8f2d89fb18a..a83462f4de3 100644
--- a/client/src/components/settings/privacy.tsx
+++ b/client/src/components/settings/privacy.tsx
@@ -161,7 +161,7 @@ function PrivacySettings({
         </Form>
       </FullWidthRow>
       <FullWidthRow>
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
         <p>{t('settings.data')}</p>
         <Button
           block={true}
diff --git a/client/src/components/settings/reset-modal.tsx b/client/src/components/settings/reset-modal.tsx
index 494d04d5290..9ad25747344 100644
--- a/client/src/components/settings/reset-modal.tsx
+++ b/client/src/components/settings/reset-modal.tsx
@@ -43,7 +43,7 @@ function ResetModal(props: ResetModalProps): JSX.Element {
         >
           {t('settings.danger.nevermind-2')}
         </Button>
-        <Spacer paddingSize={5} />
+        <Spacer size='small' />
         <Button
           block={true}
           bsSize='lg'
diff --git a/client/src/components/settings/sound.tsx b/client/src/components/settings/sound.tsx
index 10bc7cf8df2..83b258c1c78 100644
--- a/client/src/components/settings/sound.tsx
+++ b/client/src/components/settings/sound.tsx
@@ -65,7 +65,7 @@ export default function SoundSettings({
         className='soundbar'
         onInput={handleVolumeChange}
       />
-      <Spacer paddingSize={15}></Spacer>
+      <Spacer size='medium'></Spacer>
     </Form>
   );
 }
diff --git a/client/src/components/settings/toggle-setting.tsx b/client/src/components/settings/toggle-setting.tsx
index 951ce5f119f..36a2b33488c 100644
--- a/client/src/components/settings/toggle-setting.tsx
+++ b/client/src/components/settings/toggle-setting.tsx
@@ -48,7 +48,7 @@ export default function ToggleSetting({
           />
         </FormGroup>
       </div>
-      <Spacer paddingSize={5} />
+      <Spacer size='small' />
     </>
   );
 }
diff --git a/client/src/components/settings/user-token.tsx b/client/src/components/settings/user-token.tsx
index f6e768b0b90..7b053e653d7 100644
--- a/client/src/components/settings/user-token.tsx
+++ b/client/src/components/settings/user-token.tsx
@@ -33,10 +33,10 @@ class UserToken extends Component<UserTokenProps> {
         <FullWidthRow>
           <Panel className='user-panel'>
             <Panel.Heading>{t('user-token.title')}</Panel.Heading>
-            <Spacer paddingSize={15} />
+            <Spacer size='medium' />
             <p>{t('user-token.delete-p1')}</p>
             <FullWidthRow>
-              <Spacer paddingSize={5} />
+              <Spacer size='small' />
               <Button
                 block={true}
                 bsSize='lg'
@@ -48,7 +48,7 @@ class UserToken extends Component<UserTokenProps> {
               >
                 {t('user-token.delete')}
               </Button>
-              <Spacer paddingSize={15} />
+              <Spacer size='medium' />
             </FullWidthRow>
           </Panel>
         </FullWidthRow>
diff --git a/client/src/components/signout-modal/index.tsx b/client/src/components/signout-modal/index.tsx
index b9c95f03c65..abad3be8ab0 100644
--- a/client/src/components/signout-modal/index.tsx
+++ b/client/src/components/signout-modal/index.tsx
@@ -79,7 +79,7 @@ function SignoutModal(props: SignoutModalProps): JSX.Element {
         >
           {t('signout.nevermind')}
         </Button>
-        <Spacer paddingSize={5} />
+        <Spacer size='small' />
         <Button
           block={true}
           bsStyle='danger'
diff --git a/client/src/pages/blocked.tsx b/client/src/pages/blocked.tsx
index 090eff366a2..9e2c66f3b7f 100644
--- a/client/src/pages/blocked.tsx
+++ b/client/src/pages/blocked.tsx
@@ -9,11 +9,11 @@ function BlockedPage(): JSX.Element {
     <>
       <Helmet title={`Access Denied | freeCodeCamp.org`} />
       <Grid className='text-center'>
-        <Spacer paddingSize={30} />
+        <Spacer size='large' />
         <Row>
           <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
             <h1>We can&apos;t log you in.</h1>
-            <Spacer paddingSize={30} />
+            <Spacer size='large' />
             <Col lg={10} lgOffset={1} sm={10} smOffset={1} xs={12}>
               <div className='text-left blocked-body'>
                 <p>
@@ -32,7 +32,7 @@ function BlockedPage(): JSX.Element {
             </Col>
           </Col>
         </Row>
-        <Spacer paddingSize={30} />
+        <Spacer size='large' />
       </Grid>
     </>
   );
diff --git a/client/src/pages/donate.tsx b/client/src/pages/donate.tsx
index e5b04d7c7c5..0e9ea8deb0e 100644
--- a/client/src/pages/donate.tsx
+++ b/client/src/pages/donate.tsx
@@ -67,7 +67,7 @@ function DonatePage({
     <>
       <Helmet title={`${t('donate.title')} | freeCodeCamp.org`} />
       <Grid className='donate-page-wrapper'>
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
         <Row>
           <>
             <Col lg={6} lgOffset={0} md={8} mdOffset={2} sm={10} smOffset={1}>
@@ -78,7 +78,7 @@ function DonatePage({
                   ) : (
                     <h2>{t('donate.help-more')}</h2>
                   )}
-                  <Spacer paddingSize={15} />
+                  <Spacer size='medium' />
                 </Col>
               </Row>
               {isDonating ? (
@@ -94,12 +94,12 @@ function DonatePage({
                   <DonateForm paymentContext={PaymentContext.DonatePage} />
                 </Col>
               </Row>
-              <Spacer paddingSize={45} />
+              <Spacer size='exLarge' />
               <Row className='donate-support' id='FAQ'>
                 <Col className={'text-center'} xs={12}>
                   <hr />
                   <h2>{t('donate.faq')}</h2>
-                  <Spacer paddingSize={15} />
+                  <Spacer size='medium' />
                 </Col>
                 <Col xs={12}>
                   <DonationFaqText />
@@ -111,7 +111,7 @@ function DonatePage({
             </Col>
           </>
         </Row>
-        <Spacer paddingSize={15} />
+        <Spacer size='medium' />
       </Grid>
     </>
   );
diff --git a/client/src/pages/email-sign-up.tsx b/client/src/pages/email-sign-up.tsx
index 38ef1e5a155..065528ce468 100644
--- a/client/src/pages/email-sign-up.tsx
+++ b/client/src/pages/email-sign-up.tsx
@@ -94,7 +94,7 @@ function AcceptPrivacyTerms({
             >
               {t('buttons.yes-please')}
             </Button>
-            <Spacer paddingSize={5} />
+            <Spacer size='small' />
           </Col>
           <Col md={4} sm={5} xs={12}>
             <Button
@@ -106,14 +106,14 @@ function AcceptPrivacyTerms({
             >
               {t('buttons.no-thanks')}
             </Button>
-            <Spacer paddingSize={5} />
+            <Spacer size='small' />
           </Col>
         </Row>
       );
     } else {
       return (
         <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-          <Spacer paddingSize={5} />
+          <Spacer size='small' />
           <Button
             block={true}
             bsSize='lg'
@@ -123,7 +123,7 @@ function AcceptPrivacyTerms({
           >
             {t('buttons.sign-up-email-list')}
           </Button>
-          <Spacer paddingSize={5} />
+          <Spacer size='small' />
         </Col>
       );
     }
@@ -139,7 +139,7 @@ function AcceptPrivacyTerms({
       <Grid>
         <Row>
           <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-            <Spacer paddingSize={15} />
+            <Spacer size='medium' />
             <IntroDescription />
             <hr />
           </Col>
@@ -147,13 +147,13 @@ function AcceptPrivacyTerms({
         <Row className='email-sign-up' data-cy='email-sign-up'>
           <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
             <strong>{t('misc.quincy')}</strong>
-            <Spacer paddingSize={15} />
+            <Spacer size='medium' />
             <p>{t('misc.email-blast')}</p>
-            <Spacer paddingSize={15} />
+            <Spacer size='medium' />
           </Col>
           {renderEmailListOptin(isSignedIn, showLoading)}
           <Col xs={12}>
-            <Spacer paddingSize={15} />
+            <Spacer size='medium' />
           </Col>
         </Row>
       </Grid>
diff --git a/client/src/pages/learn.tsx b/client/src/pages/learn.tsx
index 172933a5ca3..65e7b3e5c02 100644
--- a/client/src/pages/learn.tsx
+++ b/client/src/pages/learn.tsx
@@ -106,7 +106,7 @@ function LearnPage({
               isDonating={isDonating}
             />
             <Map />
-            <Spacer paddingSize={30} />
+            <Spacer size='large' />
           </Col>
         </Row>
       </Grid>
diff --git a/client/src/pages/update-email.tsx b/client/src/pages/update-email.tsx
index 6159dcb904e..6441f5a7cea 100644
--- a/client/src/pages/update-email.tsx
+++ b/client/src/pages/update-email.tsx
@@ -71,7 +71,7 @@ function UpdateEmail({ isNewEmail, t, updateMyEmail }: UpdateEmailProps) {
       <Helmet>
         <title>{t('misc.update-email-1')} | freeCodeCamp.org</title>
       </Helmet>
-      <Spacer paddingSize={15} />
+      <Spacer size='medium' />
       <h2 className='text-center'>{t('misc.update-email-2')}</h2>
       <Grid>
         <Row>
diff --git a/client/src/templates/Challenges/codeally/show.tsx b/client/src/templates/Challenges/codeally/show.tsx
index 9918545c7bf..bc5587485d6 100644
--- a/client/src/templates/Challenges/codeally/show.tsx
+++ b/client/src/templates/Challenges/codeally/show.tsx
@@ -253,16 +253,16 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
           <Grid>
             <Row>
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-                <Spacer paddingSize={15} />
+                <Spacer size='medium' />
                 <ChallengeTitle
                   isCompleted={isChallengeCompleted}
                   translationPending={translationPending}
                 >
                   {title}
                 </ChallengeTitle>
-                <Spacer paddingSize={15} />
+                <Spacer size='medium' />
                 <PrismFormatted text={description} />
-                <Spacer paddingSize={15} />
+                <Spacer size='medium' />
                 <div className='ca-description'>
                   <Trans i18nKey='learn.github-required'>
                     <a
@@ -275,7 +275,7 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                     </a>
                   </Trans>
                 </div>
-                <Spacer paddingSize={15} />
+                <Spacer size='medium' />
                 {isSignedIn &&
                   challengeType === challengeTypes.codeAllyCert && (
                     <>
@@ -283,7 +283,7 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                         {t('learn.complete-both-steps')}
                       </div>
                       <hr />
-                      <Spacer paddingSize={15} />
+                      <Spacer size='medium' />
                       <b>{t('learn.step-1')}</b>
                       {(isPartiallyCompleted || isCompleted) && (
                         <GreenPass
@@ -294,13 +294,13 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                           }}
                         />
                       )}
-                      <Spacer paddingSize={15} />
+                      <Spacer size='medium' />
                       <div className='ca-description'>
                         {t('learn.runs-in-vm')}
                       </div>
-                      <Spacer paddingSize={15} />
+                      <Spacer size='medium' />
                       <PrismFormatted text={instructions} />
-                      <Spacer paddingSize={15} />
+                      <Spacer size='medium' />
                     </>
                   )}
                 <Alert id='codeally-cookie-warning' bsStyle='info'>
@@ -321,7 +321,7 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                   challengeType === challengeTypes.codeAllyCert && (
                     <>
                       <hr />
-                      <Spacer paddingSize={15} />
+                      <Spacer size='medium' />
                       <b>{t('learn.step-2')}</b>
                       {isCompleted && (
                         <GreenPass
@@ -332,13 +332,13 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                           }}
                         />
                       )}
-                      <Spacer paddingSize={15} />
+                      <Spacer size='medium' />
                       <div className='ca-description'>
                         {t('learn.submit-public-url')}
                       </div>
-                      <Spacer paddingSize={15} />
+                      <Spacer size='medium' />
                       <PrismFormatted text={notes} />
-                      <Spacer paddingSize={15} />
+                      <Spacer size='medium' />
                       <SolutionForm
                         challengeType={challengeType}
                         description={description}
@@ -349,7 +349,7 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                   )}
                 <ProjectToolPanel />
                 <br />
-                <Spacer paddingSize={15} />
+                <Spacer size='medium' />
               </Col>
               <CompletionModal
                 block={block}
diff --git a/client/src/templates/Challenges/odin/show.tsx b/client/src/templates/Challenges/odin/show.tsx
index d132508a84d..ff936e25596 100644
--- a/client/src/templates/Challenges/odin/show.tsx
+++ b/client/src/templates/Challenges/odin/show.tsx
@@ -243,7 +243,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
             <Row>
               {videoId && (
                 <Col lg={10} lgOffset={1} md={10} mdOffset={1}>
-                  <Spacer paddingSize={15} />
+                  <Spacer size='medium' />
                   <div className='video-wrapper'>
                     {!this.state.videoIsLoaded ? (
                       <div className='video-placeholder-loader'>
@@ -262,10 +262,10 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                 </Col>
               )}
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-                <Spacer paddingSize={15} />
+                <Spacer size='medium' />
                 <h2>{title}</h2>
                 <PrismFormatted className={'line-numbers'} text={description} />
-                <Spacer paddingSize={15} />
+                <Spacer size='medium' />
                 <ObserveKeys>
                   {assignments.length > 0 && (
                     <>
@@ -291,11 +291,11 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                               className={'video-quiz-option'}
                               text={assignment}
                             />
-                            <Spacer paddingSize={15} />
+                            <Spacer size='medium' />
                           </label>
                         ))}
                       </div>{' '}
-                      <Spacer paddingSize={15} />
+                      <Spacer size='medium' />
                     </>
                   )}
 
@@ -326,7 +326,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                     ))}
                   </div>
                 </ObserveKeys>
-                <Spacer paddingSize={15} />
+                <Spacer size='medium' />
                 <div
                   style={{
                     textAlign: 'center'
@@ -343,7 +343,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                       </>
                     )}
                 </div>
-                <Spacer paddingSize={15} />
+                <Spacer size='medium' />
                 <Button
                   block={true}
                   bsSize='large'
@@ -358,7 +358,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                 >
                   {t('buttons.check-answer')}
                 </Button>
-                <Spacer paddingSize={30} />
+                <Spacer size='large' />
               </Col>
               <CompletionModal
                 block={block}
diff --git a/client/src/templates/Challenges/projects/backend/show.tsx b/client/src/templates/Challenges/projects/backend/show.tsx
index 55785cccb92..94c0f3d6e61 100644
--- a/client/src/templates/Challenges/projects/backend/show.tsx
+++ b/client/src/templates/Challenges/projects/backend/show.tsx
@@ -232,7 +232,7 @@ class BackEnd extends Component<BackEndProps> {
           <Grid>
             <Row>
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-                <Spacer paddingSize={15} />
+                <Spacer size='medium' />
                 <ChallengeTitle
                   isCompleted={isChallengeCompleted}
                   translationPending={translationPending}
@@ -263,7 +263,7 @@ class BackEnd extends Component<BackEndProps> {
                   output={output}
                 />
                 <TestSuite tests={tests} />
-                <Spacer paddingSize={15} />
+                <Spacer size='medium' />
               </Col>
               <CompletionModal
                 block={block}
diff --git a/client/src/templates/Challenges/projects/frontend/show.tsx b/client/src/templates/Challenges/projects/frontend/show.tsx
index 833b8091b7f..b8f0e8eb73f 100644
--- a/client/src/templates/Challenges/projects/frontend/show.tsx
+++ b/client/src/templates/Challenges/projects/frontend/show.tsx
@@ -172,7 +172,7 @@ class Project extends Component<ProjectProps> {
           <Grid>
             <Row>
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-                <Spacer paddingSize={15} />
+                <Spacer size='medium' />
                 <ChallengeTitle
                   isCompleted={isChallengeCompleted}
                   translationPending={translationPending}
@@ -194,7 +194,7 @@ class Project extends Component<ProjectProps> {
                   guideUrl={getGuideUrl({ forumTopicId, title })}
                 />
                 <br />
-                <Spacer paddingSize={15} />
+                <Spacer size='medium' />
               </Col>
               <CompletionModal
                 block={block}
diff --git a/client/src/templates/Challenges/video/show.tsx b/client/src/templates/Challenges/video/show.tsx
index 6b85a089114..3e5fbea88e2 100644
--- a/client/src/templates/Challenges/video/show.tsx
+++ b/client/src/templates/Challenges/video/show.tsx
@@ -216,7 +216,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
           />
           <Grid>
             <Row>
-              <Spacer paddingSize={15} />
+              <Spacer size='medium' />
               <ChallengeTitle
                 isCompleted={isChallengeCompleted}
                 translationPending={translationPending}
@@ -244,7 +244,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
                 <ChallengeDescription description={description} />
                 <PrismFormatted className={'line-numbers'} text={text} />
-                <Spacer paddingSize={15} />
+                <Spacer size='medium' />
                 <ObserveKeys>
                   <div className='video-quiz-options'>
                     {answers.map((option, index) => (
@@ -273,7 +273,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
                     ))}
                   </div>
                 </ObserveKeys>
-                <Spacer paddingSize={15} />
+                <Spacer size='medium' />
                 <div
                   style={{
                     textAlign: 'center'
@@ -285,7 +285,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
                     <span>{t('learn.check-answer')}</span>
                   )}
                 </div>
-                <Spacer paddingSize={15} />
+                <Spacer size='medium' />
                 <Button
                   block={true}
                   bsSize='large'
@@ -296,7 +296,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
                 >
                   {t('buttons.check-answer')}
                 </Button>
-                <Spacer paddingSize={30} />
+                <Spacer size='large' />
               </Col>
               <CompletionModal
                 block={block}
diff --git a/client/src/templates/Introduction/components/block.tsx b/client/src/templates/Introduction/components/block.tsx
index b56681f68f0..5fad0dfd2e5 100644
--- a/client/src/templates/Introduction/components/block.tsx
+++ b/client/src/templates/Introduction/components/block.tsx
@@ -352,7 +352,7 @@ class Block extends Component<BlockProps> {
         {blockrenderer()}
         {(isNewResponsiveWebDesign || isNewJsAlgos || isCollegeAlgebraPy) &&
         !isProjectBlock ? null : (
-          <Spacer paddingSize={15} />
+          <Spacer size='medium' />
         )}
       </>
     );
diff --git a/client/src/templates/Introduction/components/super-block-intro.tsx b/client/src/templates/Introduction/components/super-block-intro.tsx
index 28577b5cf10..afa94e92089 100644
--- a/client/src/templates/Introduction/components/super-block-intro.tsx
+++ b/client/src/templates/Introduction/components/super-block-intro.tsx
@@ -26,9 +26,9 @@ function SuperBlockIntro(props: SuperBlockIntroProps): JSX.Element {
   return (
     <>
       <h1 className='text-center big-heading'>{i18nSuperBlock}</h1>
-      <Spacer paddingSize={15} />
+      <Spacer size='medium' />
       {generateIconComponent(superBlock, 'cert-header-icon')}
-      <Spacer paddingSize={15} />
+      <Spacer size='medium' />
       {superBlockIntroText.map((str, i) => (
         <p key={i}>{str}</p>
       ))}
diff --git a/client/src/templates/Introduction/intro.tsx b/client/src/templates/Introduction/intro.tsx
index bd4842ebf58..c1c3d0141a5 100644
--- a/client/src/templates/Introduction/intro.tsx
+++ b/client/src/templates/Introduction/intro.tsx
@@ -67,11 +67,11 @@ function IntroductionPage({
           >
             {t('buttons.first-lesson')}
           </Link>
-          <Spacer paddingSize={5} />
+          <Spacer size='small' />
           <Link className='btn btn-lg btn-primary btn-block' to='/learn'>
             {t('buttons.view-curriculum')}
           </Link>
-          <Spacer paddingSize={5} />
+          <Spacer size='small' />
           <hr />
         </FullWidthRow>
         <FullWidthRow>
diff --git a/client/src/templates/Introduction/super-block-intro.tsx b/client/src/templates/Introduction/super-block-intro.tsx
index c050a0f32f3..74e84867dc2 100644
--- a/client/src/templates/Introduction/super-block-intro.tsx
+++ b/client/src/templates/Introduction/super-block-intro.tsx
@@ -190,14 +190,14 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => {
         <main>
           <Row className='super-block-intro-page'>
             <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-              <Spacer paddingSize={30} />
+              <Spacer size='large' />
               <LegacyLinks superBlock={superBlock} />
               <SuperBlockIntro superBlock={superBlock} />
-              <Spacer paddingSize={30} />
+              <Spacer size='large' />
               <h2 className='text-center big-subheading'>
                 {t(`intro:misc-text.courses`)}
               </h2>
-              <Spacer paddingSize={15} />
+              <Spacer size='medium' />
               <div className='block-ui'>
                 {defaultCurriculumNames.map(blockDashedName => (
                   <Fragment key={blockDashedName}>
@@ -224,20 +224,20 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => {
               </div>
               {!isSignedIn && !signInLoading && (
                 <div>
-                  <Spacer paddingSize={30} />
+                  <Spacer size='large' />
                   <Login block={true}>{t('buttons.logged-out-cta-btn')}</Login>
                 </div>
               )}
-              <Spacer paddingSize={30} />
+              <Spacer size='large' />
               <h3
                 className='text-center big-block-title'
                 style={{ whiteSpace: 'pre-line' }}
               >
                 {t(`intro:misc-text.browse-other`)}
               </h3>
-              <Spacer paddingSize={15} />
+              <Spacer size='medium' />
               <Map currentSuperBlock={superBlock} />
-              <Spacer paddingSize={30} />
+              <Spacer size='large' />
             </Col>
           </Row>
         </main>