1194 Update MaterialUI icons

products/statement-generator/src/components-layout/AppHeader.tsx

@@ -2,8 +2,8 @@ import React, { useContext, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Theme, makeStyles, createStyles } from '@material-ui/core';
-import CloseIcon from '@material-ui/icons/Close';
-import MenuIcon from '@material-ui/icons/Menu';
+import CloseRoundedIcon from '@material-ui/icons/CloseRounded';
+import MenuRoundedIcon from '@material-ui/icons/MenuRounded';
 
 import { AppUrl } from 'contexts/RoutingProps';
 import RoutingContext from 'contexts/RoutingContext';
@@ -172,7 +172,7 @@ const AppHeader = () => {
         <Button
           className={classes.menuButton}
           theme="transparent-on-light"
-          icon={isMenuOpen ? <CloseIcon /> : <MenuIcon />}
+          icon={isMenuOpen ? <CloseRoundedIcon /> : <MenuRoundedIcon />}
           onClick={() => {
             setIsMenuOpen(!isMenuOpen);
           }}

products/statement-generator/src/components/Button.tsx

@@ -1,8 +1,8 @@
 import React, { useContext, forwardRef } from 'react';
 import { Link } from 'react-router-dom';
 import { Button, Theme, makeStyles, createStyles } from '@material-ui/core';
-import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import ArrowForwardRoundedIcon from '@material-ui/icons/ArrowForwardRounded';
+import ArrowBackRoundedIcon from '@material-ui/icons/ArrowBackRounded';
 import { AppUrl } from 'contexts/RoutingProps';
 import RoutingContext from 'contexts/RoutingContext';
 
@@ -166,12 +166,15 @@ const ButtonComponent = forwardRef<HTMLButtonElement, ComponentProps>(
         onKeyDown={onKeyDown}
       >
         {hasBackArrow && (
-          <ArrowBackIcon data-testid="back-arrow" style={{ height: '.8em' }} />
+          <ArrowBackRoundedIcon
+            data-testid="back-arrow"
+            style={{ height: '.8em' }}
+          />
         )}
         {icon}
         {buttonText}
         {hasForwardArrow && (
-          <ArrowForwardIcon
+          <ArrowForwardRoundedIcon
             data-testid="forward-arrow"
             style={{ height: '.8em' }}
           />

products/statement-generator/src/components/FAQAccordion.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { makeStyles, createStyles, Typography } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ExpandMoreRoundedIcon from '@material-ui/icons/ExpandMoreRounded';
 import Accordion from '@material-ui/core/Accordion';
 import AccordionDetails from '@material-ui/core/AccordionDetails';
 import MuiAccordionSummary, {
@@ -85,7 +85,7 @@ export const FAQAccordion: React.FC<CustomAccordionProps> = ({
       onChange={handleAccordionChange}
     >
       <AccordionSummary aria-controls="panel1-content" id="panel1-header">
-        <ExpandMoreIcon
+        <ExpandMoreRoundedIcon
           className={`${classes.expandIcon} ${
             expanded ? classes.rotateIcon : classes.rightIcon
           }`}

products/statement-generator/src/components/InfoBlock.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Theme, makeStyles, createStyles } from '@material-ui/core';
-import InfoIcon from '@material-ui/icons/Info';
+import InfoRoundedIcon from '@material-ui/icons/InfoRounded';
 
 const useStyles = makeStyles<Theme>(() =>
   createStyles({
@@ -42,7 +42,7 @@ export function InfoBlock({
   const classes = useStyles();
   return (
     <div className={`${classes.infoBlockContainer} ${className}`}>
-      <InfoIcon className={classes.icon} />
+      <InfoRoundedIcon className={classes.icon} />
       <div className={classes.infoInner}>
         {title && <div className={classes.title}>{title}</div>}
         {children}

products/statement-generator/src/components/Input.tsx

@@ -3,7 +3,7 @@ import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
 import OutlinedInput from '@material-ui/core/OutlinedInput';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import InputLabel from '@material-ui/core/InputLabel';
-import CheckCircleIcon from '@material-ui/icons/CheckCircle';
+import CheckCircleRoundedIcon from '@material-ui/icons/CheckCircleRounded';
 
 import useUtilityStyles from 'styles/utilityStyles';
 
@@ -147,7 +147,7 @@ const InputArea: React.FC<InputFieldProps> = ({
             {adornment !== undefined && <span>{adornment}</span>}
 
             {valid ? (
-              <CheckCircleIcon
+              <CheckCircleRoundedIcon
                 className={classes.icon}
                 data-testid="valid-icon"
               />

products/statement-generator/src/components/LandingAccordions.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { makeStyles, createStyles } from '@material-ui/core';
 import Accordion from '@material-ui/core/Accordion';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ExpandMoreRoundedIcon from '@material-ui/icons/ExpandMoreRounded';
 import Typography from '@material-ui/core/Typography';
 import AccordionDetails from '@material-ui/core/AccordionDetails';
 import { useTranslation } from 'react-i18next';
@@ -25,7 +25,7 @@ const useStyles = makeStyles(({ palette }) =>
 
 // override default MUI styling
 const AccordionSummary = styled((props: AccordionSummaryProps) => (
-  <MuiAccordionSummary expandIcon={<ExpandMoreIcon />} {...props} />
+  <MuiAccordionSummary expandIcon={<ExpandMoreRoundedIcon />} {...props} />
 ))(() => ({
   '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
     transform: 'rotate(90deg)',

products/statement-generator/src/components/PopUp.tsx

@@ -5,7 +5,7 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
-import HelpIcon from '@material-ui/icons/Help';
+import HelpRoundedIcon from '@material-ui/icons/HelpRounded';
 import IconButton from '@material-ui/core/IconButton';
 import { makeStyles, createStyles } from '@material-ui/core/styles';
 
@@ -48,7 +48,7 @@ const AlertDialog: React.FC<AlertDialogProps> = ({ title, info }) => {
         className={classes.infoButton}
         onClick={handleClickOpen}
       >
-        <HelpIcon fontSize="large" />
+        <HelpRoundedIcon fontSize="large" />
       </IconButton>
       <Dialog
         open={open}

products/statement-generator/src/components/TextPreview.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 
 import { makeStyles, createStyles } from '@material-ui/core';
-import CreateIcon from '@material-ui/icons/Create';
+import CreateRoundedIcon from '@material-ui/icons/CreateRounded';
 
 import useUtilityStyles from 'styles/utilityStyles';
 
@@ -100,7 +100,7 @@ const TextPreview = ({
               ref={editButtonRef}
               tabIndex={0}
             >
-              <CreateIcon />
+              <CreateRoundedIcon />
             </button>
           )}
         </div>

products/statement-generator/src/pages-form/Advice.tsx

@@ -1,8 +1,8 @@
 import React, { useRef, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { makeStyles, createStyles } from '@material-ui/core';
-import CancelIcon from '@material-ui/icons/Cancel';
-import CheckCircleIcon from '@material-ui/icons/CheckCircle';
+import CancelRoundedIcon from '@material-ui/icons/CancelRounded';
+import CheckCircleRoundedIcon from '@material-ui/icons/CheckCircleRounded';
 
 import ContentContainer from 'components-layout/ContentContainer';
 import FlowNavigation from 'components-layout/FlowNavigation';
@@ -75,6 +75,17 @@ export default function Advice() {
     titleRef.current?.focus();
   }, []);
 
+  const RedCancelIcon = () => (
+    <CancelRoundedIcon style={{ color: '#E87461' }} className={classes.icon} />
+  );
+
+  const GreenCheckIcon = () => (
+    <CheckCircleRoundedIcon
+      style={{ color: '#0AEBA0' }}
+      className={classes.icon}
+    />
+  );
+
   return (
     <ContentContainer>
       <h2 ref={titleRef} tabIndex={-1} className={classes.title}>
@@ -84,16 +95,13 @@ export default function Advice() {
         <p className={classes.text}>{t('advice_page.point1.content')}</p>
         <div className={classes.yesNoContainer}>
           <div className={`${classes.borderContainer} ${classes.marginRight}`}>
-            <CancelIcon style={{ color: '#E87461' }} className={classes.icon} />
+            <RedCancelIcon />
             <p className={classes.textMargin} aria-label="Bad Example">
               {t('advice_page.point1.no')}
             </p>
           </div>
           <div className={classes.borderContainer}>
-            <CheckCircleIcon
-              style={{ color: '#0AEBA0' }}
-              className={classes.icon}
-            />
+            <GreenCheckIcon />
             <p className={classes.textMargin} aria-label="Good Example">
               {t('advice_page.point1.yes')}
             </p>
@@ -102,16 +110,13 @@ export default function Advice() {
         <p className={classes.text}>{t('advice_page.point2.content')}</p>
         <div className={classes.yesNoContainer}>
           <div className={`${classes.borderContainer} ${classes.marginRight}`}>
-            <CancelIcon style={{ color: '#E87461' }} className={classes.icon} />
+            <RedCancelIcon />
             <p className={classes.textMargin} aria-label="Bad Example">
               {t('advice_page.point2.no')}
             </p>
           </div>
           <div className={classes.borderContainer}>
-            <CheckCircleIcon
-              style={{ color: '#0AEBA0' }}
-              className={classes.icon}
-            />
+            <GreenCheckIcon />
             <p className={classes.textMargin} aria-label="Good Example">
               {t('advice_page.point2.yes')}
             </p>
@@ -120,16 +125,13 @@ export default function Advice() {
         <p className={classes.text}>{t('advice_page.point3.content')}</p>
         <div className={classes.yesNoContainer}>
           <div className={`${classes.borderContainer} ${classes.marginRight}`}>
-            <CancelIcon style={{ color: '#E87461' }} className={classes.icon} />
+            <RedCancelIcon />
             <p className={classes.textMargin} aria-label="Bad Example">
               {t('advice_page.point3.no')}
             </p>
           </div>
           <div className={classes.borderContainer}>
-            <CheckCircleIcon
-              style={{ color: '#0AEBA0' }}
-              className={classes.icon}
-            />
+            <GreenCheckIcon />
             <p className={classes.textMargin} aria-label="Good Example">
               {t('advice_page.point3.yes')}
             </p>

products/statement-generator/src/pages-form/BeforeYouBegin.tsx

@@ -4,7 +4,7 @@ import { makeStyles, createStyles } from '@material-ui/core';
 
 import ContentContainer from 'components-layout/ContentContainer';
 import FlowNavigation from 'components-layout/FlowNavigation';
-import ErrorIcon from '@material-ui/icons/Error';
+import ErrorRoundedIcon from '@material-ui/icons/ErrorRounded';
 
 const useStyles = makeStyles(({ palette, breakpoints }) =>
   createStyles({
@@ -132,7 +132,7 @@ const BeforeYouBegin = () => {
       />
       <div className={classes.alert}>
         <span>
-          <ErrorIcon style={{ color: '#2F6FED' }} />
+          <ErrorRoundedIcon style={{ color: '#2F6FED' }} />
         </span>
         <h6>{t('before_you_begin_page.sectionTitle4')}</h6>
         <p

products/statement-generator/src/pages-form/Download.tsx

@@ -4,9 +4,11 @@ import { saveAs } from 'file-saver';
 import { Document, Packer, Paragraph } from 'docx';
 import jsPDF from 'jspdf';
 import { makeStyles, createStyles } from '@material-ui/core';
-import EmailIcon from '@material-ui/icons/Email';
-import GetAppIcon from '@material-ui/icons/GetApp';
-import FileCopyIcon from '@material-ui/icons/FileCopy';
+import {
+  GetAppRounded,
+  EmailRounded,
+  FileCopyRounded,
+} from '@material-ui/icons';
 
 import { generateFinal } from 'helpers/previewHelper';
 
@@ -158,35 +160,35 @@ export default function Download({ onDownloadAgreementCheck }: IDownload) {
           className={classes.buttonSpacing}
           onClick={handleClickDOCX}
           disabled={isDisabled}
-          icon={<GetAppIcon />}
+          icon={<GetAppRounded />}
           buttonText={t('download_page.docx_btn')}
         />
         <Button
           className={classes.buttonSpacing}
           onClick={handleClickPDF}
           disabled={isDisabled}
-          icon={<GetAppIcon />}
+          icon={<GetAppRounded />}
           buttonText={t('download_page.pdf_btn')}
         />
         <Button
           className={classes.buttonSpacing}
           onClick={handleClickTXT}
           disabled={isDisabled}
-          icon={<GetAppIcon />}
+          icon={<GetAppRounded />}
           buttonText={t('download_page.txt_btn')}
         />
         <Button
           className={classes.buttonSpacing}
           onClick={handleClickEmail}
           disabled={isDisabled}
-          icon={<EmailIcon />}
+          icon={<EmailRounded />}
           buttonText={t('download_page.email_btn')}
         />
         <Button
           className={classes.buttonSpacing}
           onClick={handleClickClipboard}
           disabled={isDisabled}
-          icon={<FileCopyIcon />}
+          icon={<FileCopyRounded />}
           buttonText={t('download_page.clipboard_btn')}
         />
       </div>