From ba40dbddbb4d21f7257a8c4ad20a1d9941f68d40 Mon Sep 17 00:00:00 2001
From: Manabu Matsumoto <mmatsumoto1026@gmail.com>
Date: Wed, 15 Mar 2023 21:31:56 +0900
Subject: [PATCH] fix(UI): remove the ButtonSpacer (#49480)

Co-authored-by: Muhammed Mustafa <muhammed@freecodecamp.org>
Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
---
 .../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/IntroDescription.tsx     |  2 +-
 client/src/components/Intro/index.tsx         | 18 ++++++-------
 client/src/components/Map/index.tsx           |  2 +-
 .../src/components/helpers/button-spacer.tsx  |  9 -------
 client/src/components/helpers/index.ts        |  1 -
 client/src/components/helpers/spacer.tsx      | 22 +++++-----------
 .../landing/components/certifications.tsx     |  4 +--
 .../landing/components/landing-top.tsx        |  6 ++---
 .../__snapshots__/profile.test.tsx.snap       |  4 +++
 .../profile/components/certifications.tsx     |  6 ++---
 .../profile/components/heat-map.tsx           |  4 +--
 client/src/components/profile/profile.tsx     | 12 ++++-----
 .../settings-button.test.js.snap              | 15 +++++++++++
 client/src/components/settings/about.tsx      |  4 +--
 .../src/components/settings/certification.js  |  6 ++---
 .../src/components/settings/danger-zone.tsx   |  8 +++---
 .../src/components/settings/delete-modal.tsx  |  4 +--
 client/src/components/settings/email.tsx      |  2 +-
 client/src/components/settings/portfolio.tsx  | 12 ++++-----
 client/src/components/settings/privacy.tsx    |  2 +-
 .../src/components/settings/reset-modal.tsx   |  4 +--
 client/src/components/settings/sound.tsx      |  2 +-
 .../components/settings/toggle-setting.tsx    |  4 +--
 client/src/components/settings/user-token.tsx |  8 +++---
 client/src/components/signout-modal/index.tsx |  4 +--
 .../__snapshots__/email-sign-up.test.js.snap  | 11 ++++++--
 client/src/pages/blocked.tsx                  |  6 ++---
 client/src/pages/donate.tsx                   | 10 +++----
 client/src/pages/email-sign-up.tsx            | 18 ++++++-------
 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   |  6 ++---
 .../Introduction/super-block-intro.tsx        | 14 +++++-----
 48 files changed, 187 insertions(+), 179 deletions(-)
 delete mode 100644 client/src/components/helpers/button-spacer.tsx

diff --git a/client/src/client-only-routes/show-certification.tsx b/client/src/client-only-routes/show-certification.tsx
index 3ccbe646e1c..541199ecc14 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 size={2} />
+      <Spacer paddingSize={30} />
       {!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 size={2} />
+      <Spacer paddingSize={30} />
     </div>
   );
 
@@ -281,7 +281,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
         >
           {t('profile.add-linkedin')}
         </Button>
-        <Spacer />
+        <Spacer paddingSize={15} />
         <Button
           block={true}
           bsSize='lg'
@@ -295,7 +295,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
           {t('profile.add-twitter')}
         </Button>
       </Col>
-      <Spacer size={2} />
+      <Spacer paddingSize={30} />
     </Row>
   );
 
@@ -365,11 +365,11 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
         </footer>
       </Row>
       <div className='row certificate-links'>
-        <Spacer size={2} />
+        <Spacer paddingSize={30} />
         {signedInUserName === username ? shareCertBtns : ''}
-        <Spacer size={2} />
+        <Spacer paddingSize={30} />
         <ShowProjectLinks certName={certTitle} name={displayName} user={user} />
-        <Spacer size={2} />
+        <Spacer paddingSize={30} />
       </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 94d8a603759..dc2589111bf 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 />
+      <Spacer paddingSize={15} />
       <Table striped>
         <thead>
           <tr>
