[To Main] Replace Material Icons with Font Awesome (bcgov#2509)

* Replace Material Icons with Font Awesome * Updating icon for under construction * Removing comment
djnunez-aot · May 21, 2024 · 8093fd2 · 8093fd2
1 parent a17fe76
commit 8093fd2
Show file tree

Hide file tree

Showing 58 changed files with 586 additions and 316 deletions.
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -1,3 +1,9 @@
+## May 16, 2024
+
+- **Bugfix** Replace Material Icons with Font Awesome [🎟️ DESENG-608](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-608)
+  - Replaced Material Icons with Font Awesome for all icons for which we had a mapping
+  - Noted a few icons for which we did not have a mapping and those have been added to the ticket
+
 ## May 14, 2024
 
 - **Bugfix** Add language code to email links [🎟️ DESENG-579](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-579)

diff --git a/met-web/src/components/comments/admin/review/CommentReview.tsx b/met-web/src/components/comments/admin/review/CommentReview.tsx
@@ -40,9 +40,10 @@ import { RejectEmailTemplate } from './emailPreview/EmailTemplates';
 import EmailPreview from './emailPreview/EmailPreview';
 import { Survey, createDefaultSurvey } from 'models/survey';
 import { getSurvey } from 'services/surveyService';
-import CommentIcon from '@mui/icons-material/Comment';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faMessageCheck } from '@fortawesome/pro-solid-svg-icons/faMessageCheck';
+import { faMessageSlash } from '@fortawesome/pro-solid-svg-icons/faMessageSlash';
 import { LanguageState } from 'reduxSlices/languageSlice';
