Fix robot status icon and font sizes

equinor · Nov 26, 2024 · 451c5ee · 451c5ee
1 parent 3d43288
commit 451c5ee
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 14 deletions.
diff --git a/frontend/src/components/Displays/RobotDisplays/BatteryStatusDisplay.tsx b/frontend/src/components/Displays/RobotDisplays/BatteryStatusDisplay.tsx
@@ -8,7 +8,7 @@ const BatteryAlignment = styled.div`
 `
 
 const StyledTypography = styled(Typography)<{ $fontSize?: 24 | 16 | 18 | 32 | 40 | 48 }>`
-    font-size: ${(props) => props.$fontSize};
+    font-size: ${(props) => props.$fontSize}px;
 `
 interface BatteryStatusDisplayProps {
     batteryLevel?: number

diff --git a/frontend/src/components/Displays/RobotDisplays/PressureStatusDisplay.tsx b/frontend/src/components/Displays/RobotDisplays/PressureStatusDisplay.tsx
@@ -10,7 +10,7 @@ const PressureAlignment = styled.div`
     align-items: center;
 `
 const StyledTypography = styled(Typography)<{ $fontSize?: 24 | 16 | 18 | 32 | 40 | 48 }>`
-    font-size: ${(props) => props.$fontSize};
+    font-size: ${(props) => props.$fontSize}px;
 `
 interface PressureStatusDisplayProps {
     pressure: number

diff --git a/frontend/src/components/Displays/RobotDisplays/RobotStatusIcon.tsx b/frontend/src/components/Displays/RobotDisplays/RobotStatusIcon.tsx
@@ -9,6 +9,7 @@ interface StatusProps {
     status?: RobotStatus
     isarConnected: boolean
     flotillaStatus?: RobotFlotillaStatus
+    itemSize?: 24 | 16 | 18 | 32 | 40 | 48 | undefined
 }
 
 const StyledStatus = styled.div`
@@ -18,21 +19,16 @@ const StyledStatus = styled.div`
     gap: 2px;
 `
 
-const LongTypography = styled(Typography)`
+const LongTypography = styled(Typography)<{ $fontSize?: 24 | 16 | 18 | 32 | 40 | 48 }>`
+    font-size: ${(props) => props.$fontSize}px;
     overflow: visible;
     white-space: normal;
     text-overflow: unset;
     word-break: break-word;
     hyphens: auto;
 `
 
-const StyledIcon = styled(Icon)`
-    width: 24px;
-    min-width: 24px;
-    height: 24px;
-`
-
-export const RobotStatusChip = ({ status, flotillaStatus, isarConnected }: StatusProps) => {
+export const RobotStatusChip = ({ status, flotillaStatus, isarConnected, itemSize }: StatusProps) => {
     const { TranslateText } = useLanguageContext()
 
     var iconColor = tokens.colors.text.static_icons__default.hex
@@ -81,8 +77,10 @@ export const RobotStatusChip = ({ status, flotillaStatus, isarConnected }: Statu
 
     return (
         <StyledStatus>
-            <StyledIcon name={statusIcon} style={{ color: iconColor }} />
-            <LongTypography variant="body_short">{TranslateText(status)}</LongTypography>
+            <Icon name={statusIcon} size={itemSize} style={{ color: iconColor }} />
+            <LongTypography $fontSize={itemSize} variant="body_short">
+                {TranslateText(status)}
+            </LongTypography>
         </StyledStatus>
     )
 }
diff --git a/frontend/src/components/Pages/RobotPage/RobotPage.tsx b/frontend/src/components/Pages/RobotPage/RobotPage.tsx
@@ -115,19 +115,20 @@ export const RobotPage = () => {
                                     status={selectedRobot.status}
                                     flotillaStatus={selectedRobot.flotillaStatus}
                                     isarConnected={selectedRobot.isarConnected}
+                                    itemSize={32}
                                 />
 
                                 {selectedRobot.status !== RobotStatus.Offline && (
                                     <>
                                         <BatteryStatusDisplay
-                                            itemSize={48}
+                                            itemSize={32}
                                             batteryLevel={selectedRobot.batteryLevel}
                                             batteryWarningLimit={selectedRobot.model.batteryWarningThreshold}
                                         />
                                         {selectedRobot.pressureLevel !== null &&
                                             selectedRobot.pressureLevel !== undefined && (
                                                 <PressureStatusDisplay
-                                                    itemSize={48}
+                                                    itemSize={32}
                                                     pressure={selectedRobot.pressureLevel}
                                                     upperPressureWarningThreshold={
                                                         selectedRobot.model.upperPressureWarningThreshold