Updated side panel for score L launch (#1022)

* Remove un-needed state and useEffect vars

* Add initial Accordion UI to side panel

- abstract out Indicators to separate component
- add snapshot test
- define new indicators in EXPLORE copy
- intl copy to AreaDetail component

* Make side panel indicators styling match design

* Rename export IndicatorCategory -> CategoryCard

* Add disadvangted dots to category and indicators

- add new Category component
- add new DisadvantageDot component
- make copy corrections
- comment out send feedback link in side panel

* Integrate MapLegend's dot into component

- change color to 'blue-warm-70v'
- update map stroke to 'blue-warm-70v'

* Add new indicator names from BE

- add abbreviations and use key in json file to decode

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

@@ -1,30 +1,19 @@
+@use '../../styles/design-system.scss' as *;
 @import "../utils.scss";
 
 $sidePanelLabelFontColor: #171716;
 
 @mixin sidePanelLabelStyle {
-  font-size: small;
+  font-size: medium;
   color: $sidePanelLabelFontColor;
   font-weight: 600;
 }
 
-@mixin categorizationCircleStyle {
-  height: 0.6rem;
-  width: 0.6rem;
-  border-radius: 100%;
-  align-self: center;
-  margin-top: 2rem;
-  margin-right: 0.5rem;
-  opacity: 0.6;
-}
-
-@mixin indicatorBox {
-  display: flex;
-  flex-direction: column;
-  padding: 0 1rem 1.5rem;
-  &:last-child {
-    border-bottom: none;
-  }
+.versionInfo {
+  padding: .5rem 1rem .5rem 1.2rem;
+  font-size: medium;
+  font-weight: bold;
+  border-bottom: 1px solid $sidePanelBorderColor; 
 }
 
 .areaDetailContainer {
@@ -39,14 +28,25 @@ $sidePanelLabelFontColor: #171716;
   align-items: center;
   padding-bottom: 2rem;
 
+  .isInFocus {
+    padding: .5rem 1rem .25rem 1.2rem;
+    font-size: small;
+    font-weight: bold;
+    @include u-margin-top(2);
+  }
+
   .communityOfFocus {
     display: flex;
 
-    .communityOfFocusCircle {
-      @include categorizationCircleStyle;
-      background: #1a4480;
+    h3 {
+      margin-top: 0;
+      margin-bottom: 0;
     }
+  }
 
+  .feedbackLink {
+    font-size: small;
+    @include u-margin-top(1);
   }
 
 }
@@ -64,12 +64,10 @@ $sidePanelLabelFontColor: #171716;
   }
 
   .censusText {
-    font-size: small;
+    font-size: medium;
   }  
 }
 
-
-
 //Divider styles
 .divider {
   @include sidePanelLabelStyle;
@@ -79,45 +77,3 @@ $sidePanelLabelFontColor: #171716;
   border-top: 1px solid $sidePanelBorderColor;
   border-bottom: 1px solid $sidePanelBorderColor;
 }
-
-//Indicator box styles
-.indicatorBoxMain {
-  @include indicatorBox;
-  border-bottom: $sidePanelBorder;
-}
-
-.indicatorBoxAdditional {
-  @include indicatorBox;
-  border-bottom: 1px solid #1b1b1b;
-  background-color: $additionalCardsBGColor;
-}
-
-.indicatorRow {
-  display: flex;
-
-  @media screen and (max-width: $mobileBreakpoint) {
-    flex: 1 0 40%;
-    align-self: inherit;
-    padding-left: 3rem;
-    padding-top: 1rem;
-  }
-
-  .indicatorName {
-    flex: 0 1 77%;
-  }
-  
-  .indicatorValue {
-    margin-top: 1.2rem;
-    margin-left: 2.2rem;
-    
-    .indicatorSuperscript {
-      top: -0.2em
-    }
-    
-  }
-  
-  .indicatorDesc {
-    max-width: 10rem;    
-  }
-}
-