From 45c6e137f85f8add19bea88726bdc3083696f858 Mon Sep 17 00:00:00 2001
From: Michael Levin <michael.levin@gsa.gov>
Date: Tue, 14 Jan 2025 11:41:08 -0500
Subject: [PATCH 1/2] [Feature] Add time filter to devices chart

---
 .../dashboard_content/DevicesChart.js         | 85 +++++++++++++------
 .../__tests__/DevicesChart.spec.js            | 12 +--
 .../DeviceDemographics.spec.js.snap           | 22 ++++-
 .../__snapshots__/DevicesChart.spec.js.snap   | 74 ++++++++++++++--
 js/components/select/FilterSelect.js          | 58 +++++++++++++
 .../agency_select/AgencySelect.js             |  0
 .../__tests__/AgencySelect.spec.js            |  0
 .../__snapshots__/AgencySelect.spec.js.snap   |  0
 .../agency_select/__tests__/index.spec.js     |  0
 .../{ => select}/agency_select/index.js       |  0
 js/lib/react_setup.js                         |  2 +-
 11 files changed, 208 insertions(+), 45 deletions(-)
 create mode 100644 js/components/select/FilterSelect.js
 rename js/components/{ => select}/agency_select/AgencySelect.js (100%)
 rename js/components/{ => select}/agency_select/__tests__/AgencySelect.spec.js (100%)
 rename js/components/{ => select}/agency_select/__tests__/__snapshots__/AgencySelect.spec.js.snap (100%)
 rename js/components/{ => select}/agency_select/__tests__/index.spec.js (100%)
 rename js/components/{ => select}/agency_select/index.js (100%)

diff --git a/js/components/dashboard_content/DevicesChart.js b/js/components/dashboard_content/DevicesChart.js
index c34df0a3..8c8e1ff9 100644
--- a/js/components/dashboard_content/DevicesChart.js
+++ b/js/components/dashboard_content/DevicesChart.js
@@ -7,6 +7,7 @@ import barChart from "../../lib/chart_helpers/barchart";
 import formatters from "../../lib/chart_helpers/formatters";
 import transformers from "../../lib/chart_helpers/transformers";
 import Tooltip from "../tooltip/Tooltip";
+import FilterSelect from "../select/FilterSelect";
 
 /**
  * Retrieves the devices report from the passed data URL and creates a
@@ -20,40 +21,59 @@ import Tooltip from "../tooltip/Tooltip";
  * @returns {import('react').ReactElement} The rendered element
  */
 function DevicesChart({ dataHrefBase }) {
-  const jsonDataURL = `${dataHrefBase}/devices.json`;
-  const csvDataURL = `${dataHrefBase}/devices.csv`;
+  const chartBuilder = new ChartBuilder();
+  const reportFilters = [
+    ["30 Days", "devices"],
+    ["7 Days", "devices-7-days"],
+    ["90 Days", "devices-90-days"],
+  ];
+  const [dataFileName, setDataFileName] = useState("devices");
   const ref = useRef(null);
-  const [deviceData, setDeviceData] = useState(null);
 
   useEffect(() => {
     const initDevicesChart = async () => {
-      if (!deviceData) {
-        const data = await DataLoader.loadJSON(jsonDataURL);
-        await setDeviceData(data);
-      } else {
-        const chartBuilder = new ChartBuilder();
-        await chartBuilder
-          .setElement(ref.current)
-          .setData(deviceData)
-          .setTransformer((d) => {
-            const devices = transformers.listify(d.totals.by_device);
-            devices.forEach((device) => {
-              if (device.key === "smart tv") {
-                device.key = "Smart TV";
-              }
-            });
-            return transformers.findProportionsOfMetricFromValue(devices);
-          })
-          .setRenderer(
-            barChart()
-              .value((d) => d.proportion)
-              .format(formatters.floatToPercent),
-          )
-          .build();
+      if (dataFileName) {
+        let data;
+
+        try {
+          data = await DataLoader.loadJSON(
+            `${dataHrefBase}/${dataFileName}.json`,
+          );
+        } catch (e) {
+          data = { totals: {} };
+        }
+        await buildChartForDeviceData(data);
       }
     };
     initDevicesChart().catch(console.error);
-  }, [deviceData]);
+  }, [dataFileName]);
+
+  function buildChartForDeviceData(data) {
+    return chartBuilder
+      .setElement(ref.current)
+      .setData(data)
+      .setTransformer((d) => {
+        const devices = transformers.listify(d.totals.by_device);
+        devices.forEach((device) => {
+          if (device.key === "smart tv") {
+            device.key = "Smart TV";
+          }
+        });
+        return transformers.findProportionsOfMetricFromValue(devices);
+      })
+      .setRenderer(
+        barChart()
+          .value((d) => d.proportion)
+          .format(formatters.floatToPercent),
+      )
+      .build();
+  }
+
+  async function dataFileChangeHandler(fileName) {
+    if (!fileName) return;
+
+    await setDataFileName(fileName);
+  }
 
   return (
     <>
@@ -66,7 +86,10 @@ function DevicesChart({ dataHrefBase }) {
             Devices
           </Tooltip>
         </a>
-        <a href={csvDataURL} aria-label="devices.csv">
+        <a
+          href={`${dataHrefBase}/${dataFileName}.csv`}
+          aria-label={`${dataHrefBase}/${dataFileName}.csv`}
+        >
           <svg
             className="usa-icon margin-bottom-neg-05 margin-left-05"
             aria-hidden="true"
@@ -80,6 +103,12 @@ function DevicesChart({ dataHrefBase }) {
       <figure id="chart_device_types" ref={ref}>
         <div className="data chart__bar-chart text--capitalize margin-top-2"></div>
       </figure>
+      <FilterSelect
+        filters={reportFilters}
+        defaultFilterValue={dataFileName || ""}
+        onChange={dataFileChangeHandler}
+        name={"Device chart time filter"}
+      />
     </>
   );
 }
diff --git a/js/components/dashboard_content/__tests__/DevicesChart.spec.js b/js/components/dashboard_content/__tests__/DevicesChart.spec.js
index a0593825..c2786b21 100644
--- a/js/components/dashboard_content/__tests__/DevicesChart.spec.js
+++ b/js/components/dashboard_content/__tests__/DevicesChart.spec.js
@@ -20,7 +20,7 @@ describe("DevicesChart", () => {
         return Promise.resolve(null);
       });
       component = render(
-        <DevicesChart dataHrefBase="http://www.example.com/data/" />,
+        <DevicesChart dataHrefBase="http://www.example.com/data" />,
       );
     });
 
@@ -55,7 +55,7 @@ describe("DevicesChart", () => {
         return Promise.resolve(data);
       });
       component = render(
-        <DevicesChart dataHrefBase="http://www.example.com/data/" />,
+        <DevicesChart dataHrefBase="http://www.example.com/data" />,
       );
       await waitFor(() => screen.getByText("mobile"));
       // Wait for barchart transition animation to complete (200 ms, set in
@@ -77,16 +77,12 @@ describe("DevicesChart", () => {
         return Promise.reject(error);
       });
       component = render(
-        <DevicesChart dataHrefBase="http://www.example.com/data/" />,
+        <DevicesChart dataHrefBase="http://www.example.com/data" />,
       );
     });
 
-    it("renders a component in error state", () => {
+    it("renders a component with an empty chart", () => {
       expect(component.asFragment()).toMatchSnapshot();
     });
-
-    it("logs the error to console", () => {
-      expect(console.error).toHaveBeenCalledWith(error);
-    });
   });
 });
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/DeviceDemographics.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/DeviceDemographics.spec.js.snap
index 6d1e8a12..9cc53d27 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/DeviceDemographics.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/DeviceDemographics.spec.js.snap
@@ -37,7 +37,7 @@ exports[`DeviceDemographics renders 1`] = `
           </span>
         </a>
         <a
-          aria-label="devices.csv"
+          aria-label="http://www.example.com/data//devices.csv"
           href="http://www.example.com/data//devices.csv"
         >
           <svg
@@ -59,6 +59,26 @@ exports[`DeviceDemographics renders 1`] = `
           class="data chart__bar-chart text--capitalize margin-top-2"
         />
       </figure>
