Website copy layout styling updates for Tuesday launch (#685)

* Add basic accordion in AreaDetail

* Refactor AreaDetail to use a Grid layout

- adds useWindowSize to detect window resizes for mobile view
- Map and AreaDetail to use Grid
- removes some component styling from J40
- updates snapshot
- MapWrapper to use Grid

* Add custom Accordion styling

- make J40 map a 9:3 Grid layout split
- override native Accordion heading styles
- make the Accordion multi-selectable
- add some dummy data for indicators

* Update AreaDetail to match design

- remove styles in AreaDetail
- increase height of MapInfoPanel
- add Accordian items (indicators)
- updates snapshot

* Add a Beta Tag to the logo

* Change the line height on indicators descriptions

* Update package-lock after the rebase

* Remove threshold from MapLegend

- move feature selected border color to utils
- remove all tooltip logic
- remove all styles associated with tooltips
- add legend label and descript to constants
- refactor tests to be snapshots

* Add borders between additional indicators

* Modify copy and update styles

- add the ordinal superscript back
- update the copy
- update the snapshots

* Add additional indicators keys

* Connect indicator keys to the UI

- update the areaDetail snapshot

* Render additional indicators accordion open onLoad

- update snapshot

* Update copy on About page

* Update copy on indicator descriptions

- update snapshots

* Update the "How you can help section"

- update the snapshot

* Add a comma to "ZIP file will contain..."

* Add the Datasets section to the methodology page

- update snapshot

* Update Methodology process list to trussworks

- remove custom process list
- remove custom CSS from global file
- change copy

* Modify layout of Methodology to using Grid

- modify Dataset section to use Grid
- remove outdated component CSS
- update the snapshot

* Update copy based on product feedback

- update snapshots

* Remove Accordions

- updates snapshots
- white CBG groups will show "Not community of focus"

client/src/components/AreaDetail/areaDetail.module.scss

@@ -1,7 +1,6 @@
 @import "../utils.scss";
 
 $sidePanelLabelFontColor: #171716;
-$featureSelectBorderColor: #00bde3;
 
 @mixin sidePanelLabelStyle {
   font-size: small;
@@ -14,60 +13,36 @@ $featureSelectBorderColor: #00bde3;
   width: 0.6rem;
   border-radius: 100%;
   align-self: center;
-  margin-top: 0.8rem;
+  margin-top: 1.8rem;
   margin-right: 0.5rem;
   opacity: 0.6;
 }
 
+@mixin indicatorBox {
+  display: flex;
+  flex-direction: column;
+  padding: 0 1rem 1.5rem;
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
 .areaDetailContainer {
   display: flex;
   flex-direction: column;
 }
 
-// top row styles
-.topRow {
-  display: flex;
-}
-
-.cumulativeIndexScore,
 .categorization {
   display: flex;
   flex-direction: column;
   align-items: center;
-  height: 7.7rem;
-  border-bottom: $sidePanelBorder;
-  flex: 1 0 50%;
-  padding-top: 2rem;
+  padding-bottom: 2rem;
 }
 
-.topRowTitle,
 .censusLabel {
   @include sidePanelLabelStyle;
 }
 
-.topRowSubTitle {
-  font-size: small;
-  color: $sidePanelLabelFontColor;
-}
-
-.score {
-  font-size: xx-large;
-  font-weight: bolder;
-}
-
-.indicatorSuperscript {
-  top: -0.2em
-}
-
-.scoreSuperscript {
-  font-size: large;
-  padding-bottom: 1rem;
-}
-
-.categorization {
-  border-left: $sidePanelBorder;
-}
-
 .priority {
   display: flex;
 }
@@ -98,14 +73,13 @@ $featureSelectBorderColor: #00bde3;
 .censusRow {
   display: flex;
   flex-direction: column;
-  border-bottom: $sidePanelBorder;
   list-style: none;
   margin: 0;
 }
 
 //census row styles
 .censusRow {
-  padding: 1rem;
+  padding: 1.2rem 1rem 0 1.2rem;
 }
 
 .censusText {
@@ -117,33 +91,24 @@ $featureSelectBorderColor: #00bde3;
   @include sidePanelLabelStyle;
   display: flex;
   justify-content: space-between;
-  border-bottom: $sidePanelBorder;
-  padding: 0.3rem 0.5rem 0.3rem 1rem;
-  background-color: #edeef0;
+  padding: 0.3rem 0.5rem 0.3rem 1.2rem;
+  background-color: #DFE1E2;
 }
 
 //Indicator box styles
-.indicatorBox {
-  display: flex;
-  padding: 0 1rem 1.5rem;
+.indicatorBoxMain {
+  @include indicatorBox;
   border-bottom: $sidePanelBorder;
-
-  @media screen and (max-width: $mobileBreakpoint) {
-    justify-content: space-between;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-  }
 }
 
-.indicatorBox:last-child {
-  border-bottom: none;
+.indicatorBoxAdditional {
+  @include indicatorBox;
+  border-bottom: 1px solid #1b1b1b;
+  background-color: #F3F3F3;
 }
 
-.indicatorValue {
-  flex: 1 0 37%;
-  align-self: center;
-  padding-left: 2.4rem;
-  font-size: large;
+.indicatorRow {
+  display: flex;
 
   @media screen and (max-width: $mobileBreakpoint) {
     flex: 1 0 40%;
@@ -151,4 +116,21 @@ $featureSelectBorderColor: #00bde3;
     padding-left: 3rem;
     padding-top: 1rem;
   }
+
+  .indicatorName {
+    flex: 0 1 77%;
+  }
+  
+  .indicatorValue {
+    margin-top: 1.2rem;
+    margin-left: 2.2rem;
+  }
+  
+  .indicatorDesc {
+    max-width: 10rem;    
+  }
+}
+
+.indicatorSuperscript {
+  top: -0.2em
 }