From 7a974d96d315e038c255b769badebede46dda1f3 Mon Sep 17 00:00:00 2001
From: "Mariana R. Santos" <mrica@equinor.com>
Date: Mon, 6 Nov 2023 11:03:21 +0100
Subject: [PATCH] Improve appearance of mission queue

---
 .../MissionOverview/MissionQueueCard.tsx      |  2 +-
 .../MissionOverview/OngoingMissionCard.tsx    | 13 ++++----
 .../FrontPage/RobotCards/RobotStatusCard.tsx  | 30 ++++++++++---------
 .../Pages/RobotPage/RobotArmMovement.tsx      | 11 +++++--
 4 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx
index 80ae5299e..bad920fd4 100644
--- a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx
+++ b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx
@@ -29,7 +29,7 @@ const HorizontalContent = styled.div`
 `
 const HorizontalNonButtonContent = styled.div`
     display: grid;
-    grid-template-columns: 20px 380px auto auto 180px;
+    grid-template-columns: 20px 350px auto 100px 180px;
     align-items: center;
     padding: 4px 0px 4px 10px;
     gap: 10px;
diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx
index a29893549..eee7ed633 100644
--- a/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx
+++ b/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx
@@ -51,6 +51,11 @@ const VerticalContent = styled.div`
     justify-content: space-between;
 `
 
+const StyledPadding = styled.div`
+    padding: 10px;
+    border-radius: 3px;
+`
+
 export function OngoingMissionCard({ mission }: MissionProps) {
     let navigate = useNavigate()
     const routeChange = () => {
@@ -61,15 +66,13 @@ export function OngoingMissionCard({ mission }: MissionProps) {
         <StyledMissionCard variant="default" style={{ boxShadow: tokens.elevation.raised }}>
             <TopContent>
                 <StyledTitle variant="default" onClick={routeChange}>
-                    <div style={{ padding: '10px', borderRadius: '3px' }}>
+                    <StyledPadding>
                         <Typography variant="h6" color="primary">
                             {mission.name}
                         </Typography>
-                    </div>
+                    </StyledPadding>
                 </StyledTitle>
-                <div>
-                    <MissionControlButtons mission={mission} />
-                </div>
+                <MissionControlButtons mission={mission} />
             </TopContent>
             <BottomContent>
                 <VerticalContent>
diff --git a/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx b/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx
index cf8108f46..2722a76a9 100644
--- a/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx
+++ b/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx
@@ -44,9 +44,13 @@ const VerticalContent = styled.div<{ $alignItems?: string }>`
     gap: 4px;
 `
 
+const StyledPadding = styled.div`
+    padding: 8px;
+`
+
 function cardContent({ robot }: RobotProps) {
     return (
-        <div style={{ padding: '8px' }}>
+        <StyledPadding>
             <RobotImage robotType={robot.model.type} height="200px" />
             <HorizontalContent>
                 <VerticalContent $alignItems="start">
@@ -68,7 +72,7 @@ function cardContent({ robot }: RobotProps) {
                     />
                 </VerticalContent>
             </HorizontalContent>
-        </div>
+        </StyledPadding>
     )
 }
 
@@ -89,18 +93,16 @@ export function RobotStatusCardPlaceholder() {
     const { TranslateText } = useLanguageContext()
     return (
         <StyledCard style={{ boxShadow: tokens.elevation.raised }}>
-            <div>
-                <RobotImage robotType={RobotType.NoneType} />
-                <Typography variant="h5" color="disabled">
-                    {TranslateText('No robot connected')}
-                </Typography>
-                <Typography variant="body_short" color="disabled">
-                    ----
-                </Typography>
-                <HorizontalContent>
-                    <RobotStatusChip />
-                </HorizontalContent>
-            </div>
+            <RobotImage robotType={RobotType.NoneType} />
+            <Typography variant="h5" color="disabled">
+                {TranslateText('No robot connected')}
+            </Typography>
+            <Typography variant="body_short" color="disabled">
+                ----
+            </Typography>
+            <HorizontalContent>
+                <RobotStatusChip />
+            </HorizontalContent>
         </StyledCard>
     )
 }
diff --git a/frontend/src/components/Pages/RobotPage/RobotArmMovement.tsx b/frontend/src/components/Pages/RobotPage/RobotArmMovement.tsx
index 89bea769d..02c7fdcf6 100644
--- a/frontend/src/components/Pages/RobotPage/RobotArmMovement.tsx
+++ b/frontend/src/components/Pages/RobotPage/RobotArmMovement.tsx
@@ -4,6 +4,7 @@ import { BackendAPICaller } from 'api/ApiCaller'
 import { Robot } from 'models/Robot'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { tokens } from '@equinor/eds-tokens'
+import styled from 'styled-components'
 
 interface RobotProps {
     robot: Robot
@@ -12,6 +13,12 @@ interface RobotProps {
 }
 const feedbackTimer = 10000 // Clear feedback after 10 seconds
 
+const StyledButton = styled.div`
+    display: flex;
+    justifycontent: center;
+    margintop: auto;
+`
+
 export function MoveRobotArm({ robot, armPosition, isRobotAvailable }: RobotProps) {
     const { TranslateText } = useLanguageContext()
     const [feedback, setFeedback] = useState('')
@@ -71,9 +78,9 @@ export function MoveRobotArm({ robot, armPosition, isRobotAvailable }: RobotProp
                             'This button is disabled because the robot is not available. Check that the robot is on, and are not doing any other activities.'
                         )}
                     </Typography>
-                    <div style={{ display: 'flex', justifyContent: 'center', marginTop: 'auto' }}>
+                    <StyledButton>
                         <Button onClick={closePopover}>{TranslateText('Close')}</Button>
-                    </div>
+                    </StyledButton>
                 </Popover.Content>
             </Popover>
             <Button style={moveArmButtonStyle()} onClick={!usable ? openPopover : onClickMoveArm} ref={anchorRef}>