From 9d11170bf2f485146974f8fc933267b86dc25ad0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5kon=20Fadum?= <hf@equinor.com>
Date: Thu, 21 Nov 2024 15:14:40 +0100
Subject: [PATCH] Update status card static text format

---
 .../FrontPage/RobotCards/RobotStatusCard.tsx  | 21 ++++++++++++++++---
 .../components/Pages/RobotPage/RobotPage.tsx  |  4 ++--
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx b/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx
index 28bea1187..3c13304f3 100644
--- a/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx
+++ b/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx
@@ -110,7 +110,12 @@ export const RobotStatusCard = ({ robot, mission }: RobotProps) => {
                 </HorizontalContent>
                 <HorizontalContent>
                     <VerticalContent>
-                        <Typography variant="meta">{TranslateText('Status')}</Typography>
+                        <Typography
+                            variant="meta"
+                            style={{ fontSize: 14, color: tokens.colors.text.static_icons__secondary.hex }}
+                        >
+                            {TranslateText('Status')}
+                        </Typography>
                         <RobotStatusChip
                             status={robot.status}
                             flotillaStatus={robot.flotillaStatus}
@@ -121,7 +126,12 @@ export const RobotStatusCard = ({ robot, mission }: RobotProps) => {
                     {robot.status !== RobotStatus.Offline ? (
                         <>
                             <VerticalContent>
-                                <Typography variant="meta">{TranslateText('Battery')}</Typography>
+                                <Typography
+                                    variant="meta"
+                                    style={{ fontSize: 14, color: tokens.colors.text.static_icons__secondary.hex }}
+                                >
+                                    {TranslateText('Battery')}
+                                </Typography>
                                 <BatteryStatusDisplay
                                     batteryLevel={robot.batteryLevel}
                                     batteryWarningLimit={robot.model.batteryWarningThreshold}
@@ -130,7 +140,12 @@ export const RobotStatusCard = ({ robot, mission }: RobotProps) => {
 
                             {robot.pressureLevel !== undefined && robot.pressureLevel !== null && (
                                 <VerticalContent>
-                                    <Typography variant="meta">{TranslateText('Pressure')}</Typography>
+                                    <Typography
+                                        variant="meta"
+                                        style={{ fontSize: 14, color: tokens.colors.text.static_icons__secondary.hex }}
+                                    >
+                                        {TranslateText('Pressure')}
+                                    </Typography>
                                     <PressureStatusDisplay
                                         pressure={robot.pressureLevel}
                                         upperPressureWarningThreshold={robot.model.upperPressureWarningThreshold}
diff --git a/frontend/src/components/Pages/RobotPage/RobotPage.tsx b/frontend/src/components/Pages/RobotPage/RobotPage.tsx
index bf22f0e1b..894c995ca 100644
--- a/frontend/src/components/Pages/RobotPage/RobotPage.tsx
+++ b/frontend/src/components/Pages/RobotPage/RobotPage.tsx
@@ -54,8 +54,8 @@ const StatusContent = styled.div<{ $alignItems?: string }>`
     justify-content: flex-end;
     gap: 2rem;
     @media (max-width: 600px) {
-        flex-direction: row;
-        align-items: flex-end;
+        flex-direction: column;
+        align-items: flex-start;
     }
 `