OCD-5068 | Standardized Download Icon

src/app/components/change-request/change-requests-download.jsx

@@ -1,20 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import {
   Button,
-  makeStyles,
 } from '@material-ui/core';
-import GetAppIcon from '@material-ui/icons/GetApp';
+import CloudDownloadOutlinedIcon from '@material-ui/icons/CloudDownloadOutlined';
 import { useSnackbar } from 'notistack';
 import { object, number, string } from 'prop-types';
 
 import { usePostReportRequest } from 'api/change-requests';
 import { eventTrack } from 'services/analytics.service';
 import { useAnalyticsContext } from 'shared/contexts';
-import { utilStyles } from 'themes';
-
-const useStyles = makeStyles({
-  ...utilStyles,
-});
 
 function ChplChangeRequestsDownload({
   bonusQuery = '',
@@ -25,7 +19,6 @@ function ChplChangeRequestsDownload({
   const { enqueueSnackbar } = useSnackbar();
   const { mutate } = usePostReportRequest();
   const [query, setQuery] = useState({});
-  const classes = useStyles();
 
   useEffect(() => {
     const updated = {
@@ -65,14 +58,14 @@ function ChplChangeRequestsDownload({
       variant="outlined"
       onClick={download}
       disabled={recordCount === 0}
+      endIcon={<CloudDownloadOutlinedIcon />}
     >
       Download
       {' '}
       { recordCount }
       {' '}
       result
       { recordCount === 1 ? '' : 's' }
-      <GetAppIcon className={classes.iconSpacing} />
     </Button>
   );
 }

src/app/components/cms-widget/cms-display.jsx

@@ -19,7 +19,7 @@ import {
 } from '@material-ui/core';
 import Skeleton from '@material-ui/lab/Skeleton';
 import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
-import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
+import CloudDownloadOutlinedIcon from '@material-ui/icons/CloudDownloadOutlined';
 import CompareArrowsIcon from '@material-ui/icons/CompareArrows';
 import DeleteIcon from '@material-ui/icons/Delete';
 import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
@@ -471,7 +471,7 @@ function ChplCmsDisplay() {
               variant="contained"
               id="download-cert-id"
               onClick={downloadPdf}
-              endIcon={<CloudDownloadIcon />}
+              endIcon={<CloudDownloadOutlinedIcon />}
             >
               Download PDF
             </Button>

src/app/components/download-listings/download-listings.jsx

@@ -10,6 +10,7 @@ import {
 import { arrayOf, string } from 'prop-types';
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 import CheckIcon from '@material-ui/icons/Check';
+import CloudDownloadOutlinedIcon from '@material-ui/icons/CloudDownloadOutlined';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { ExportToCsv } from 'export-to-csv';
 
@@ -200,6 +201,7 @@ function ChplDownloadListings({ listings: initialListings = [], toggled = [] })
           variant="contained"
           size="small"
           id="download-listings"
+          endIcon={<CloudDownloadOutlinedIcon />}
         >
           Download
           {' '}

src/app/components/listing/details/sed/sed-download.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import {
   Button,
 } from '@material-ui/core';
-import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
+import CloudDownloadOutlinedIcon from '@material-ui/icons/CloudDownloadOutlined';
 import { ExportToCsv } from 'export-to-csv';
 
 import { listing as listingPropType } from 'shared/prop-types';
@@ -99,7 +99,7 @@ function ChplSedDownload({ listing }) {
         variant="contained"
         size="small"
         id="download-task-details"
-        endIcon={<CloudDownloadIcon />}
+        endIcon={<CloudDownloadOutlinedIcon />}
       >
         Download Task Details
       </Button>

src/app/components/surveillance/complaints/complaints-view.jsx

@@ -16,7 +16,7 @@ import {
   makeStyles,
 } from '@material-ui/core';
 import AddIcon from '@material-ui/icons/Add';
-import GetAppIcon from '@material-ui/icons/GetApp';
+import CloudDownloadOutlinedIcon from '@material-ui/icons/CloudDownloadOutlined';
 import VisibilityIcon from '@material-ui/icons/Visibility';
 import { useSnackbar } from 'notistack';
 import { bool, string } from 'prop-types';
@@ -204,7 +204,7 @@ function ChplComplaintsView(props) {
           color="secondary"
           variant="contained"
           id="download-results"
-          endIcon={<GetAppIcon />}
+          endIcon={<CloudDownloadOutlinedIcon />}
           size="small"
         >
           Download all complaints
@@ -246,7 +246,7 @@ function ChplComplaintsView(props) {
             color="secondary"
             variant="contained"
             id="download-results"
-            endIcon={<GetAppIcon />}
+            endIcon={<CloudDownloadOutlinedIcon />}
             size="small"
           >
             Download all complaints
@@ -260,7 +260,7 @@ function ChplComplaintsView(props) {
         color="secondary"
         variant="contained"
         id="download-results"
-        endIcon={<GetAppIcon />}
+        endIcon={<CloudDownloadOutlinedIcon />}
         size="small"
       >
         Download all complaints

src/app/components/surveillance/reporting/annual.jsx

@@ -145,7 +145,7 @@ function ChplAnnual({
                   size="small"
                   variant="outlined"
                   onClick={download}
-                  endIcon={<CloudDownloadOutlinedIcon fontSize="small" />}
+                  endIcon={<CloudDownloadOutlinedIcon />}
                 >
                   Download
                 </Button>

src/app/components/surveillance/reporting/quarter.jsx

@@ -159,7 +159,7 @@ function ChplQuarter({
                  size="small"
                  variant="outlined"
                  onClick={download}
-                 endIcon={<CloudDownloadOutlinedIcon fontSize="small" />}
+                 endIcon={<CloudDownloadOutlinedIcon />}
                >
                  Download
                </Button>

src/app/pages/administration/cms/cms.jsx

@@ -6,7 +6,7 @@ import {
   makeStyles,
 } from '@material-ui/core';
 import { useSnackbar } from 'notistack';
-import GetAppIcon from '@material-ui/icons/GetApp';
+import CloudDownloadOutlinedIcon from '@material-ui/icons/CloudDownloadOutlined';
 
 import { usePostReportRequest } from 'api/cms';
 import { FlagContext } from 'shared/contexts';
@@ -63,10 +63,9 @@ function ChplCms() {
         color="primary"
         variant="contained"
         id="download-results"
+        endIcon={<CloudDownloadOutlinedIcon />}
       >
         Download the CMS listing
-        {' '}
-        <GetAppIcon className={classes.iconSpacing} />
       </Button>
     </>
   );

src/app/pages/listing/listing.jsx

@@ -9,8 +9,8 @@ import {
   Typography,
   makeStyles,
 } from '@material-ui/core';
+import CloudDownloadOutlinedIcon from '@material-ui/icons/CloudDownloadOutlined';
 import {
-  CloudDownload,
   Edit,
   Star,
   StarOutline,
@@ -272,7 +272,7 @@ function ChplListingPage({ id }) {
                         size="small"
                         id={`download-original-csv-${listing.id}`}
                         onClick={downloadOriginalCsv}
-                        endIcon={<CloudDownload />}
+                        endIcon={<CloudDownloadOutlinedIcon />}
                       >
                         Original CSV
                       </Button>
@@ -285,7 +285,7 @@ function ChplListingPage({ id }) {
                         size="small"
                         id={`download-current-csv-${listing.id}`}
                         onClick={downloadCurrentCsv}
-                        endIcon={<CloudDownload />}
+                        endIcon={<CloudDownloadOutlinedIcon />}
                       >
                         Current CSV
                       </Button>

src/app/pages/organizations/developers/developers-view.jsx

@@ -11,6 +11,7 @@ import {
   Typography,
   makeStyles,
 } from '@material-ui/core';
+import CloudDownloadOutlinedIcon from '@material-ui/icons/CloudDownloadOutlined';
 
 import ChplMessaging from './messaging/messaging';
 
@@ -237,6 +238,7 @@ function ChplDevelopersView() {
                         variant="outlined"
                         color="primary"
                         style={{ marginRight: '8px' }}
+                        endIcon={<CloudDownloadOutlinedIcon />}
                       >
                         Download information for
                         {' '}

src/app/pages/reports/questionable-activity/questionable-activity-view.jsx

@@ -10,6 +10,7 @@ import {
   Typography,
   makeStyles,
 } from '@material-ui/core';
+import CloudDownloadOutlinedIcon from '@material-ui/icons/CloudDownloadOutlined';
 
 import { useFetchQuestionableActivity } from 'api/questionable-activity';
 import ChplQuestionableActivityDetails from 'components/activity/questionable-activity-details';
@@ -217,6 +218,7 @@ function ChplQuestionableActivityView() {
                     size="small"
                     id="download-filtered-results"
                     onClick={handleClick}
+                    endIcon={<CloudDownloadOutlinedIcon />}
                   >
                     Download Filtered Results
                   </Button>

src/app/pages/resources/api/api.jsx

@@ -12,7 +12,7 @@ import {
   Typography,
   makeStyles,
 } from '@material-ui/core';
-import GetAppIcon from '@material-ui/icons/GetApp';
+import CloudDownloadOutlinedIcon from '@material-ui/icons/CloudDownloadOutlined';
 import SwaggerUI from 'swagger-ui-react';
 
 import { ChplLink, ChplTextField } from 'components/util';
@@ -196,10 +196,9 @@ function ChplResourcesApi() {
                     variant="contained"
                     id="download-chpl-data-button"
                     onClick={() => downloadFile('data')}
+                    endIcon={<CloudDownloadOutlinedIcon />}
                   >
                     Download Data File
-                    {' '}
-                    <GetAppIcon className={classes.iconSpacing} />
                   </Button>
                 </CardActions>
               </Card>

src/app/pages/resources/cms-lookup/cms-lookup.jsx

@@ -16,7 +16,7 @@ import {
   Typography,
   makeStyles,
 } from '@material-ui/core';
-import GetAppIcon from '@material-ui/icons/GetApp';
+import CloudDownloadOutlinedIcon from '@material-ui/icons/CloudDownloadOutlined';
 import WarningIcon from '@material-ui/icons/Warning';
 import { ExportToCsv } from 'export-to-csv';
 
@@ -201,7 +201,7 @@ function ChplCmsLookup() {
                   fullWidth
                   id="download-listing-data"
                   onClick={downloadListingData}
-                  endIcon={<GetAppIcon />}
+                  endIcon={<CloudDownloadOutlinedIcon />}
                 >
                   Download Result
                   { listings.length !== 1 ? 's' : '' }

src/app/pages/resources/download/download.jsx

@@ -13,7 +13,7 @@ import {
   makeStyles,
 } from '@material-ui/core';
 import CodeIcon from '@material-ui/icons/Code';
-import GetAppIcon from '@material-ui/icons/GetApp';
+import CloudDownloadOutlinedIcon from '@material-ui/icons/CloudDownloadOutlined';
 import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
 
 import { ChplLink, ChplTextField } from 'components/util';
@@ -238,10 +238,9 @@ function ChplResourcesDownload() {
                         variant="contained"
                         id="download-chpl-data-button"
                         onClick={() => downloadFile('data')}
+                        endIcon={<CloudDownloadOutlinedIcon />}
                       >
                         Data File
-                        {' '}
-                        <GetAppIcon className={classes.iconSpacing} />
                       </Button>
                       { files[selectedOption]?.definition
                         && (

src/app/pages/surveillance/activity-reporting/activity-reporting.jsx

@@ -9,7 +9,7 @@ import {
   MenuItem,
   makeStyles,
 } from '@material-ui/core';
-import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
+import CloudDownloadOutlinedIcon from '@material-ui/icons/CloudDownloadOutlined';
 import { useSnackbar } from 'notistack';
 import { useFormik } from 'formik';
 import * as yup from 'yup';
@@ -28,7 +28,7 @@ const useStyles = makeStyles({
     paddingTop: '16px',
     gap: '16px',
   },
-  formContent:{
+  formContent: {
     display: 'flex',
     flexDirection: 'column',
     gap: '16px',
@@ -176,7 +176,7 @@ function ChplSurveillanceActivityReporting() {
               id="download-results"
               disabled={!formik.isValid}
               onClick={formik.handleSubmit}
-              endIcon={<CloudDownloadIcon />}
+              endIcon={<CloudDownloadOutlinedIcon />}
             >
               Download Results
             </Button>