Restyle ongoing mission card

frontend/src/components/Pages/FrontPage/MissionOverview/MissionProgressDisplay.tsx

@@ -8,6 +8,8 @@ import { tokens } from '@equinor/eds-tokens'
 
 const StyledTagCount = styled.div`
     display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 `
 interface MissionProps {
     mission: Mission
@@ -29,8 +31,11 @@ export function MissionProgressDisplay({ mission }: MissionProps) {
 
     return (
         <StyledTagCount>
-            <Typography style={{ color: tokens.colors.text.static_icons__tertiary.hex }}>
-                {TranslateText('Task')} {completedTasks}/{tasks.length}
+            <Typography variant="meta" color={tokens.colors.text.static_icons__tertiary.hex}>
+                {TranslateText('Completed Tasks')}
+            </Typography>
+            <Typography>
+                {completedTasks}/{tasks.length}
             </Typography>
         </StyledTagCount>
     )

frontend/src/components/Pages/FrontPage/MissionOverview/MissionRobotDisplay.tsx

@@ -0,0 +1,27 @@
+import { Typography } from '@equinor/eds-core-react'
+import styled from 'styled-components'
+import { useLanguageContext } from 'components/Contexts/LanguageContext'
+import { Mission } from 'models/Mission'
+import { tokens } from '@equinor/eds-tokens'
+
+const StyledRobotDisplay = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+`
+
+interface MissionProps {
+    mission: Mission
+}
+
+export function MissionRobotDisplay({ mission }: MissionProps) {
+    const { TranslateText } = useLanguageContext()
+    return (
+        <StyledRobotDisplay>
+            <Typography variant="meta" color={tokens.colors.text.static_icons__tertiary.hex}>
+                {TranslateText('Robot')}
+            </Typography>
+            <Typography>{mission.robot.name}</Typography>
+        </StyledRobotDisplay>
+    )
+}

frontend/src/components/Pages/FrontPage/MissionOverview/MissionStatusDisplay.tsx

@@ -11,7 +11,12 @@ interface StatusProps {
 
 const StyledStatusDisplay = styled.div`
     display: flex;
-    gap: 0.3em;
+    flex-direction: column;
+    justify-content: space-between;
+`
+const StyledStatusIcon = styled.div`
+    display: flex;
+    gap: 4px;
     align-items: flex-end;
 `
 
@@ -40,8 +45,13 @@ export function MissionStatusDisplay({ status }: StatusProps) {
     const { TranslateText } = useLanguageContext()
     return (
         <StyledStatusDisplay>
-            {displayIcon(status)}
-            <Typography>{TranslateText(status)}</Typography>
+            <Typography variant="meta" color={tokens.colors.text.static_icons__tertiary.hex}>
+                {TranslateText('Status')}
+            </Typography>
+            <StyledStatusIcon>
+                {displayIcon(status)}
+                <Typography>{TranslateText(status)}</Typography>
+            </StyledStatusIcon>
         </StyledStatusDisplay>
     )
 }

frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx

@@ -9,95 +9,59 @@ import { useNavigate } from 'react-router-dom'
 import { MissionControlButtons } from './MissionControlButtons'
 import BatteryStatusView from '../RobotCards/BatteryStatusView'
 import { BatteryStatus } from 'models/Battery'
+import { MissionRobotDisplay } from './MissionRobotDisplay'
 
 interface MissionProps {
     mission: Mission
 }
 
 const StyledMissionCard = styled(Card)`
-    width: 432px;
-    padding: 10px;
+    width: 372px;
+    padding: 12px;
 `
-
 const StyledTitle = styled(Card)`
     width: 70%;
     height: 80%;
+    justify-content: center;
+    padding-left: 12px;
     :hover {
         background-color: #deedee;
     }
     box-shadow: none;
 `
-const HorizontalContent = styled.div`
-    display: grid;
-    grid-template-columns: auto auto auto;
-    align-items: end;
-    gap: 1rem;
-`
 const TopContent = styled.div`
     display: flex;
-    flex-direction: row;
     justify-content: space-between;
 `
 const BottomContent = styled.div`
     display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: end;
-    padding-right: 25px;
-`
-const VerticalContent = styled.div`
-    display: grid;
-    grid-template-rows: auto auto;
     justify-content: space-between;
 `
-
-const StyledPadding = styled.div`
-    padding: 10px;
-    border-radius: 3px;
-`
-
 export function OngoingMissionCard({ mission }: MissionProps) {
     let navigate = useNavigate()
     const routeChange = () => {
         const path = `${config.FRONTEND_BASE_ROUTE}/mission/${mission.id}`
         navigate(path)
     }
     return (
-        <StyledMissionCard variant="default" style={{ boxShadow: tokens.elevation.raised }}>
+        <StyledMissionCard style={{ boxShadow: tokens.elevation.raised }}>
             <TopContent>
-                <StyledTitle variant="default" onClick={routeChange}>
-                    <StyledPadding>
-                        <Typography variant="h6" color="primary">
-                            {mission.name}
-                        </Typography>
-                    </StyledPadding>
+                <StyledTitle onClick={routeChange}>
+                    <Typography variant="h6" color="primary">
+                        {mission.name}
+                    </Typography>
                 </StyledTitle>
                 <MissionControlButtons mission={mission} />
             </TopContent>
             <BottomContent>
-                <VerticalContent>
-                    <Typography variant="meta" color="#6F6F6F">
-                        {'Status'}
-                    </Typography>
-                    <HorizontalContent>
-                        <MissionStatusDisplay status={mission.status} />
-                        <MissionProgressDisplay mission={mission} />
-                        <BatteryStatusView
-                            battery={mission.robot.batteryLevel}
-                            batteryStatus={BatteryStatus.Normal}
-                            robotStatus={mission.robot.status}
-                        />
-                    </HorizontalContent>
-                </VerticalContent>
-                <div>
-                    <Typography variant="meta" color="#6F6F6F">
-                        {'Robot'}
-                    </Typography>
-                    <Typography variant="body_short" color="#3D3D3D">
-                        {' '}
-                        {mission.robot.name}
-                    </Typography>
-                </div>
+                <MissionStatusDisplay status={mission.status} />
+                <MissionProgressDisplay mission={mission} />
+                <MissionRobotDisplay mission={mission} />
+                <BatteryStatusView
+                    battery={mission.robot.batteryLevel}
+                    batteryStatus={BatteryStatus.Normal}
+                    robotStatus={mission.robot.status}
+                />
             </BottomContent>
         </StyledMissionCard>
     )

frontend/src/components/Pages/FrontPage/RobotCards/BatteryStatusView.tsx

@@ -7,7 +7,7 @@ import { RobotStatus } from 'models/Robot'
 
 const BatteryAlignment = styled.div`
     display: flex;
-    align-items: center;
+    align-items: end;
 `
 
 const StyledTopography = styled(Typography)<{ $fontSize?: 24 | 16 | 18 | 32 | 40 | 48 }>`

frontend/src/language/en.json

@@ -201,5 +201,6 @@
     "Dismiss robots from safe zone": "Dismiss robots from safe zone",
     "Continue missions": "Continue missions",
     "Safe Zone": "Safe Zone",
-    "Edit mission definition": "Edit mission definition"
+    "Edit mission definition": "Edit mission definition",
+    "Completed Tasks": "Completed Tasks"
 }

frontend/src/language/no.json

@@ -183,8 +183,8 @@
     "transport": "transport",
     "Queue the missions": "Legg oppdragene i kø",
     "Deck Overview": "Dekkoversikt",
-    "Predefined Missions": "Forhåndsdefinerte Oppdrag",
-    "Create a new mission in the Mission Planner": "Lag nytt oppdrag i Oppdragsplanlegger",
+    "Predefined Missions": "Forhåndsdefinerte oppdrag",
+    "Create a new mission in the Mission Planner": "Lag nytt oppdrag i oppdragsplanlegger",
     "Must be inspected this week": "Må inspiseres denne uken",
     "Must be inspected within two weeks": "Må inspiseres innen to uker",
     "Mission": "Oppdrag",
@@ -200,6 +200,7 @@
     "Dismiss robots from safe zone long text": "Vanlig drift kan fortsette ved å starte oppdragene i køen eller ved å slette dem.",
     "Dismiss robots from safe zone": "Slipp robotene ut av trygg sone",
     "Continue missions": "Fortsett oppdragene",
-    "Safe Zone": "Trygg Sone",
-    "Edit mission definition": "Rediger oppdragsdefinisjon"
+    "Safe Zone": "Trygg sone",
+    "Edit mission definition": "Rediger oppdragsdefinisjon",
+    "Completed Tasks": "Fullførte oppgaver"
 }