From b4ba70b4ab73a7c7a9b868bc881c8a4e62786817 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <muhammed@freecodecamp.org>
Date: Thu, 12 Oct 2023 15:34:24 +0300
Subject: [PATCH] refactor: replace Row component (#51317)

---
 client/src/client-only-routes/show-certification.tsx        | 4 ++--
 client/src/client-only-routes/show-user.tsx                 | 5 ++---
 client/src/components/Donation/donation-modal.tsx           | 5 +++--
 client/src/components/SolutionViewer/exam-results-modal.tsx | 6 ++++--
 client/src/components/helpers/full-width-row.tsx            | 3 +--
 client/src/components/landing/components/landing-top.tsx    | 3 +--
 client/src/components/layouts/global.css                    | 2 +-
 .../components/profile/__snapshots__/profile.test.tsx.snap  | 6 +++---
 .../components/__snapshots__/timeline-buttons.test.js.snap  | 2 +-
 client/src/components/profile/components/camper.tsx         | 3 +--
 client/src/components/profile/components/certifications.tsx | 3 +--
 client/src/components/profile/components/heat-map.tsx       | 2 +-
 client/src/components/profile/components/social-icons.tsx   | 3 +--
 client/src/components/profile/profile.tsx                   | 3 +--
 client/src/pages/__snapshots__/email-sign-up.test.js.snap   | 4 ++--
 client/src/pages/blocked.tsx                                | 3 +--
 client/src/pages/donate.tsx                                 | 4 +---
 client/src/pages/email-sign-up.tsx                          | 4 ++--
 client/src/pages/learn.tsx                                  | 3 +--
 client/src/pages/update-email.tsx                           | 3 +--
 client/src/templates/Challenges/codeally/show.tsx           | 4 ++--
 client/src/templates/Challenges/exam/show.tsx               | 4 ++--
 client/src/templates/Challenges/odin/show.tsx               | 4 ++--
 client/src/templates/Challenges/projects/backend/show.tsx   | 3 +--
 client/src/templates/Challenges/projects/frontend/show.tsx  | 3 +--
 client/src/templates/Challenges/video/show.tsx              | 4 ++--
 client/src/templates/Introduction/super-block-intro.tsx     | 3 +--
 tools/ui-components/src/index.ts                            | 1 +
 28 files changed, 43 insertions(+), 54 deletions(-)

diff --git a/client/src/client-only-routes/show-certification.tsx b/client/src/client-only-routes/show-certification.tsx
index 318321cb046..a047e6a3f8b 100644
--- a/client/src/client-only-routes/show-certification.tsx
+++ b/client/src/client-only-routes/show-certification.tsx
@@ -1,4 +1,4 @@
-import { Row, Image, Button } from '@freecodecamp/react-bootstrap';
+import { Image, Button } from '@freecodecamp/react-bootstrap';
 import { isEmpty } from 'lodash-es';
 import { QRCodeSVG } from 'qrcode.react';
 import React, { useEffect, useState } from 'react';
@@ -6,7 +6,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col } from '@freecodecamp/ui';
+import { Container, Col, Row } from '@freecodecamp/ui';
 
 import envData from '../../config/env.json';
 import { getLangCode } from '../../../shared/config/i18n';
diff --git a/client/src/client-only-routes/show-user.tsx b/client/src/client-only-routes/show-user.tsx
index c7a8b8cfb87..f783731d258 100644
--- a/client/src/client-only-routes/show-user.tsx
+++ b/client/src/client-only-routes/show-user.tsx
@@ -3,8 +3,7 @@ import {
   FormControl,
   FormGroup,
   ControlLabel,
-  Button,
-  Row
+  Button
 } from '@freecodecamp/react-bootstrap';
 import React, { useState } from 'react';
 import Helmet from 'react-helmet';
