From 54d07bddc839b5b669a9d00e8354a718bf4fe398 Mon Sep 17 00:00:00 2001
From: Vim <86254807+vim-usds@users.noreply.github.com>
Date: Thu, 14 Oct 2021 15:09:33 -0700
Subject: [PATCH] Migrates global footer styles to USDS (#798)

- enables colors in settings file
- updates snapshots
---
 client/src/components/J40Footer.tsx           |  1 -
 .../__snapshots__/J40Footer.spec.tsx.snap     |  2 +-
 .../pages/__snapshots__/contact.test.tsx.snap |  2 +-
 .../pages/__snapshots__/index.test.tsx.snap   |  2 +-
 .../__snapshots__/methodology.test.tsx.snap   |  2 +-
 client/src/styles/global.scss                 | 72 +++++--------------
 client/src/styles/uswds-settings.scss         | 12 +---
 7 files changed, 26 insertions(+), 67 deletions(-)

diff --git a/client/src/components/J40Footer.tsx b/client/src/components/J40Footer.tsx
index 573109d4..1ff410f3 100644
--- a/client/src/components/J40Footer.tsx
+++ b/client/src/components/J40Footer.tsx
@@ -97,7 +97,6 @@ const J40Footer = () => {
           <Logo
             size="medium"
             key={'logoimg'}
-            className={'j40-footer-logo'}
             image={
               <img
                 className={'usa-footer__logo-img'}
diff --git a/client/src/components/__snapshots__/J40Footer.spec.tsx.snap b/client/src/components/__snapshots__/J40Footer.spec.tsx.snap
index 92a9ff42..722c366f 100644
--- a/client/src/components/__snapshots__/J40Footer.spec.tsx.snap
+++ b/client/src/components/__snapshots__/J40Footer.spec.tsx.snap
@@ -152,7 +152,7 @@ exports[`J40Footer renders correctly 1`] = `
         data-testid="gridContainer"
       >
         <div
-          class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2 j40-footer-logo"
+          class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2"
           data-testid="footerLogo"
         >
           <div
diff --git a/client/src/pages/__snapshots__/contact.test.tsx.snap b/client/src/pages/__snapshots__/contact.test.tsx.snap
index 2463ab58..b9ff6a50 100644
--- a/client/src/pages/__snapshots__/contact.test.tsx.snap
+++ b/client/src/pages/__snapshots__/contact.test.tsx.snap
@@ -462,7 +462,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         data-testid="gridContainer"
       >
         <div
-          class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2 j40-footer-logo"
+          class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2"
           data-testid="footerLogo"
         >
           <div
diff --git a/client/src/pages/__snapshots__/index.test.tsx.snap b/client/src/pages/__snapshots__/index.test.tsx.snap
index 946d72cb..77137f02 100644
--- a/client/src/pages/__snapshots__/index.test.tsx.snap
+++ b/client/src/pages/__snapshots__/index.test.tsx.snap
@@ -782,7 +782,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         data-testid="gridContainer"
       >
         <div
-          class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2 j40-footer-logo"
+          class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2"
           data-testid="footerLogo"
         >
           <div
diff --git a/client/src/pages/__snapshots__/methodology.test.tsx.snap b/client/src/pages/__snapshots__/methodology.test.tsx.snap
index 4fa8c7dc..03321232 100644
--- a/client/src/pages/__snapshots__/methodology.test.tsx.snap
+++ b/client/src/pages/__snapshots__/methodology.test.tsx.snap
@@ -1268,7 +1268,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         data-testid="gridContainer"
       >
         <div
-          class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2 j40-footer-logo"
+          class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2"
           data-testid="footerLogo"
         >
           <div
diff --git a/client/src/styles/global.scss b/client/src/styles/global.scss
index ae3e3fa2..35eb7847 100644
--- a/client/src/styles/global.scss
+++ b/client/src/styles/global.scss
@@ -35,9 +35,8 @@ There are 3 things that should be included in this file:
 
 /***************** GLOBAL STYLES **************************************************************/
 
-$primary-color: #112f4e;
-$j40-blue-background-color: #EFF6FB;
-$sidePanelBorderColor: #f2f2f2;
+$primary-color: #112f4e;  // Used for header font color - selection color is #005EA2
+$j40-blue-background-color: #e7f2f5;  // Hex value of 'blue-cool-5'
 
 // The j40-element mixin is used to create any font element. E.g. <h1>, <p> tags, etc.
 // Arguments to the mixins must be tokens from USWDS
@@ -113,7 +112,10 @@ components include:
 .j40-header,
 .j40-primary-nav,
 .j40-header > li > a {
-  color: $primary-color !important;
+
+  // Todo color: remove this global
+  // May be able to place importance like this: u-bg('red-warm-50v', !important)
+  color: $primary-color !important; 
   z-index: 5;
 
   .usa-nav-container {
@@ -122,7 +124,7 @@ components include:
 
   span {
     // make sure the open close chevron is colored correctly
-    color: $primary-color;
+    color: $primary-color; // Todo color: remove this global
   }
 
   // this is the title
@@ -195,10 +197,12 @@ components include:
 
 /* this is used by J40MainGridContainer to show a blue background */
 .j40-main-grid-blue-bk {
-  background-color: $j40-blue-background-color;
-
+  @include u-bg('blue-cool-5');  
+  
   // This style is to remove the margin collapse occuring
-  border-top: 1px solid $j40-blue-background-color;
+  @include u-border-top(1px);
+  @include u-border-top('solid');
+  @include u-border-top('blue-cool-5');
 }
 
 #main-content {
@@ -218,21 +222,16 @@ components include:
     @include u-padding-bottom(2);
   }
 
-  .j40-footer-logo {
-    font-weight: bold;
-  }
-
   .j40-footer-address {
     .usa-footer__contact-info {
-      font-weight: normal;
-      text-align: left;
-      display: inline-block;
-      line-height: 1.5;
+      @include typeset('sans', 4, 5); 
+      @include u-text('normal');  
+      @include u-display('inline-block');
     }
   }
-
+  
   .footer-link-first-child{
-    display: inline-block;
+    @include u-display('inline-block');
     @include u-margin-top(1.5)
   }
 }
@@ -406,8 +405,8 @@ p.secondary.j40-indicator {
 *************************************** 
 */ 
 
-.usa-process-list__heading{
-  border-left-color: $j40-blue-background-color;
+.usa-process-list__item{
+  @include u-border-left('base-lightest');
 }
 
 
@@ -459,36 +458,3 @@ p.secondary.j40-indicator {
     }
   }
 }
-
-
-/* 
-******************************
-*      ACCORDION STYLES
-****************************** 
-*/
-
-.usa-accordion__heading button.usa-accordion__button {
-  @include j40-element('3xs', 1, 'normal', 0);
-  border-bottom: 1px solid $sidePanelBorderColor;
-} 
-.usa-accordion__heading:first-child button.usa-accordion__button {
-  @include j40-element('3xs', 1, 'normal', 0);
-  background-color: white;
-} 
-.usa-accordion__heading button.usa-accordion__button {
-  @include j40-element('3xs', 1, 'normal', 0);
-  background-color: #F3F3F3;
-}
-
-.usa-accordion__heading:not(:first-child){
-  @include u-margin-top(0);
-}
-
-#prioritization-indicators, #additional-indicators {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-#additional-indicators {
-  background-color:#F3F3F3;
-}
\ No newline at end of file
diff --git a/client/src/styles/uswds-settings.scss b/client/src/styles/uswds-settings.scss
index c6b73b54..1f35d564 100644
--- a/client/src/styles/uswds-settings.scss
+++ b/client/src/styles/uswds-settings.scss
@@ -1,13 +1,9 @@
 // This setting file will instantiate styles that are needed for J40 from the styles/theme folder
 
-/*
-  Import the entire theme spacing folder
-*/
+// Import the entire theme spacing folder
 @import "./theme/uswds-theme-spacing";
 
-/*
- Selected general styles found in styles/theme/_uswds-theme-general.scss:
-*/
+// Selected general styles found in styles/theme/_uswds-theme-general.scss:
 $theme-image-path: "../../node_modules/uswds/src/img";
 $theme-show-compile-warnings: false;
 $theme-show-notifications: false;
@@ -23,7 +19,5 @@ $theme-namespace: (
   ),
 );
 
-/*
-Selected typography styles, found in styles/theme/_uswds-theme-typography.scss:
-*/
+// Selected typography styles, found in styles/theme/_uswds-theme-typography.scss:
 $theme-font-path: "../../node_modules/uswds/src/fonts";