From 583d32111920ef203b1e68516860a9e8924acb50 Mon Sep 17 00:00:00 2001
From: "Mariana R. Santos" <mrica@equinor.com>
Date: Thu, 2 Nov 2023 14:37:14 +0100
Subject: [PATCH] Fix frontend padding

---
 .../Pages/FrontPage/MissionOverview/MissionQueueCard.tsx | 5 +++--
 .../FrontPage/MissionOverview/OngoingMissionCard.tsx     | 9 +++++----
 .../Pages/FrontPage/RobotCards/RobotStatusCard.tsx       | 7 +++----
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx
index c0307a4f6..80ae5299e 100644
--- a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx
+++ b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx
@@ -29,9 +29,10 @@ const HorizontalContent = styled.div`
 `
 const HorizontalNonButtonContent = styled.div`
     display: grid;
-    grid-template-columns: 20px 400px auto 90px 180px;
+    grid-template-columns: 20px 380px auto auto 180px;
     align-items: center;
-    padding-left: 10px;
+    padding: 4px 0px 4px 10px;
+    gap: 10px;
 `
 
 const StyledDialogContent = styled.div`
diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx
index 106767496..a29893549 100644
--- a/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx
+++ b/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx
@@ -22,7 +22,6 @@ const StyledMissionCard = styled(Card)`
 const StyledTitle = styled(Card)`
     width: 70%;
     height: 80%;
-    padding: 10px;
     :hover {
         background-color: #deedee;
     }
@@ -62,9 +61,11 @@ export function OngoingMissionCard({ mission }: MissionProps) {
         <StyledMissionCard variant="default" style={{ boxShadow: tokens.elevation.raised }}>
             <TopContent>
                 <StyledTitle variant="default" onClick={routeChange}>
-                    <Typography variant="h6" color="primary">
-                        {mission.name}
-                    </Typography>
+                    <div style={{ padding: '10px', borderRadius: '3px' }}>
+                        <Typography variant="h6" color="primary">
+                            {mission.name}
+                        </Typography>
+                    </div>
                 </StyledTitle>
                 <div>
                     <MissionControlButtons mission={mission} />
diff --git a/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx b/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx
index bd2d3fc49..cf8108f46 100644
--- a/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx
+++ b/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx
@@ -24,7 +24,6 @@ const StyledCard = styled(Card)`
 `
 const HoverableStyledCard = styled(Card)`
     width: 220px;
-    padding: 8px;
     :hover {
         background-color: #deedee;
     }
@@ -47,7 +46,7 @@ const VerticalContent = styled.div<{ $alignItems?: string }>`
 
 function cardContent({ robot }: RobotProps) {
     return (
-        <div>
+        <div style={{ padding: '8px' }}>
             <RobotImage robotType={robot.model.type} height="200px" />
             <HorizontalContent>
                 <VerticalContent $alignItems="start">
@@ -80,7 +79,7 @@ export function RobotStatusCard({ robot }: RobotProps) {
         navigate(path)
     }
     return (
-        <HoverableStyledCard variant="default" style={{ boxShadow: tokens.elevation.raised }} onClick={goToRobot}>
+        <HoverableStyledCard style={{ boxShadow: tokens.elevation.raised }} onClick={goToRobot}>
             {cardContent({ robot })}
         </HoverableStyledCard>
     )
@@ -89,7 +88,7 @@ export function RobotStatusCard({ robot }: RobotProps) {
 export function RobotStatusCardPlaceholder() {
     const { TranslateText } = useLanguageContext()
     return (
-        <StyledCard variant="default" style={{ boxShadow: tokens.elevation.raised }}>
+        <StyledCard style={{ boxShadow: tokens.elevation.raised }}>
             <div>
                 <RobotImage robotType={RobotType.NoneType} />
                 <Typography variant="h5" color="disabled">