From cc776a7ee2cdeb44e466e3546f2cbe4808e48d29 Mon Sep 17 00:00:00 2001
From: Eddasol <esole@equinor.com>
Date: Thu, 28 Nov 2024 12:25:22 +0100
Subject: [PATCH] Use same style for all attribute titles

---
 .../MissionDisplays/MissionAreaDispaly.tsx     |  6 ++----
 .../MissionDisplays/MissionProgressDisplay.tsx |  6 ++----
 .../MissionDisplays/MissionStatusDisplay.tsx   |  5 ++---
 .../FrontPage/MissionOverview/RobotCard.tsx    | 18 ++++--------------
 .../src/components/Styles/StyledComponents.tsx |  7 ++++++-
 5 files changed, 16 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/Displays/MissionDisplays/MissionAreaDispaly.tsx b/frontend/src/components/Displays/MissionDisplays/MissionAreaDispaly.tsx
index 6be20ca89..e89a468c3 100644
--- a/frontend/src/components/Displays/MissionDisplays/MissionAreaDispaly.tsx
+++ b/frontend/src/components/Displays/MissionDisplays/MissionAreaDispaly.tsx
@@ -1,6 +1,6 @@
 import { Typography } from '@equinor/eds-core-react'
-import { tokens } from '@equinor/eds-tokens'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
+import { AttributeTitleTypography } from 'components/Styles/StyledComponents'
 import { Mission } from 'models/Mission'
 import styled from 'styled-components'
 