@@ -12,7 +11,7 @@ import type { TFunction } from 'i18next';
 import { Trans, withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { Col } from '@freecodecamp/ui';
+import { Col, Row } from '@freecodecamp/ui';
 
 import Login from '../components/Header/components/login';
 
diff --git a/client/src/components/Donation/donation-modal.tsx b/client/src/components/Donation/donation-modal.tsx
index 3dc2e59f0a8..b5d34524647 100644
--- a/client/src/components/Donation/donation-modal.tsx
+++ b/client/src/components/Donation/donation-modal.tsx
@@ -1,10 +1,11 @@
-import { Modal, Button, Row } from '@freecodecamp/react-bootstrap';
+import { Modal, Button } from '@freecodecamp/react-bootstrap';
 import {
   Tabs,
   TabsContent,
   TabsTrigger,
   TabsList,
-  Col
+  Col,
+  Row
 } from '@freecodecamp/ui';
 import { WindowLocation } from '@reach/router';
 import React, { useEffect, useState } from 'react';
diff --git a/client/src/components/SolutionViewer/exam-results-modal.tsx b/client/src/components/SolutionViewer/exam-results-modal.tsx
index 72028f65f20..c229b792e41 100644
--- a/client/src/components/SolutionViewer/exam-results-modal.tsx
+++ b/client/src/components/SolutionViewer/exam-results-modal.tsx
@@ -1,8 +1,10 @@
-import { Button, Modal, Row } from '@freecodecamp/react-bootstrap';
+import { Button, Modal } from '@freecodecamp/react-bootstrap';
 import { connect } from 'react-redux';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { GeneratedExamResults } from '../../redux/prop-types';
+import { Row } from '@freecodecamp/ui';
+
+import type { GeneratedExamResults } from '../../redux/prop-types';
 import { closeModal } from '../../templates/Challenges/redux/actions';
 import { isExamResultsModalOpenSelector } from '../../templates/Challenges/redux/selectors';
 import { formatSecondsToTime } from '../../utils/format-seconds';
diff --git a/client/src/components/helpers/full-width-row.tsx b/client/src/components/helpers/full-width-row.tsx
index 96db7e9c9b6..e6edd0efcf7 100644
--- a/client/src/components/helpers/full-width-row.tsx
+++ b/client/src/components/helpers/full-width-row.tsx
@@ -1,5 +1,4 @@
-import { Row } from '@freecodecamp/react-bootstrap';
-import { Col } from '@freecodecamp/ui';
+import { Col, Row } from '@freecodecamp/ui';
 import React from 'react';
 
 interface FullWidthRowProps {
diff --git a/client/src/components/landing/components/landing-top.tsx b/client/src/components/landing/components/landing-top.tsx
index 212850af1d7..336317f749c 100644
--- a/client/src/components/landing/components/landing-top.tsx
+++ b/client/src/components/landing/components/landing-top.tsx
@@ -1,7 +1,6 @@
-import { Row } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Container, Col } from '@freecodecamp/ui';
+import { Container, Col, Row } from '@freecodecamp/ui';
 
 import { clientLocale } from '../../../../config/env.json';
 import {
diff --git a/client/src/components/layouts/global.css b/client/src/components/layouts/global.css
index 4449b9bff46..adfd2e433b6 100644
--- a/client/src/components/layouts/global.css
+++ b/client/src/components/layouts/global.css
@@ -45,7 +45,7 @@ body {
 }
 
 /*
-  Row from @freecodecamp/react-bootstrap adds some negative margin which causes
+  Row from @freecodecamp/ui adds some negative margin which causes
   a little bit of horizontal overflow on certain pages. This eliminates that
   for those pages.
 */
diff --git a/client/src/components/profile/__snapshots__/profile.test.tsx.snap b/client/src/components/profile/__snapshots__/profile.test.tsx.snap
index d0b4a4f5310..80fe8f95eb2 100644
--- a/client/src/components/profile/__snapshots__/profile.test.tsx.snap
+++ b/client/src/components/profile/__snapshots__/profile.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<Profile/> renders correctly 1`] = `
     />
     <div>
       <div
-        class="row"
+        class="mx-[-15px] "
       >
         <div
           class="avatar-camper min-h-[1px] px-[15px] w-full         "
@@ -166,7 +166,7 @@ exports[`<Profile/> renders correctly 1`] = `
         </div>
       </div>
       <div
-        class="row"
+        class="mx-[-15px] "
       >
         <div
           class="text-center social-media-icons min-h-[1px] px-[15px]  md:w-1/2    md:ml-[25%]    "
@@ -279,7 +279,7 @@ exports[`<Profile/> renders correctly 1`] = `
       style="padding: 15px 0px;"
     />
     <div
-      class="text-center row"
+      class="mx-[-15px] text-center"
     >
       <a
         href="/user/string/report-user"
diff --git a/client/src/components/profile/components/__snapshots__/timeline-buttons.test.js.snap b/client/src/components/profile/components/__snapshots__/timeline-buttons.test.js.snap
index 9460a5ff34d..bca2e5aeb7f 100644
--- a/client/src/components/profile/components/__snapshots__/timeline-buttons.test.js.snap
+++ b/client/src/components/profile/components/__snapshots__/timeline-buttons.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`should check certification page consistency 1`] = `
 <div
-  className="row"
+  className="mx-[-15px] "
 >
   <div
     className=" min-h-[1px] px-[15px] w-full md:w-2/3    md:ml-[16.6%]    "
diff --git a/client/src/components/profile/components/camper.tsx b/client/src/components/profile/components/camper.tsx
index 282409effb6..6aaf4e7ffde 100644
--- a/client/src/components/profile/components/camper.tsx
+++ b/client/src/components/profile/components/camper.tsx
@@ -4,11 +4,10 @@ import {
   faHeart
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Row } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
-import { Col } from '@freecodecamp/ui';
+import { Col, Row } from '@freecodecamp/ui';
 
 import envData from '../../../../config/env.json';
 import { getLangCode } from '../../../../../shared/config/i18n';
diff --git a/client/src/components/profile/components/certifications.tsx b/client/src/components/profile/components/certifications.tsx
index 81f0505565a..635b5871c2f 100644
--- a/client/src/components/profile/components/certifications.tsx
+++ b/client/src/components/profile/components/certifications.tsx
@@ -1,9 +1,8 @@
-import { Row } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { Col } from '@freecodecamp/ui';
+import { Col, Row } from '@freecodecamp/ui';
 
 import { certificatesByNameSelector } from '../../../redux/selectors';
 import type { CurrentCert } from '../../../redux/prop-types';
diff --git a/client/src/components/profile/components/heat-map.tsx b/client/src/components/profile/components/heat-map.tsx
index b22f38e84e0..bf6c799a95b 100644
--- a/client/src/components/profile/components/heat-map.tsx
+++ b/client/src/components/profile/components/heat-map.tsx
@@ -1,4 +1,3 @@
-import { Row } from '@freecodecamp/react-bootstrap';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import CalendarHeatMap from '@freecodecamp/react-calendar-heatmap';
@@ -10,6 +9,7 @@ import React, { Component } from 'react';
 import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import ReactTooltip from 'react-tooltip';
+import { Row } from '@freecodecamp/ui';
 
 import '@freecodecamp/react-calendar-heatmap/dist/styles.css';
 import './heatmap.css';
diff --git a/client/src/components/profile/components/social-icons.tsx b/client/src/components/profile/components/social-icons.tsx
index c30856f6309..e0cd47f8428 100644
--- a/client/src/components/profile/components/social-icons.tsx
+++ b/client/src/components/profile/components/social-icons.tsx
@@ -5,10 +5,9 @@ import {
 } from '@fortawesome/free-brands-svg-icons';
 import { faLink } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Row } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Col } from '@freecodecamp/ui';
+import { Col, Row } from '@freecodecamp/ui';
 
 import './social-icons.css';
 
diff --git a/client/src/components/profile/profile.tsx b/client/src/components/profile/profile.tsx
index 5b5c946c550..dadc2c25619 100644
--- a/client/src/components/profile/profile.tsx
+++ b/client/src/components/profile/profile.tsx
@@ -1,10 +1,9 @@
-import { Row } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import Helmet from 'react-helmet';
 import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
 
-import { Container } from '@freecodecamp/ui';
+import { Container, Row } from '@freecodecamp/ui';
 import { FullWidthRow, Link, Spacer } from '../helpers';
 import { User } from './../../redux/prop-types';
 import Timeline from './components/time-line';
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 256fd6e8fc9..605fd0cefe8 100644
--- a/client/src/pages/__snapshots__/email-sign-up.test.js.snap
+++ b/client/src/pages/__snapshots__/email-sign-up.test.js.snap
@@ -8,7 +8,7 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
 >
   
   <div
-    className="row"
+    className="mx-[-15px] "
   >
     <div
       className=" min-h-[1px] px-[15px] w-full md:w-5/6 min-[992px]:w-2/3   md:ml-[8.3%] min-[992px]:ml-[16.6%]   "
@@ -123,7 +123,7 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
     </div>
   </div>
   <div
-    className="email-sign-up row"
+    className="mx-[-15px] email-sign-up"
     data-cy="email-sign-up"
   >
     <div
diff --git a/client/src/pages/blocked.tsx b/client/src/pages/blocked.tsx
index b5d3f090e69..b4aa88af560 100644
--- a/client/src/pages/blocked.tsx
+++ b/client/src/pages/blocked.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import { Row } from '@freecodecamp/react-bootstrap';
 import Helmet from 'react-helmet';
-import { Container, Col } from '@freecodecamp/ui';
+import { Container, Col, Row } from '@freecodecamp/ui';
 
 import { Spacer } from '../components/helpers';
 
diff --git a/client/src/pages/donate.tsx b/client/src/pages/donate.tsx
index 07a29f8f6d4..3597c9eb7ec 100644
--- a/client/src/pages/donate.tsx
+++ b/client/src/pages/donate.tsx
@@ -1,5 +1,4 @@
-import { Row } from '@freecodecamp/react-bootstrap';
-import { Alert, Container, Col } from '@freecodecamp/ui';
+import { Alert, Container, Col, Row } from '@freecodecamp/ui';
 import type { TFunction } from 'i18next';
 import React, { useEffect } from 'react';
 import Helmet from 'react-helmet';
@@ -15,7 +14,6 @@ import {
   DonationOptionsAlertText,
   DonationFaqText
 } from '../components/Donation/donation-text-components';
-
 import { Spacer, Loader } from '../components/helpers';
 import CampersImage from '../components/landing/components/campers-image';
 import { executeGA } from '../redux/actions';
diff --git a/client/src/pages/email-sign-up.tsx b/client/src/pages/email-sign-up.tsx
index cfb5d9c0ba4..e1fe59d4b4f 100644
--- a/client/src/pages/email-sign-up.tsx
+++ b/client/src/pages/email-sign-up.tsx
@@ -1,4 +1,4 @@
-import { Row, Button } from '@freecodecamp/react-bootstrap';
+import { Button } from '@freecodecamp/react-bootstrap';
 import React, { useEffect, useRef } from 'react';
 import Helmet from 'react-helmet';
 import { useTranslation, Trans } from 'react-i18next';
@@ -6,7 +6,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col } from '@freecodecamp/ui';
+import { Container, Col, Row } from '@freecodecamp/ui';
 
 import IntroDescription from '../components/Intro/components/intro-description';
 import createRedirect from '../components/create-redirect';
diff --git a/client/src/pages/learn.tsx b/client/src/pages/learn.tsx
index ade46ff8d8b..08036176bac 100644
--- a/client/src/pages/learn.tsx
+++ b/client/src/pages/learn.tsx
@@ -1,4 +1,3 @@
-import { Row } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React from 'react';
 import Helmet from 'react-helmet';
@@ -6,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { bindActionCreators, Dispatch } from 'redux';
-import { Container, Col } from '@freecodecamp/ui';
+import { Container, Col, Row } from '@freecodecamp/ui';
 
 import Intro from '../components/Intro';
 import Map from '../components/Map';
diff --git a/client/src/pages/update-email.tsx b/client/src/pages/update-email.tsx
index dd2912e55db..820264fd97a 100644
--- a/client/src/pages/update-email.tsx
+++ b/client/src/pages/update-email.tsx
@@ -2,7 +2,6 @@ import {
   FormGroup,
   FormControl,
   ControlLabel,
-  Row,
   Button
 } from '@freecodecamp/react-bootstrap';
 import { Link } from 'gatsby';
@@ -16,7 +15,7 @@ import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
 import isEmail from 'validator/lib/isEmail';
-import { Container, Col } from '@freecodecamp/ui';
+import { Container, Col, Row } from '@freecodecamp/ui';
 
 import { Spacer } from '../components/helpers';
 import './update-email.css';
diff --git a/client/src/templates/Challenges/codeally/show.tsx b/client/src/templates/Challenges/codeally/show.tsx
index 020e1f5c7f8..131e80030fe 100644
--- a/client/src/templates/Challenges/codeally/show.tsx
+++ b/client/src/templates/Challenges/codeally/show.tsx
@@ -1,5 +1,5 @@
 // Package Utilities
-import { Row, Button } from '@freecodecamp/react-bootstrap';
+import { Button } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React, { Component, RefObject } from 'react';
 import Helmet from 'react-helmet';
@@ -9,7 +9,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Alert } from '@freecodecamp/ui';
+import { Container, Col, Row, Alert } from '@freecodecamp/ui';
 
 // Local Utilities
 import Spacer from '../../../components/helpers/spacer';
diff --git a/client/src/templates/Challenges/exam/show.tsx b/client/src/templates/Challenges/exam/show.tsx
index 8523a518253..e9b51689e55 100644
--- a/client/src/templates/Challenges/exam/show.tsx
+++ b/client/src/templates/Challenges/exam/show.tsx
@@ -1,5 +1,5 @@
 // Package Utilities
-import { Row, Button } from '@freecodecamp/react-bootstrap';
+import { Button } from '@freecodecamp/react-bootstrap';
 import { graphql, navigate } from 'gatsby';
 
 import React, { Component, RefObject } from 'react';
@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Alert } from '@freecodecamp/ui';
+import { Container, Col, Alert, Row } from '@freecodecamp/ui';
 import { micromark } from 'micromark';
 
 // Local Utilities
diff --git a/client/src/templates/Challenges/odin/show.tsx b/client/src/templates/Challenges/odin/show.tsx
index 2bbcc4ae40b..6670fcbef6c 100644
--- a/client/src/templates/Challenges/odin/show.tsx
+++ b/client/src/templates/Challenges/odin/show.tsx
@@ -1,5 +1,5 @@
 // Package Utilities
-import { Button, Row } from '@freecodecamp/react-bootstrap';
+import { Button } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React, { Component } from 'react';
 import Helmet from 'react-helmet';
@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col } from '@freecodecamp/ui';
+import { Container, Col, Row } from '@freecodecamp/ui';
 
 // Local Utilities
 import Loader from '../../../components/helpers/loader';
diff --git a/client/src/templates/Challenges/projects/backend/show.tsx b/client/src/templates/Challenges/projects/backend/show.tsx
index 9d98ed22f12..aa056485193 100644
--- a/client/src/templates/Challenges/projects/backend/show.tsx
+++ b/client/src/templates/Challenges/projects/backend/show.tsx
@@ -2,7 +2,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 
-import { Row } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React, { Component } from 'react';
 import Helmet from 'react-helmet';
@@ -10,7 +9,7 @@ import { withTranslation } from 'react-i18next';
 import type { TFunction } from 'i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { Container, Col } from '@freecodecamp/ui';
+import { Container, Col, Row } from '@freecodecamp/ui';
 
 import Spacer from '../../../../components/helpers/spacer';
 import LearnLayout from '../../../../components/layouts/learn';
diff --git a/client/src/templates/Challenges/projects/frontend/show.tsx b/client/src/templates/Challenges/projects/frontend/show.tsx
index 7ad7e566eaa..4a173c05255 100644
--- a/client/src/templates/Challenges/projects/frontend/show.tsx
+++ b/client/src/templates/Challenges/projects/frontend/show.tsx
@@ -1,4 +1,3 @@
-import { Row } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React, { Component } from 'react';
 import Helmet from 'react-helmet';
@@ -8,7 +7,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col } from '@freecodecamp/ui';
+import { Container, Col, Row } from '@freecodecamp/ui';
 
 import Spacer from '../../../../components/helpers/spacer';
 import LearnLayout from '../../../../components/layouts/learn';
diff --git a/client/src/templates/Challenges/video/show.tsx b/client/src/templates/Challenges/video/show.tsx
index 8a696479b16..11261a97929 100644
--- a/client/src/templates/Challenges/video/show.tsx
+++ b/client/src/templates/Challenges/video/show.tsx
@@ -1,5 +1,5 @@
 // Package Utilities
-import { Button, Row } from '@freecodecamp/react-bootstrap';
+import { Button } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React, { Component } from 'react';
 import Helmet from 'react-helmet';
@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col } from '@freecodecamp/ui';
+import { Container, Col, Row } from '@freecodecamp/ui';
 
 // Local Utilities
 import Loader from '../../../components/helpers/loader';
diff --git a/client/src/templates/Introduction/super-block-intro.tsx b/client/src/templates/Introduction/super-block-intro.tsx
index 9dbacdf45f9..48090a3073e 100644
--- a/client/src/templates/Introduction/super-block-intro.tsx
+++ b/client/src/templates/Introduction/super-block-intro.tsx
@@ -1,4 +1,3 @@
-import { Row } from '@freecodecamp/react-bootstrap';
 import { WindowLocation } from '@reach/router';
 import { graphql } from 'gatsby';
 import { uniq } from 'lodash-es';
@@ -9,7 +8,7 @@ import { connect } from 'react-redux';
 import { configureAnchors } from 'react-scrollable-anchor';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col } from '@freecodecamp/ui';
+import { Container, Col, Row } from '@freecodecamp/ui';
 
 import { SuperBlocks } from '../../../../shared/config/superblocks';
 import { getSuperBlockTitleForMap } from '../../utils/superblock-map-titles';
diff --git a/tools/ui-components/src/index.ts b/tools/ui-components/src/index.ts
index c21c5330911..448b619d210 100644
--- a/tools/ui-components/src/index.ts
+++ b/tools/ui-components/src/index.ts
@@ -10,3 +10,4 @@ export { MenuItem } from './drop-down/menu-item';
 export { Container } from './container';
 export { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs';
 export { Col } from './col';
+export { Row } from './row';