fix: use the correct icon for failed scheduled CRs (#5760)

This PR switches the notification icon to an exclamation mark (the Error
icon). It updates three components:

1. The badge
2. The timeline
3. The review status

Screenshot with all the replaced icons

![image](https://github.com/Unleash/unleash/assets/17786332/cb10b8d1-9da3-4c48-b13c-09c7680e2b05)

frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.styles.ts

@@ -1,5 +1,11 @@
 import { styled } from '@mui/material';
-import { Cancel, CheckCircle, Schedule, Edit, Info } from '@mui/icons-material';
+import {
+    Cancel,
+    CheckCircle,
+    Schedule,
+    Edit,
+    Error as ErrorIcon,
+} from '@mui/icons-material';
 import { Box, Typography, Divider } from '@mui/material';
 
 const styledComponentPropCheck = () => (prop: string) =>
@@ -43,7 +49,7 @@ export const StyledScheduledIcon = styled(Schedule)(({ theme }) => ({
     marginRight: theme.spacing(1),
 }));
 
-export const StyledInfoIcon = styled(Info)(({ theme }) => ({
+export const StyledScheduleFailedIcon = styled(ErrorIcon)(({ theme }) => ({
     color: theme.palette.error.main,
     height: '35px',
     width: '35px',

frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.tsx

@@ -15,14 +15,14 @@ import {
     StyledReviewStatusContainer,
     StyledFlexAlignCenterBox,
     StyledSuccessIcon,
-    StyledErrorIcon,
     StyledWarningIcon,
     StyledReviewTitle,
     StyledDivider,
     StyledScheduledIcon,
     StyledEditIcon,
     StyledScheduledBox,
-    StyledInfoIcon,
+    StyledErrorIcon,
+    StyledScheduleFailedIcon,
 } from './ChangeRequestReviewStatus.styles';
 import {
     ChangeRequestState,
@@ -289,7 +289,7 @@ const ScheduledFailed = ({
 
     return (
         <StyledFlexAlignCenterBox>
-            <StyledInfoIcon />
+            <StyledScheduleFailedIcon />
             <Box>
                 <StyledReviewTitle color={theme.palette.error.main}>
                     Changes failed to be applied on {scheduledTime} because of{' '}

frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestTimeline/ChangeRequestTimeline.tsx

@@ -9,7 +9,7 @@ import TimelineContent from '@mui/lab/TimelineContent';
 import { ChangeRequestState } from '../../changeRequest.types';
 import { ConditionallyRender } from '../../../common/ConditionallyRender/ConditionallyRender';
 import { HtmlTooltip } from '../../../common/HtmlTooltip/HtmlTooltip';
-import { Info } from '@mui/icons-material';
+import { Error as ErrorIcon } from '@mui/icons-material';
 import { useLocationSettings } from 'hooks/useLocationSettings';
 import { formatDateYMDHMS } from 'utils/formatDate';
 
@@ -184,7 +184,10 @@ const createTimelineItem = (
                                     title={`Schedule failed because of ${failureReason}`}
                                     arrow
                                 >
-                                    <Info color={'error'} fontSize={'small'} />
+                                    <ErrorIcon
+                                        color={'error'}
+                                        fontSize={'small'}
+                                    />
                                 </HtmlTooltip>
                             }
                         />

frontend/src/component/changeRequest/ChangeRequestStatusBadge/ChangeRequestStatusBadge.tsx

@@ -6,7 +6,7 @@ import {
     Check,
     CircleOutlined,
     Close,
-    Info,
+    Error as ErrorIcon,
 } from '@mui/icons-material';
 
 interface IChangeRequestStatusBadgeProps {
@@ -64,7 +64,7 @@ export const ChangeRequestStatusBadge: VFC<IChangeRequestStatusBadgeProps> = ({
                 schedule?.status === 'pending' ? (
                     <AccessTime fontSize={'small'} />
                 ) : (
-                    <Info fontSize={'small'} />
+                    <ErrorIcon fontSize={'small'} />
                 );
             return (
                 <Badge color={color} icon={icon}>