Change map legend color key (#732)

* Change map legend color key

- make legend key a circle
- remove blue border in legend
- remove blue border in color key of side panel

* Add space in CBG sub-headings

- update snaphots

* Add state to the AreaDetail component

- add useState to track the community of focus
- add useEffect to control rendering
- remove getCategorization()
- clean up all SASS around 'prioritization'
- add snapshots

client/src/components/AreaDetail/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable quotes */
 // External Libs:
-import * as React from 'react';
+import React, {useEffect} from 'react';
 import {useIntl} from 'gatsby-plugin-intl';
 
 // Components:
@@ -32,30 +32,13 @@ const getSuperscriptOrdinal = (percentile: number) => {
   return suffixes[englishOrdinalRules.select(percentile)];
 };
 
-// Todo VS: remove threshold data
-export const getCategorization = (percentile: number) => {
-  let categorization;
-  let categoryCircleStyle;
-
-  if (percentile >= constants.SCORE_BOUNDARY_PRIORITIZED ) {
-    categorization = EXPLORE_COPY.COMMUNITY.OF_FOCUS;
-    categoryCircleStyle = styles.prioritized;
-  } else if (constants.SCORE_BOUNDARY_THRESHOLD <= percentile && percentile < constants.SCORE_BOUNDARY_PRIORITIZED) {
-    categorization = EXPLORE_COPY.COMMUNITY.NOT_OF_FOCUS;
-    categoryCircleStyle = styles.threshold;
-  } else {
-    categorization = EXPLORE_COPY.COMMUNITY.NOT_OF_FOCUS;
-    categoryCircleStyle = styles.nonPrioritized;
-  }
-  return [categorization, categoryCircleStyle];
-};
-
 interface IAreaDetailProps {
   properties: constants.J40Properties,
 }
 
 const AreaDetail = ({properties}:IAreaDetailProps) => {
   const intl = useIntl();
+  const [isCommunityFocus, setIsCommunityFocus] = React.useState<boolean>(true);
 
   const score = properties[constants.SCORE_PROPERTY_HIGH] as number;
   const blockGroup = properties[constants.GEOID_PROPERTY];
@@ -63,6 +46,15 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
   const countyName = properties[constants.COUNTY_NAME];
   const stateName = properties[constants.STATE_NAME];
 
+  useEffect(() => {
+    if (score >= constants.SCORE_BOUNDARY_PRIORITIZED ) {
+      setIsCommunityFocus(true);
+    } else {
+      setIsCommunityFocus(false);
+    }
+  }, [score]);
+
+
   interface indicatorInfo {
     label: string,
     description: string,
@@ -153,8 +145,6 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
     houseBurden, leadPaint, lifeExpect, pm25, trafficVolume, wasteWater,
   ];
 
-  const [categorization, categoryCircleStyle] = getCategorization(score);
-
   return (
     <aside className={styles.areaDetailContainer} data-cy={'aside'}>
       <ul className={styles.censusRow}>
@@ -162,31 +152,36 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
           <span className={styles.censusLabel}>
             {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.CENSUS_BLOCK_GROUP)}
           </span>
-          <span className={styles.censusText}>{blockGroup}</span>
+          <span className={styles.censusText}>{` ${blockGroup}`}</span>
         </li>
         <li>
           <span className={styles.censusLabel}>
             {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.COUNTY)}
           </span>
-          <span className={styles.censusText}>{countyName}</span>
+          <span className={styles.censusText}>{` ${countyName}`}</span>
         </li>
         <li>
           <span className={styles.censusLabel}>
             {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.STATE)}
           </span>
-          <span className={styles.censusText}>{stateName}</span>
+          <span className={styles.censusText}>{` ${stateName}`}</span>
         </li>
         <li>
           <span className={styles.censusLabel}>
             {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.POPULATION)}
           </span>
-          <span className={styles.censusText}>{population.toLocaleString()}</span>
+          <span className={styles.censusText}>{` ${population.toLocaleString()}`}</span>
         </li>
       </ul>
       <div className={styles.categorization}>
-        <div className={styles.priority}>
-          <div className={categoryCircleStyle} />
-          <h3>{categorization}</h3>
+        <div className={styles.communityOfFocus}>
+          {isCommunityFocus ?
+            <>
+              <div className={styles.communityOfFocusCircle} />
+              <h3>{EXPLORE_COPY.COMMUNITY.OF_FOCUS}</h3>
+            </> :
+          <h3>{EXPLORE_COPY.COMMUNITY.NOT_OF_FOCUS}</h3>
+          }
         </div>
         <p className={"secondary"}>version {METHODOLOGY_COPY.VERSION_NUMBER}</p>
       </div>