Fix status display

equinor · Nov 10, 2023 · 8887544 · 8887544
1 parent a03f81e
commit 8887544
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionStatusDisplay.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionStatusDisplay.tsx
@@ -14,6 +14,7 @@ const StyledStatusDisplay = styled.div`
     flex-direction: column;
     justify-content: space-between;
 `
+
 const StyledStatusIcon = styled.div`
     display: flex;
     gap: 4px;
@@ -42,16 +43,23 @@ export function displayIcon(status: MissionStatus) {
 }
 
 export function MissionStatusDisplay({ status }: StatusProps) {
+    const { TranslateText } = useLanguageContext()
+    return (
+        <StyledStatusIcon>
+            {displayIcon(status)}
+            <Typography>{TranslateText(status)}</Typography>
+        </StyledStatusIcon>
+    )
+}
+
+export function MissionStatusDisplayWithHeader({ status }: StatusProps) {
     const { TranslateText } = useLanguageContext()
     return (
         <StyledStatusDisplay>
             <Typography variant="meta" color={tokens.colors.text.static_icons__tertiary.hex}>
                 {TranslateText('Status')}
             </Typography>
-            <StyledStatusIcon>
-                {displayIcon(status)}
-                <Typography>{TranslateText(status)}</Typography>
-            </StyledStatusIcon>
+            <MissionStatusDisplay status={status} />
         </StyledStatusDisplay>
     )
 }
diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx
@@ -4,7 +4,7 @@ import { tokens } from '@equinor/eds-tokens'
 import { Mission } from 'models/Mission'
 import styled from 'styled-components'
 import { MissionProgressDisplay } from './MissionProgressDisplay'
-import { MissionStatusDisplay } from './MissionStatusDisplay'
+import { MissionStatusDisplayWithHeader } from './MissionStatusDisplay'
 import { useNavigate } from 'react-router-dom'
 import { MissionControlButtons } from './MissionControlButtons'
 import BatteryStatusView from '../RobotCards/BatteryStatusView'
@@ -54,7 +54,7 @@ export function OngoingMissionCard({ mission }: MissionProps) {
                 <MissionControlButtons mission={mission} />
             </TopContent>
             <BottomContent>
-                <MissionStatusDisplay status={mission.status} />
+                <MissionStatusDisplayWithHeader status={mission.status} />
                 <MissionProgressDisplay mission={mission} />
                 <MissionRobotDisplay mission={mission} />
                 <BatteryStatusView