Update copy on site based on living copy document (#697)

* Update copy on site based on living copy document * Updates copy from living doc v2 - updates shots * Update styling to sidepanel - make indicator heading white - change bg color of add'nl indicators 'FAFAFA' * Separate dataset cards sections by style - abstract out additional cards color to utils - create a baseCard mixin - add datasetCardAdditional style block - add additionalIndicator prop to DatasetCard - lower abstaction of GridContainer from methodology to DatasetContainer - updates snapshot * Swap resolution and source in dataset cards - update snapshots * Update SVGs on About page - re-center the SVGs to content vertically
2025-08-14 09:41:39 -07:00 · 2021-09-17 11:01:15 -07:00 · 2021-09-17 11:01:15 -07:00 · 61fc8e6c15
commit 61fc8e6c15
parent cd33f323c8
25 changed files with 1714 additions and 701 deletions
--- a/client/src/components/AreaDetail/areaDetail.module.scss
+++ b/client/src/components/AreaDetail/areaDetail.module.scss
@ -91,8 +91,9 @@ $sidePanelLabelFontColor: #171716;
  @include sidePanelLabelStyle;
  display: flex;
  justify-content: space-between;
-  padding: 0.3rem 0.5rem 0.3rem 1.2rem;
-  background-color: #DFE1E2;
+  padding: 0.5rem 0.5rem 0.5rem 1.2rem;
+  border-top: 1px solid $sidePanelBorderColor;
+  border-bottom: 1px solid $sidePanelBorderColor;
 }

 //Indicator box styles
@ -104,7 +105,7 @@ $sidePanelLabelFontColor: #171716;
 .indicatorBoxAdditional {
  @include indicatorBox;
  border-bottom: 1px solid #1b1b1b;
-  background-color: #F3F3F3;
+  background-color: $additionalCardsBGColor;
 }

 .indicatorRow {
--- a/client/src/components/AreaDetail/index.tsx
+++ b/client/src/components/AreaDetail/index.tsx
@ -144,13 +144,13 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
    },
    femaRisk: {
      id: 'areaDetail.indicator.femaRisk',
-      defaultMessage: 'FEMA Risk index',
+      defaultMessage: 'FEMA Risk Index',
      description: 'Risk based on 18 natural hazard types, in addition to a'+
      "community's social vulnerability and community resilience",
    },
    heartDisease: {
      id: 'areaDetail.indicator.heartDisease',
-      defaultMessage: 'Heart Disease',
+      defaultMessage: 'Heart disease',
      description: 'People ages 18 and up who report ever having been told by a' +
      'doctor, nurse, or other health professionals that they had angina or coronary heart disease',
    },
@ -216,7 +216,8 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
  };
  const poverty:indicatorInfo = {
    label: intl.formatMessage(messages.poverty),
-    description: 'Household income is less than or equal to the federal "poverty level"',
+    description: "Percent of a block group's population in households where the household income" +
+    ' is at or below 100% of the federal poverty level',
    value: properties[constants.POVERTY_PROPERTY_PERCENTILE],
  };
  // const linIsoInfo:indicatorInfo = {
--- a/client/src/components/AreaDetail/tests/snapshots/areaDetail.test.tsx.snap
+++ b/client/src/components/AreaDetail/tests/snapshots/areaDetail.test.tsx.snap
@ -114,7 +114,7 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
      <p
        class="secondary j40-indicator"
      >
-        Household income is less than or equal to the federal "poverty level"
+        Percent of a block group's population in households where the household income is at or below 100% of the federal poverty level
      </p>
    </li>
    <li
@ -210,7 +210,7 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
    >
      <div>
        <h4>
-          FEMA Risk index
+          FEMA Risk Index
        </h4>
        <div>
          NaN
@ -232,7 +232,7 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
    >
      <div>
        <h4>
-          Heart Disease
+          Heart disease
        </h4>
        <div>
          NaN