@@ -170,7 +170,7 @@ const ShowProjectLinks = (props: ShowProjectLinksProps): JSX.Element => {
         </thead>
         <tbody>{renderProjectsFor(certName)}</tbody>
       </Table>
-      <Spacer />
+      <Spacer paddingSize={15} />
       <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 b2ce2482027..49e757369be 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 size={2} />
+          <Spacer paddingSize={30} />
           <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 />
+          <Spacer paddingSize={15} />
           <Privacy />
-          <Spacer />
+          <Spacer paddingSize={15} />
           <Email
             email={email}
             isEmailVerified={isEmailVerified}
             sendQuincyEmail={sendQuincyEmail}
             updateQuincyEmail={updateQuincyEmail}
           />
-          <Spacer />
+          <Spacer paddingSize={15} />
           <Internet
             githubProfile={githubProfile}
             linkedin={linkedin}
@@ -197,12 +197,12 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
             updateSocials={updateSocials}
             website={website}
           />
-          <Spacer />
+          <Spacer paddingSize={15} />
           {/* @ts-expect-error Portfolio types mismatch */}
           <Portfolio portfolio={portfolio} updatePortfolio={updatePortfolio} />
-          <Spacer />
+          <Spacer paddingSize={15} />
           <Honesty isHonest={isHonest} updateIsHonest={updateIsHonest} />
-          <Spacer />
+          <Spacer paddingSize={15} />
           <Certification
             completedChallenges={completedChallenges}
             createFlashMessage={createFlashMessage}
@@ -229,11 +229,11 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
           />
           {userToken && (
             <>
-              <Spacer />
+              <Spacer paddingSize={15} />
               <UserToken />
             </>
           )}
-          <Spacer />
+          <Spacer paddingSize={15} />
           <DangerZone />
         </main>
       </Grid>
diff --git a/client/src/client-only-routes/show-unsubscribed.tsx b/client/src/client-only-routes/show-unsubscribed.tsx
index 0ddd3c02482..ff809f2174e 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 size={2} />
+            <Spacer paddingSize={30} />
             <Panel bsStyle='primary' className='text-center'>
-              <Spacer />
+              <Spacer paddingSize={15} />
               <h2>{t('misc.unsubscribed')}</h2>
               <p>{t('misc.keep-coding')}</p>
             </Panel>
@@ -42,7 +42,7 @@ function ShowUnsubscribed({
               </Button>
             </FullWidthRow>
           ) : null}
-          <Spacer size={2} />
+          <Spacer paddingSize={30} />
         </main>
       </Grid>
     </>
diff --git a/client/src/client-only-routes/show-user.tsx b/client/src/client-only-routes/show-user.tsx
index 7379587ecab..c02611d92f2 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 size={2} />
+          <Spacer paddingSize={30} />
           <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 size={2} />
+              <Spacer paddingSize={30} />
               <Col md={6} mdOffset={3} sm={8} smOffset={2} xs={12}>
                 <Login block={true}>{t('buttons.click-here')}</Login>
               </Col>
-              <Spacer size={3} />
+              <Spacer paddingSize={45} />
             </Panel.Body>
           </Panel>
         </FullWidthRow>
@@ -108,7 +108,7 @@ function ShowUser({
       <Helmet>
         <title>{t('report.portfolio')} | freeCodeCamp.org</title>
       </Helmet>
-      <Spacer size={2} />
+      <Spacer paddingSize={30} />
       <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 />
+            <Spacer paddingSize={15} />
           </form>
         </Col>
       </Row>
diff --git a/client/src/components/Donation/donate-form.tsx b/client/src/components/Donation/donate-form.tsx
index 164cf6f6fc7..4c80ed60dda 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 />
+        <Spacer paddingSize={15} />
         <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 aad2237c521..73e2bc3ce9f 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 />
+        <Spacer paddingSize={15} />
         <Row>
           <Col xs={12}>
             <DonateForm
@@ -144,7 +144,7 @@ function DonateModal({
             />
           </Col>
         </Row>
-        <Spacer />
+        <Spacer paddingSize={15} />
         <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 7f392cf48cb..e98cbe083c5 100644
--- a/client/src/components/FourOhFour/index.tsx
+++ b/client/src/components/FourOhFour/index.tsx
@@ -16,12 +16,12 @@ 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 />
+      <Spacer paddingSize={15} />
       <h1>{t('404.page-not-found')}.</h1>
-      <Spacer />
+      <Spacer paddingSize={15} />
       <div>
         <p>{t('404.heres-a-quote')}</p>
-        <Spacer />
+        <Spacer paddingSize={15} />
         <blockquote className='quote-wrapper'>
           <p className='quote'>
             <span>&#8220;</span>
@@ -30,7 +30,7 @@ const FourOhFour = (): JSX.Element => {
           <p className='author'>- {quote.author}</p>
         </blockquote>
       </div>
-      <Spacer size={2} />
+      <Spacer paddingSize={30} />
       <Link className='btn btn-cta' to='/learn'>
         {t('buttons.view-curriculum')}
       </Link>
diff --git a/client/src/components/Intro/components/IntroDescription.tsx b/client/src/components/Intro/components/IntroDescription.tsx
index c1d13d8c9c1..c3e772caf22 100644
--- a/client/src/components/Intro/components/IntroDescription.tsx
+++ b/client/src/components/Intro/components/IntroDescription.tsx
@@ -12,7 +12,7 @@ function IntroDescription(): JSX.Element {
   return (
     <div className='intro-description'>
       <strong>{t('learn.read-this.heading')}</strong>
-      <Spacer />
+      <Spacer paddingSize={15} />
       <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 5d33fee2f27..5f33b95814d 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 />
+        <Spacer paddingSize={15} />
         <Loader />
-        <Spacer />
+        <Spacer paddingSize={15} />
       </>
     );
   } else if (isSignedIn) {
     const { quote, author } = randomQuote();
     return (
       <>
-        <Spacer />
+        <Spacer paddingSize={15} />
         <h1 className='text-center'>
           {name
             ? `${t('learn.welcome-1', { name: name })}`
             : `${t('learn.welcome-2')}`}
         </h1>
-        <Spacer />
+        <Spacer paddingSize={15} />
         <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 />
+            <Spacer paddingSize={15} />
             <p>
               <Trans i18nKey='learn.start-at-beginning'>
                 <Link to={slug} />
@@ -81,13 +81,13 @@ const Intro = ({
   } else {
     return (
       <>
-        <Spacer />
+        <Spacer paddingSize={15} />
         <h1>{t('learn.heading')}</h1>
-        <Spacer />
+        <Spacer paddingSize={15} />
         <IntroDescription />
-        <Spacer />
+        <Spacer paddingSize={15} />
         <Login block={true}>{t('buttons.logged-out-cta-btn')}</Login>
-        <Spacer />
+        <Spacer paddingSize={15} />
       </>
     );
   }
diff --git a/client/src/components/Map/index.tsx b/client/src/components/Map/index.tsx
index a3e0fb8795a..566740a4e91 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 />
+            <Spacer paddingSize={15} />
           </div>
         </>
       )}
diff --git a/client/src/components/helpers/button-spacer.tsx b/client/src/components/helpers/button-spacer.tsx
deleted file mode 100644
index 9813d0b8236..00000000000
--- a/client/src/components/helpers/button-spacer.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-
-function ButtonSpacer(): JSX.Element {
-  return <div className='button-spacer' style={{ padding: '5px 0' }} />;
-}
-
-ButtonSpacer.displayName = 'ButtonSpacer';
-
-export default ButtonSpacer;
diff --git a/client/src/components/helpers/index.ts b/client/src/components/helpers/index.ts
index a72b2717581..75bc9881bdb 100644
--- a/client/src/components/helpers/index.ts
+++ b/client/src/components/helpers/index.ts
@@ -1,4 +1,3 @@
-export { default as ButtonSpacer } from './button-spacer';
 export { default as FullWidthRow } from './full-width-row';
 export { default as SlimWidthRow } from './slim-width-row';
 export { default as Loader } from './loader';
diff --git a/client/src/components/helpers/spacer.tsx b/client/src/components/helpers/spacer.tsx
index d63c689fa53..ac29b3e9185 100644
--- a/client/src/components/helpers/spacer.tsx
+++ b/client/src/components/helpers/spacer.tsx
@@ -1,22 +1,14 @@
 import React from 'react';
 
 interface SpacerProps {
-  size?: number;
+  paddingSize: number;
 }
 
-const styles = { padding: '15px 0', height: '1px' };
-
-const Comp = ({ ...props }): JSX.Element => <div style={styles} {...props} />;
-
-const Spacer = ({ size = 1 }: SpacerProps): JSX.Element =>
-  size === 1 ? (
-    <Comp />
-  ) : (
-    <>
-      {Array.from(Array(size), (_, i) => (
-        <Comp key={`spacer_${i}`} />
-      ))}
-    </>
-  );
+const Spacer = ({ paddingSize }: SpacerProps): JSX.Element => (
+  <div
+    className='spacer'
+    style={{ padding: `${paddingSize}px 0`, height: '1px' }}
+  />
+);
 
 export default Spacer;
diff --git a/client/src/components/landing/components/certifications.tsx b/client/src/components/landing/components/certifications.tsx
index 141ffd36060..65288f5c627 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 />
+        <Spacer paddingSize={15} />
         <BigCallToAction pageName={pageName} />
-        <Spacer />
+        <Spacer paddingSize={15} />
       </Col>
     </Row>
   );
diff --git a/client/src/components/landing/components/landing-top.tsx b/client/src/components/landing/components/landing-top.tsx
index 32126eaf09e..f847e1b7eb2 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 />
+        <Spacer paddingSize={15} />
         <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 />
+          <Spacer paddingSize={15} />
           <BigCallToAction pageName={pageName} />
           <CampersImage pageName={pageName} />
-          <Spacer />
+          <Spacer paddingSize={15} />
         </Col>
       </Row>
     </div>
diff --git a/client/src/components/profile/__snapshots__/profile.test.tsx.snap b/client/src/components/profile/__snapshots__/profile.test.tsx.snap
index 72486eec310..33e47cfaedf 100644
--- a/client/src/components/profile/__snapshots__/profile.test.tsx.snap
+++ b/client/src/components/profile/__snapshots__/profile.test.tsx.snap
@@ -3,12 +3,14 @@
 exports[`<Profile/> renders correctly 1`] = `
 <div>
   <div
+    class="spacer"
     style="padding: 15px 0px; height: 1px;"
   />
   <div
     class="container"
   >
     <div
+      class="spacer"
       style="padding: 15px 0px; height: 1px;"
     />
     <div>
@@ -273,6 +275,7 @@ exports[`<Profile/> renders correctly 1`] = `
       <br />
     </div>
     <div
+      class="spacer"
       style="padding: 15px 0px; height: 1px;"
     />
     <div
@@ -285,6 +288,7 @@ exports[`<Profile/> renders correctly 1`] = `
       </a>
     </div>
     <div
+      class="spacer"
       style="padding: 15px 0px; height: 1px;"
     />
   </div>
diff --git a/client/src/components/profile/components/certifications.tsx b/client/src/components/profile/components/certifications.tsx
index 2f92efa0404..2a2588a8029 100644
--- a/client/src/components/profile/components/certifications.tsx
+++ b/client/src/components/profile/components/certifications.tsx
@@ -6,7 +6,7 @@ import { createSelector } from 'reselect';
 
 import { certificatesByNameSelector } from '../../../redux/selectors';
 import type { CurrentCert } from '../../../redux/prop-types';
-import { ButtonSpacer, FullWidthRow, Link, Spacer } from '../../helpers';
+import { FullWidthRow, Link, Spacer } from '../../helpers';
 import './certifications.css';
 
 const mapStateToProps = (
@@ -61,7 +61,7 @@ function CertButton({ username, cert }: CertButtonProps): JSX.Element {
           </Link>
         </Col>
       </Row>
-      <ButtonSpacer />
+      <Spacer paddingSize={5} />
     </>
   );
 }
@@ -102,7 +102,7 @@ function Certificates({
                   username={username}
                 />
               ))}
-          <Spacer size={2} />
+          <Spacer paddingSize={30} />
         </div>
       ) : null}
       <hr />
diff --git a/client/src/components/profile/components/heat-map.tsx b/client/src/components/profile/components/heat-map.tsx
index c088684e955..9f86f6346c7 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 />
+        <Spacer paddingSize={15} />
 
         <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 />
+        <Spacer paddingSize={15} />
         <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 f03da622751..bf4352078ed 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 />
+      <Spacer paddingSize={15} />
     </>
   ) : (
     <>
@@ -43,7 +43,7 @@ function renderMessage(
           {t('profile.username-change-privacy', { username: username })}
         </p>
       </FullWidthRow>
-      <Spacer />
+      <Spacer paddingSize={15} />
     </>
   );
 }
@@ -103,7 +103,7 @@ function renderProfile(user: ProfileProps['user']): JSX.Element {
       {showTimeLine ? (
         <Timeline completedMap={completedChallenges} username={username} />
       ) : null}
-      <Spacer />
+      <Spacer paddingSize={15} />
     </>
   );
 }
@@ -120,9 +120,9 @@ function Profile({ user, isSessionUser }: ProfileProps): JSX.Element {
       <Helmet>
         <title>{t('buttons.profile')} | freeCodeCamp.org</title>
       </Helmet>
-      <Spacer />
+      <Spacer paddingSize={15} />
       <Grid>
-        <Spacer />
+        <Spacer paddingSize={15} />
         {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 />
+        <Spacer paddingSize={15} />
       </Grid>
     </>
   );
diff --git a/client/src/components/settings/__snapshots__/settings-button.test.js.snap b/client/src/components/settings/__snapshots__/settings-button.test.js.snap
index 078295f084b..219bb0227aa 100644
--- a/client/src/components/settings/__snapshots__/settings-button.test.js.snap
+++ b/client/src/components/settings/__snapshots__/settings-button.test.js.snap
@@ -9,6 +9,7 @@ Array [
       className="col-sm-8 col-sm-offset-2 col-xs-12"
     >
       <div
+        className="spacer"
         style={
           Object {
             "height": "1px",
@@ -148,6 +149,7 @@ Array [
       className="col-sm-8 col-sm-offset-2 col-xs-12"
     >
       <div
+        className="spacer"
         style={
           Object {
             "height": "1px",
@@ -287,6 +289,7 @@ Array [
       className="col-sm-8 col-sm-offset-2 col-xs-12"
     >
       <div
+        className="spacer"
         style={
           Object {
             "height": "1px",
@@ -426,6 +429,7 @@ Array [
       className="col-sm-8 col-sm-offset-2 col-xs-12"
     >
       <div
+        className="spacer"
         style={
           Object {
             "height": "1px",
@@ -565,6 +569,7 @@ Array [
       className="col-sm-8 col-sm-offset-2 col-xs-12"
     >
       <div
+        className="spacer"
         style={
           Object {
             "height": "1px",
@@ -704,6 +709,7 @@ Array [
       className="col-sm-8 col-sm-offset-2 col-xs-12"
     >
       <div
+        className="spacer"
         style={
           Object {
             "height": "1px",
@@ -843,6 +849,7 @@ Array [
       className="col-sm-8 col-sm-offset-2 col-xs-12"
     >
       <div
+        className="spacer"
         style={
           Object {
             "height": "1px",
@@ -982,6 +989,7 @@ Array [
       className="col-sm-8 col-sm-offset-2 col-xs-12"
     >
       <div
+        className="spacer"
         style={
           Object {
             "height": "1px",
@@ -1121,6 +1129,7 @@ Array [
       className="col-sm-8 col-sm-offset-2 col-xs-12"
     >
       <div
+        className="spacer"
         style={
           Object {
             "height": "1px",
@@ -1260,6 +1269,7 @@ Array [
       className="col-sm-8 col-sm-offset-2 col-xs-12"
     >
       <div
+        className="spacer"
         style={
           Object {
             "height": "1px",
@@ -1399,6 +1409,7 @@ Array [
       className="col-sm-8 col-sm-offset-2 col-xs-12"
     >
       <div
+        className="spacer"
         style={
           Object {
             "height": "1px",
@@ -1543,6 +1554,7 @@ Array [
       className="col-sm-8 col-sm-offset-2 col-xs-12"
     >
       <div
+        className="spacer"
         style={
           Object {
             "height": "1px",
@@ -1762,6 +1774,7 @@ Array [
       className="col-sm-8 col-sm-offset-2 col-xs-12"
     >
       <div
+        className="spacer"
         style={
           Object {
             "height": "1px",
@@ -1981,6 +1994,7 @@ Array [
       className="col-sm-8 col-sm-offset-2 col-xs-12"
     >
       <div
+        className="spacer"
         style={
           Object {
             "height": "1px",
@@ -2200,6 +2214,7 @@ Array [
       className="col-sm-8 col-sm-offset-2 col-xs-12"
     >
       <div
+        className="spacer"
         style={
           Object {
             "height": "1px",
diff --git a/client/src/components/settings/about.tsx b/client/src/components/settings/about.tsx
index 6653fcbb57c..8b147491621 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 />
+        <Spacer paddingSize={15} />
         <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 />
+        <Spacer paddingSize={15} />
         <FullWidthRow>
           <ThemeSettings
             currentTheme={currentTheme}
diff --git a/client/src/components/settings/certification.js b/client/src/components/settings/certification.js
index 573bf7c485b..123dd4931af 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 />
+        <Spacer paddingSize={15} />
         <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 />
+        <Spacer paddingSize={15} />
         <h3 className='text-center'>
           {t('certification.title.Legacy Full Stack Certification')}
         </h3>
@@ -403,7 +403,7 @@ export class CertificationSettings extends Component {
             </Button>
           )}
         </div>
-        <Spacer />
+        <Spacer paddingSize={15} />
       </FullWidthRow>
     );
   };
diff --git a/client/src/components/settings/danger-zone.tsx b/client/src/components/settings/danger-zone.tsx
index c795c269e9c..5e8a86bb12f 100644
--- a/client/src/components/settings/danger-zone.tsx
+++ b/client/src/components/settings/danger-zone.tsx
@@ -6,7 +6,7 @@ import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 
 import { deleteAccount, resetProgress } from '../../redux/settings/actions';
-import { FullWidthRow, ButtonSpacer, Spacer } from '../helpers';
+import { FullWidthRow, Spacer } from '../helpers';
 import DeleteModal from './delete-modal';
 import ResetModal from './reset-modal';
 
@@ -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 />
+        <Spacer paddingSize={15} />
         <p>{t('settings.danger.be-careful')}</p>
         <FullWidthRow>
           <Button
@@ -58,7 +58,7 @@ function DangerZone({ deleteAccount, resetProgress, t }: DangerZoneProps) {
           >
             {t('settings.danger.reset')}
           </Button>
-          <ButtonSpacer />
+          <Spacer paddingSize={5} />
           <Button
             block={true}
             bsSize='lg'
@@ -69,7 +69,7 @@ function DangerZone({ deleteAccount, resetProgress, t }: DangerZoneProps) {
           >
             {t('settings.danger.delete')}
           </Button>
-          <Spacer />
+          <Spacer paddingSize={15} />
         </FullWidthRow>
       </Panel>
 
diff --git a/client/src/components/settings/delete-modal.tsx b/client/src/components/settings/delete-modal.tsx
index 74a6a8b4229..07128525c2c 100644
--- a/client/src/components/settings/delete-modal.tsx
+++ b/client/src/components/settings/delete-modal.tsx
@@ -2,7 +2,7 @@ import { Button, Modal } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
-import { ButtonSpacer } from '../helpers';
+import { Spacer } from '../helpers';
 
 import './danger-zone.css';
 
@@ -52,7 +52,7 @@ function DeleteModal(props: DeleteModalProps): JSX.Element {
         >
           {t('settings.danger.nevermind')}
         </Button>
-        <ButtonSpacer />
+        <Spacer paddingSize={5} />
         <Button
           block={true}
           bsSize='lg'
diff --git a/client/src/components/settings/email.tsx b/client/src/components/settings/email.tsx
index abed31e0c73..fc4101f6a07 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 />
+      <Spacer paddingSize={15} />
       <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 f339c0237fc..15d8353ea35 100644
--- a/client/src/components/settings/portfolio.tsx
+++ b/client/src/components/settings/portfolio.tsx
@@ -13,7 +13,7 @@ import isURL from 'validator/lib/isURL';
 
 import { hasProtocolRE } from '../../utils';
 
-import { FullWidthRow, ButtonSpacer, Spacer } from '../helpers';
+import { FullWidthRow, Spacer } from '../helpers';
 import BlockSaveButton from '../helpers/form/block-save-button';
 import SectionHeader from './section-header';
 
@@ -295,7 +295,7 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
           >
             {t('buttons.save-portfolio')}
           </BlockSaveButton>
-          <ButtonSpacer />
+          <Spacer paddingSize={5} />
           <Button
             block={true}
             bsSize='lg'
@@ -308,9 +308,9 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
         </form>
         {index + 1 !== arr.length && (
           <>
-            <Spacer />
+            <Spacer paddingSize={15} />
             <hr />
-            <Spacer />
+            <Spacer paddingSize={15} />
           </>
         )}
       </FullWidthRow>
@@ -329,7 +329,7 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
           </div>
         </FullWidthRow>
         <FullWidthRow>
-          <ButtonSpacer />
+          <Spacer paddingSize={5} />
           <Button
             block={true}
             bsSize='lg'
@@ -341,7 +341,7 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
             {t('buttons.add-portfolio')}
           </Button>
         </FullWidthRow>
-        <Spacer size={2} />
+        <Spacer paddingSize={30} />
         {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 ccb6ea49b27..8f2d89fb18a 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 />
+        <Spacer paddingSize={15} />
         <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 a6ff74eaf75..494d04d5290 100644
--- a/client/src/components/settings/reset-modal.tsx
+++ b/client/src/components/settings/reset-modal.tsx
@@ -2,7 +2,7 @@ import { Button, Modal } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { ButtonSpacer } from '../helpers';
+import { Spacer } from '../helpers';
 
 type ResetModalProps = {
   onHide: () => void;
@@ -43,7 +43,7 @@ function ResetModal(props: ResetModalProps): JSX.Element {
         >
           {t('settings.danger.nevermind-2')}
         </Button>
-        <ButtonSpacer />
+        <Spacer paddingSize={5} />
         <Button
           block={true}
           bsSize='lg'
diff --git a/client/src/components/settings/sound.tsx b/client/src/components/settings/sound.tsx
index d063e4876fc..10bc7cf8df2 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></Spacer>
+      <Spacer paddingSize={15}></Spacer>
     </Form>
   );
 }
diff --git a/client/src/components/settings/toggle-setting.tsx b/client/src/components/settings/toggle-setting.tsx
index 64a6e699035..951ce5f119f 100644
--- a/client/src/components/settings/toggle-setting.tsx
+++ b/client/src/components/settings/toggle-setting.tsx
@@ -5,7 +5,7 @@ import {
 } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 
-import { ButtonSpacer } from '../helpers';
+import { Spacer } from '../helpers';
 import TB from '../helpers/toggle-button';
 
 import './toggle-setting.css';
@@ -48,7 +48,7 @@ export default function ToggleSetting({
           />
         </FormGroup>
       </div>
-      <ButtonSpacer />
+      <Spacer paddingSize={5} />
     </>
   );
 }
diff --git a/client/src/components/settings/user-token.tsx b/client/src/components/settings/user-token.tsx
index 747f22aa2c2..f6e768b0b90 100644
--- a/client/src/components/settings/user-token.tsx
+++ b/client/src/components/settings/user-token.tsx
@@ -5,7 +5,7 @@ import { TFunction, withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 
 import { deleteUserToken } from '../../redux/actions';
-import { ButtonSpacer, FullWidthRow, Spacer } from '../helpers';
+import { FullWidthRow, Spacer } from '../helpers';
 
 import './user-token.css';
 
@@ -33,10 +33,10 @@ class UserToken extends Component<UserTokenProps> {
         <FullWidthRow>
           <Panel className='user-panel'>
             <Panel.Heading>{t('user-token.title')}</Panel.Heading>
-            <Spacer />
+            <Spacer paddingSize={15} />
             <p>{t('user-token.delete-p1')}</p>
             <FullWidthRow>
-              <ButtonSpacer />
+              <Spacer paddingSize={5} />
               <Button
                 block={true}
                 bsSize='lg'
@@ -48,7 +48,7 @@ class UserToken extends Component<UserTokenProps> {
               >
                 {t('user-token.delete')}
               </Button>
-              <Spacer />
+              <Spacer paddingSize={15} />
             </FullWidthRow>
           </Panel>
         </FullWidthRow>
diff --git a/client/src/components/signout-modal/index.tsx b/client/src/components/signout-modal/index.tsx
index ec07cf3be54..b9c95f03c65 100644
--- a/client/src/components/signout-modal/index.tsx
+++ b/client/src/components/signout-modal/index.tsx
@@ -5,7 +5,7 @@ import { createSelector } from 'reselect';
 import { connect } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 
-import { ButtonSpacer } from '../helpers';
+import { Spacer } from '../helpers';
 import { hardGoTo as navigate, closeSignoutModal } from '../../redux/actions';
 import { isSignoutModalOpenSelector } from '../../redux/selectors';
 import { apiLocation } from '../../../../config/env.json';
@@ -79,7 +79,7 @@ function SignoutModal(props: SignoutModalProps): JSX.Element {
         >
           {t('signout.nevermind')}
         </Button>
-        <ButtonSpacer />
+        <Spacer paddingSize={5} />
         <Button
           block={true}
           bsStyle='danger'
diff --git a/client/src/pages/__snapshots__/email-sign-up.test.js.snap b/client/src/pages/__snapshots__/email-sign-up.test.js.snap
index c6fc3a404dc..667e4e73be0 100644
--- a/client/src/pages/__snapshots__/email-sign-up.test.js.snap
+++ b/client/src/pages/__snapshots__/email-sign-up.test.js.snap
@@ -13,6 +13,7 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
       className="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12"
     >
       <div
+        className="spacer"
         style={
           Object {
             "height": "1px",
@@ -27,6 +28,7 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
           learn.read-this.heading
         </strong>
         <div
+          className="spacer"
           style={
             Object {
               "height": "1px",
@@ -95,6 +97,7 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
         misc.quincy
       </strong>
       <div
+        className="spacer"
         style={
           Object {
             "height": "1px",
@@ -106,6 +109,7 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
         misc.email-blast
       </p>
       <div
+        className="spacer"
         style={
           Object {
             "height": "1px",
@@ -118,9 +122,10 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
       className="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12"
     >
       <div
-        className="button-spacer"
+        className="spacer"
         style={
           Object {
+            "height": "1px",
             "padding": "5px 0",
           }
         }
@@ -134,9 +139,10 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
         buttons.sign-up-email-list
       </a>
       <div
-        className="button-spacer"
+        className="spacer"
         style={
           Object {
+            "height": "1px",
             "padding": "5px 0",
           }
         }
@@ -146,6 +152,7 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
       className="col-xs-12"
     >
       <div
+        className="spacer"
         style={
           Object {
             "height": "1px",
diff --git a/client/src/pages/blocked.tsx b/client/src/pages/blocked.tsx
index 7ff82f70b99..f4fd37ccaf7 100644
--- a/client/src/pages/blocked.tsx
+++ b/client/src/pages/blocked.tsx
@@ -10,11 +10,11 @@ function BlockedPage(): JSX.Element {
     <>
       <Helmet title={`Access Denied | freeCodeCamp.org`} />
       <Grid className='text-center'>
-        <Spacer size={2} />
+        <Spacer paddingSize={30} />
         <Row>
           <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
             <h1>We can&apos;t log you in.</h1>
-            <Spacer size={2} />
+            <Spacer paddingSize={30} />
             <Col lg={10} lgOffset={1} sm={10} smOffset={1} xs={12}>
               <div className='text-left blocked-body'>
                 <p>
@@ -33,7 +33,7 @@ function BlockedPage(): JSX.Element {
             </Col>
           </Col>
         </Row>
-        <Spacer size={2} />
+        <Spacer paddingSize={30} />
       </Grid>
     </>
   );
diff --git a/client/src/pages/donate.tsx b/client/src/pages/donate.tsx
index af9dbfba14d..e5b04d7c7c5 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 />
+        <Spacer paddingSize={15} />
         <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 />
+                  <Spacer paddingSize={15} />
                 </Col>
               </Row>
               {isDonating ? (
@@ -94,12 +94,12 @@ function DonatePage({
                   <DonateForm paymentContext={PaymentContext.DonatePage} />
                 </Col>
               </Row>
-              <Spacer size={3} />
+              <Spacer paddingSize={45} />
               <Row className='donate-support' id='FAQ'>
                 <Col className={'text-center'} xs={12}>
                   <hr />
                   <h2>{t('donate.faq')}</h2>
-                  <Spacer />
+                  <Spacer paddingSize={15} />
                 </Col>
                 <Col xs={12}>
                   <DonationFaqText />
@@ -111,7 +111,7 @@ function DonatePage({
             </Col>
           </>
         </Row>
-        <Spacer />
+        <Spacer paddingSize={15} />
       </Grid>
     </>
   );
diff --git a/client/src/pages/email-sign-up.tsx b/client/src/pages/email-sign-up.tsx
index 054591daca8..cb90daa8fb7 100644
--- a/client/src/pages/email-sign-up.tsx
+++ b/client/src/pages/email-sign-up.tsx
@@ -8,7 +8,7 @@ import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
 import IntroDescription from '../components/Intro/components/IntroDescription';
 import createRedirect from '../components/create-redirect';
-import { ButtonSpacer, Spacer, Loader } from '../components/helpers';
+import { Spacer, Loader } from '../components/helpers';
 import { apiLocation } from '../../../config/env.json';
 
 import { acceptTerms } from '../redux/actions';
@@ -94,7 +94,7 @@ function AcceptPrivacyTerms({
             >
               {t('buttons.yes-please')}
             </Button>
-            <ButtonSpacer />
+            <Spacer paddingSize={5} />
           </Col>
           <Col md={4} sm={5} xs={12}>
             <Button
@@ -106,14 +106,14 @@ function AcceptPrivacyTerms({
             >
               {t('buttons.no-thanks')}
             </Button>
-            <ButtonSpacer />
+            <Spacer paddingSize={5} />
           </Col>
         </Row>
       );
     } else {
       return (
         <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-          <ButtonSpacer />
+          <Spacer paddingSize={5} />
           <Button
             block={true}
             bsSize='lg'
@@ -123,7 +123,7 @@ function AcceptPrivacyTerms({
           >
             {t('buttons.sign-up-email-list')}
           </Button>
-          <ButtonSpacer />
+          <Spacer paddingSize={5} />
         </Col>
       );
     }
@@ -139,7 +139,7 @@ function AcceptPrivacyTerms({
       <Grid>
         <Row>
           <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-            <Spacer />
+            <Spacer paddingSize={15} />
             <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 />
+            <Spacer paddingSize={15} />
             <p>{t('misc.email-blast')}</p>
-            <Spacer />
+            <Spacer paddingSize={15} />
           </Col>
           {renderEmailListOptin(isSignedIn, showLoading)}
           <Col xs={12}>
-            <Spacer />
+            <Spacer paddingSize={15} />
           </Col>
         </Row>
       </Grid>
diff --git a/client/src/pages/learn.tsx b/client/src/pages/learn.tsx
index 476858cc865..172933a5ca3 100644
--- a/client/src/pages/learn.tsx
+++ b/client/src/pages/learn.tsx
@@ -106,7 +106,7 @@ function LearnPage({
               isDonating={isDonating}
             />
             <Map />
-            <Spacer size={2} />
+            <Spacer paddingSize={30} />
           </Col>
         </Row>
       </Grid>
diff --git a/client/src/pages/update-email.tsx b/client/src/pages/update-email.tsx
index 0b9af5fb5ba..6159dcb904e 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 />
+      <Spacer paddingSize={15} />
       <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 ffc594f310e..6d9c95e4c91 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 />
+                <Spacer paddingSize={15} />
                 <ChallengeTitle
                   isCompleted={isChallengeCompleted}
                   translationPending={translationPending}
                 >
                   {title}
                 </ChallengeTitle>
-                <Spacer />
+                <Spacer paddingSize={15} />
                 <PrismFormatted text={description} />
-                <Spacer />
+                <Spacer paddingSize={15} />
                 <div className='ca-description'>
                   <Trans i18nKey='learn.github-required'>
                     <a
@@ -275,7 +275,7 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                     </a>
                   </Trans>
                 </div>
-                <Spacer />
+                <Spacer paddingSize={15} />
                 {isSignedIn &&
                   challengeType === challengeTypes.codeAllyCert && (
                     <>
@@ -283,7 +283,7 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                         {t('learn.complete-both-steps')}
                       </div>
                       <hr />
-                      <Spacer />
+                      <Spacer paddingSize={15} />
                       <b>{t('learn.step-1')}</b>
                       {(isPartiallyCompleted || isCompleted) && (
                         <GreenPass
@@ -294,13 +294,13 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                           }}
                         />
                       )}
-                      <Spacer />
+                      <Spacer paddingSize={15} />
                       <div className='ca-description'>
                         {t('learn.runs-in-vm')}
                       </div>
-                      <Spacer />
+                      <Spacer paddingSize={15} />
                       <PrismFormatted text={instructions} />
-                      <Spacer />
+                      <Spacer paddingSize={15} />
                     </>
                   )}
                 <Alert id='codeally-cookie-warning' bsStyle='info'>
@@ -321,7 +321,7 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                   challengeType === challengeTypes.codeAllyCert && (
                     <>
                       <hr />
-                      <Spacer />
+                      <Spacer paddingSize={15} />
                       <b>{t('learn.step-2')}</b>
                       {isCompleted && (
                         <GreenPass
@@ -332,13 +332,13 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                           }}
                         />
                       )}
-                      <Spacer />
+                      <Spacer paddingSize={15} />
                       <div className='ca-description'>
                         {t('learn.submit-public-url')}
                       </div>
-                      <Spacer />
+                      <Spacer paddingSize={15} />
                       <PrismFormatted text={notes} />
-                      <Spacer />
+                      <Spacer paddingSize={15} />
                       <SolutionForm
                         challengeType={challengeType}
                         description={description}
@@ -349,7 +349,7 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                   )}
                 <ProjectToolPanel />
                 <br />
-                <Spacer />
+                <Spacer paddingSize={15} />
               </Col>
               <CompletionModal
                 block={block}
diff --git a/client/src/templates/Challenges/odin/Show.tsx b/client/src/templates/Challenges/odin/Show.tsx
index 10e2558c9b1..729781827c1 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 />
+                  <Spacer paddingSize={15} />
                   <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 />
+                <Spacer paddingSize={15} />
                 <h2>{title}</h2>
                 <PrismFormatted className={'line-numbers'} text={description} />
-                <Spacer />
+                <Spacer paddingSize={15} />
                 <ObserveKeys>
                   {assignments.length > 0 && (
                     <>
@@ -291,11 +291,11 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                               className={'video-quiz-option'}
                               text={assignment}
                             />
-                            <Spacer />
+                            <Spacer paddingSize={15} />
                           </label>
                         ))}
                       </div>{' '}
-                      <Spacer />
+                      <Spacer paddingSize={15} />
                     </>
                   )}
 
@@ -326,7 +326,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                     ))}
                   </div>
                 </ObserveKeys>
-                <Spacer />
+                <Spacer paddingSize={15} />
                 <div
                   style={{
                     textAlign: 'center'
@@ -343,7 +343,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                       </>
                     )}
                 </div>
-                <Spacer />
+                <Spacer paddingSize={15} />
                 <Button
                   block={true}
                   bsSize='large'
@@ -358,7 +358,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                 >
                   {t('buttons.check-answer')}
                 </Button>
-                <Spacer size={2} />
+                <Spacer paddingSize={30} />
               </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 6c43d380064..d9c22fdeba4 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 />
+                <Spacer paddingSize={15} />
                 <ChallengeTitle
                   isCompleted={isChallengeCompleted}
                   translationPending={translationPending}
@@ -263,7 +263,7 @@ class BackEnd extends Component<BackEndProps> {
                   output={output}
                 />
                 <TestSuite tests={tests} />
-                <Spacer />
+                <Spacer paddingSize={15} />
               </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 cd8d71da0d2..4fc019294b9 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 />
+                <Spacer paddingSize={15} />
                 <ChallengeTitle
                   isCompleted={isChallengeCompleted}
                   translationPending={translationPending}
@@ -194,7 +194,7 @@ class Project extends Component<ProjectProps> {
                   guideUrl={getGuideUrl({ forumTopicId, title })}
                 />
                 <br />
-                <Spacer />
+                <Spacer paddingSize={15} />
               </Col>
               <CompletionModal
                 block={block}
diff --git a/client/src/templates/Challenges/video/Show.tsx b/client/src/templates/Challenges/video/Show.tsx
index db5cc4bbffb..e6ed0c39c12 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 />
+              <Spacer paddingSize={15} />
               <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 />
+                <Spacer paddingSize={15} />
                 <ObserveKeys>
                   <div className='video-quiz-options'>
                     {answers.map((option, index) => (
@@ -273,7 +273,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
                     ))}
                   </div>
                 </ObserveKeys>
-                <Spacer />
+                <Spacer paddingSize={15} />
                 <div
                   style={{
                     textAlign: 'center'
@@ -285,7 +285,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
                     <span>{t('learn.check-answer')}</span>
                   )}
                 </div>
-                <Spacer />
+                <Spacer paddingSize={15} />
                 <Button
                   block={true}
                   bsSize='large'
@@ -296,7 +296,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
                 >
                   {t('buttons.check-answer')}
                 </Button>
-                <Spacer size={2} />
+                <Spacer paddingSize={30} />
               </Col>
               <CompletionModal
                 block={block}
diff --git a/client/src/templates/Introduction/components/block.tsx b/client/src/templates/Introduction/components/block.tsx
index d97caacc8f8..b56681f68f0 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 />
+          <Spacer paddingSize={15} />
         )}
       </>
     );
diff --git a/client/src/templates/Introduction/components/super-block-intro.tsx b/client/src/templates/Introduction/components/super-block-intro.tsx
index 63e983530d3..28577b5cf10 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 />
+      <Spacer paddingSize={15} />
       {generateIconComponent(superBlock, 'cert-header-icon')}
-      <Spacer />
+      <Spacer paddingSize={15} />
       {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 aadb8d88541..bd4842ebf58 100644
--- a/client/src/templates/Introduction/intro.tsx
+++ b/client/src/templates/Introduction/intro.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 
-import ButtonSpacer from '../../components/helpers/button-spacer';
+import Spacer from '../../components/helpers/spacer';
 import FullWidthRow from '../../components/helpers/full-width-row';
 import LearnLayout from '../../components/layouts/learn';
 import {
@@ -67,11 +67,11 @@ function IntroductionPage({
           >
             {t('buttons.first-lesson')}
           </Link>
-          <ButtonSpacer />
+          <Spacer paddingSize={5} />
           <Link className='btn btn-lg btn-primary btn-block' to='/learn'>
             {t('buttons.view-curriculum')}
           </Link>
-          <ButtonSpacer />
+          <Spacer paddingSize={5} />
           <hr />
         </FullWidthRow>
         <FullWidthRow>
diff --git a/client/src/templates/Introduction/super-block-intro.tsx b/client/src/templates/Introduction/super-block-intro.tsx
index e9ecc075298..bdbf10f72d3 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 size={2} />
+              <Spacer paddingSize={30} />
               <LegacyLinks superBlock={superBlock} />
               <SuperBlockIntro superBlock={superBlock} />
-              <Spacer size={2} />
+              <Spacer paddingSize={30} />
               <h2 className='text-center big-subheading'>
                 {t(`intro:misc-text.courses`)}
               </h2>
-              <Spacer />
+              <Spacer paddingSize={15} />
               <div className='block-ui'>
                 {defaultCurriculumNames.map(blockDashedName => (
                   <Fragment key={blockDashedName}>
@@ -224,20 +224,20 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => {
               </div>
               {!isSignedIn && !signInLoading && (
                 <div>
-                  <Spacer size={2} />
+                  <Spacer paddingSize={30} />
                   <Login block={true}>{t('buttons.logged-out-cta-btn')}</Login>
                 </div>
               )}
-              <Spacer size={2} />
+              <Spacer paddingSize={30} />
               <h3
                 className='text-center big-block-title'
                 style={{ whiteSpace: 'pre-line' }}
               >
                 {t(`intro:misc-text.browse-other`)}
               </h3>
-              <Spacer />
+              <Spacer paddingSize={15} />
               <Map currentSuperBlock={superBlock} />
-              <Spacer size={2} />
+              <Spacer paddingSize={30} />
             </Col>
           </Row>
         </main>