fix: clean up portfolio (#54712)

Co-authored-by: Naomi <nhcarrigan@gmail.com>

client/i18n/locales/english/translations.json

@@ -304,6 +304,7 @@
     "longest-streak": "Longest Streak:",
     "current-streak": "Current Streak:",
     "projects": "Projects",
+    "stats": "Stats",
     "timeline": "Timeline",
     "none-completed": "No challenges have been completed yet.",
     "get-started": "Get started here.",

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

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

client/src/components/profile/components/certifications.css

@@ -1,3 +0,0 @@
-.certifications .btn {
-  white-space: normal;
-}

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

@@ -2,12 +2,10 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { Col, Row } from '@freecodecamp/ui';
 
 import { certificatesByNameSelector } from '../../../redux/selectors';
 import type { CurrentCert } from '../../../redux/prop-types';
 import { FullWidthRow, Link, Spacer } from '../../helpers';
-import './certifications.css';
 
 const mapStateToProps = (
   state: Record<string, unknown>,
@@ -48,19 +46,15 @@ function CertButton({ username, cert }: CertButtonProps): JSX.Element {
   const { t } = useTranslation();
   return (
     <>
-      <Row>
-        <Col className='certifications' sm={10} smOffset={1}>
-          <Link
-            className='btn btn-lg btn-primary btn-block'
-            to={`/certification/${username}/${cert.certSlug}`}
-            data-cy='claimed-certification'
-          >
-            {t('buttons.view-cert-title', {
-              certTitle: t(`certification.title.${cert.certSlug}`)
-            })}
-          </Link>
-        </Col>
-      </Row>
+      <Link
+        className='btn btn-lg btn-primary btn-block'
+        to={`/certification/${username}/${cert.certSlug}`}
+        data-cy='claimed-certification'
+      >
+        {t('buttons.view-cert-title', {
+          certTitle: t(`certification.title.${cert.certSlug}`)
+        })}
+      </Link>
       <Spacer size='small' />
     </>
   );
@@ -76,7 +70,7 @@ function Certificates({
   const { t } = useTranslation();
   return (
     <FullWidthRow className='certifications'>
-      <h2 className='text-center'>{t('profile.fcc-certs')}</h2>
+      <h2>{t('profile.fcc-certs')}</h2>
       <br />
       {hasModernCert && currentCerts ? (
         currentCerts
@@ -89,9 +83,9 @@ function Certificates({
       )}
       {hasLegacyCert ? (
         <div>
-          <br />
-          <h3 className='text-center'>{t('settings.headings.legacy-certs')}</h3>
-          <br />
+          <Spacer size='medium' />
+          <h3>{t('settings.headings.legacy-certs')}</h3>
+          <Spacer size='medium' />
           {legacyCerts &&
             legacyCerts
               .filter(({ show }) => show)
@@ -102,7 +96,7 @@ function Certificates({
                   username={username}
                 />
               ))}
-          <Spacer size='large' />
+          <Spacer size='medium' />
         </div>
       ) : null}
       <hr />

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

@@ -98,31 +98,6 @@ class HeatMapInner extends Component<HeatMapInnerProps, HeatMapInnerState> {
 
     return (
       <FullWidthRow>
-        <Row className='heatmap-nav'>
-          <button
-            className='heatmap-nav-btn'
-            disabled={!pages[this.state.pageIndex - 1]}
-            // eslint-disable-next-line @typescript-eslint/unbound-method
-            onClick={this.prevPage}
-            style={{
-              visibility: pages[this.state.pageIndex - 1] ? 'unset' : 'hidden'
-            }}
-          >
-            &lt;
-          </button>
-          <span>{title}</span>
-          <button
-            className='heatmap-nav-btn'
-            disabled={!pages[this.state.pageIndex + 1]}
-            // eslint-disable-next-line @typescript-eslint/unbound-method
-            onClick={this.nextPage}
-            style={{
-              visibility: pages[this.state.pageIndex + 1] ? 'unset' : 'hidden'
-            }}
-          >
-            &gt;
-          </button>
-        </Row>
         <Spacer size='medium' />
 
         <CalendarHeatMap
@@ -162,6 +137,32 @@ class HeatMapInner extends Component<HeatMapInnerProps, HeatMapInnerState> {
           values={dataToDisplay}
         />
         <ReactTooltip className='react-tooltip' effect='solid' html={true} />
+        <Row className='text-center'>
+          <button
+            className='heatmap-nav-btn'
+            disabled={!pages[this.state.pageIndex - 1]}
+            // eslint-disable-next-line @typescript-eslint/unbound-method
+            onClick={this.prevPage}
+            style={{
+              visibility: pages[this.state.pageIndex - 1] ? 'unset' : 'hidden'
+            }}
+          >
+            &lt;
+          </button>
+          <span>{title}</span>
+          <button
+            className='heatmap-nav-btn'
+            disabled={!pages[this.state.pageIndex + 1]}
+            // eslint-disable-next-line @typescript-eslint/unbound-method
+            onClick={this.nextPage}
+            style={{
+              visibility: pages[this.state.pageIndex + 1] ? 'unset' : 'hidden'
+            }}
+          >
+            &gt;
+          </button>
+        </Row>
+        <Spacer size='medium' />
         <hr />
       </FullWidthRow>
     );

client/src/components/profile/components/heatmap.css

@@ -1,7 +1,3 @@
-.heatmap-nav {
-  text-align: center;
-}
-
 .heatmap-nav-btn {
   margin: 0 20px;
 }

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import type { PortfolioProjectData } from '../../../redux/prop-types';
 import './portfolio-projects.css';
-import { FullWidthRow } from '../../helpers';
+import { FullWidthRow, Spacer } from '../../helpers';
 
 interface PortfolioProjectsProps {
   portfolioProjects: PortfolioProjectData[];
@@ -17,7 +17,7 @@ export const PortfolioProjects = ({
   }
   return (
     <FullWidthRow>
-      <h2 className='text-center'>{t('profile.projects')}</h2>
+      <h2>{t('profile.projects')}</h2>
       {portfolioProjects.map(({ title, url, image, description, id }) => (
         <a
           href={url}
@@ -48,6 +48,7 @@ export const PortfolioProjects = ({
           </div>
         </a>
       ))}
+      <Spacer size='medium' />
       <hr />
     </FullWidthRow>
   );

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

@@ -112,7 +112,7 @@ function Stats({ points, calendar }: StatsProps): JSX.Element {
 
   return (
     <FullWidthRow>
-      <h2 className='text-center'>Stats</h2>
+      <h2>{t('profile.stats')}</h2>
       <Spacer size='small' />
       <dl className='stats'>
         <div>

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

@@ -16,7 +16,7 @@ import { CompletedChallenge } from '../../../redux/prop-types';
 import ProjectPreviewModal from '../../../templates/Challenges/components/project-preview-modal';
 import ExamResultsModal from '../../SolutionViewer/exam-results-modal';
 import { openModal } from '../../../templates/Challenges/redux/actions';
-import { Link, FullWidthRow } from '../../helpers';
+import { Link, FullWidthRow, Spacer } from '../../helpers';
 import { SolutionDisplayWidget } from '../../solution-display-widget';
 import { SuperBlocks } from '../../../../../shared/config/superblocks';
 import TimelinePagination from './timeline-pagination';
@@ -176,7 +176,8 @@ function TimelineInner({
 
   return (
     <FullWidthRow>
-      <h2 className='text-center'>{t('profile.timeline')}</h2>
+      <h2>{t('profile.timeline')}</h2>
+      <Spacer size='small' />
       {completedMap.length === 0 ? (
         <p className='text-center'>
           {t('profile.none-completed')}&nbsp;