From 63d33b40d0b5362411fb07219cdeaca1c99d9bf1 Mon Sep 17 00:00:00 2001
From: TomNUSDS <74203452+TomNUSDS@users.noreply.github.com>
Date: Fri, 4 Jun 2021 07:36:16 -0700
Subject: [PATCH] More layout fixes (#94)

* More layout fixes
* Get aside flush with top/bottom
* Media change iconlist to one column on mobile
* Misc other fixes
* convert className to use React syntax consistently.
* Update J40Footer.spec.tsx.snap
TODO: body font need to be addressed at the theme level?
---
 client/src/components/J40Footer.tsx           |  3 +-
 .../__snapshots__/J40Footer.spec.tsx.snap     |  2 +-
 client/src/pages/index.tsx                    | 61 ++++++++++---------
 client/src/styles/global.scss                 | 20 +++++-
 4 files changed, 51 insertions(+), 35 deletions(-)

diff --git a/client/src/components/J40Footer.tsx b/client/src/components/J40Footer.tsx
index 0c404520..c6b0a46c 100644
--- a/client/src/components/J40Footer.tsx
+++ b/client/src/components/J40Footer.tsx
@@ -67,8 +67,7 @@ const J40Footer = () => {
                       alt={'Whitehouse logo'}/>
                   }
                   heading={<p
-                    className={'usa-footer__logo-heading ' +
-                    ' j40-footer-logo-heading'}>
+                    className={' j40-footer-logo-heading'}>
                     Council on Environmental Quality</p>}
                 />
               </>,
diff --git a/client/src/components/__snapshots__/J40Footer.spec.tsx.snap b/client/src/components/__snapshots__/J40Footer.spec.tsx.snap
index 4cbeb812..1ced4458 100644
--- a/client/src/components/__snapshots__/J40Footer.spec.tsx.snap
+++ b/client/src/components/__snapshots__/J40Footer.spec.tsx.snap
@@ -180,7 +180,7 @@ exports[`J40Footer renders correctly 1`] = `
                       class="grid-col-auto"
                     >
                       <p
-                        class="usa-footer__logo-heading  j40-footer-logo-heading"
+                        class=" j40-footer-logo-heading"
                       >
                         Council on Environmental Quality
                       </p>
diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx
index 0f39c06d..2d2e7258 100644
--- a/client/src/pages/index.tsx
+++ b/client/src/pages/index.tsx
@@ -38,13 +38,13 @@ const IndexPage = () => {
   return (
     <Layout>
       <main id="main-content" role="main">
-        <section className="grid-container usa-section">
-          <div className="grid-row grid-gap-2">
+        <div className={'grid-row grid-gap-2'}>
+          <section className={'grid-container usa-section'}>
+            <div className={'desktop:grid-col'}>
 
-            <div className="desktop:grid-col">
-              <div className="grid-row grid-gap">
+              <div className={'grid-row grid-gap'}>
                 <div
-                  className="usa-prose text-asset-container">
+                  className={'usa-prose text-asset-container'}>
                   <h2>About Justice40</h2>
                   <p>
                     In an effort to address historical environmental injustices,
@@ -83,22 +83,22 @@ const IndexPage = () => {
                 </div>
               </div>
 
-              <div className="tablet:grid-col-10">
+              <div className={'grid-gap j40-two-column-confine'}>
                 <h4>Areas of Focus</h4>
-                <ul className="usa-icon-list j40-two-column">
+                <ul className={'usa-icon-list j40-two-column'}>
                   {readMoreList.map((item, index) => {
                     return (
                       <li
                         key={`readmore_li_${index}`}
-                        className="usa-icon-list__item">
-                        <div className="usa-icon-list__icon">
+                        className={'usa-icon-list__item'}>
+                        <div className={'usa-icon-list__icon'}>
                           <img
-                            className="j40-two-column-icons-spacing"
+                            className={'j40-two-column-icons-spacing'}
                             key={`readmore_img_${index}`}
                             src={item[0]} alt={item[1] + ' icon'}/>
                         </div>
                         <div
-                          className="usa-icon-list__content"> {item[1]} </div>
+                          className={'usa-icon-list__content'}> {item[1]} </div>
                       </li>
                     );
                   })
@@ -106,11 +106,9 @@ const IndexPage = () => {
                 </ul>
               </div>
 
-
-              <div className="grid-row grid-gap">
+              <div className={'grid-row grid-gap'}>
                 <div
-                  className="desktop:grid-col-10 \
-                            usa-prose text-asset-container">
+                  className={'usa-prose text-asset-container'}>
                   <h4>A Transparent, Community-First Approach</h4>
 
                   <p>
@@ -153,32 +151,35 @@ const IndexPage = () => {
                 </div>
               </div>
             </div>
+          </section>
 
-            {/* aside*/}
-            <aside
-              aria-labelledby="left-sidebar"
-              className="desktop:grid-col-3 usa-prose grid-gap j40-aside"
-              id="left-sidebar">
-              <h2 className={'usa-graphic-list__heading'}>Get Involved</h2>
-              <h3>
+          {/* aside */}
+          <aside
+            aria-labelledby="left-sidebar"
+            className={'j40-aside desktop:grid-col-3'}
+            id="left-sidebar">
+            <section
+              className={'usa-prose grid-gap grid-container usa-section'}>
+              <h3 className={'j40-aside-title'}>Get Involved</h3>
+              <h5>
                 <img
-                  className={'flex-align-self-center width-5'} src={chatIcon}
+                  className={'flex-align-self-center width-4'} src={chatIcon}
                   alt={'chat icon'}/>
                 <br/>
                 Send Feedback
-              </h3>
+              </h5>
               <p>Have ideas about how to acknowledge the on-the-ground
                 experiences of your community?
               </p>
               Email: <a href="mailto: justice40open@usds.gov">
               justice40open@usds.gov</a>
               <p>&nbsp;</p>
-              <h3>
+              <h5>
                 <img
-                  className={'flex-align-self-center width-5'}
+                  className={'flex-align-self-center width-4'}
                   src={githubIcon} alt={'github icon'}/>
                 <br/>
-                Join the open source community</h3>
+                Join the open source community</h5>
               <p>
                 Justice40’s code is open source, which means it is available for
                 the public to view and contribute. Anyone can view and
@@ -192,10 +193,10 @@ const IndexPage = () => {
                   rel={'noreferrer'}
                   key={'github3'}>Check it out on GitHub</a>
               </p>
-            </aside>
-          </div>
+            </section>
+          </aside>
+        </div>
 
-        </section>
       </main>
     </Layout>
   );
diff --git a/client/src/styles/global.scss b/client/src/styles/global.scss
index f3e751de..15f2fa23 100644
--- a/client/src/styles/global.scss
+++ b/client/src/styles/global.scss
@@ -3,9 +3,16 @@
 
 .j40-two-column {
   overflow: hidden;
-  column-count: 2;
-  column-gap: 1em;
   padding: 0;
+
+  @media (min-width: 768px) {
+    column-count: 2;
+    column-gap: 1em;
+  }
+  @media (max-width: 768px) {
+    column-count: 1;
+    column-gap: 0;
+  }
 }
 
 .j40-two-column > * {
@@ -21,6 +28,10 @@
   max-width: revert;
 }
 
+.j40-two-column-confine {
+  max-width: fit-content;
+}
+
 .j40-header {
   background-color: #112f4e; /* todo: move color to theme */
   color: white;
@@ -28,12 +39,17 @@
 
 .j40-title {
   font-size: xx-large;
+  font-family: "Merriweather Web";
 }
 
 .j40-aside {
   background-color: #eff6fb;
 }
 
+.j40-aside-title {
+  padding-bottom: 1em;
+}
+
 .j40-footer-logo {
   display: inline-block;
   text-align: center;