More tweaks from today's meeting (#87)

Just playing with layout.
- Inverted header
- updated snapshot
- adjusted column widths
- Update J40Footer.spec.tsx.snap

client/src/components/J40Footer.tsx

@@ -16,47 +16,73 @@ const J40Footer = () => {
           links={[
             [
               'Agency Partners',
-              <a href="https://www.epa.gov/" target="_blank" rel="noreferrer"
+              <a
+                href={'https://www.epa.gov/'}
+                target={'_blank'}
+                rel={'noreferrer'}
                 key={'epalink'}>Environmental Protection Agency</a>,
-              <a href="https://www.whitehouse.gov/omb" target="_blank"
+              <a
-                rel="noreferrer" key={'whitehouselink'}>Office of Management
+                href={'https://www.whitehouse.gov/omb'}
+                target={'_blank'}
+                rel={'noreferrer'}
+                key={'whitehouselink'}>Office of Management
                 and Budget</a>,
-              <a href="https://www.energy.gov/" target="_blank" rel="noreferrer"
+              <a
+                href={'https://www.energy.gov/'}
+                target={'_blank'}
+                rel={'noreferrer'}
                 key={'energylink'}>Department of Energy</a>,
-              <a href="https://www.hud.gov/" target="_blank" rel="noreferrer"
+              <a
+                href={'https://www.hud.gov/'}
+                target={'_blank'}
+                rel={'noreferrer'}
                 key={'hudlink'}>Department of Housing and Urban
                 Development</a>,
             ],
             [
               'More Information',
-              <a href="https://www.whitehouse.gov/" target="_blank"
+              <a
-                rel="noreferrer"
+                href={'https://www.whitehouse.gov/'}
+                target={'_blank'}
+                rel={'noreferrer'}
                 key={'whitehouselink2'}>Whitehouse.gov</a>,
               <a href="#" key={'accessibilitylink'}>Accessibility Statement</a>,
               <a href="#" key={'privacylink'}>Privacy, Policies, and Legal
                 Information</a>,
             ],
-            // eslint-disable-next-line react/jsx-key
+            [
-            [<br/>,
+              'Have a question about government services?',
-              <Logo
+              <a href="#" key={'privacylink'}>Find a contact at USA.gov</a>,
-                size="medium"
-                key={'logoimg'}
-                image={
-                  <img className={'usa-footer__logo-img'} src={whitehouseIcon}
-                    alt="Whitehouse logo"/>
-                }
-              />,
             ],
             [
-              <>Council on Environmental Quality<br/></>,
+              <>
-              <Address className={'footerAddressReadability'}
+                <Logo
-                key={'footeraddress'}
+                  size="slim"
-                items={[
+                  key={'logoimg'}
-                  '730 Jackson Pl NW',
+                  className={'j40-footer-logo'}
-                  'Washington, D.C. 20506',
+                  image={
-                  '(202) 395-5750',
+                    <img
-                ]}
+                      className={'usa-footer__logo-img'}
-              />,
+                      src={whitehouseIcon}
+                      alt={'Whitehouse logo'}/>
+                  }
+                  heading={<p
+                    className={'usa-footer__logo-heading ' +
+                    ' j40-footer-logo-heading'}>
+                    Council on Environmental Quality</p>}
+                />
+              </>,
+              <>
+                <Address
+                  className={'j40-address-readability'}
+                  key={'footeraddress'}
+                  items={[
+                    '730 Jackson Pl NW',
+                    'Washington, D.C. 20506',
+                    '(202) 395-5750',
+                  ]}
+                />
+              </>,
             ],
           ]}
         />}

client/src/components/J40Header.tsx

@@ -1,30 +1,34 @@
 import React from 'react';
 import {GovBanner, Header, Title, PrimaryNav} from '@trussworks/react-uswds';
-import {useIntl, Link} from 'gatsby-plugin-intl';
+import {useIntl} from 'gatsby-plugin-intl';
 import {Helmet} from 'react-helmet';
 
 const headerLinks = [
-  <Link to="/" key="/">Home</Link>,
+  <></>,
 ];
 
 const J40Header = () => {
   const intl = useIntl();
-  const title = intl.formatMessage({id: '71L0pp',
+  const title = intl.formatMessage({
+    id: '71L0pp',
     defaultMessage: 'Justice40',
-    description: 'Title of the project'});
+    description: 'Title of the project',
+  });
   return (
     <>
       <Helmet>
-        <meta charSet="utf-8" />
+        <meta charSet="utf-8"/>
         <title>{title}</title>
       </Helmet>
 
-      <GovBanner />
+      <GovBanner/>
-      <Header>
+      <Header className={'j40-header'} basic={true} role={'banner'}>
-        <Title className={'usa-hero__heading j40-title'}>
+        <div className="usa-nav-container">
-          {title}
+          <div className="usa-navbar">
-        </Title>
+            <Title className={'j40-title'}>{title}</Title>
-        <PrimaryNav items={headerLinks}/>
+          </div>
+          <PrimaryNav items={headerLinks}/>
+        </div>
       </Header>
     </>
   );

client/src/components/__snapshots__/J40Footer.spec.tsx.snap

@@ -137,7 +137,7 @@ exports[`J40Footer renders correctly 1`] = `
                 <h4
                   class="usa-footer__primary-link"
                 >
-                  <br />
+                  Have a question about government services?
                 </h4>
                 <ul
                   class="usa-list usa-list--unstyled"
@@ -145,20 +145,11 @@ exports[`J40Footer renders correctly 1`] = `
                   <li
                     class="usa-footer__secondary-link"
                   >
-                    <div
+                    <a
-                      class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2"
+                      href="#"
-                      data-testid="footerLogo"
                     >
-                      <div
+                      Find a contact at USA.gov
-                        class="mobile-lg:grid-col-auto"
+                    </a>
-                      >
-                        <img
-                          alt="Whitehouse logo"
-                          class="usa-footer__logo-img"
-                          src="test-file-stub"
-                        />
-                      </div>
-                    </div>
                   </li>
                 </ul>
               </section>
@@ -172,8 +163,29 @@ exports[`J40Footer renders correctly 1`] = `
                 <h4
                   class="usa-footer__primary-link"
                 >
-                  Council on Environmental Quality
+                  <div
-                  <br />
+                    class="usa-footer__logo grid-row grid-gap-2 j40-footer-logo"
+                    data-testid="footerLogo"
+                  >
+                    <div
+                      class="grid-col-auto"
+                    >
+                      <img
+                        alt="Whitehouse logo"
+                        class="usa-footer__logo-img"
+                        src="test-file-stub"
+                      />
+                    </div>
+                    <div
+                      class="grid-col-auto"
+                    >
+                      <p
+                        class="usa-footer__logo-heading  j40-footer-logo-heading"
+                      >
+                        Council on Environmental Quality
+                      </p>
+                    </div>
+                  </div>
                 </h4>
                 <ul
                   class="usa-list usa-list--unstyled"
@@ -182,7 +194,7 @@ exports[`J40Footer renders correctly 1`] = `
                     class="usa-footer__secondary-link"
                   >
                     <address
-                      class="usa-footer__address footerAddressReadability"
+                      class="usa-footer__address j40-address-readability"
                     >
                       <div
                         class="usa-footer__contact-info grid-row grid-gap"

client/src/pages/index.tsx

@@ -1,13 +1,12 @@
 import * as React from 'react';
 import Layout from '../components/layout';
+
 // import {GridContainer, Grid} from '@trussworks/react-uswds';
 
 // this section seems too verbose? must be a more readable way to do this.
 // this inlines the svg as data:image/svg+xml For larger images this
 // can cause page bloat, but it should be fine here.
 // @ts-ignore
-import publicIcon from '/node_modules/uswds/dist/img/usa-icons/public.svg';
-// @ts-ignore
 import chatIcon from '/node_modules/uswds/dist/img/usa-icons/chat.svg';
 // @ts-ignore
 import githubIcon from '/node_modules/uswds/dist/img/usa-icons/github.svg';
@@ -19,18 +18,15 @@ import busIcon from '/node_modules/uswds/dist/img/usa-icons/directions_bus.svg';
 import homeIcon from '/node_modules/uswds/dist/img/usa-icons/home.svg';
 // @ts-ignore
 import groupsIcon from '/node_modules/uswds/dist/img/usa-icons/groups.svg';
-// todo: fix svg overlay
+import pollutionIcon // @ts-ignore
+  from '/node_modules/uswds/dist/img/usa-icons/severe_weather.svg';
 // @ts-ignore
-import pollutionIcon from '/node_modules/uswds/dist/img/usa-icons/warning.svg';
-// @ts-ignore
-// eslint-disable-next-line max-len
 import washIcon from '/node_modules/uswds/dist/img/usa-icons/wash.svg';
 
 
 // markup
 const IndexPage = () => {
   const readMoreList: (any | string)[][] = [
-    [publicIcon, 'Climate change'],
     [ecoIcon, 'Clean energy and energy efficiency'],
     [busIcon, 'Clean transit'],
     [homeIcon, 'Affordable and sustainable housing'],
@@ -42,15 +38,14 @@ const IndexPage = () => {
   return (
     <Layout>
       <main id="main-content" role="main">
-        <section className="grid-container">
+        <section className="grid-container usa-section">
-          <div className="grid-row grid-gap">
+          <div className="grid-row grid-gap-2">
 
             <div className="desktop:grid-col">
               <div className="grid-row grid-gap">
                 <div
-                  className="desktop:grid-col-10 \
+                  className="usa-prose text-asset-container">
-                            usa-prose text-asset-container">
+                  <h2>About Justice40</h2>
-                  <h2>Our Team</h2>
                   <p>
                     In an effort to address historical environmental injustices,
                     President Biden created the Justice40 Initiative on January
@@ -75,13 +70,21 @@ const IndexPage = () => {
 
                   <p>
                     Read more about the Justice40 Initiative in President
-                    Biden’s Executive Order on Tackling the Climate Crisis at
+                    Biden’s <a
-                    Home and Abroad.
+                      href={'https://www.whitehouse.gov/briefing-room/' +
+                    'presidential-actions/2021/01/27/' +
+                    'executive-order-on-tackling-the-climate-' +
+                    'crisis-at-home-and-abroad/'}
+                      target={'_blank'}
+                      rel={'noreferrer'}>
+                    Executive Order on Tackling the Climate Crisis at Home and
+                    Abroad.</a>
                   </p>
                 </div>
               </div>
 
               <div className="tablet:grid-col-10">
+                <h4>Areas of Focus</h4>
                 <ul className="usa-icon-list j40-two-column">
                   {readMoreList.map((item, index) => {
                     return (
@@ -108,84 +111,53 @@ const IndexPage = () => {
                 <div
                   className="desktop:grid-col-10 \
                             usa-prose text-asset-container">
-                  <h3>A Transparent, Community-First Approach</h3>
+                  <h4>A Transparent, Community-First Approach</h4>
 
                   <p>
                     Successful initiatives are guided by direct input from the
-                    communities they are serving. CEQ
+                    communities they are serving. CEQ commits to transparency,
-                    commits
+                    inclusivity, and iteration in building this screening tool.
-                    to transparency, inclusivity, and iteration in building this
-                    screening tool.
                   </p>
 
                   <p>
-                    Transparent: The code and data behind the screening tool are
+                    <i>Transparent:</i> The code and data behind the screening
-                    open source, meaning it is available
+                    tool are open source, meaning it is available for the public
-                    for the public to review and contribute to. This tool is
+                    to review and contribute to. This tool is being developed
-                    being developed publicly so that
+                    publicly so that communities, academic experts, and anyone
-                    communities,
+                    who’s interested can be involved in the tool-building
-                    academic experts, and anyone who’s interested can be
+                    process.
-                    involved in the tool-building process.
                   </p>
 
                   <p>
-                    Inclusive: Many areas which lack investments also lack
+                    <i>Inclusive:</i> Many areas which lack investments also
-                    environmental data and would be overlooked
+                    lack environmental data and would be overlooked using
-                    using available environmental data. CEQ is actively reaching
+                    available environmental data. CEQ is actively reaching out
-                    out to groups that have historically
+                    to groups that have historically been excluded from
-                    been excluded from decision-making, such as groups in rural
+                    decision-making, such as groups in rural and tribal areas,
-                    and tribal areas, to understand their
+                    to understand their needs and ask for their input.
-                    needs
-                    and ask for their input.
                   </p>
 
                   <p>
-                    Iterative: The initial community prioritization list
+                    <i>Iterative:</i> The initial community prioritization list
-                    provided by the screening tool is the
+                    provided by the screening tool is the beginning of a
-                    beginning
+                    collaborative process in score refinement, rather than a
-                    of a collaborative process in score refinement, rather than
+                    final answer. CEQ has received recommendations on data sets
-                    a final answer. CEQ has received
+                    from community interviews, the White House Environmental
-                    recommendations on data sets from community interviews, the
+                    Justice Advisory Council, and through public comment, but
-                    White House Environmental Justice
+                    establishing a score that is truly representative will be a
-                    Advisory Council, and through public comment, but
+                    long-term, ongoing process. As communities submit feedback
-                    establishing a score that is truly
+                    and recommendations, CEQ will continue to improve the tools
-                    representative
+                    being built and the processes for stakeholder and public
-                    will be a long-term, ongoing process. As communities submit
+                    engagement.
-                    feedback and recommendations, CEQ will
-                    continue to improve the tools being built and the processes
-                    for stakeholder and public engagement.
                   </p>
                 </div>
               </div>
-
-              <div className="grid-row grid-gap">
-                <div
-                  className="desktop:grid-col-10 \
-                            usa-prose text-asset-container">
-                  <h3>Timeline</h3>
-                  <p>
-                    [timeline image here]
-                  </p>
-
-                  <p>
-                    Continuously engage with stakeholders and community members
-                    to get feedback on the screening tool,
-                    scoring, and overall process.
-                  </p>
-
-                  <p>
-                    Continuously source data that meets data principles as
-                    defined through community input.
-                  </p>
-                </div>
-              </div>
-
             </div>
 
             {/* aside*/}
             <aside
               aria-labelledby="left-sidebar"
-              className="desktop:grid-col-2 usa-prose"
+              className="desktop:grid-col-3 usa-prose grid-gap j40-aside"
               id="left-sidebar">
               <h2 className={'usa-graphic-list__heading'}>Get Involved</h2>
               <h3>
@@ -195,8 +167,7 @@ const IndexPage = () => {
                 <br/>
                 Send Feedback
               </h3>
-              <p>Have ideas about how to
+              <p>Have ideas about how to acknowledge the on-the-ground
-                acknowledge the on-the-ground
                 experiences of your community?
               </p>
               Email: <a href="mailto: justice40open@usds.gov">
@@ -210,13 +181,17 @@ const IndexPage = () => {
                 Join the open source community</h3>
               <p>
                 Justice40’s code is open source, which means it is available for
-                the public to view and contribute.
+                the public to view and contribute. Anyone can view and
-                Anyone can view and contribute on GitHub.
+                contribute on GitHub.
               </p>
               <p>
-                <a href={'https://github.com/usds/justice40-tool'}>Check it out
+                <a
-                  on GitHub</a></p>
+                  href={'https://github.com/usds/justice40-tool/' +
-
+                  'crisis-at-home-and-abroad/'}
+                  target={'_blank'}
+                  rel={'noreferrer'}
+                  key={'github3'}>Check it out on GitHub</a>
+              </p>
             </aside>
           </div>
 

client/src/styles/global.scss

@@ -21,7 +21,31 @@
   max-width: revert;
 }
 
+
+.j40-header {
+  background-color: #112F4E; /* todo: move color to theme */
+  color: white;
+}
+
 .j40-title {
-  padding: 2em;
+  font-size: xx-large;
+}
+
+.j40-aside {
+  background-color: #EFF6FB;
+}
+
+.j40-footer-logo {
+  display: inline-block;
+  text-align: center;
+}
+
+.j40-footer-logo-heading {
+
+}
+
+.j40-address-readability {
+  display: inline-block;
+  line-height: 1.5 !important;
   text-align: center;
 }