Use same style for all attribute titles

equinor · Nov 28, 2024 · cc776a7 · cc776a7
1 parent c34efe8
commit cc776a7
Show file tree

Hide file tree

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