Update status card static text format

equinor · Nov 26, 2024 · 9d11170 · 9d11170
1 parent 451c5ee
commit 9d11170
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git 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
@@ -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;
     }
 `