-import CommentsDisabledIcon from '@mui/icons-material/CommentsDisabled';
 
 const CommentReview = () => {
     const [submission, setSubmission] = useState<SurveySubmission>(createDefaultSubmission());
@@ -289,7 +290,10 @@ const CommentReview = () => {
                                                         arrow
                                                     >
                                                         <span>
-                                                            <CommentIcon color="info" />
+                                                            <FontAwesomeIcon
+                                                                icon={faMessageCheck}
+                                                                style={{ fontSize: '24px', color: '#757575' }}
+                                                            />
                                                         </span>
                                                     </MetTooltip>
                                                 </Grid>
@@ -303,7 +307,10 @@ const CommentReview = () => {
                                                         arrow
                                                     >
                                                         <span>
-                                                            <CommentsDisabledIcon color="info" />
+                                                            <FontAwesomeIcon
+                                                                icon={faMessageSlash}
+                                                                style={{ fontSize: '24px', color: '#757575' }}
+                                                            />
                                                         </span>
                                                     </MetTooltip>
                                                 </Grid>

diff --git a/met-web/src/components/comments/admin/reviewListing/Submissions.tsx b/met-web/src/components/comments/admin/reviewListing/Submissions.tsx
@@ -7,13 +7,14 @@ import { HeadCell, PaginationOptions } from 'components/common/Table/types';
 import { formatDate } from 'components/common/dateHelper';
 import { Collapse, Link as MuiLink } from '@mui/material';
 import TextField from '@mui/material/TextField';
-import SearchIcon from '@mui/icons-material/Search';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faMagnifyingGlass } from '@fortawesome/pro-regular-svg-icons/faMagnifyingGlass';
+import { faChevronDown } from '@fortawesome/pro-solid-svg-icons/faChevronDown';
 import Stack from '@mui/material/Stack';
 import { SurveySubmission } from 'models/surveySubmission';
 import { COMMENTS_STATUS, CommentStatus } from 'constants/commentStatus';
 import { AdvancedSearch } from './AdvancedSearch';
 import { CommentListingContext } from './CommentListingContext';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { useAppSelector } from 'hooks';
 import { USER_ROLES } from 'services/userService/constants';
 import { USER_COMPOSITE_ROLE } from 'models/user';
@@ -122,18 +123,17 @@ const Submissions = () => {
                             data-testid="CommentListing/search-button"
                             onClick={() => handleSearchBarClick(searchText)}
                         >
-                            <SearchIcon />
+                            <FontAwesomeIcon icon={faMagnifyingGlass} style={{ fontSize: '20px' }} />
                         </PrimaryButtonOld>
                         <SecondaryButtonOld
                             data-testid="comment-listing/advanced-search-button"
                             onClick={() => setIsAdvancedSearchOpen(!isAdvancedSearchOpen)}
                             startIcon={
-                                <ExpandMoreIcon
-                                    sx={{
-                                        transition: (theme) =>
-                                            theme.transitions.create('transform', {
-                                                duration: theme.transitions.duration.shortest,
-                                            }),
+                                <FontAwesomeIcon
+                                    icon={faChevronDown}
+                                    style={{
+                                        fontSize: '12px',
+                                        transition: 'transform 0.3s ease',
                                         transform: isAdvancedSearchOpen ? 'rotate(180deg)' : 'rotate(0deg)',
                                     }}
                                 />

diff --git a/met-web/src/components/comments/admin/textListing/index.tsx b/met-web/src/components/comments/admin/textListing/index.tsx
@@ -11,7 +11,8 @@ import {
 } from 'components/common';
 import { HeadCell, PageInfo, PaginationOptions } from 'components/common/Table/types';
 import { Link as MuiLink, Grid, Stack, TextField, Menu, MenuItem } from '@mui/material';
-import SearchIcon from '@mui/icons-material/Search';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faMagnifyingGlass } from '@fortawesome/pro-regular-svg-icons/faMagnifyingGlass';
 import { useAppDispatch, useAppSelector } from 'hooks';
 import { openNotification } from 'services/notificationService/notificationSlice';
 import { CommentStatusChip } from '../../status';
@@ -23,9 +24,9 @@ import { formatDate, formatToUTC } from 'components/common/dateHelper';
 import { USER_ROLES } from 'services/userService/constants';
 import { USER_COMPOSITE_ROLE } from 'models/user';
 import { updateURLWithPagination } from 'components/common/Table/utils';
-import CommentIcon from '@mui/icons-material/Comment';
-import CommentsDisabledIcon from '@mui/icons-material/CommentsDisabled';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { faMessageCheck } from '@fortawesome/pro-solid-svg-icons/faMessageCheck';
+import { faMessageSlash } from '@fortawesome/pro-solid-svg-icons/faMessageSlash';
+import { faChevronDown } from '@fortawesome/pro-solid-svg-icons/faChevronDown';
 import { getStaffCommentSheet, getProponentCommentSheet } from 'services/commentService';
 import { downloadFile } from 'utils';
 import { getSurvey } from 'services/surveyService';
@@ -218,7 +219,10 @@ const CommentTextListing = () => {
                                                         arrow
                                                     >
                                                         <span>
-                                                            <CommentIcon color="info" />
+                                                            <FontAwesomeIcon
+                                                                icon={faMessageCheck}
+                                                                style={{ fontSize: '24px', color: '#757575' }}
+                                                            />
                                                         </span>
                                                     </MetTooltip>
                                                 </Grid>
@@ -232,7 +236,10 @@ const CommentTextListing = () => {
                                                         arrow
                                                     >
                                                         <span>
-                                                            <CommentsDisabledIcon color="info" />
+                                                            <FontAwesomeIcon
+                                                                icon={faMessageSlash}
+                                                                style={{ fontSize: '24px', color: '#757575' }}
+                                                            />
                                                         </span>
                                                     </MetTooltip>
                                                 </Grid>
@@ -352,7 +359,7 @@ const CommentTextListing = () => {
                         variant="contained"
                         onClick={() => handleSearchBarClick(searchText)}
                     >
-                        <SearchIcon />
+                        <FontAwesomeIcon icon={faMagnifyingGlass} style={{ fontSize: '20px' }} />
                     </PrimaryButtonOld>
                 </Stack>
             </Grid>
@@ -372,10 +379,12 @@ const CommentTextListing = () => {
                             aria-haspopup="true"
                             loading={isExporting}
                             startIcon={
-                                <ExpandMoreIcon
+                                <FontAwesomeIcon
+                                    icon={faChevronDown}
                                     style={{
-                                        transition: 'transform 0.3s',
-                                        transform: exportToCSVOpen ? 'rotate(180deg)' : 'none',
+                                        fontSize: '12px',
+                                        transition: 'transform 0.3s ease',
+                                        transform: exportToCSVOpen ? 'rotate(180deg)' : 'rotate(0deg)',
                                     }}
                                 />
                             }

diff --git a/met-web/src/components/common/index.tsx b/met-web/src/components/common/index.tsx
@@ -14,8 +14,9 @@ import {
 } from '@mui/material';
 import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
 import { SxProps, styled } from '@mui/system';
-import EditIcon from '@mui/icons-material/Edit';
-import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPen } from '@fortawesome/pro-regular-svg-icons/faPen';
+import { faCircleXmark } from '@fortawesome/pro-regular-svg-icons/faCircleXmark';
 import { Palette } from 'styles/Theme';
 import LoadingButton from '@mui/lab/LoadingButton';
 import { MET_Header_Font_Family, MET_Font_Weight, MET_Header_Font_Weight } from '../../styles/constants';
@@ -187,6 +188,7 @@ const StyledWidgetButton = styled(MuiButton)(() => ({
 const StyledSocialIconButton = styled(IconButton)(() => ({
     border: '1px solid #494949',
     color: '#494949',
+    borderRadius: '100%',
 }));
 
 const StyledToggleButton = styled(ToggleButton)(({ theme }) => ({
@@ -325,7 +327,7 @@ export const MetSurvey = ({
                     <Stack direction="row" spacing={1}>
                         <When condition={!!onEditClick}>
                             <IconButton color="inherit" onClick={onEditClick} data-testid="survey-widget/edit">
-                                <EditIcon />
+                                <FontAwesomeIcon icon={faPen} style={{ fontSize: '22px' }} />
                             </IconButton>
                         </When>
                         <When condition={!!onDeleteClick}>
@@ -334,7 +336,11 @@ export const MetSurvey = ({
                                 onClick={onDeleteClick}
                                 data-testid={`survey-widget/remove-${testId}`}
                             >
-                                {deleting ? <CircularProgress size="1em" color="inherit" /> : <HighlightOffIcon />}
+                                {deleting ? (
+                                    <CircularProgress size="1em" color="inherit" />
+                                ) : (
+                                    <FontAwesomeIcon icon={faCircleXmark} style={{ fontSize: '22px' }} />
+                                )}
                             </IconButton>
                         </When>
                     </Stack>

diff --git a/met-web/src/components/dashboard/EngagementList.tsx b/met-web/src/components/dashboard/EngagementList.tsx
@@ -2,7 +2,8 @@ import React, { useContext } from 'react';
 import Grid from '@mui/material/Grid';
 import { MetHeader2Old, MetHeader4, MetPageGridContainer } from 'components/common';
 import { Accordion, AccordionDetails, AccordionSummary, Skeleton, styled } from '@mui/material';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronDown } from '@fortawesome/pro-solid-svg-icons/faChevronDown';
 import EngagementAccordion from './EngagementsAccordion';
 import { SubmissionStatus } from 'constants/engagementStatus';
 import { DashboardContext } from './DashboardContext';
@@ -45,7 +46,10 @@ const EngagementList = () => {
             </Grid>
             <Grid item xs={12}>
                 <StyledAccordion defaultExpanded={true}>
-                    <AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ flexDirection: 'row-reverse' }}>
+                    <AccordionSummary
+                        expandIcon={<FontAwesomeIcon icon={faChevronDown} style={{ margin: '0 6px' }} />}
+                        sx={{ flexDirection: 'row-reverse' }}
+                    >
                         <MetHeader4>Upcoming Engagements</MetHeader4>
                     </AccordionSummary>
                     <AccordionDetails>
@@ -60,7 +64,10 @@ const EngagementList = () => {
             </Grid>
             <Grid item xs={12}>
                 <StyledAccordion defaultExpanded={true}>
-                    <AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ flexDirection: 'row-reverse' }}>
+                    <AccordionSummary
+                        expandIcon={<FontAwesomeIcon icon={faChevronDown} style={{ margin: '0 6px' }} />}
+                        sx={{ flexDirection: 'row-reverse' }}
+                    >
                         <MetHeader4>Open Engagements</MetHeader4>
                     </AccordionSummary>
                     <AccordionDetails>
@@ -74,7 +81,10 @@ const EngagementList = () => {
             </Grid>
             <Grid item xs={12}>
                 <StyledAccordion>
-                    <AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ flexDirection: 'row-reverse' }}>
+                    <AccordionSummary
+                        expandIcon={<FontAwesomeIcon icon={faChevronDown} style={{ margin: '0 6px' }} />}
+                        sx={{ flexDirection: 'row-reverse' }}
+                    >
                         <MetHeader4>Recently Closed Engagements (last 30 days)</MetHeader4>
                     </AccordionSummary>
                     <AccordionDetails>
@@ -88,7 +98,10 @@ const EngagementList = () => {
             </Grid>
             <Grid item xs={12}>
                 <StyledAccordion>
-                    <AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ flexDirection: 'row-reverse' }}>
+                    <AccordionSummary
+                        expandIcon={<FontAwesomeIcon icon={faChevronDown} style={{ margin: '0 6px' }} />}
+                        sx={{ flexDirection: 'row-reverse' }}
+                    >
                         <MetHeader4>Closed Engagements (over 30 days ago)</MetHeader4>
                     </AccordionSummary>
                     <AccordionDetails>

diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/Settings/PublicUrls.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/Settings/PublicUrls.tsx
@@ -1,7 +1,8 @@
 import React, { useState, useContext, useEffect } from 'react';
 import { InputAdornment, TextField, Tooltip, Grid, useTheme } from '@mui/material';
 import { SecondaryButtonOld, MetDescription, MetHeader4, MetSmallTextOld, MetLabel } from 'components/common';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCopy } from '@fortawesome/pro-regular-svg-icons/faCopy';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import { ActionContext } from 'components/engagement/form/ActionContext';
 import { useAppDispatch } from 'hooks';
@@ -134,7 +135,7 @@ export const PublicUrls = () => {
                                                 setCopyTooltipEngagementLink(true);
                                             }}
                                         >
-                                            <ContentCopyIcon />
+                                            <FontAwesomeIcon icon={faCopy} style={{ fontSize: '24px' }} />
                                         </SecondaryButtonOld>
                                     </InputAdornment>
                                 ),
@@ -205,7 +206,7 @@ export const PublicUrls = () => {
                                                 setCopyTooltipDashboardLink(true);
                                             }}
                                         >
-                                            <ContentCopyIcon />
+                                            <FontAwesomeIcon icon={faCopy} style={{ fontSize: '24px' }} />
                                         </SecondaryButtonOld>
                                     </InputAdornment>
                                 ),