@@ -14,9 +14,7 @@ export const MissionAreaDisplay = ({ mission }: { mission: Mission }) => {
     const { TranslateText } = useLanguageContext()
     return (
         <StyledAreaDisplay>
-            <Typography variant="meta" color={tokens.colors.text.static_icons__tertiary.hex}>
-                {TranslateText('Area')}
-            </Typography>
+            <AttributeTitleTypography>{TranslateText('Area')}</AttributeTitleTypography>
             <Typography>{mission.area?.areaName || 'N/A'}</Typography>
         </StyledAreaDisplay>
     )
diff --git a/frontend/src/components/Displays/MissionDisplays/MissionProgressDisplay.tsx b/frontend/src/components/Displays/MissionDisplays/MissionProgressDisplay.tsx
index cb5e9fdb0..3ef3eaa05 100644
--- a/frontend/src/components/Displays/MissionDisplays/MissionProgressDisplay.tsx
+++ b/frontend/src/components/Displays/MissionDisplays/MissionProgressDisplay.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { Task } from 'models/Task'
-import { tokens } from '@equinor/eds-tokens'
+import { AttributeTitleTypography } from 'components/Styles/StyledComponents'
 
 const StyledTagCount = styled.div`
     display: flex;
@@ -31,9 +31,7 @@ export const MissionProgressDisplay = ({ mission }: MissionProps) => {
 
     return (
         <StyledTagCount>
-            <Typography variant="meta" color={tokens.colors.text.static_icons__tertiary.hex}>
-                {TranslateText('Completed Tasks')}
-            </Typography>
+            <AttributeTitleTypography>{TranslateText('Completed Tasks')}</AttributeTitleTypography>
             <Typography>
                 {completedTasks}/{tasks.length}
             </Typography>
diff --git a/frontend/src/components/Displays/MissionDisplays/MissionStatusDisplay.tsx b/frontend/src/components/Displays/MissionDisplays/MissionStatusDisplay.tsx
index cf6808344..2966f0e8f 100644
--- a/frontend/src/components/Displays/MissionDisplays/MissionStatusDisplay.tsx
+++ b/frontend/src/components/Displays/MissionDisplays/MissionStatusDisplay.tsx
@@ -4,6 +4,7 @@ import { MissionStatus } from 'models/Mission'
 import styled from 'styled-components'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { Icons } from 'utils/icons'
+import { AttributeTitleTypography } from 'components/Styles/StyledComponents'
 
 interface StatusProps {
     status: MissionStatus
@@ -77,9 +78,7 @@ export const MissionStatusDisplayWithHeader = ({ status }: StatusProps) => {
     const { TranslateText } = useLanguageContext()
     return (
         <StyledStatusDisplay>
-            <Typography variant="meta" color={tokens.colors.text.static_icons__tertiary.hex}>
-                {TranslateText('Status')}
-            </Typography>
+            <AttributeTitleTypography>{TranslateText('Status')}</AttributeTitleTypography>
             <MissionStatusDisplay status={status} />
         </StyledStatusDisplay>
     )
diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/RobotCard.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/RobotCard.tsx
index 2d050fc00..4d8e8fe24 100644
--- a/frontend/src/components/Pages/FrontPage/MissionOverview/RobotCard.tsx
+++ b/frontend/src/components/Pages/FrontPage/MissionOverview/RobotCard.tsx
@@ -10,7 +10,7 @@ import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { PressureStatusDisplay } from 'components/Displays/RobotDisplays/PressureStatusDisplay'
 import { config } from 'config'
 import { RobotType } from 'models/RobotModel'
-import { StyledButton } from 'components/Styles/StyledComponents'
+import { StyledButton, AttributeTitleTypography } from 'components/Styles/StyledComponents'
 import { Icons } from 'utils/icons'
 
 const StyledRobotCard = styled.div`
@@ -127,7 +127,7 @@ export const RobotCard = ({ robot }: { robot: Robot }) => {
                 </StyledHeader>
                 <HorizontalContent>
                     <VerticalContent>
-                        <Typography variant="caption">{TranslateText('Status')}</Typography>
+                        <AttributeTitleTypography>{TranslateText('Status')}</AttributeTitleTypography>
                         <RobotStatusChip
                             status={robot.status}
                             flotillaStatus={robot.flotillaStatus}
@@ -138,12 +138,7 @@ export const RobotCard = ({ robot }: { robot: Robot }) => {
                     {robot.status !== RobotStatus.Offline ? (
                         <>
                             <VerticalContent>
-                                <Typography
-                                    variant="meta"
-                                    style={{ fontSize: 14, color: tokens.colors.text.static_icons__secondary.hex }}
-                                >
-                                    {TranslateText('Battery')}
-                                </Typography>
+                                <AttributeTitleTypography>{TranslateText('Battery')}</AttributeTitleTypography>
                                 <BatteryStatusDisplay
                                     batteryLevel={robot.batteryLevel}
                                     batteryWarningLimit={robot.model.batteryWarningThreshold}
@@ -152,12 +147,7 @@ export const RobotCard = ({ robot }: { robot: Robot }) => {
 
                             {robot.pressureLevel !== undefined && robot.pressureLevel !== null && (
                                 <VerticalContent>
-                                    <Typography
-                                        variant="meta"
-                                        style={{ fontSize: 14, color: tokens.colors.text.static_icons__secondary.hex }}
-                                    >
-                                        {TranslateText('Pressure')}
-                                    </Typography>
+                                    <AttributeTitleTypography>{TranslateText('Pressure')}</AttributeTitleTypography>
                                     <PressureStatusDisplay
                                         pressure={robot.pressureLevel}
                                         upperPressureWarningThreshold={robot.model.upperPressureWarningThreshold}
diff --git a/frontend/src/components/Styles/StyledComponents.tsx b/frontend/src/components/Styles/StyledComponents.tsx
index 96fbad5fd..ce9ef4511 100644
--- a/frontend/src/components/Styles/StyledComponents.tsx
+++ b/frontend/src/components/Styles/StyledComponents.tsx
@@ -1,4 +1,4 @@
-import { Button, Dialog, Table } from '@equinor/eds-core-react'
+import { Button, Dialog, Table, Typography } from '@equinor/eds-core-react'
 import { tokens } from '@equinor/eds-tokens'
 import styled from 'styled-components'
 
@@ -38,6 +38,11 @@ export const StyledPage = styled.div`
     }
     min-height: calc(100vh - 65px);
 `
+export const AttributeTitleTypography = styled(Typography)`
+    variant: meta;
+    fontsize: 14;
+    color: ${tokens.colors.text.static_icons__secondary.hex};
+`
 export const StyledTableCell = styled(Table.Cell)`
     background-color: ${tokens.colors.ui.background__default.hex};
 `