Improve mission page info section

equinor · Dec 5, 2024 · c9399b3 · c9399b3
1 parent d999dda
commit c9399b3
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 36 deletions.
diff --git a/frontend/src/components/Displays/MissionButtons/MissionRestartButton.tsx b/frontend/src/components/Displays/MissionButtons/MissionRestartButton.tsx
@@ -20,6 +20,7 @@ const Centered = styled.div`
 `
 const StyledButton = styled(Button)`
     background-color: none;
+    height: fit-content;
 `
 
 interface MissionProps {

diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx
@@ -18,6 +18,7 @@ const StyledTopBar = styled(TopBar)`
     @media (max-width: 600px) {
         grid-column-gap: 12px;
     }
+    height: fit-content;
 `
 const StyledWrapper = styled.div`
     display: flex;

diff --git a/frontend/src/components/Pages/FrontPage/FrontPage.tsx b/frontend/src/components/Pages/FrontPage/FrontPage.tsx
@@ -11,6 +11,7 @@ const StyledFrontPage = styled.div`
     gap: 3rem;
     padding: 15px 15px;
     background-color: ${tokens.colors.ui.background__light.hex};
+    min-height: calc(100vh - 65px);
 `
 
 export const FrontPage = () => {

diff --git a/frontend/src/components/Pages/MissionPage/MissionHeader/MissionHeader.tsx b/frontend/src/components/Pages/MissionPage/MissionHeader/MissionHeader.tsx
@@ -17,8 +17,8 @@ const HeaderSection = styled(Card)`
     top: 60px;
     position: sticky;
     z-index: 1;
-    background-color: ${tokens.colors.ui.background__light.hex};
     box-shadow: none;
+    background-color: ${tokens.colors.ui.background__light.hex};
 `
 const TitleSection = styled.div`
     display: flex;
@@ -29,16 +29,17 @@ const InfoSection = styled.div`
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
-    max-width: 950px;
+    width: fit-content;
 `
-const StyledCard = styled(Card)`
+const StyledCard = styled.div`
     display: flex;
     flex: 1 0 0;
     padding: 8px 16px;
     flex-direction: row;
-    background: ${tokens.colors.ui.background__default.hex};
-    gap: 24px;
-    align-items: stretch;
+    align-items: end;
+    gap: 32px;
+    height: 30px;
+    width: fit-content;
 `
 const StyledTitleText = styled.div`
     display: grid;
@@ -51,12 +52,25 @@ const StyledTypography = styled(Typography)`
     font-style: normal;
     font-weight: 400;
     line-height: 40px; /* 125% */
-
     @media (max-width: 500px) {
         font-size: 24px;
     }
 `
 
+const StyledMissionHeader = styled(Card)`
+    display: flex;
+    padding: 24px 10px 10px 10px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 24px;
+    flex: 1 0 0;
+    align-self: stretch;
+    border-radius: 6px;
+    border: 1px solid ${tokens.colors.ui.background__medium.rgba};
+    background: ${tokens.colors.ui.background__default.rgba};
+    max-width: fit-content;
+`
+
 const HeaderText = (title: string, text: string) => {
     return (
         <StyledTitleText>
@@ -187,35 +201,37 @@ export const MissionHeader = ({ mission }: { mission: Mission }) => {
                 </Typography>
                 <StatusReason statusReason={mission.statusReason} status={mission.status}></StatusReason>
             </HeaderSection>
-            <InfoSection>
-                <StyledCard>
-                    <div>
-                        {HeaderText(translatedStatus, '')}
-                        <MissionStatusDisplay status={mission.status} />
-                    </div>
-                    {HeaderText(translatedArea, `${mission.area?.areaName}`)}
-                    {HeaderText(translatedTasks, `${numberOfCompletedTasks + '/' + mission.tasks.length}`)}
-                </StyledCard>
-                <StyledCard>
-                    {HeaderText(translatedStartDate, `${startDate}`)}
-                    {HeaderText(translatedStartTime, `${startTime}`)}
-                </StyledCard>
-                <StyledCard>
-                    {HeaderText(translatedUsedTime, `${usedTime}`)}
-                    {!isMissionCompleted && HeaderText(translatedEstimatedTimeRemaining, `${remainingTime}`)}
-                </StyledCard>
-                <StyledCard>
-                    {HeaderText(translatedRobot, `${mission.robot.name}`)}
-                    {!isMissionCompleted && HeaderText(translatedBatteryLevel, batteryValue)}
-                    {!isMissionCompleted &&
-                        mission.robot.pressureLevel !== undefined &&
-                        mission.robot.pressureLevel !== null &&
-                        HeaderText(
-                            translatedPressureLevel,
-                            `${Math.round(mission.robot.pressureLevel * barToMillibar)}mBar`
-                        )}
-                </StyledCard>
-            </InfoSection>
+            <StyledMissionHeader>
+                <InfoSection>
+                    <StyledCard>
+                        <div>
+                            {HeaderText(translatedStatus, '')}
+                            <MissionStatusDisplay status={mission.status} />
+                        </div>
+                        {HeaderText(translatedArea, `${mission.area?.areaName}`)}
+                        {HeaderText(translatedTasks, `${numberOfCompletedTasks + '/' + mission.tasks.length}`)}
+                    </StyledCard>
+                    <StyledCard>
+                        {HeaderText(translatedStartDate, `${startDate}`)}
+                        {HeaderText(translatedStartTime, `${startTime}`)}
+                    </StyledCard>
+                    <StyledCard>
+                        {HeaderText(translatedUsedTime, `${usedTime}`)}
+                        {!isMissionCompleted && HeaderText(translatedEstimatedTimeRemaining, `${remainingTime}`)}
+                    </StyledCard>
+                    <StyledCard>
+                        {HeaderText(translatedRobot, `${mission.robot.name}`)}
+                        {!isMissionCompleted && HeaderText(translatedBatteryLevel, batteryValue)}
+                        {!isMissionCompleted &&
+                            mission.robot.pressureLevel !== undefined &&
+                            mission.robot.pressureLevel !== null &&
+                            HeaderText(
+                                translatedPressureLevel,
+                                `${Math.round(mission.robot.pressureLevel * barToMillibar)}mBar`
+                            )}
+                    </StyledCard>
+                </InfoSection>
+            </StyledMissionHeader>
         </>
     )
 }