Improve ongoing mission card

equinor · Oct 30, 2024 · 200a227 · 200a227
1 parent 012da12
commit 200a227
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/frontend/src/components/Displays/RobotDisplays/BatteryStatusDisplay.tsx b/frontend/src/components/Displays/RobotDisplays/BatteryStatusDisplay.tsx
@@ -5,7 +5,6 @@ import { Icons } from 'utils/icons'
 
 const BatteryAlignment = styled.div`
     display: flex;
-    align-items: center;
 `
 
 const StyledTypography = styled(Typography)<{ $fontSize?: 24 | 16 | 18 | 32 | 40 | 48 }>`
@@ -15,12 +14,14 @@ interface BatteryStatusDisplayProps {
     batteryLevel?: number
     itemSize?: 24 | 16 | 18 | 32 | 40 | 48 | undefined
     batteryWarningLimit?: number
+    textAlignedBottom?: boolean
 }
 
 export const BatteryStatusDisplay = ({
     batteryLevel,
     itemSize,
     batteryWarningLimit,
+    textAlignedBottom,
 }: BatteryStatusDisplayProps): JSX.Element => {
     let iconColor: string = tokens.colors.interactive.primary__resting.hex
 
@@ -45,7 +46,7 @@ export const BatteryStatusDisplay = ({
     iconColor = batteryIcon === Icons.BatteryAlert ? tokens.colors.interactive.warning__resting.hex : iconColor
 
     return (
-        <BatteryAlignment>
+        <BatteryAlignment style={{ alignItems: textAlignedBottom ? 'end' : 'center' }}>
             <Icon name={batteryIcon} color={iconColor} size={itemSize} />
             <StyledTypography $fontSize={itemSize}>{batteryValue}</StyledTypography>
         </BatteryAlignment>

diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx
@@ -29,6 +29,7 @@ const StyledTitle = styled(Card)`
     padding-left: 12px;
     :hover {
         background-color: #deedee;
+        cursor: pointer;
     }
     box-shadow: none;
 `
@@ -61,7 +62,7 @@ export const OngoingMissionCard = ({ mission }: MissionProps): JSX.Element => {
         <StyledMissionCard style={{ boxShadow: tokens.elevation.raised }}>
             <TopContent>
                 <StyledTitle onClick={routeChange}>
-                    <Typography variant="h6" color="primary">
+                    <Typography variant="h5" style={{ color: tokens.colors.text.static_icons__default.hex }}>
                         {mission.name}
                     </Typography>
                 </StyledTitle>
@@ -79,6 +80,7 @@ export const OngoingMissionCard = ({ mission }: MissionProps): JSX.Element => {
                 <BatteryStatusDisplay
                     batteryLevel={robot?.batteryLevel}
                     batteryWarningLimit={robot?.model.batteryWarningThreshold}
+                    textAlignedBottom={true}
                 />
             </BottomContent>
         </StyledMissionCard>

diff --git a/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx b/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx
@@ -62,6 +62,9 @@ const AreaContent = styled.div`
     display: flex;
     justify-content: left;
     padding-right: 6px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 `
 const LongTypography = styled(Typography)`
     overflow: hidden;