From 795aa18bca69860a9e130b2071dde32d28d21b32 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 4 Jan 2024 15:44:53 +0530
Subject: [PATCH] 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)
---
 .../ChangeRequestReviewStatus.styles.ts                | 10 ++++++++--
 .../ChangeRequestReviewStatus.tsx                      |  6 +++---
 .../ChangeRequestTimeline/ChangeRequestTimeline.tsx    |  7 +++++--
 .../ChangeRequestStatusBadge.tsx                       |  4 ++--
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.styles.ts b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.styles.ts
index 98dbc8e1391e..83e2df65b7f4 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.styles.ts
+++ b/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',
diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.tsx
index b74e4b7fb1ce..989641be44b8 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.tsx
+++ b/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{' '}
diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestTimeline/ChangeRequestTimeline.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestTimeline/ChangeRequestTimeline.tsx
index e79cb2c9cec0..31b033f06544 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestTimeline/ChangeRequestTimeline.tsx
+++ b/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>
                             }
                         />
diff --git a/frontend/src/component/changeRequest/ChangeRequestStatusBadge/ChangeRequestStatusBadge.tsx b/frontend/src/component/changeRequest/ChangeRequestStatusBadge/ChangeRequestStatusBadge.tsx
index 3e24a05c81c7..0b47bbf0fba7 100644
--- a/frontend/src/component/changeRequest/ChangeRequestStatusBadge/ChangeRequestStatusBadge.tsx
+++ b/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}>