Adding consistent h and p tags (#639)

* Revert "dockerize front end (#558)"

This reverts commit 89c23faf7a.

* cleans up global.scss file

* removes all unused styles

* adds h1 and h2 via tokens

* adds design to developer pipeline

* adds headers to about page

* removes heading from logo

* adds headings to HowYouHelp and MapLegend

* adds headers to explore tool page

* updates about page with p tags

* add margin-bottom spacers

* updates areaDetail with p and h tags

* update p.secondary margin-top

* sticky footer on contact page

* fixes spacing in footer

* update designer process

client/src/pages/cejst.module.scss

@@ -1,13 +1,5 @@
 @import "../components/utils.scss";
 
-$primary-color: #112f4e;
-
-h1.explorePageHeader {
-  font-weight: bolder;
-  margin-bottom: 0;
-  color: $headingFontColor;
-}
-
 .explorePageSubHeader {
   display: flex;
   flex-wrap: wrap;

client/src/pages/cejst.tsx

@@ -24,39 +24,45 @@ const CEJSTPage = ({location}: IMapPageProps) => {
       <AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>
     </J40MainGridContainer>
 
-    <J40MainGridContainer className={'j40-main-content'}>
-      <Grid row><Grid col>
-        <section>
-          <h1 className={styles.explorePageHeader}>Explore the tool</h1>
-          <div className={styles.explorePageSubHeader}>
-            <div className={styles.explorePageHeaderText}>
-              <p>
+    <J40MainGridContainer>
+      <Grid row className={'j40-mb-5'}>
+        <Grid col>
+          <section>
+            <h1 className={styles.explorePageHeader}>Explore the tool</h1>
+            <div className={styles.explorePageSubHeader}>
+              <div className={styles.explorePageHeaderText}>
+                <p>
               Zoom into the map to see which communities the tool has currently
               identified as prioritized (the top 25% of communities) or on the
               threshold. Learn more about the formula and datasets that were
               used to prioritize these communities on the
-                {` `}
-                <Link to={'/methodology'}>Data & methodology</Link>
-                {` `}
+                  {` `}
+                  <Link to={'/methodology'}>Data & methodology</Link>
+                  {` `}
               page.
-              </p>
+                </p>
+              </div>
+              <MapLegend />
             </div>
-            <MapLegend />
-          </div>
-        </section>
-      </Grid></Grid>
+          </section>
+        </Grid>
+      </Grid>
 
-      <Grid row><Grid col>
-        <section>
-          <MapWrapper location={location}/>
-        </section>
-      </Grid></Grid>
+      <Grid row>
+        <Grid col>
+          <section>
+            <MapWrapper location={location}/>
+          </section>
+        </Grid>
+      </Grid>
 
-      <Grid row><Grid col>
-        <section>
-          <HowYouCanHelp/>
-        </section>
-      </Grid></Grid>
+      <Grid row>
+        <Grid col>
+          <section>
+            <HowYouCanHelp/>
+          </section>
+        </Grid>
+      </Grid>
     </J40MainGridContainer>
   </Layout>);
 };

client/src/pages/contact.tsx

@@ -20,28 +20,33 @@ const ContactPage = ({location}: ContactPageProps) => {
         <AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>
       </J40MainGridContainer>
 
-      <J40MainGridContainer className={'usa-prose'}>
-        <Grid row><Grid col>
-          <h2><FormattedMessage
-            id={'contact.pageheader'}
-            description={'H2 header for contact page'}
-            defaultMessage={'Contact'}/></h2>
-          <h3><FormattedMessage
-            id={'contact.sectionheader'}
-            description={'Heading for page to allow users to contact project maintainers'}
-            defaultMessage={'Email us'}/></h3>
-
-          <p>
-            <FormattedMessage
-              id={'contact.general'}
-              description={'Contact page body text'}
-              defaultMessage={`For general feedback, email {general_email_address}`}
-              values={{
-                general_email_address:
+      <J40MainGridContainer>
+        <Grid row>
+          <Grid col>
+            <h1>
+              <FormattedMessage
+                id={'contact.pageheader'}
+                description={'H2 header for contact page'}
+                defaultMessage={'Contact'}/>
+            </h1>
+            <h2>
+              <FormattedMessage
+                id={'contact.sectionheader'}
+                description={'Heading for page to allow users to contact project maintainers'}
+                defaultMessage={'Email us'}/>
+            </h2>
+            <p>
+              <FormattedMessage
+                id={'contact.general'}
+                description={'Contact page body text'}
+                defaultMessage={`For general feedback, email {general_email_address}`}
+                values={{
+                  general_email_address:
                     <a href={`mailto:${generalEmail}`}>{generalEmail}</a>,
-              }}/>
-          </p>
-        </Grid></Grid>
+                }}/>
+            </p>
+          </Grid>
+        </Grid>
       </J40MainGridContainer>
     </Layout>
   );

client/src/pages/index.test.tsx

@@ -7,6 +7,11 @@ import {LocalizedComponent} from '../test/testHelpers';
 // See ticket: #550
 jest.spyOn(console, 'error').mockImplementation(() => {});
 
+beforeAll(() => {
+  // Restore mock after all tests are done, so it won't affect other test suites
+  jest.resetAllMocks();
+});
+
 afterAll(() => {
   // Restore mock after all tests are done, so it won't affect other test suites
   jest.resetAllMocks();

client/src/pages/index.tsx

@@ -2,10 +2,11 @@ import * as React from 'react';
 import {defineMessages} from 'react-intl';
 import {FormattedMessage, useIntl} from 'gatsby-plugin-intl';
 
+import AboutCard from '../components/AboutCard/AboutCard';
+import AboutCardsContainer from '../components/AboutCard/AboutCardsContainer';
 import AlertWrapper from '../components/AlertWrapper';
 import J40MainGridContainer from '../components/J40MainGridContainer';
 import Layout from '../components/layout';
-import AboutCard from '../components/AboutCard/AboutCard';
 
 // @ts-ignore
 import aboutUSMapImg from '../images/about-usmap.svg';
@@ -22,7 +23,6 @@ import commentIcon from // @ts-ignore
 
 import githubIcon from // @ts-ignore
   '/node_modules/uswds/dist/img/usa-icons/github.svg';
-import AboutCardsContainer from '../components/AboutCard/AboutCardsContainer';
 
 
 interface IndexPageProps {
@@ -79,7 +79,7 @@ const IndexPage = ({location}: IndexPageProps) => {
         <AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>
       </J40MainGridContainer>
 
-      <J40MainGridContainer className={'j40-about-page'}>
+      <J40MainGridContainer>
 
         <AboutCardsContainer>
           <AboutCard
@@ -123,21 +123,22 @@ const IndexPage = ({location}: IndexPageProps) => {
                 infrastructure.
                   `}/>
 
-            <p><FormattedMessage
-              id={'index.aboutContent.p3'}
-              description={'paragraph 3 of main content on index page'}
-              defaultMessage={`
+            <p>
+              <FormattedMessage
+                id={'index.aboutContent.p3'}
+                description={'paragraph 3 of main content on index page'}
+                defaultMessage={`
                   Read more about the Justice40 Initiative in President Biden’s 
                   {presidentLink}
                   `}
-              values={{
-                presidentLink:
+                values={{
+                  presidentLink:
                   <a
                     href={intl.formatMessage(messages.presidentalLinkUri)}
                     target="_blank"
                     rel="noreferrer">{intl.formatMessage(messages.presidentalLinkLabel)}
                   </a>,
-              }}/>
+                }}/>
             </p>
 
           </AboutCard>
@@ -147,8 +148,8 @@ const IndexPage = ({location}: IndexPageProps) => {
       <J40MainGridContainer
         fullWidth={true}
         blueBackground={true}>
-        <J40MainGridContainer
-          className={'j40-about-page'}>
+        <J40MainGridContainer>
+          <h2>How to get started</h2>
           <AboutCardsContainer>
             <AboutCard
               size={'small'}
@@ -174,8 +175,8 @@ const IndexPage = ({location}: IndexPageProps) => {
         </J40MainGridContainer>
       </J40MainGridContainer>
 
-      <J40MainGridContainer
-        className={'j40-about-page'}>
+      <J40MainGridContainer>
+        <h2>Get involved</h2>
         <AboutCardsContainer>
           <AboutCard
             size={'small'}

client/src/pages/methodology.tsx

@@ -47,7 +47,7 @@ const IndexPage = ({location}: MethodPageProps) => {
         <AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>
       </J40MainGridContainer>
 
-      <J40MainGridContainer className={'j40-main-content'}>
+      <J40MainGridContainer>
         <h1>{intl.formatMessage(messages.methodologyPageHeader)}</h1>
         <Grid row gap>
           <Grid col={12} tablet={{col: 6}}>
@@ -75,9 +75,11 @@ const IndexPage = ({location}: MethodPageProps) => {
       </J40MainGridContainer>
 
       <J40MainGridContainer>
-        <Grid row><Grid col>
-          <ScoreStepsList/>
-        </Grid></Grid>
+        <Grid row>
+          <Grid col>
+            <ScoreStepsList/>
+          </Grid>
+        </Grid>
       </J40MainGridContainer>
     </Layout>
   );

client/src/pages/timeline.tsx

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import Layout from '../components/layout';
 
+
+// THIS COMPONENT IS NOT BEING USED
+
 // @ts-ignore
-import renewIcon from '/node_modules/uswds/dist/img/usa-icons/autorenew.svg';
+// import renewIcon from '/node_modules/uswds/dist/img/usa-icons/autorenew.svg';
 
 interface TimelinePageProps {
   location: Location;
@@ -10,17 +13,17 @@ interface TimelinePageProps {
 
 const TimelinePage = ({location}: TimelinePageProps) => {
   return (<Layout location={location}>
-    <section className={'usa-prose'}>
-      <h1>Timeline</h1>
+    <section>
+      {/* <h1>Timelin</h1>
       <h2>Throughout the Process</h2>
       <div className="grid-col">
         <div className="grid-row grid-gap-lg">
           <div className="grid-col-1">
             <img
-              className={'flex-align-self-center width-4'}
+              className={''}
               src={renewIcon} alt={'renew icon'}/>
           </div>
-          <div className={'usa-prose text-asset-container ' +
+          <div className={'text-asset-container ' +
           'grid-col-fill'}>
             <p>Continuously engage with stakeholders and community
               members to get feedback on the screening tool, scoring,
@@ -55,7 +58,7 @@ const TimelinePage = ({location}: TimelinePageProps) => {
           <p>Create a public scorecard to ensure accountability of
               investments by February 2022.</p>
         </li>
-      </ol>
+      </ol> */}
     </section>
   </Layout>
   );