+      <select
+        aria-label="Device chart time filter"
+        class="usa-select"
+      >
+        <option
+          value="devices"
+        >
+          30 Days
+        </option>
+        <option
+          value="devices-7-days"
+        >
+          7 Days
+        </option>
+        <option
+          value="devices-90-days"
+        >
+          90 Days
+        </option>
+      </select>
       <div
         class="chart__title desktop:padding-top-2"
       >
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/DevicesChart.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/DevicesChart.spec.js.snap
index 94d79c24..c3e155da 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/DevicesChart.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/DevicesChart.spec.js.snap
@@ -30,8 +30,8 @@ exports[`DevicesChart when data is loaded renders a component with data loaded 1
       </span>
     </a>
     <a
-      aria-label="devices.csv"
-      href="http://www.example.com/data//devices.csv"
+      aria-label="http://www.example.com/data/devices.csv"
+      href="http://www.example.com/data/devices.csv"
     >
       <svg
         aria-hidden="true"
@@ -143,6 +143,26 @@ exports[`DevicesChart when data is loaded renders a component with data loaded 1
       </div>
     </div>
   </figure>
+  <select
+    aria-label="Device chart time filter"
+    class="usa-select"
+  >
+    <option
+      value="devices"
+    >
+      30 Days
+    </option>
+    <option
+      value="devices-7-days"
+    >
+      7 Days
+    </option>
+    <option
+      value="devices-90-days"
+    >
+      90 Days
+    </option>
+  </select>
 </DocumentFragment>
 `;
 
@@ -176,8 +196,8 @@ exports[`DevicesChart when data is not loaded renders a component in loading sta
       </span>
     </a>
     <a
-      aria-label="devices.csv"
-      href="http://www.example.com/data//devices.csv"
+      aria-label="http://www.example.com/data/devices.csv"
+      href="http://www.example.com/data/devices.csv"
     >
       <svg
         aria-hidden="true"
@@ -198,10 +218,30 @@ exports[`DevicesChart when data is not loaded renders a component in loading sta
       class="data chart__bar-chart text--capitalize margin-top-2"
     />
   </figure>
+  <select
+    aria-label="Device chart time filter"
+    class="usa-select"
+  >
+    <option
+      value="devices"
+    >
+      30 Days
+    </option>
+    <option
+      value="devices-7-days"
+    >
+      7 Days
+    </option>
+    <option
+      value="devices-90-days"
+    >
+      90 Days
+    </option>
+  </select>
 </DocumentFragment>
 `;
 
-exports[`DevicesChart when data loading has an error renders a component in error state 1`] = `
+exports[`DevicesChart when data loading has an error renders a component with an empty chart 1`] = `
 <DocumentFragment>
   <div
     class="chart__title"
@@ -231,8 +271,8 @@ exports[`DevicesChart when data loading has an error renders a component in erro
       </span>
     </a>
     <a
-      aria-label="devices.csv"
-      href="http://www.example.com/data//devices.csv"
+      aria-label="http://www.example.com/data/devices.csv"
+      href="http://www.example.com/data/devices.csv"
     >
       <svg
         aria-hidden="true"
@@ -253,5 +293,25 @@ exports[`DevicesChart when data loading has an error renders a component in erro
       class="data chart__bar-chart text--capitalize margin-top-2"
     />
   </figure>
+  <select
+    aria-label="Device chart time filter"
+    class="usa-select"
+  >
+    <option
+      value="devices"
+    >
+      30 Days
+    </option>
+    <option
+      value="devices-7-days"
+    >
+      7 Days
+    </option>
+    <option
+      value="devices-90-days"
+    >
+      90 Days
+    </option>
+  </select>
 </DocumentFragment>
 `;
diff --git a/js/components/select/FilterSelect.js b/js/components/select/FilterSelect.js
new file mode 100644
index 00000000..37217868
--- /dev/null
+++ b/js/components/select/FilterSelect.js
@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+
+/**
+ * Creates a select tag with options populated from the provided props. When an
+ * option is chosen, the browser is redirected to the page for that agency.
+ *
+ * @param {object} props the properties for the component
+ * @param {string[][]} props.filters the name and value of each filter option.
+ * @param {string} props.defaultFilterValue the value of the option which should
+ * be selected by default.
+ * @param {Function} props.onChange a function to call when the selected option
+ * is changed.
+ * @param {string} props.name an accessible name for the select element.
+ * @returns {import('react').ReactElement} The rendered element
+ */
+function FilterSelect({ filters, defaultFilterValue, onChange, name }) {
+  const [selectedFilter, setSelectedFilter] = useState(defaultFilterValue);
+  const sortedFilters = filters.sort((a, b) => {
+    // Sort by display name, which is array index 0
+    if (a[0] < b[0]) {
+      return -1;
+    } else if (a[0] > b[0]) {
+      return 1;
+    }
+    return 0;
+  });
+
+  useEffect(() => {
+    onChange(selectedFilter);
+  }, [selectedFilter]);
+
+  return (
+    <select
+      className="usa-select"
+      value={selectedFilter}
+      onChange={(e) => setSelectedFilter(e.target.value)}
+      aria-label={name}
+    >
+      {sortedFilters.map((filter, index) => {
+        return (
+          <option key={index} value={filter[1]}>
+            {filter[0]}
+          </option>
+        );
+      })}
+    </select>
+  );
+}
+
+FilterSelect.propTypes = {
+  filters: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)).isRequired,
+  defaultFilterValue: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired,
+};
+
+export default FilterSelect;
diff --git a/js/components/agency_select/AgencySelect.js b/js/components/select/agency_select/AgencySelect.js
similarity index 100%
rename from js/components/agency_select/AgencySelect.js
rename to js/components/select/agency_select/AgencySelect.js
diff --git a/js/components/agency_select/__tests__/AgencySelect.spec.js b/js/components/select/agency_select/__tests__/AgencySelect.spec.js
similarity index 100%
rename from js/components/agency_select/__tests__/AgencySelect.spec.js
rename to js/components/select/agency_select/__tests__/AgencySelect.spec.js
diff --git a/js/components/agency_select/__tests__/__snapshots__/AgencySelect.spec.js.snap b/js/components/select/agency_select/__tests__/__snapshots__/AgencySelect.spec.js.snap
similarity index 100%
rename from js/components/agency_select/__tests__/__snapshots__/AgencySelect.spec.js.snap
rename to js/components/select/agency_select/__tests__/__snapshots__/AgencySelect.spec.js.snap
diff --git a/js/components/agency_select/__tests__/index.spec.js b/js/components/select/agency_select/__tests__/index.spec.js
similarity index 100%
rename from js/components/agency_select/__tests__/index.spec.js
rename to js/components/select/agency_select/__tests__/index.spec.js
diff --git a/js/components/agency_select/index.js b/js/components/select/agency_select/index.js
similarity index 100%
rename from js/components/agency_select/index.js
rename to js/components/select/agency_select/index.js
diff --git a/js/lib/react_setup.js b/js/lib/react_setup.js
index 8464a2d1..77e15778 100644
--- a/js/lib/react_setup.js
+++ b/js/lib/react_setup.js
@@ -1,4 +1,4 @@
-require("../components/agency_select");
+require("../components/select/agency_select");
 require("../components/data_downloads");
 require("../components/footer");
 require("../components/historical_data_download");

From 3dab96b70f0f05023b18464ef801b98c5342c7ad Mon Sep 17 00:00:00 2001
From: Michael Levin <michael.levin@gsa.gov>
Date: Wed, 15 Jan 2025 15:15:36 -0500
Subject: [PATCH 2/2] use gray background with cards

---
 .../ConsolidatedBarChart.spec.js.snap         |  38 +-
 .../dashboard_content/DashboardContent.js     |   2 +-
 .../dashboard_content/DeviceDemographics.js   |  90 ++-
 .../OperatingSystemsChart.js                  |   4 +-
 .../dashboard_content/TopDownloads.js         |   2 +-
 .../__snapshots__/BrowsersChart.spec.js.snap  |  20 +-
 .../DeviceDemographics.spec.js.snap           | 442 ++++++------
 .../__snapshots__/DevicesChart.spec.js.snap   |  16 +-
 .../OperatingSystemsChart.spec.js.snap        | 668 +++++++++---------
 .../TopCitiesRealtime.spec.js.snap            |  26 +-
 .../TopCountriesRealtime.spec.js.snap         | 140 ++--
 .../__snapshots__/TopDownloads.spec.js.snap   |  20 +-
 .../TopDownloadsAndVideoPlays.spec.js.snap    | 220 +++---
 .../TopLanguagesHistorical.spec.js.snap       |  20 +-
 .../TopPagesHistorical.spec.js.snap           |  20 +-
 .../TopPagesRealtime.spec.js.snap             |  20 +-
 .../__snapshots__/TopVideoPlays.spec.js.snap  |  20 +-
 js/components/select/FilterSelect.js          |   2 +-
 js/lib/chart_helpers/barchart.js              |   2 +-
 sass/_colors.scss                             |  65 +-
 sass/elements/_chart.scss                     |   7 +
 21 files changed, 976 insertions(+), 868 deletions(-)

diff --git a/js/components/chart/__tests__/__snapshots__/ConsolidatedBarChart.spec.js.snap b/js/components/chart/__tests__/__snapshots__/ConsolidatedBarChart.spec.js.snap
index 5474cd1d..046c76f8 100644
--- a/js/components/chart/__tests__/__snapshots__/ConsolidatedBarChart.spec.js.snap
+++ b/js/components/chart/__tests__/__snapshots__/ConsolidatedBarChart.spec.js.snap
@@ -24,7 +24,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Chrome
         </div>
@@ -42,7 +42,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Safari
         </div>
@@ -60,7 +60,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Edge
         </div>
@@ -78,7 +78,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Firefox
         </div>
@@ -96,7 +96,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Safari (in-app)
         </div>
@@ -114,7 +114,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Samsung Internet
         </div>
@@ -132,7 +132,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Android Webview
         </div>
@@ -150,7 +150,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Opera
         </div>
@@ -168,7 +168,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Amazon Silk
         </div>
@@ -186,7 +186,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Other
         </div>
@@ -217,7 +217,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Chrome
         </div>
@@ -235,7 +235,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Safari
         </div>
@@ -253,7 +253,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Edge
         </div>
@@ -271,7 +271,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Firefox
         </div>
@@ -289,7 +289,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Safari (in-app)
         </div>
@@ -307,7 +307,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Samsung Internet
         </div>
@@ -325,7 +325,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Android Webview
         </div>
@@ -343,7 +343,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Opera
         </div>
@@ -361,7 +361,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Amazon Silk
         </div>
diff --git a/js/components/dashboard_content/DashboardContent.js b/js/components/dashboard_content/DashboardContent.js
index 30bef27c..80ed2ec7 100644
--- a/js/components/dashboard_content/DashboardContent.js
+++ b/js/components/dashboard_content/DashboardContent.js
@@ -298,7 +298,7 @@ function DashboardContent({ dataURL, dataPrefix, agency }) {
                     </Tooltip>
                   </button>
                 </AccordionHeader>
-                <AccordionContent id="30-day-demographics">
+                <AccordionContent id="30-day-demographics" className="bg-light-gray">
                   <article className="min-height-large section">
                     <DeviceDemographics dataHrefBase={dataHrefBase} />
                   </article>
diff --git a/js/components/dashboard_content/DeviceDemographics.js b/js/components/dashboard_content/DeviceDemographics.js
index 72dae58c..b0c8e2c9 100644
--- a/js/components/dashboard_content/DeviceDemographics.js
+++ b/js/components/dashboard_content/DeviceDemographics.js
@@ -6,6 +6,8 @@ import BrowsersChart from "./BrowsersChart";
 import OperatingSystemsChart from "./OperatingSystemsChart";
 import ConsolidatedBarChart from "../chart/ConsolidatedBarChart";
 import Tooltip from "../tooltip/Tooltip";
+import Card from "../card/Card"
+import CardContent from "../card/CardContent"
 
 /**
  * Contains charts and other data visualizations for the user demographics
@@ -22,49 +24,65 @@ import Tooltip from "../tooltip/Tooltip";
 function DeviceDemographics({ dataHrefBase }) {
   return (
     <div className="padding-top-1 grid-row">
-      <div id="devices" className="desktop:grid-col-4 desktop:padding-right-2">
-        <DevicesChart dataHrefBase={dataHrefBase} />
-        <div className="chart__title desktop:padding-top-2">
-          <a href="/definitions#dimension_screen_resolution">
-            <Tooltip
-              position="top"
-              content="The width and height (in pixels) of the screen from which user activity originates."
-            >
-              Top Screen Resolutions
-            </Tooltip>
-          </a>
-          <a
-            href={`${dataHrefBase}/screen-resolution-30-days.csv`}
-            aria-label="screen-resolution-30-days.csv"
-          >
-            <svg
-              className="usa-icon margin-bottom-neg-05 margin-left-05"
-              aria-hidden="true"
-              focusable="false"
-              role="img"
-            >
-              <use xlinkHref="/assets/uswds/img/sprite.svg#file_present"></use>
-            </svg>
-          </a>
-        </div>
-        <div className="text--capitalize">
-          <ConsolidatedBarChart
-            dataUrl={`${dataHrefBase}/screen-resolution-30-days.json`}
-            chartDataKey={"screen_resolution"}
-            maxItems={10}
-          />
-        </div>
+      <div id="devices" className="desktop:grid-col-4">
+        <Card>
+          <CardContent className="padding-105">
+            <DevicesChart dataHrefBase={dataHrefBase} />
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="padding-105">
+            <div className="chart__title">
+              <a href="/definitions#dimension_screen_resolution">
+                <Tooltip
+                  position="top"
+                  content="The width and height (in pixels) of the screen from which user activity originates."
+                >
+                  Top Screen Resolutions
+                </Tooltip>
+              </a>
+              <a
+                href={`${dataHrefBase}/screen-resolution-30-days.csv`}
+                aria-label="screen-resolution-30-days.csv"
+              >
+                <svg
+                  className="usa-icon margin-bottom-neg-05 margin-left-05"
+                  aria-hidden="true"
+                  focusable="false"
+                  role="img"
+                >
+                  <use xlinkHref="/assets/uswds/img/sprite.svg#file_present"></use>
+                </svg>
+              </a>
+            </div>
+            <div className="text--capitalize">
+              <ConsolidatedBarChart
+                dataUrl={`${dataHrefBase}/screen-resolution-30-days.json`}
+                chartDataKey={"screen_resolution"}
+                maxItems={10}
+              />
+            </div>
+          </CardContent>
+        </Card>
       </div>
 
-      <div id="browsers" className="desktop:grid-col-4 desktop:padding-x-2">
-        <BrowsersChart dataHrefBase={dataHrefBase} />
+      <div id="browsers" className="desktop:grid-col-4">
+        <Card>
+          <CardContent className="padding-105">
+            <BrowsersChart dataHrefBase={dataHrefBase} />
+          </CardContent>
+        </Card>
       </div>
 
       <div
         id="operating_systems"
-        className="desktop:grid-col-4 desktop:padding-left-2"
+        className="desktop:grid-col-4"
       >
-        <OperatingSystemsChart dataHrefBase={dataHrefBase} />
+        <Card>
+          <CardContent className="padding-105">
+            <OperatingSystemsChart dataHrefBase={dataHrefBase} />
+          </CardContent>
+        </Card>
       </div>
     </div>
   );
diff --git a/js/components/dashboard_content/OperatingSystemsChart.js b/js/components/dashboard_content/OperatingSystemsChart.js
index f8ccd198..0793cb7d 100644
--- a/js/components/dashboard_content/OperatingSystemsChart.js
+++ b/js/components/dashboard_content/OperatingSystemsChart.js
@@ -59,7 +59,7 @@ function OperatingSystemsChart({ dataHrefBase }) {
   }, [windowsData, chartsLoaded]);
 
   return (
-    <div>
+    <>
       <div className="chart__title">
         <a href="/definitions#dimension_operating_system">
           <Tooltip
@@ -91,7 +91,7 @@ function OperatingSystemsChart({ dataHrefBase }) {
       >
         <div className="data chart__bar-chart text--capitalize"></div>
       </figure>
-    </div>
+    </>
   );
 }
 
diff --git a/js/components/dashboard_content/TopDownloads.js b/js/components/dashboard_content/TopDownloads.js
index da0259c7..17d8fe68 100644
--- a/js/components/dashboard_content/TopDownloads.js
+++ b/js/components/dashboard_content/TopDownloads.js
@@ -54,7 +54,7 @@ function TopDownloads({
                     </a>
                   </div>
                   <div>
-                  <span class="top-download__page-domain text--lowercase dark-grey">
+                  <span class="top-download__page-domain text--lowercase dark-gray">
                     ${formatters.formatURL(d.page)}
                   </span>
                   <span class="divider">/</span>
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/BrowsersChart.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/BrowsersChart.spec.js.snap
index 53d66bc9..2c9cd59f 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/BrowsersChart.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/BrowsersChart.spec.js.snap
@@ -55,7 +55,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Chrome
         </div>
@@ -73,7 +73,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Safari
         </div>
@@ -91,7 +91,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Edge
         </div>
@@ -109,7 +109,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Firefox
         </div>
@@ -127,7 +127,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Safari (in-app)
         </div>
@@ -145,7 +145,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Samsung Internet
         </div>
@@ -163,7 +163,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Android Webview
         </div>
@@ -181,7 +181,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Opera
         </div>
@@ -199,7 +199,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Amazon Silk
         </div>
@@ -217,7 +217,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Internet Explorer
         </div>
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/DeviceDemographics.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/DeviceDemographics.spec.js.snap
index 9cc53d27..71706861 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/DeviceDemographics.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/DeviceDemographics.spec.js.snap
@@ -6,254 +6,284 @@ exports[`DeviceDemographics renders 1`] = `
     class="padding-top-1 grid-row"
   >
     <div
-      class="desktop:grid-col-4 desktop:padding-right-2"
+      class="desktop:grid-col-4"
       id="devices"
     >
-      <div
-        class="chart__title"
+      <li
+        class="usa-card "
       >
-        <a
-          href="/definitions#dimension_device_category"
+        <div
+          class="usa-card__container padding-105"
         >
-          <span
-            class="usa-tooltip"
+          <div
+            class="chart__title"
           >
-            <span
-              aria-describedby="tooltip-550000"
-              class="usa-tooltip__trigger"
-              data-position="top"
-              tabindex="0"
+            <a
+              href="/definitions#dimension_device_category"
             >
-              Devices
-            </span>
-            <span
-              aria-hidden="true"
-              class="usa-tooltip__body"
-              id="tooltip-550000"
-              role="tooltip"
+              <span
+                class="usa-tooltip"
+              >
+                <span
+                  aria-describedby="tooltip-550000"
+                  class="usa-tooltip__trigger"
+                  data-position="top"
+                  tabindex="0"
+                >
+                  Devices
+                </span>
+                <span
+                  aria-hidden="true"
+                  class="usa-tooltip__body"
+                  id="tooltip-550000"
+                  role="tooltip"
+                >
+                  The type category of the device used by the user to access the site or application.
+                </span>
+              </span>
+            </a>
+            <a
+              aria-label="http://www.example.com/data//devices.csv"
+              href="http://www.example.com/data//devices.csv"
             >
-              The type category of the device used by the user to access the site or application.
-            </span>
-          </span>
-        </a>
-        <a
-          aria-label="http://www.example.com/data//devices.csv"
-          href="http://www.example.com/data//devices.csv"
-        >
-          <svg
-            aria-hidden="true"
-            class="usa-icon margin-bottom-neg-05 margin-left-05"
-            focusable="false"
-            role="img"
+              <svg
+                aria-hidden="true"
+                class="usa-icon margin-bottom-neg-05 margin-left-05"
+                focusable="false"
+                role="img"
+              >
+                <use
+                  xlink:href="/assets/uswds/img/sprite.svg#file_present"
+                />
+              </svg>
+            </a>
+          </div>
+          <figure
+            id="chart_device_types"
           >
-            <use
-              xlink:href="/assets/uswds/img/sprite.svg#file_present"
+            <div
+              class="data chart__bar-chart text--capitalize margin-top-2"
             />
-          </svg>
-        </a>
-      </div>
-      <figure
-        id="chart_device_types"
+          </figure>
+          <select
+            aria-label="Device chart time filter"
+            class="usa-select chart__filter"
+          >
+            <option
+              value="devices"
+            >
+              30 Days
+            </option>
+            <option
+              value="devices-7-days"
+            >
+              7 Days
+            </option>
+            <option
+              value="devices-90-days"
+            >
+              90 Days
+            </option>
+          </select>
+        </div>
+      </li>
+      <li
+        class="usa-card "
       >
         <div
-          class="data chart__bar-chart text--capitalize margin-top-2"
-        />
-      </figure>
-      <select
-        aria-label="Device chart time filter"
-        class="usa-select"
-      >
-        <option
-          value="devices"
-        >
-          30 Days
-        </option>
-        <option
-          value="devices-7-days"
+          class="usa-card__container padding-105"
         >
-          7 Days
-        </option>
-        <option
-          value="devices-90-days"
-        >
-          90 Days
-        </option>
-      </select>
-      <div
-        class="chart__title desktop:padding-top-2"
-      >
-        <a
-          href="/definitions#dimension_screen_resolution"
-        >
-          <span
-            class="usa-tooltip"
+          <div
+            class="chart__title"
           >
-            <span
-              aria-describedby="tooltip-550000"
-              class="usa-tooltip__trigger"
-              data-position="top"
-              tabindex="0"
+            <a
+              href="/definitions#dimension_screen_resolution"
             >
-              Top Screen Resolutions
-            </span>
-            <span
-              aria-hidden="true"
-              class="usa-tooltip__body"
-              id="tooltip-550000"
-              role="tooltip"
+              <span
+                class="usa-tooltip"
+              >
+                <span
+                  aria-describedby="tooltip-550000"
+                  class="usa-tooltip__trigger"
+                  data-position="top"
+                  tabindex="0"
+                >
+                  Top Screen Resolutions
+                </span>
+                <span
+                  aria-hidden="true"
+                  class="usa-tooltip__body"
+                  id="tooltip-550000"
+                  role="tooltip"
+                >
+                  The width and height (in pixels) of the screen from which user activity originates.
+                </span>
+              </span>
+            </a>
+            <a
+              aria-label="screen-resolution-30-days.csv"
+              href="http://www.example.com/data//screen-resolution-30-days.csv"
             >
-              The width and height (in pixels) of the screen from which user activity originates.
-            </span>
-          </span>
-        </a>
-        <a
-          aria-label="screen-resolution-30-days.csv"
-          href="http://www.example.com/data//screen-resolution-30-days.csv"
-        >
-          <svg
-            aria-hidden="true"
-            class="usa-icon margin-bottom-neg-05 margin-left-05"
-            focusable="false"
-            role="img"
-          >
-            <use
-              xlink:href="/assets/uswds/img/sprite.svg#file_present"
-            />
-          </svg>
-        </a>
-      </div>
-      <div
-        class="text--capitalize"
-      >
-        <figure
-          id="chart_screen_resolution"
-        >
+              <svg
+                aria-hidden="true"
+                class="usa-icon margin-bottom-neg-05 margin-left-05"
+                focusable="false"
+                role="img"
+              >
+                <use
+                  xlink:href="/assets/uswds/img/sprite.svg#file_present"
+                />
+              </svg>
+            </a>
+          </div>
           <div
-            class="data chart__bar-chart margin-top-2"
-          />
-        </figure>
-      </div>
+            class="text--capitalize"
+          >
+            <figure
+              id="chart_screen_resolution"
+            >
+              <div
+                class="data chart__bar-chart margin-top-2"
+              />
+            </figure>
+          </div>
+        </div>
+      </li>
     </div>
     <div
-      class="desktop:grid-col-4 desktop:padding-x-2"
+      class="desktop:grid-col-4"
       id="browsers"
     >
-      <div
-        class="chart__title"
+      <li
+        class="usa-card "
       >
-        <a
-          href="/definitions#dimension_browser"
+        <div
+          class="usa-card__container padding-105"
         >
-          <span
-            class="usa-tooltip"
+          <div
+            class="chart__title"
           >
-            <span
-              aria-describedby="tooltip-550000"
-              class="usa-tooltip__trigger"
-              data-position="top"
-              tabindex="0"
+            <a
+              href="/definitions#dimension_browser"
             >
-              Web Browsers
-            </span>
-            <span
-              aria-hidden="true"
-              class="usa-tooltip__body"
-              id="tooltip-550000"
-              role="tooltip"
+              <span
+                class="usa-tooltip"
+              >
+                <span
+                  aria-describedby="tooltip-550000"
+                  class="usa-tooltip__trigger"
+                  data-position="top"
+                  tabindex="0"
+                >
+                  Web Browsers
+                </span>
+                <span
+                  aria-hidden="true"
+                  class="usa-tooltip__body"
+                  id="tooltip-550000"
+                  role="tooltip"
+                >
+                  The name of the web browser used by the user to access the site.
+                </span>
+              </span>
+            </a>
+            <a
+              aria-label="browsers.csv"
+              href="http://www.example.com/data//browsers.csv"
             >
-              The name of the web browser used by the user to access the site.
-            </span>
-          </span>
-        </a>
-        <a
-          aria-label="browsers.csv"
-          href="http://www.example.com/data//browsers.csv"
-        >
-          <svg
-            aria-hidden="true"
-            class="usa-icon margin-bottom-neg-05 margin-left-05"
-            focusable="false"
-            role="img"
+              <svg
+                aria-hidden="true"
+                class="usa-icon margin-bottom-neg-05 margin-left-05"
+                focusable="false"
+                role="img"
+              >
+                <use
+                  xlink:href="/assets/uswds/img/sprite.svg#file_present"
+                />
+              </svg>
+            </a>
+          </div>
+          <figure
+            id="chart_browsers"
           >
-            <use
-              xlink:href="/assets/uswds/img/sprite.svg#file_present"
+            <div
+              class="data chart__bar-chart text--capitalize margin-top-2"
             />
-          </svg>
-        </a>
-      </div>
-      <figure
-        id="chart_browsers"
-      >
-        <div
-          class="data chart__bar-chart text--capitalize margin-top-2"
-        />
-      </figure>
+          </figure>
+        </div>
+      </li>
     </div>
     <div
-      class="desktop:grid-col-4 desktop:padding-left-2"
+      class="desktop:grid-col-4"
       id="operating_systems"
     >
-      <div>
+      <li
+        class="usa-card "
+      >
         <div
-          class="chart__title"
+          class="usa-card__container padding-105"
         >
-          <a
-            href="/definitions#dimension_operating_system"
+          <div
+            class="chart__title"
           >
-            <span
-              class="usa-tooltip"
+            <a
+              href="/definitions#dimension_operating_system"
             >
               <span
-                aria-describedby="tooltip-550000"
-                class="usa-tooltip__trigger"
-                data-position="top"
-                tabindex="0"
+                class="usa-tooltip"
               >
-                Operating Systems
+                <span
+                  aria-describedby="tooltip-550000"
+                  class="usa-tooltip__trigger"
+                  data-position="top"
+                  tabindex="0"
+                >
+                  Operating Systems
+                </span>
+                <span
+                  aria-hidden="true"
+                  class="usa-tooltip__body"
+                  id="tooltip-550000"
+                  role="tooltip"
+                >
+                  The name of the operating system used by the user's device.
+                </span>
               </span>
-              <span
+            </a>
+            <a
+              aria-label="os.csv"
+              href="http://www.example.com/data//os.csv"
+            >
+              <svg
                 aria-hidden="true"
-                class="usa-tooltip__body"
-                id="tooltip-550000"
-                role="tooltip"
+                class="usa-icon margin-bottom-neg-05 margin-left-05"
+                focusable="false"
+                role="img"
               >
-                The name of the operating system used by the user's device.
-              </span>
-            </span>
-          </a>
-          <a
-            aria-label="os.csv"
-            href="http://www.example.com/data//os.csv"
+                <use
+                  xlink:href="/assets/uswds/img/sprite.svg#file_present"
+                />
+              </svg>
+            </a>
+          </div>
+          <figure
+            id="chart_os"
           >
-            <svg
-              aria-hidden="true"
-              class="usa-icon margin-bottom-neg-05 margin-left-05"
-              focusable="false"
-              role="img"
-            >
-              <use
-                xlink:href="/assets/uswds/img/sprite.svg#file_present"
-              />
-            </svg>
-          </a>
+            <div
+              class="data chart__bar-chart text--capitalize margin-top-2"
+            />
+          </figure>
+          <figure
+            class="hide chart__bar-chart__nested"
+            data-scale-to-parent="true"
+            id="chart_windows"
+          >
+            <div
+              class="data chart__bar-chart text--capitalize"
+            />
+          </figure>
         </div>
-        <figure
-          id="chart_os"
-        >
-          <div
-            class="data chart__bar-chart text--capitalize margin-top-2"
-          />
-        </figure>
-        <figure
-          class="hide chart__bar-chart__nested"
-          data-scale-to-parent="true"
-          id="chart_windows"
-        >
-          <div
-            class="data chart__bar-chart text--capitalize"
-          />
-        </figure>
-      </div>
+      </li>
     </div>
   </div>
 </DocumentFragment>
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/DevicesChart.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/DevicesChart.spec.js.snap
index c3e155da..7c9a4699 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/DevicesChart.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/DevicesChart.spec.js.snap
@@ -55,7 +55,7 @@ exports[`DevicesChart when data is loaded renders a component with data loaded 1
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           mobile
         </div>
@@ -73,7 +73,7 @@ exports[`DevicesChart when data is loaded renders a component with data loaded 1
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           desktop
         </div>
@@ -91,7 +91,7 @@ exports[`DevicesChart when data is loaded renders a component with data loaded 1
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           tablet
         </div>
@@ -109,7 +109,7 @@ exports[`DevicesChart when data is loaded renders a component with data loaded 1
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Smart TV
         </div>
@@ -127,7 +127,7 @@ exports[`DevicesChart when data is loaded renders a component with data loaded 1
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           (other)
         </div>
@@ -145,7 +145,7 @@ exports[`DevicesChart when data is loaded renders a component with data loaded 1
   </figure>
   <select
     aria-label="Device chart time filter"
-    class="usa-select"
+    class="usa-select chart__filter"
   >
     <option
       value="devices"
@@ -220,7 +220,7 @@ exports[`DevicesChart when data is not loaded renders a component in loading sta
   </figure>
   <select
     aria-label="Device chart time filter"
-    class="usa-select"
+    class="usa-select chart__filter"
   >
     <option
       value="devices"
@@ -295,7 +295,7 @@ exports[`DevicesChart when data loading has an error renders a component with an
   </figure>
   <select
     aria-label="Device chart time filter"
-    class="usa-select"
+    class="usa-select chart__filter"
   >
     <option
       value="devices"
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/OperatingSystemsChart.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/OperatingSystemsChart.spec.js.snap
index 9ed8882f..7cca5f2b 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/OperatingSystemsChart.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/OperatingSystemsChart.spec.js.snap
@@ -2,422 +2,416 @@
 
 exports[`OperatingSystemsChart when data is loaded renders a component with data loaded 1`] = `
 <DocumentFragment>
-  <div>
-    <div
-      class="chart__title"
+  <div
+    class="chart__title"
+  >
+    <a
+      href="/definitions#dimension_operating_system"
     >
-      <a
-        href="/definitions#dimension_operating_system"
+      <span
+        class="usa-tooltip"
       >
         <span
-          class="usa-tooltip"
+          aria-describedby="tooltip-550000"
+          class="usa-tooltip__trigger"
+          data-position="top"
+          tabindex="0"
         >
-          <span
-            aria-describedby="tooltip-550000"
-            class="usa-tooltip__trigger"
-            data-position="top"
-            tabindex="0"
-          >
-            Operating Systems
-          </span>
-          <span
-            aria-hidden="true"
-            class="usa-tooltip__body"
-            id="tooltip-550000"
-            role="tooltip"
-          >
-            The name of the operating system used by the user's device.
-          </span>
+          Operating Systems
         </span>
-      </a>
-      <a
-        aria-label="os.csv"
-        href="http://www.example.com/data//os.csv"
-      >
-        <svg
+        <span
           aria-hidden="true"
-          class="usa-icon margin-bottom-neg-05 margin-left-05"
-          focusable="false"
-          role="img"
+          class="usa-tooltip__body"
+          id="tooltip-550000"
+          role="tooltip"
         >
-          <use
-            xlink:href="/assets/uswds/img/sprite.svg#file_present"
-          />
-        </svg>
-      </a>
-    </div>
-    <figure
-      id="chart_os"
+          The name of the operating system used by the user's device.
+        </span>
+      </span>
+    </a>
+    <a
+      aria-label="os.csv"
+      href="http://www.example.com/data//os.csv"
+    >
+      <svg
+        aria-hidden="true"
+        class="usa-icon margin-bottom-neg-05 margin-left-05"
+        focusable="false"
+        role="img"
+      >
+        <use
+          xlink:href="/assets/uswds/img/sprite.svg#file_present"
+        />
+      </svg>
+    </a>
+  </div>
+  <figure
+    id="chart_os"
+  >
+    <div
+      class="data chart__bar-chart text--capitalize margin-top-2"
     >
       <div
-        class="data chart__bar-chart text--capitalize margin-top-2"
+        class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item margin-bottom-2"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
-          <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
-          >
-            iOS
-          </div>
-          <div
-            class="chart__bar-chart__item__value"
-          >
-            36.6%
-          </div>
-          <div
-            class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
-            style="width: 37%;"
-          />
+          iOS
         </div>
         <div
-          class="chart__bar-chart__item margin-bottom-2"
+          class="chart__bar-chart__item__value"
+        >
+          36.6%
+        </div>
+        <div
+          class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
+          style="width: 37%;"
+        />
+      </div>
+      <div
+        class="chart__bar-chart__item margin-bottom-2"
+      >
+        <div
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
+        >
+          Windows
+        </div>
+        <div
+          class="chart__bar-chart__item__value"
+        >
+          29.9%
+        </div>
+        <div
+          class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
+          style="width: 30%;"
+        />
+        <figure
+          class="chart__bar-chart__nested"
+          data-scale-to-parent="true"
+          id="chart_windows"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
-          >
-            Windows
-          </div>
-          <div
-            class="chart__bar-chart__item__value"
-          >
-            29.9%
-          </div>
-          <div
-            class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
-            style="width: 30%;"
-          />
-          <figure
-            class="chart__bar-chart__nested"
-            data-scale-to-parent="true"
-            id="chart_windows"
+            class="data chart__bar-chart text--capitalize"
           >
             <div
-              class="data chart__bar-chart text--capitalize"
+              class="chart__bar-chart__item margin-bottom-2"
+              data-share="22.82190215063274"
+            >
+              <div
+                class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
+              >
+                10
+              </div>
+              <div
+                class="chart__bar-chart__item__value"
+              >
+                22.8%
+              </div>
+              <div
+                class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
+                style="width: 76%;"
+              />
+            </div>
+            <div
+              class="chart__bar-chart__item margin-bottom-2"
+              data-share="5.590931679869998"
+            >
+              <div
+                class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
+              >
+                11
+              </div>
+              <div
+                class="chart__bar-chart__item__value"
+              >
+                5.6%
+              </div>
+              <div
+                class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
+                style="width: 19%;"
+              />
+            </div>
+            <div
+              class="chart__bar-chart__item margin-bottom-2"
+              data-share="0.82591327878594"
+            >
+              <div
+                class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
+              >
+                2000
+              </div>
+              <div
+                class="chart__bar-chart__item__value"
+              >
+                0.8%
+              </div>
+              <div
+                class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
+                style="width: 3%;"
+              />
+            </div>
+            <div
+              class="chart__bar-chart__item margin-bottom-2"
+              data-share="0.31608292810730126"
             >
               <div
-                class="chart__bar-chart__item margin-bottom-2"
-                data-share="22.82190215063274"
+                class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
               >
-                <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
-                >
-                  10
-                </div>
-                <div
-                  class="chart__bar-chart__item__value"
-                >
-                  22.8%
-                </div>
-                <div
-                  class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
-                  style="width: 76%;"
-                />
+                8
               </div>
               <div
-                class="chart__bar-chart__item margin-bottom-2"
-                data-share="5.590931679869998"
+                class="chart__bar-chart__item__value"
               >
-                <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
-                >
-                  11
-                </div>
-                <div
-                  class="chart__bar-chart__item__value"
-                >
-                  5.6%
-                </div>
-                <div
-                  class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
-                  style="width: 19%;"
-                />
+                0.3%
               </div>
               <div
-                class="chart__bar-chart__item margin-bottom-2"
-                data-share="0.82591327878594"
+                class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
+                style="width: 1%;"
+              />
+            </div>
+            <div
+              class="chart__bar-chart__item margin-bottom-2"
+              data-share="0.268696410359494"
+            >
+              <div
+                class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
               >
-                <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
-                >
-                  2000
-                </div>
-                <div
-                  class="chart__bar-chart__item__value"
-                >
-                  0.8%
-                </div>
-                <div
-                  class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
-                  style="width: 3%;"
-                />
+                7
               </div>
               <div
-                class="chart__bar-chart__item margin-bottom-2"
-                data-share="0.31608292810730126"
+                class="chart__bar-chart__item__value"
               >
-                <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
-                >
-                  8
-                </div>
-                <div
-                  class="chart__bar-chart__item__value"
-                >
-                  0.3%
-                </div>
-                <div
-                  class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
-                  style="width: 1%;"
-                />
+                0.3%
               </div>
               <div
-                class="chart__bar-chart__item margin-bottom-2"
-                data-share="0.268696410359494"
+                class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
+                style="width: 1%;"
+              />
+            </div>
+            <div
+              class="chart__bar-chart__item margin-bottom-2"
+              data-share="0.11880742089218736"
+            >
+              <div
+                class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
               >
-                <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
-                >
-                  7
-                </div>
-                <div
-                  class="chart__bar-chart__item__value"
-                >
-                  0.3%
-                </div>
-                <div
-                  class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
-                  style="width: 1%;"
-                />
+                8.1
               </div>
               <div
-                class="chart__bar-chart__item margin-bottom-2"
-                data-share="0.11880742089218736"
+                class="chart__bar-chart__item__value"
               >
-                <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
-                >
-                  8.1
-                </div>
-                <div
-                  class="chart__bar-chart__item__value"
-                >
-                  0.1%
-                </div>
-                <div
-                  class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
-                  style="width: 0%;"
-                />
+                0.1%
               </div>
+              <div
+                class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
+                style="width: 0%;"
+              />
             </div>
-          </figure>
+          </div>
+        </figure>
+      </div>
+      <div
+        class="chart__bar-chart__item margin-bottom-2"
+      >
+        <div
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
+        >
+          Android
         </div>
         <div
-          class="chart__bar-chart__item margin-bottom-2"
+          class="chart__bar-chart__item__value"
         >
-          <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
-          >
-            Android
-          </div>
-          <div
-            class="chart__bar-chart__item__value"
-          >
-            19.3%
-          </div>
-          <div
-            class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
-            style="width: 19%;"
-          />
+          19.3%
         </div>
         <div
-          class="chart__bar-chart__item margin-bottom-2"
+          class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
+          style="width: 19%;"
+        />
+      </div>
+      <div
+        class="chart__bar-chart__item margin-bottom-2"
+      >
+        <div
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
-          <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
-          >
-            Macintosh
-          </div>
-          <div
-            class="chart__bar-chart__item__value"
-          >
-            10%
-          </div>
-          <div
-            class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
-            style="width: 10%;"
-          />
+          Macintosh
         </div>
         <div
-          class="chart__bar-chart__item margin-bottom-2"
+          class="chart__bar-chart__item__value"
         >
-          <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
-          >
-            Linux
-          </div>
-          <div
-            class="chart__bar-chart__item__value"
-          >
-            2.2%
-          </div>
-          <div
-            class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
-            style="width: 2%;"
-          />
+          10%
         </div>
         <div
-          class="chart__bar-chart__item margin-bottom-2"
+          class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
+          style="width: 10%;"
+        />
+      </div>
+      <div
+        class="chart__bar-chart__item margin-bottom-2"
+      >
+        <div
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
-          <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
-          >
-            Chrome OS
-          </div>
-          <div
-            class="chart__bar-chart__item__value"
-          >
-            1.9%
-          </div>
-          <div
-            class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
-            style="width: 2%;"
-          />
+          Linux
+        </div>
+        <div
+          class="chart__bar-chart__item__value"
+        >
+          2.2%
         </div>
+        <div
+          class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
+          style="width: 2%;"
+        />
       </div>
-    </figure>
-  </div>
+      <div
+        class="chart__bar-chart__item margin-bottom-2"
+      >
+        <div
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
+        >
+          Chrome OS
+        </div>
+        <div
+          class="chart__bar-chart__item__value"
+        >
+          1.9%
+        </div>
+        <div
+          class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
+          style="width: 2%;"
+        />
+      </div>
+    </div>
+  </figure>
 </DocumentFragment>
 `;
 
 exports[`OperatingSystemsChart when data is not loaded renders a component in loading state 1`] = `
 <DocumentFragment>
-  <div>
-    <div
-      class="chart__title"
+  <div
+    class="chart__title"
+  >
+    <a
+      href="/definitions#dimension_operating_system"
     >
-      <a
-        href="/definitions#dimension_operating_system"
+      <span
+        class="usa-tooltip"
       >
         <span
-          class="usa-tooltip"
+          aria-describedby="tooltip-550000"
+          class="usa-tooltip__trigger"
+          data-position="top"
+          tabindex="0"
         >
-          <span
-            aria-describedby="tooltip-550000"
-            class="usa-tooltip__trigger"
-            data-position="top"
-            tabindex="0"
-          >
-            Operating Systems
-          </span>
-          <span
-            aria-hidden="true"
-            class="usa-tooltip__body"
-            id="tooltip-550000"
-            role="tooltip"
-          >
-            The name of the operating system used by the user's device.
-          </span>
+          Operating Systems
         </span>
-      </a>
-      <a
-        aria-label="os.csv"
-        href="http://www.example.com/data//os.csv"
-      >
-        <svg
+        <span
           aria-hidden="true"
-          class="usa-icon margin-bottom-neg-05 margin-left-05"
-          focusable="false"
-          role="img"
+          class="usa-tooltip__body"
+          id="tooltip-550000"
+          role="tooltip"
         >
-          <use
-            xlink:href="/assets/uswds/img/sprite.svg#file_present"
-          />
-        </svg>
-      </a>
-    </div>
-    <figure
-      id="chart_os"
-    >
-      <div
-        class="data chart__bar-chart text--capitalize margin-top-2"
-      />
-    </figure>
-    <figure
-      class="hide chart__bar-chart__nested"
-      data-scale-to-parent="true"
-      id="chart_windows"
+          The name of the operating system used by the user's device.
+        </span>
+      </span>
+    </a>
+    <a
+      aria-label="os.csv"
+      href="http://www.example.com/data//os.csv"
     >
-      <div
-        class="data chart__bar-chart text--capitalize"
-      />
-    </figure>
+      <svg
+        aria-hidden="true"
+        class="usa-icon margin-bottom-neg-05 margin-left-05"
+        focusable="false"
+        role="img"
+      >
+        <use
+          xlink:href="/assets/uswds/img/sprite.svg#file_present"
+        />
+      </svg>
+    </a>
   </div>
+  <figure
+    id="chart_os"
+  >
+    <div
+      class="data chart__bar-chart text--capitalize margin-top-2"
+    />
+  </figure>
+  <figure
+    class="hide chart__bar-chart__nested"
+    data-scale-to-parent="true"
+    id="chart_windows"
+  >
+    <div
+      class="data chart__bar-chart text--capitalize"
+    />
+  </figure>
 </DocumentFragment>
 `;
 
 exports[`OperatingSystemsChart when data loading has an error renders a component in error state 1`] = `
 <DocumentFragment>
-  <div>
-    <div
-      class="chart__title"
+  <div
+    class="chart__title"
+  >
+    <a
+      href="/definitions#dimension_operating_system"
     >
-      <a
-        href="/definitions#dimension_operating_system"
+      <span
+        class="usa-tooltip"
       >
         <span
-          class="usa-tooltip"
+          aria-describedby="tooltip-550000"
+          class="usa-tooltip__trigger"
+          data-position="top"
+          tabindex="0"
         >
-          <span
-            aria-describedby="tooltip-550000"
-            class="usa-tooltip__trigger"
-            data-position="top"
-            tabindex="0"
-          >
-            Operating Systems
-          </span>
-          <span
-            aria-hidden="true"
-            class="usa-tooltip__body"
-            id="tooltip-550000"
-            role="tooltip"
-          >
-            The name of the operating system used by the user's device.
-          </span>
+          Operating Systems
         </span>
-      </a>
-      <a
-        aria-label="os.csv"
-        href="http://www.example.com/data//os.csv"
-      >
-        <svg
+        <span
           aria-hidden="true"
-          class="usa-icon margin-bottom-neg-05 margin-left-05"
-          focusable="false"
-          role="img"
+          class="usa-tooltip__body"
+          id="tooltip-550000"
+          role="tooltip"
         >
-          <use
-            xlink:href="/assets/uswds/img/sprite.svg#file_present"
-          />
-        </svg>
-      </a>
-    </div>
-    <figure
-      id="chart_os"
-    >
-      <div
-        class="data chart__bar-chart text--capitalize margin-top-2"
-      />
-    </figure>
-    <figure
-      class="hide chart__bar-chart__nested"
-      data-scale-to-parent="true"
-      id="chart_windows"
+          The name of the operating system used by the user's device.
+        </span>
+      </span>
+    </a>
+    <a
+      aria-label="os.csv"
+      href="http://www.example.com/data//os.csv"
     >
-      <div
-        class="data chart__bar-chart text--capitalize"
-      />
-    </figure>
+      <svg
+        aria-hidden="true"
+        class="usa-icon margin-bottom-neg-05 margin-left-05"
+        focusable="false"
+        role="img"
+      >
+        <use
+          xlink:href="/assets/uswds/img/sprite.svg#file_present"
+        />
+      </svg>
+    </a>
   </div>
+  <figure
+    id="chart_os"
+  >
+    <div
+      class="data chart__bar-chart text--capitalize margin-top-2"
+    />
+  </figure>
+  <figure
+    class="hide chart__bar-chart__nested"
+    data-scale-to-parent="true"
+    id="chart_windows"
+  >
+    <div
+      class="data chart__bar-chart text--capitalize"
+    />
+  </figure>
 </DocumentFragment>
 `;
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/TopCitiesRealtime.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/TopCitiesRealtime.spec.js.snap
index 737dbe7e..33662db6 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/TopCitiesRealtime.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/TopCitiesRealtime.spec.js.snap
@@ -55,7 +55,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Felixtown
         </div>
@@ -73,7 +73,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           New Alejandrachester
         </div>
@@ -91,7 +91,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           New Penelopeport
         </div>
@@ -109,7 +109,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Erynfort
         </div>
@@ -127,7 +127,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Palm Bay
         </div>
@@ -145,7 +145,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Lake Taya
         </div>
@@ -163,7 +163,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Alexanebury
         </div>
@@ -181,7 +181,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           West Julianabury
         </div>
@@ -199,7 +199,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Rodriguezshire
         </div>
@@ -217,7 +217,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Fort Althea
         </div>
@@ -235,7 +235,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           East Catalinachester
         </div>
@@ -253,7 +253,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Port Reystad
         </div>
@@ -271,7 +271,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Franciscoboro
         </div>
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/TopCountriesRealtime.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/TopCountriesRealtime.spec.js.snap
index 1375ddbd..9e79e1e4 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/TopCountriesRealtime.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/TopCountriesRealtime.spec.js.snap
@@ -58,7 +58,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             International
           </div>
@@ -83,7 +83,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="9.698050008324927"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Saint Vincent and the Grenadines
                 </div>
@@ -102,7 +102,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="9.323918004368139"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Slovakia
                 </div>
@@ -121,7 +121,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="8.973291676052614"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Unknown
                 </div>
@@ -140,7 +140,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="7.841101632665054"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Curacao
                 </div>
@@ -159,7 +159,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="7.367070507232892"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Portugal
                 </div>
@@ -178,7 +178,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="7.112425687785863"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Sudan
                 </div>
@@ -197,7 +197,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="6.5492688755472415"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   French Polynesia
                 </div>
@@ -216,7 +216,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="6.335758988472424"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Montenegro
                 </div>
@@ -235,7 +235,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="5.262333134188026"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Bahrain
                 </div>
@@ -254,7 +254,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="5.183980882050478"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Cocos (Keeling) Islands
                 </div>
@@ -273,7 +273,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="5.117381467733563"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Eritrea
                 </div>
@@ -292,7 +292,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="5.101711017306053"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Sao Tome and Principe
                 </div>
@@ -311,7 +311,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="4.595359587867154"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Jersey
                 </div>
@@ -330,7 +330,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="4.460201952929885"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Sweden
                 </div>
@@ -349,7 +349,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exi
                 data-share="7.078146577475687"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Other
                 </div>
@@ -438,7 +438,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             International
           </div>
@@ -463,7 +463,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="10.14626670573122"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Brunei Darussalam
                 </div>
@@ -482,7 +482,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="9.323657343760566"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Monaco
                 </div>
@@ -501,7 +501,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="9.039688084559735"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   India
                 </div>
@@ -520,7 +520,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="7.4451781569042845"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Democratic Republic of the Congo
                 </div>
@@ -539,7 +539,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="7.1848730026368575"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Unknown
                 </div>
@@ -558,7 +558,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="7.0642987536904736"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   French Southern Territories
                 </div>
@@ -577,7 +577,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="6.18421942259584"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Guinea-Bissau
                 </div>
@@ -596,7 +596,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="5.919406819769669"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Grenada
                 </div>
@@ -615,7 +615,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="5.314281850758378"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Monaco
                 </div>
@@ -634,7 +634,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="4.988618692389173"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Russian Federation
                 </div>
@@ -653,7 +653,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="4.845507200649073"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Jersey
                 </div>
@@ -672,7 +672,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="4.566045390006987"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Iceland
                 </div>
@@ -691,7 +691,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="4.160375019720088"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Guinea
                 </div>
@@ -710,7 +710,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="3.804286583579365"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   United States Minor Outlying Islands
                 </div>
@@ -729,7 +729,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name null e
                 data-share="10.013296973248293"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Other
                 </div>
@@ -818,7 +818,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             International
           </div>
@@ -843,7 +843,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="9.354646504078405"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Zimbabwe
                 </div>
@@ -862,7 +862,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="9.221096751659099"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Malawi
                 </div>
@@ -881,7 +881,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="7.903063425859341"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Kenya
                 </div>
@@ -900,7 +900,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="7.729448747714245"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Jordan
                 </div>
@@ -919,7 +919,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="7.538369871175854"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Lesotho
                 </div>
@@ -938,7 +938,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="6.919931786895687"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Sierra Leone
                 </div>
@@ -957,7 +957,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="6.572702430605494"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Norway
                 </div>
@@ -976,7 +976,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="6.399087752460398"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Turkey
                 </div>
@@ -995,7 +995,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="5.74263935403012"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   India
                 </div>
@@ -1014,7 +1014,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="5.399519220891291"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Grenada
                 </div>
@@ -1033,7 +1033,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="4.113332374514598"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Chad
                 </div>
@@ -1052,7 +1052,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="3.5205769349304514"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Unknown
                 </div>
@@ -1071,7 +1071,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="2.0114647325923034"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Poland
                 </div>
@@ -1090,7 +1090,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="1.8820242033243613"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   North Macedonia
                 </div>
@@ -1109,7 +1109,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="4.434879086108771"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Other
                 </div>
@@ -1130,7 +1130,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             United States & Territories
           </div>
@@ -1155,7 +1155,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="10.180600357502415"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   American Samoa
                 </div>
@@ -1174,7 +1174,7 @@ exports[`TopCountriesRealtime when data is loaded and a country with name undefi
                 data-share="1.0766164656571675"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Puerto Rico
                 </div>
@@ -1255,7 +1255,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             International
           </div>
@@ -1280,7 +1280,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="10.50710035323961"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Cuba
                 </div>
@@ -1299,7 +1299,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="8.976790498091558"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Bahamas
                 </div>
@@ -1318,7 +1318,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="8.840473198833598"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   New Zealand
                 </div>
@@ -1337,7 +1337,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="8.047462127498163"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Finland
                 </div>
@@ -1356,7 +1356,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="7.768900689884071"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Slovenia
                 </div>
@@ -1375,7 +1375,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="6.73644531898248"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Cameroon
                 </div>
@@ -1394,7 +1394,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="6.687845238377468"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Costa Rica
                 </div>
@@ -1413,7 +1413,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="6.377278869633248"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Chile
                 </div>
@@ -1432,7 +1432,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="5.290296579028472"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Bahamas
                 </div>
@@ -1451,7 +1451,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="4.305255920912259"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Jersey
                 </div>
@@ -1470,7 +1470,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="4.295772978355183"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Burundi
                 </div>
@@ -1489,7 +1489,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="4.174865460752471"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Isle of Man
                 </div>
@@ -1508,7 +1508,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="3.925938218629241"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Marshall Islands
                 </div>
@@ -1527,7 +1527,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="3.2135321590289463"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Fiji
                 </div>
@@ -1546,7 +1546,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="4.387046300467035"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   Other
                 </div>
@@ -1567,7 +1567,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             United States & Territories
           </div>
@@ -1592,7 +1592,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="4.750954221094806"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   American Samoa
                 </div>
@@ -1611,7 +1611,7 @@ exports[`TopCountriesRealtime when data is loaded and all country names are vali
                 data-share="1.7140418671913893"
               >
                 <div
-                  class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+                  class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
                 >
                   United States
                 </div>
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/TopDownloads.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/TopDownloads.spec.js.snap
index 9e3d9b34..6d65b30f 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/TopDownloads.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/TopDownloads.spec.js.snap
@@ -12,7 +12,7 @@ exports[`TopDownloads when data is loaded renders a component with data loaded 1
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           <div>
             
@@ -40,7 +40,7 @@ exports[`TopDownloads when data is loaded renders a component with data loaded 1
               
                   
               <span
-                class="top-download__page-domain text--lowercase dark-grey"
+                class="top-download__page-domain text--lowercase dark-gray"
               >
                 
                     robust-childhood.com
@@ -93,7 +93,7 @@ exports[`TopDownloads when data is loaded renders a component with data loaded 1
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           <div>
             
@@ -121,7 +121,7 @@ exports[`TopDownloads when data is loaded renders a component with data loaded 1
               
                   
               <span
-                class="top-download__page-domain text--lowercase dark-grey"
+                class="top-download__page-domain text--lowercase dark-gray"
               >
                 
                     early-locality.org
@@ -174,7 +174,7 @@ exports[`TopDownloads when data is loaded renders a component with data loaded 1
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           <div>
             
@@ -202,7 +202,7 @@ exports[`TopDownloads when data is loaded renders a component with data loaded 1
               
                   
               <span
-                class="top-download__page-domain text--lowercase dark-grey"
+                class="top-download__page-domain text--lowercase dark-gray"
               >
                 
                     wide-intervention.name
@@ -255,7 +255,7 @@ exports[`TopDownloads when data is loaded renders a component with data loaded 1
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           <div>
             
@@ -283,7 +283,7 @@ exports[`TopDownloads when data is loaded renders a component with data loaded 1
               
                   
               <span
-                class="top-download__page-domain text--lowercase dark-grey"
+                class="top-download__page-domain text--lowercase dark-gray"
               >
                 
                     vain-coil.name
@@ -336,7 +336,7 @@ exports[`TopDownloads when data is loaded renders a component with data loaded 1
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           <div>
             
@@ -364,7 +364,7 @@ exports[`TopDownloads when data is loaded renders a component with data loaded 1
               
                   
               <span
-                class="top-download__page-domain text--lowercase dark-grey"
+                class="top-download__page-domain text--lowercase dark-gray"
               >
                 
                     shameful-contest.org
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/TopDownloadsAndVideoPlays.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/TopDownloadsAndVideoPlays.spec.js.snap
index 5828b086..1496ad7f 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/TopDownloadsAndVideoPlays.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/TopDownloadsAndVideoPlays.spec.js.snap
@@ -82,7 +82,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -110,7 +110,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     frayed-bulb.com
@@ -163,7 +163,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -191,7 +191,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     unfit-tune.info
@@ -244,7 +244,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -272,7 +272,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     major-innocence.name
@@ -325,7 +325,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -353,7 +353,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     favorite-dune.org
@@ -406,7 +406,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -434,7 +434,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     criminal-futon.biz
@@ -487,7 +487,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -515,7 +515,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     stark-iris.org
@@ -568,7 +568,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -596,7 +596,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     perfect-reveal.org
@@ -649,7 +649,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -677,7 +677,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     low-superiority.com
@@ -730,7 +730,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -758,7 +758,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     outgoing-fraction.com
@@ -811,7 +811,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -839,7 +839,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     ambitious-venture.biz
@@ -971,7 +971,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <a
               href="https://open-territory.name"
@@ -995,7 +995,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <a
               href="https://athletic-cellar.com"
@@ -1019,7 +1019,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <a
               href="https://difficult-resist.net"
@@ -1043,7 +1043,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <a
               href="https://haunting-shoes.biz"
@@ -1067,7 +1067,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <a
               href="https://jumbo-counselor.net"
@@ -1091,7 +1091,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <a
               href="https://lanky-gratitude.net"
@@ -1115,7 +1115,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <a
               href="https://quaint-boycott.name"
@@ -1139,7 +1139,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <a
               href="https://medical-detail.com"
@@ -1163,7 +1163,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <a
               href="https://oily-cloister.name"
@@ -1187,7 +1187,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has >
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <a
               href="https://long-oeuvre.name"
@@ -1295,7 +1295,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -1323,7 +1323,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     bright-monotheism.net
@@ -1376,7 +1376,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -1404,7 +1404,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     admirable-art.org
@@ -1457,7 +1457,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -1485,7 +1485,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     whimsical-pipe.com
@@ -1538,7 +1538,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -1566,7 +1566,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     ringed-sweatsuit.net
@@ -1619,7 +1619,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -1647,7 +1647,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     pointed-necktie.info
@@ -1700,7 +1700,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -1728,7 +1728,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     quarterly-stallion.org
@@ -1781,7 +1781,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -1809,7 +1809,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     scornful-behest.info
@@ -1862,7 +1862,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -1890,7 +1890,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     emotional-custard.net
@@ -1943,7 +1943,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -1971,7 +1971,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     nervous-recipient.com
@@ -2024,7 +2024,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -2052,7 +2052,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     fitting-scallops.biz
@@ -2105,7 +2105,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -2133,7 +2133,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     heartfelt-crook.biz
@@ -2186,7 +2186,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -2214,7 +2214,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     exciting-disclaimer.info
@@ -2267,7 +2267,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -2295,7 +2295,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     tame-name.name
@@ -2348,7 +2348,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -2376,7 +2376,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     giddy-octagon.org
@@ -2429,7 +2429,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -2457,7 +2457,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     early-dragster.net
@@ -2510,7 +2510,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -2538,7 +2538,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     gray-aggression.info
@@ -2591,7 +2591,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -2619,7 +2619,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     heartfelt-elite.net
@@ -2672,7 +2672,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -2700,7 +2700,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     overjoyed-sage.org
@@ -2753,7 +2753,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -2781,7 +2781,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     critical-lobby.com
@@ -2834,7 +2834,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -2862,7 +2862,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     jumbo-fahrenheit.info
@@ -3071,7 +3071,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -3099,7 +3099,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     robust-childhood.com
@@ -3152,7 +3152,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -3180,7 +3180,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     early-locality.org
@@ -3233,7 +3233,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -3261,7 +3261,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     wide-intervention.name
@@ -3314,7 +3314,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -3342,7 +3342,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     vain-coil.name
@@ -3395,7 +3395,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -3423,7 +3423,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     shameful-contest.org
@@ -3476,7 +3476,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -3504,7 +3504,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     unwelcome-pressroom.com
@@ -3557,7 +3557,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -3585,7 +3585,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     eager-breakdown.net
@@ -3638,7 +3638,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -3666,7 +3666,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     honest-reliability.name
@@ -3719,7 +3719,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -3747,7 +3747,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     hidden-yarn.org
@@ -3800,7 +3800,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -3828,7 +3828,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     outgoing-journalism.name
@@ -3881,7 +3881,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -3909,7 +3909,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     giant-daddy.name
@@ -3962,7 +3962,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -3990,7 +3990,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     smoggy-obligation.name
@@ -4043,7 +4043,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -4071,7 +4071,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     ragged-millet.org
@@ -4124,7 +4124,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -4152,7 +4152,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     indelible-amount.biz
@@ -4205,7 +4205,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -4233,7 +4233,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     lumbering-living.biz
@@ -4286,7 +4286,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -4314,7 +4314,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     suspicious-antler.net
@@ -4367,7 +4367,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -4395,7 +4395,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     lavish-cenotaph.org
@@ -4448,7 +4448,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -4476,7 +4476,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     cool-autumn.info
@@ -4529,7 +4529,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -4557,7 +4557,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     dramatic-quartz.org
@@ -4610,7 +4610,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
           class="chart__bar-chart__item margin-bottom-2"
         >
           <div
-            class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+            class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
           >
             <div>
               
@@ -4638,7 +4638,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em
                 
                   
                 <span
-                  class="top-download__page-domain text--lowercase dark-grey"
+                  class="top-download__page-domain text--lowercase dark-gray"
                 >
                   
                     graceful-cabinet.name
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/TopLanguagesHistorical.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/TopLanguagesHistorical.spec.js.snap
index 3d44fdbe..6ef45dfa 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/TopLanguagesHistorical.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/TopLanguagesHistorical.spec.js.snap
@@ -55,7 +55,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           English
         </div>
@@ -73,7 +73,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Spanish
         </div>
@@ -91,7 +91,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Chinese
         </div>
@@ -109,7 +109,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           French
         </div>
@@ -127,7 +127,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Japanese
         </div>
@@ -145,7 +145,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Portuguese
         </div>
@@ -163,7 +163,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           German
         </div>
@@ -181,7 +181,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Italian
         </div>
@@ -199,7 +199,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Korean
         </div>
@@ -217,7 +217,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           Russian
         </div>
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/TopPagesHistorical.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/TopPagesHistorical.spec.js.snap
index 20960c78..37708c35 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/TopPagesHistorical.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/TopPagesHistorical.spec.js.snap
@@ -12,7 +12,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           <a
             href="http://infinite-flip-flops.com"
@@ -36,7 +36,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           <a
             href="http://defenseless-manicure.com"
@@ -60,7 +60,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           <a
             href="http://crooked-miter.net"
@@ -84,7 +84,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           <a
             href="http://natural-fairy.net"
@@ -108,7 +108,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           <a
             href="http://stylish-photography.net"
@@ -132,7 +132,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           <a
             href="http://formal-popularity.org"
@@ -156,7 +156,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           <a
             href="http://majestic-anticipation.info"
@@ -180,7 +180,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           <a
             href="http://costly-fortnight.name"
@@ -204,7 +204,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           <a
             href="http://posh-retention.org"
@@ -228,7 +228,7 @@ exports[`TopPagesHistorical when data is loaded renders a component with data lo
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           <a
             href="http://educated-tam-o-shanter.com"
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/TopPagesRealtime.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/TopPagesRealtime.spec.js.snap
index 66434044..b87babb4 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/TopPagesRealtime.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/TopPagesRealtime.spec.js.snap
@@ -10,7 +10,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           deploy virtual synergies
         </div>
@@ -28,7 +28,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           leverage back-end paradigms
         </div>
@@ -46,7 +46,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           orchestrate efficient applications
         </div>
@@ -64,7 +64,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           mesh frictionless networks
         </div>
@@ -82,7 +82,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           engineer world-class networks
         </div>
@@ -100,7 +100,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           envisioneer cross-platform web services
         </div>
@@ -118,7 +118,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           syndicate vertical technologies
         </div>
@@ -136,7 +136,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           enable viral interfaces
         </div>
@@ -154,7 +154,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           expedite out-of-the-box blockchains
         </div>
@@ -172,7 +172,7 @@ exports[`TopPagesRealtime when data is loaded renders a component with data load
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           architect visionary paradigms
         </div>
diff --git a/js/components/dashboard_content/__tests__/__snapshots__/TopVideoPlays.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/TopVideoPlays.spec.js.snap
index e249c211..b1aaad56 100644
--- a/js/components/dashboard_content/__tests__/__snapshots__/TopVideoPlays.spec.js.snap
+++ b/js/components/dashboard_content/__tests__/__snapshots__/TopVideoPlays.spec.js.snap
@@ -12,7 +12,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           <a
             href="https://www.youtube.com/watch?v=ijkkPoXQukY"
@@ -36,7 +36,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           <a
             href="https://www.youtube.com/watch?v=6cUe4oMk69E"
@@ -60,7 +60,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           <a
             href="https://www.youtube.com/watch?v=0akd7xj6wec"
@@ -84,7 +84,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           <a
             href="https://www.youtube.com/watch?v=FsQHz2ZdX6E"
@@ -108,7 +108,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           <a
             href="https://www.youtube.com/watch?v=iQrP4n-VeFg"
@@ -132,7 +132,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           <a
             href="https://www.youtube.com/watch?v=j3mk6tUokm4"
@@ -156,7 +156,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           <a
             href="https://www.youtube.com/watch?v=N33FJaziUgY"
@@ -180,7 +180,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           <a
             href="https://www.youtube.com/watch?list=TLGG8tIphgpDAHkyNTA2MjAyNA&v=6cUe4oMk69E"
@@ -204,7 +204,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           <a
             href="https://www.youtube.com/watch?v=hjJIyZKbHqc"
@@ -228,7 +228,7 @@ exports[`TopVideoPlays renders a component with data loaded 1`] = `
         class="chart__bar-chart__item margin-bottom-2"
       >
         <div
-          class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
+          class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
         >
           <a
             href="https://www.youtube.com/watch?list=TLGG8tIphgpDAHkyMzA2MjAyNA&v=6cUe4oMk69E"
diff --git a/js/components/select/FilterSelect.js b/js/components/select/FilterSelect.js
index 37217868..513ca7ea 100644
--- a/js/components/select/FilterSelect.js
+++ b/js/components/select/FilterSelect.js
@@ -32,7 +32,7 @@ function FilterSelect({ filters, defaultFilterValue, onChange, name }) {
 
   return (
     <select
-      className="usa-select"
+      className="usa-select chart__filter"
       value={selectedFilter}
       onChange={(e) => setSelectedFilter(e.target.value)}
       aria-label={name}
diff --git a/js/lib/chart_helpers/barchart.js b/js/lib/chart_helpers/barchart.js
index 579dd712..3fe3f54a 100644
--- a/js/lib/chart_helpers/barchart.js
+++ b/js/lib/chart_helpers/barchart.js
@@ -40,7 +40,7 @@ export default function barChart() {
       .append("div")
       .attr(
         "class",
-        "chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8",
+        "chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8",
       );
     enter.append("div").attr("class", "chart__bar-chart__item__value");
     enter
diff --git a/sass/_colors.scss b/sass/_colors.scss
index 1147e3df..76b9efd5 100644
--- a/sass/_colors.scss
+++ b/sass/_colors.scss
@@ -7,8 +7,7 @@ $orange: color("orange-30v");
 $light-blue: color("blue-50v");
 $light-blue-two: color("blue-50");
 $dark-blue: color("blue-80v");
-$light-gray: color("gray-2");
-$uswds-light-gray: color("gray-cool-30");
+$light-gray: color("gray-cool-10");
 $medium-gray: color("gray-cool-40");
 $gray: color("gray-10");
 $dark-gray: color("gray-cool-70");
@@ -83,7 +82,7 @@ $palette-colors: (
   }
 }
 
-.dark-grey {
+.dark-gray {
   color: $dark-gray;
 
   &:hover {
@@ -95,6 +94,66 @@ $palette-colors: (
   }
 }
 
+.bg-dark-gray {
+  background-color: $dark-gray;
+
+  &:hover {
+    background-color: $dark-gray;
+  }
+
+  &:visited {
+    background-color: $dark-gray;
+  }
+}
+
+.light-gray {
+  color: $light-gray;
+
+  &:hover {
+    color: $light-gray;
+  }
+
+  &:visited {
+    color: $light-gray;
+  }
+}
+
+.bg-light-gray {
+  background-color: $light-gray;
+
+  &:hover {
+    background-color: $light-gray;
+  }
+
+  &:visited {
+    background-color: $light-gray;
+  }
+}
+
+.medium-gray {
+  color: $medium-gray;
+
+  &:hover {
+    color: $medium-gray;
+  }
+
+  &:visited {
+    color: $medium-gray;
+  }
+}
+
+.bg-medium-gray {
+  background-color: $medium-gray;
+
+  &:hover {
+    background-color: $medium-gray;
+  }
+
+  &:visited {
+    background-color: $medium-gray;
+  }
+}
+
 .white {
   color: $white;
 
diff --git a/sass/elements/_chart.scss b/sass/elements/_chart.scss
index c0c19294..5200ad1e 100644
--- a/sass/elements/_chart.scss
+++ b/sass/elements/_chart.scss
@@ -78,6 +78,12 @@
   }
 }
 
+.chart__filter {
+  background-image: url("../assets/uswds/img/usa-icons/arrow_drop_down.svg"),
+    linear-gradient(transparent, transparent);
+  width: fit-content;
+}
+
 .chart__rate {
   font-size: 1.25rem;
 }
@@ -116,6 +122,7 @@
   }
 
   g.axis {
+
     path,
     line {
       fill: none;