--- a/client/src/components/DatasetCard/datasetCard.module.scss
+++ b/client/src/components/DatasetCard/datasetCard.module.scss
@ -1,10 +1,21 @@
-.datasetCard {
-  background-color: white;
+@import '../utils.scss';
+
+@mixin baseCard {
  padding: 2.7rem 3rem 3rem 3rem;
  margin-bottom: 3rem;
  max-width: 34rem;
 }

+.datasetCard {
+  @include baseCard;
+  background-color: white;
+}
+
+.datasetCardAdditional {
+  @include baseCard;
+  background-color: $additionalCardsBGColor;
+}
+
 .datasetCardIndicator {
  margin-top: 0;
  font-size: x-large;
--- a/client/src/components/DatasetCard/datasetCard.module.scss.d.ts
+++ b/client/src/components/DatasetCard/datasetCard.module.scss.d.ts
@ -1,6 +1,7 @@
 declare namespace DatasetCardScssNamespace {
    export interface IDatasetCardScss {
        datasetCard: string;
+        datasetCardAdditional:string;
        datasetCardIndicator:string;
        datasetCardWhatIsIt: string;
        datasetCardDescription: string;
--- a/client/src/components/DatasetCard/index.tsx
+++ b/client/src/components/DatasetCard/index.tsx
@ -5,16 +5,12 @@ import * as styles from './datasetCard.module.scss';

 interface IDatasetCardProps {
  datasetCardProps: { [key:string]: string }
+  additionalIndicator: boolean
 }

-const DatasetCard = ({datasetCardProps}:IDatasetCardProps) => {
+const DatasetCard = ({datasetCardProps, additionalIndicator}:IDatasetCardProps) => {
  const intl = useIntl();
  const messages = defineMessages({
-    whatIsIt: {
-      id: 'datasetCard.whatIsIt',
-      defaultMessage: 'What is it?',
-      description: 'label associated with explaining the card',
-    },
    dataResolution: {
      id: 'datasetCard.dataResolution',
      defaultMessage: 'Data resolution: ',
@ -33,20 +29,13 @@ const DatasetCard = ({datasetCardProps}:IDatasetCardProps) => {
  });

  return (
-    <div className={styles.datasetCard}>
+    <div className={additionalIndicator ? styles.datasetCardAdditional : styles.datasetCard}>
      <h3 className={styles.datasetCardIndicator}>{datasetCardProps.indicator}</h3>
-      <div className={styles.datasetCardWhatIsIt}>{intl.formatMessage(messages.whatIsIt)}</div>
      <div className={styles.datasetCardDescription}>
        {datasetCardProps.description}
      </div>

      <ul className={styles.datasetCardList}>
-        <li className={styles.datasetCardListItem}>
-          <span className={styles.datasetCardLabels}>
-            {intl.formatMessage(messages.dataResolution)}
-          </span>
-          {datasetCardProps.dataResolution}
-        </li>
        <li className={styles.datasetCardListItem}>
          <span className={styles.datasetCardLabels}>
            {intl.formatMessage(messages.dataSource)}
@ -55,6 +44,12 @@ const DatasetCard = ({datasetCardProps}:IDatasetCardProps) => {
            {datasetCardProps.dataSourceLabel}
          </a>
        </li>
+        <li className={styles.datasetCardListItem}>
+          <span className={styles.datasetCardLabels}>
+            {intl.formatMessage(messages.dataResolution)}
+          </span>
+          {datasetCardProps.dataResolution}
+        </li>
        <li className={styles.datasetCardListItem}>
          <span className={styles.datasetCardLabels}>
            {intl.formatMessage(messages.dataDateRange)}
--- a/client/src/components/DatasetCard/tests/snapshots/datasetCard.test.tsx.snap
+++ b/client/src/components/DatasetCard/tests/snapshots/datasetCard.test.tsx.snap
@ -6,20 +6,11 @@ exports[`rendering of the DatasetCard checks if component renders 1`] = `
    <h3>
      Area Median Income
    </h3>
-    <div>
-      What is it?
-    </div>
    <div>
      Median income of the census block group calculated as a percent 
    of the metropolitan area’s or state's median income.
    </div>
    <ul>
-      <li>
-        <span>
-          Data resolution: 
-        </span>
-        Census block group
-      </li>
      <li>
        <span>
          Data source: 
@ -32,6 +23,12 @@ exports[`rendering of the DatasetCard checks if component renders 1`] = `
          Census's American Community Survey
        </a>
      </li>
+      <li>
+        <span>
+          Data resolution: 
+        </span>
+        Census block group
+      </li>
      <li>
        <span>
          Data date range: 
--- a/client/src/components/DatasetCard/tests/datasetCard.test.tsx
+++ b/client/src/components/DatasetCard/tests/datasetCard.test.tsx
@ -3,12 +3,12 @@ import {render} from '@testing-library/react';
 import {LocalizedComponent} from '../../../test/testHelpers';
 import DatasetCard from '../../DatasetCard';

-import {cards} from '../../DatasetContainer/index';
+import {indicators} from '../../DatasetContainer/index';

 describe('rendering of the DatasetCard', () => {
  const {asFragment} = render(
      <LocalizedComponent>
-        <DatasetCard key={0} datasetCardProps={cards[0]}/>
+        <DatasetCard key={0} datasetCardProps={indicators[0]}/>
      </LocalizedComponent>,
  );

--- a/client/src/components/DatasetContainer/index.tsx
+++ b/client/src/components/DatasetContainer/index.tsx
@ -3,12 +3,13 @@ import {useIntl} from 'gatsby-plugin-intl';
 import {defineMessages} from 'react-intl';
 import {Grid} from '@trussworks/react-uswds';

-import DatasetCard from '../DatasetCard';
 import AlertWrapper from '../AlertWrapper';
+import DatasetCard from '../DatasetCard';
+import J40MainGridContainer from '../J40MainGridContainer';

 import * as styles from './dsContainer.module.scss';

-export const cards = [
+export const indicators = [
  {
    indicator: 'Area Median Income',
    description: `Median income of the census block group calculated as a percent 
@ -19,26 +20,29 @@ export const cards = [
    dataDateRange: `2015-2019`,
  },
  {
-    indicator: 'Households below 100% of the federal poverty line',
-    description: `Percent of a block group's population in households where the 
-    household income is at or below 100% the federal "poverty level."`,
+    indicator: 'Poverty',
+    description: `Percent of a block group's population in households where the household income` +
+    ` is at or below 100% of the federal poverty level`,
    dataResolution: `Census block group`,
    dataSourceLabel: `Census's American Community Survey`,
    dataSourceURL: `https://www.census.gov/programs-surveys/acs`,
    dataDateRange: `2015-2019`,
  },
  {
-    indicator: 'Education. less than high school education',
-    description: `Percent of people age 25 or older in a block group whose 
-    education is short of a high school diploma.`,
+    indicator: 'Education, less than high school education',
+    description: `Percent of people ages 25 years or older in a block group whose 
+    education level is less than a high school diploma.`,
    dataResolution: `Census block group`,
    dataSourceLabel: `Census's American Community Survey`,
    dataSourceURL: `https://www.census.gov/programs-surveys/acs`,
    dataDateRange: `2015-2019`,
  },
+];
+
+export const additionalIndicators = [
  {
    indicator: 'Diabetes',
-    description: `People ages 18 years and up who report having ever been 
+    description: `People ages 18 years and older who report having ever been 
    told by a doctor, nurse, or other health professionals that they have 
    diabetes other than diabetes during pregnancy.`,
    dataResolution: `Census tract`,
@ -59,7 +63,7 @@ export const cards = [
  },
  {
    indicator: 'Heart disease',
-    description: `People ages 18 years and up who report ever having been told 
+    description: `People ages 18 years and older who report ever having been told 
    by a doctor, nurse, or other health professionals that they had angina or 
    coronary heart disease.`,
    dataResolution: `Census tract`,
@ -82,7 +86,7 @@ export const cards = [
    within 500 meters, divided by distance in meters (not km).`,
    dataResolution: `Census block group`,
    dataSourceLabel: `Department of Transportation (DOT) traffic data`,
-    dataSourceURL: `#`,
+    dataSourceURL: `https://www.fhwa.dot.gov/policyinformation/hpms/shapefiles.cfm`,
    dataDateRange: `2017`,
  },
  {
@ -136,8 +140,9 @@ export const cards = [
    indicator: 'Diesel particulate matter',
    description: `Mixture of particles that is part of diesel exhaust in the air.`,
    dataResolution: `Census block group`,
-    dataSourceLabel: `U.S. Census Bureau`,
-    dataSourceURL: `https://www.census.gov/`,
+    dataSourceLabel: `Environmental Protection Agency (EPA) National Air Toxics Assessment (NATA)
+    `,
+    dataSourceURL: `https://www.epa.gov/national-air-toxics-assessment/2014-nata-assessment-results`,
    dataDateRange: `5-year estimates, 2015-2019`,
  },
  {
@ -158,7 +163,7 @@ const DatasetContainer = () => {
  const messages = defineMessages({
    cumulativeScore: {
      id: 'datasetContainer.header.cumulativeScore',
-      defaultMessage: 'Datasets used methodology',
+      defaultMessage: 'Datasets used in methodology',
      description: 'section label of which datasets are used in cumulative score',
    },
    subTitle: {
@ -166,31 +171,76 @@ const DatasetContainer = () => {
      defaultMessage: 'The datasets come from a variety of sources and were selected' +
      ' based on relevance, availability, recency, and quality. The datasets seek to' +
      ' identify a range of human health, environmental, climate-related, and other' +
-      ' cumulative impacts on disadvantaged communities.',
+      ' cumulative impacts on communities.',
      description: 'description of the dataset section',
    },
+    additionalSubtitle: {
+      id: 'datasetContainer.additionalSubtitle',
+      defaultMessage: 'Additional Indicators',
+      description: 'indicator heading',
+    },
+    additionalText: {
+      id: 'datasetContainer.additionalText',
+      defaultMessage: 'These datasets provide additional information about each community.',
+      description: 'additional indicator heading',
+    },
  });

  //  JSX return value:
  return (
    <>
-      <Grid row>
-        <Grid col={12}>
-          <AlertWrapper showBetaAlert={false} showLimitedDataAlert={true}/>
-          <h2>{intl.formatMessage(messages.cumulativeScore)}</h2>
-        </Grid>
-      </Grid>
+      <J40MainGridContainer fullWidth={true} blueBackground={true}>
+        <J40MainGridContainer>

-      <Grid row>
-        <Grid col={12} tablet={{col: 7}} className={'j40-mb-3'}>
-          <p>{intl.formatMessage(messages.subTitle)}</p>
-        </Grid>
-      </Grid>
-      <div className={styles.datasetCardsContainer}>
-        {cards.map((card) => <DatasetCard
-          key={card.indicator}
-          datasetCardProps={card}/>)}
-      </div>
+          <Grid row>
+            <Grid col={12}>
+              <AlertWrapper showBetaAlert={false} showLimitedDataAlert={true}/>
+              <h2>{intl.formatMessage(messages.cumulativeScore)}</h2>
+            </Grid>
+          </Grid>
+
+          <Grid row>
+            <Grid col={12} tablet={{col: 7}} className={'j40-mb-3'}>
+              <p>{intl.formatMessage(messages.subTitle)}</p>
+            </Grid>
+          </Grid>
+
+          <div className={styles.datasetCardsContainer}>
+            {indicators.map((card) => <DatasetCard
+              key={card.indicator}
+              datasetCardProps={card}
+              additionalIndicator={false}
+            />)}
+          </div>
+
+        </J40MainGridContainer>
+      </J40MainGridContainer>
+
+      <J40MainGridContainer fullWidth={true} blueBackground={false}>
+        <J40MainGridContainer>
+
+          <Grid row>
+            <Grid col={12}>
+              <h2>{intl.formatMessage(messages.additionalSubtitle)}</h2>
+            </Grid>
+          </Grid>
+
+          <Grid row>
+            <Grid col={12} tablet={{col: 7}} className={'j40-mb-3'}>
+              <p>{intl.formatMessage(messages.additionalText)}</p>
+            </Grid>
+          </Grid>
+
+          <div className={styles.datasetCardsContainer}>
+            {additionalIndicators.map((card) => <DatasetCard
+              key={card.indicator}
+              datasetCardProps={card}
+              additionalIndicator={true}
+            />)}
+          </div>
+
+        </J40MainGridContainer>
+      </J40MainGridContainer>
    </>
  );
 };
--- a/client/src/components/DatasetContainer/tests/snapshots/datasetContainer.test.tsx.snap
+++ b/client/src/components/DatasetContainer/tests/snapshots/datasetContainer.test.tsx.snap
--- a/client/src/components/DownloadPacket/index.tsx
+++ b/client/src/components/DownloadPacket/index.tsx
@ -13,13 +13,13 @@ const DownloadPacket = () => {
  const messages = defineMessages({
    downloadPacketHeader: {
      id: 'downloadPacket.header.text',
-      defaultMessage: 'Draft communities list (pre-decisional, 137MB)',
+      defaultMessage: `Draft communities list (${constants.DOWNLOAD_FILE_SIZE})`,
      description: 'download packet header text',
    },
    downloadPacketInfo: {
      id: 'downloadPacket.info.text',
-      defaultMessage: 'The package includes the draft list of prioritized communities (.csv and .xlsx).'+
-      ' This information should not be used to make program resource allocation decisions.',
+      defaultMessage: 'The package includes the draft list of prioritized communities (.csv and .xlsx) '+
+      ` and information about how to use the list (.pdf). Last updated: ${constants.DOWNLOAD_LAST_UPDATED} `,
      description: 'download packet info text',
    },
    downloadPacketButtonText: {
--- a/client/src/components/HowYouCanHelp/index.tsx
+++ b/client/src/components/HowYouCanHelp/index.tsx
@ -35,7 +35,7 @@ const HowYouCanHelp = () => {
    },
    youCanHelpDataMethSuffixText: {
      id: 'youCanHelpDataMethSuffixText.link.suffix.text',
-      defaultMessage: 'and send us feedback',
+      defaultMessage: 'page and send us feedback.',
      description: 'send us feedbackv via email',
    },
    youCanHelpSharingPrefixText: {
@ -62,8 +62,7 @@ const HowYouCanHelp = () => {
            {` `}
            <a href={'mailto:screeningtool.feedback@usds.gov'}>
              {intl.formatMessage(messages.youCanHelpInfoLinkText)}
-            </a>
-            {` `}.
+            </a>.
          </div>
        </li>
        <li className={styles.howYouCanHelpList}>
@ -83,8 +82,7 @@ const HowYouCanHelp = () => {
            {` `}
            <a href={'mailto:screeningtool.feedback@usds.gov'}>
              {intl.formatMessage(messages.youCanHelpSharingLinkText)}
-            </a>
-            {` `}.
+            </a>.
          </div>
        </li>
      </ul>
--- a/client/src/components/HowYouCanHelp/tests/snapshots/howYouCanHelp.test.tsx.snap
+++ b/client/src/components/HowYouCanHelp/tests/snapshots/howYouCanHelp.test.tsx.snap
@ -15,7 +15,7 @@ exports[`rendering of the HowYouCanHelp checks if various text fields are visibl
          >
            recieve an email from you
          </a>
-           .
+          .
        </div>
      </li>
      <li>
@ -26,7 +26,7 @@ exports[`rendering of the HowYouCanHelp checks if various text fields are visibl
          >
            Data and methodology
          </a>
-           and send us feedback
+           page and send us feedback.
        </div>
      </li>
      <li>
@ -37,7 +37,7 @@ exports[`rendering of the HowYouCanHelp checks if various text fields are visibl
          >
            share your feedback
          </a>
-           .
+          .
        </div>
      </li>
    </ul>
--- a/client/src/components/MapLegend/tests/snapshots/mapLegend.test.tsx.snap
+++ b/client/src/components/MapLegend/tests/snapshots/mapLegend.test.tsx.snap
@ -11,7 +11,7 @@ exports[`rendering of the MapLegend checks if snapshots have changed 1`] = `
      <p
        class="secondary"
      >
-        These communities are identified as experiencing disadvantages that merit the focus of certain Federal investments, including through the Justice40 Initiative
+        A community identified as experiencing disadvantages that merits the focus of certain Federal investments, including through the Justice40 Initiative
      </p>
    </div>
  </div>
--- a/client/src/components/MapWrapper/index.tsx
+++ b/client/src/components/MapWrapper/index.tsx
@ -18,12 +18,17 @@ const MapWrapper = ({location}: IMapWrapperProps) => {
  const messages = defineMessages({
    downloadLinkText: {
      id: 'mapwrapper.download.link',
-      defaultMessage: 'Download the draft list of communities of focus and datasets used',
+      defaultMessage: 'Download the draft list ',
+      description: 'download link for datasets',
+    },
+    downloadLinkText1: {
+      id: 'mapwrapper.download1.link',
+      defaultMessage: `of communities of focus and datasets used. Last updated: ${constants.DOWNLOAD_LAST_UPDATED}`,
      description: 'download link for datasets',
    },
    downloadContents: {
      id: 'mapwrapper.download.contents',
-      defaultMessage: 'ZIP file will contain one .xlsx, one .csv, and one .pdf (30 MB).',
+      defaultMessage: `ZIP file will contain one .xlsx, one .csv, and one .pdf (${constants.DOWNLOAD_FILE_SIZE}).`,
      description: 'download link contents',
    },
  });
@ -40,11 +45,14 @@ const MapWrapper = ({location}: IMapWrapperProps) => {
      </Grid>

      <Grid row>
-        <Grid col={6}>
+        <Grid col={7}>
          <div className={styles.mapCaptionTextLink}>
            <a href={constants.DOWNLOAD_ZIP_URL}>
              {intl.formatMessage(messages.downloadLinkText)}
            </a>
+            <span>
+              {intl.formatMessage(messages.downloadLinkText1)}
+            </span>
          </div>
          <div>{intl.formatMessage(messages.downloadContents)}</div>
        </Grid>
--- a/client/src/components/snapshots/scoreStepsList.test.tsx.snap
+++ b/client/src/components/snapshots/scoreStepsList.test.tsx.snap
@ -17,7 +17,7 @@ exports[`rendering of the component should match the snapshot of the MapIntroduc
        The methodology for identifying communities of focus is calculated at the census block group level. Census block geographical boundaries are determined by the U.S. Census Bureau once every ten years. This tool utilizes the census block boundaries from 2010.
      </p>
      <p>
-        The following describes the process for identifying disadvantaged communities.
+        The following describes the process for identifying communities of focus.
      </p>
    </div>
  </div>
@ -36,9 +36,6 @@ exports[`rendering of the component should match the snapshot of the MapIntroduc
      <p>
         
      </p>
-      <h4>
-        Data inputs
-      </h4>
      <p
        class="flush"
      >
@ -87,7 +84,7 @@ exports[`rendering of the component should match the snapshot of the MapIntroduc
        class="usa-process-list__heading"
        data-testid="processListHeading"
      >
-        Current Formula
+        Determine communites of focus
      </h4>
      <p>
         
@ -98,12 +95,17 @@ exports[`rendering of the component should match the snapshot of the MapIntroduc
        Under the existing formula, a census block group will be considered a community of focus if:
      </p>
      <p>
-        (The median income is &lt;80% of the area median income   OR
+        (The median income is less than 80% of the area median income
      </p>
      <p
        class="flush"
      >
-        households living in poverty (at or below 100% of the federal poverty level) is &gt;20%)
+        OR
+      </p>
+      <p
+        class="flush"
+      >
+        households living in poverty (at or below 100% of the federal poverty level) is greater than 20%)
      </p>
      <p
        class="flush"
@ -113,7 +115,7 @@ exports[`rendering of the component should match the snapshot of the MapIntroduc
      <p
        class="flush"
      >
-        The high school degree achievement rate for adults 25 years and older is &lt;95%
+        The high school degree achievement rate for adults 25 years and older is greater than 95%
      </p>
    </li>
  </ol>
--- a/client/src/components/scoreStepsList.tsx
+++ b/client/src/components/scoreStepsList.tsx
@ -19,7 +19,7 @@ const ScoreStepsList = () => {
            block boundaries from 2010.
          </p>
          <p>
-          The following describes the process for identifying disadvantaged communities.
+          The following describes the process for identifying communities of focus.
          </p>
        </Grid>
      </Grid>
@ -29,9 +29,6 @@ const ScoreStepsList = () => {
        <ProcessListItem>
          <ProcessListHeading type="h4">Gather datasets</ProcessListHeading>
          <p>{' '}</p>
-          <h4>
-            Data inputs
-          </h4>
          <p className={'flush'}>
            The methodology includes the following inputs that are equally weighted.
          </p>
@ -69,7 +66,7 @@ const ScoreStepsList = () => {

        <ProcessListItem>
          <ProcessListHeading type="h4">
-            Current Formula
+            Determine communites of focus
          </ProcessListHeading>
          <p>{' '}</p>
          <p className={'flush'}>
@ -77,16 +74,19 @@ const ScoreStepsList = () => {
            community of focus if:
          </p>
          <p>
-            (The median income is &lt;80% of the area median income   OR
+            (The median income is less than 80% of the area median income
          </p>
          <p className={'flush'}>
-            households living in poverty (at or below 100% of the federal poverty level) is &gt;20%)
+            OR
+          </p>
+          <p className={'flush'}>
+            households living in poverty (at or below 100% of the federal poverty level) is greater than 20%)
          </p>
          <p className={'flush'}>
            AND
          </p>
          <p className={'flush'}>
-            The high school degree achievement rate for adults 25 years and older is &lt;95%
+            The high school degree achievement rate for adults 25 years and older is greater than 95%
          </p>
        </ProcessListItem>

--- a/client/src/components/utils.scss
+++ b/client/src/components/utils.scss
@ -10,6 +10,7 @@ $sidePanelBorderColor: #f2f2f2;
 $sidePanelBorder: 2px solid $sidePanelBorderColor;
 $mobileBreakpoint: 400px;
 $featureSelectBorderColor: #00bde3;
+$additionalCardsBGColor: #FAFAFA;

 //Styles with Dataset container
 $datasetContainerColor: #eef6fb;