Fix frontend padding

equinor · Nov 2, 2023 · 583d321 · 583d321
1 parent 5dd8bcc
commit 583d321
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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">