Place schedule information first and change color of schedule info (#10419)

As per UX's requests, this updates the placement and styling of the
schedule information for scheduled change requests. Instead of being
below the "stage entered time" and in "secondary" color, we place it
above that timestamp and in the same color as the stage name.

This change is not behind a flag, so the color change will go out
immediately upon release.

Before:

<img width="244" height="376" alt="image"
src="https://github.com/user-attachments/assets/2c5f380d-8d05-4078-93cc-d451eb9fdabe"
/>

After:
<img width="201" height="333" alt="image"
src="https://github.com/user-attachments/assets/d26c2c6f-5fc9-4db2-b52e-ff26e6f03a61"
/>

Same for failed/suspended. Before:
<img width="280" height="378" alt="image"
src="https://github.com/user-attachments/assets/71c7a201-dfd7-47f3-a45b-c33a47be1e3c"
/>

After:

<img width="258" height="369" alt="image"
src="https://github.com/user-attachments/assets/9a3ab53f-bda1-4ce5-a127-bceaa3436fef"
/>

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

@@ -117,12 +117,12 @@ describe('changeRequestScheduleProps', () => {
             status: 'pending' as const,
         };
 
-        const { title, subtitle, color, reason } = getScheduleProps(schedule);
+        const { title, timeInfo, color, reason } = getScheduleProps(schedule);
         expect(title).toBe('Scheduled');
         expect(color).toBe('warning');
         expect(reason).toBeNull();
 
-        render(subtitle);
+        render(timeInfo);
         screen.getByText('for');
         const timeElement = screen.getByRole('time');
         const datetime = timeElement.getAttribute('datetime');
@@ -138,12 +138,12 @@ describe('changeRequestScheduleProps', () => {
             failureReason: 'failure reason',
         };
 
-        const { title, subtitle, color, reason } = getScheduleProps(schedule);
+        const { title, timeInfo, color, reason } = getScheduleProps(schedule);
         expect(title).toBe('Schedule failed');
         expect(color).toBe('error');
         expect(reason).toBeTruthy();
 
-        render(subtitle);
+        render(timeInfo);
         screen.getByText('at');
         const timeElement = screen.getByRole('time');
         const datetime = timeElement.getAttribute('datetime');
@@ -158,12 +158,12 @@ describe('changeRequestScheduleProps', () => {
             reason: 'reason',
         };
 
-        const { title, subtitle, color, reason } = getScheduleProps(schedule);
+        const { title, timeInfo, color, reason } = getScheduleProps(schedule);
         expect(title).toBe('Schedule suspended');
         expect(color).toBe('grey');
         expect(reason).toBeTruthy();
 
-        render(subtitle);
+        render(timeInfo);
         screen.getByText('was');
         const timeElement = screen.getByRole('time');
         const datetime = timeElement.getAttribute('datetime');

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

@@ -48,6 +48,7 @@ const StyledSubtitle = styled(Box)(({ theme }) => ({
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'flex-end',
+    columnGap: '1ch',
 }));
 
 const StyledTimeline = styled(Timeline)(() => ({
@@ -117,7 +118,12 @@ export const ChangeRequestTimeline: FC<ISuggestChangeTimelineProps> = ({
                     {data.map((title, index) => {
                         const timestampComponent =
                             index <= activeIndex && timestamps?.[title] ? (
+                                <Typography
+                                    component='span'
+                                    color='textSecondary'
+                                >
                                     <Time dateTime={timestamps?.[title]} />
+                                </Typography>
                             ) : undefined;
 
                         if (schedule && title === 'Scheduled') {
@@ -165,7 +171,7 @@ export const ChangeRequestTimeline: FC<ISuggestChangeTimelineProps> = ({
     );
 };
 
-const Time = styled(({ dateTime, ...props }: { dateTime: string }) => {
+const Time = ({ dateTime, ...props }: { dateTime: string }) => {
     const { locationSettings } = useLocationSettings();
     const displayTime = formatDateYMDHM(
         new Date(dateTime || ''),
@@ -176,10 +182,7 @@ const Time = styled(({ dateTime, ...props }: { dateTime: string }) => {
             {displayTime}
         </time>
     );
-})(({ theme }) => ({
+};
-    color: theme.palette.text.secondary,
-    fontSize: theme.typography.body2.fontSize,
-}));
 
 const TimelineItem = ({
     color,
@@ -209,17 +212,17 @@ const TimelineItem = ({
 };
 
 export const getScheduleProps = (schedule: ChangeRequestSchedule) => {
-    const Subtitle = ({ prefix }: { prefix: string }) => (
+    const TimeInfo = ({ prefix }: { prefix: string }) => (
-        <>
+        <Typography component='span'>
             {prefix} <Time dateTime={schedule.scheduledAt} />
-        </>
+        </Typography>
     );
 
     switch (schedule.status) {
         case 'suspended':
             return {
                 title: 'Schedule suspended',
-                subtitle: <Subtitle prefix='was' />,
+                timeInfo: <TimeInfo prefix='was' />,
                 color: 'grey' as const,
                 reason: (
                     <HtmlTooltip title={schedule.reason} arrow>
@@ -230,7 +233,7 @@ export const getScheduleProps = (schedule: ChangeRequestSchedule) => {
         case 'failed':
             return {
                 title: 'Schedule failed',
-                subtitle: <Subtitle prefix='at' />,
+                timeInfo: <TimeInfo prefix='at' />,
                 color: 'error' as const,
                 reason: (
                     <HtmlTooltip
@@ -246,7 +249,7 @@ export const getScheduleProps = (schedule: ChangeRequestSchedule) => {
         default:
             return {
                 title: 'Scheduled',
-                subtitle: <Subtitle prefix='for' />,
+                timeInfo: <TimeInfo prefix='for' />,
                 color: 'warning' as const,
                 reason: null,
             };
@@ -260,7 +263,7 @@ const TimelineScheduleItem = ({
     schedule: ChangeRequestSchedule;
     timestamp: ReactNode;
 }) => {
-    const { title, subtitle, color, reason } = getScheduleProps(schedule);
+    const { title, timeInfo, color, reason } = getScheduleProps(schedule);
 
     return (
         <MuiTimelineItem key={title}>
@@ -270,13 +273,11 @@ const TimelineScheduleItem = ({
             </TimelineSeparator>
             <StyledTimelineContent>
                 {title}
-                {timestamp}
                 <StyledSubtitle>
-                    <Typography color={'text.secondary'} sx={{ mr: 1 }}>
+                    {timeInfo}
-                        ({subtitle})
-                    </Typography>
                     {reason}
                 </StyledSubtitle>
+                {timestamp}
             </StyledTimelineContent>
         </MuiTimelineItem>
     );