Improve appearance of header

equinor · Nov 13, 2023 · 5e2102d · 5e2102d
1 parent dcc7d71
commit 5e2102d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 10 deletions.
diff --git a/frontend/src/components/Pages/MissionPage/MissionHeader/MissionHeader.tsx b/frontend/src/components/Pages/MissionPage/MissionHeader/MissionHeader.tsx
@@ -16,17 +16,19 @@ const HeaderSection = styled(Card)`
     display: flex;
     top: 60px;
     flex-direction: column;
-    gap: 0.4rem;
+    gap: 10px;
     position: sticky;
-    margin-top: auto;
+    padding: 15px 0px 15px 0px;
     background-color: white;
     z-index: 1;
-    border-color: white;
+    box-shadow: none;
+    border-bottom: 1px solid ${tokens.colors.interactive.disabled__border.hex};
+    border-radius: 0px;
 `
 const TitleSection = styled.div`
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 20px;
 `
 const InfoSection = styled.div`
     display: flex;
@@ -117,11 +119,7 @@ export function MissionHeader({ mission }: MissionHeaderProps) {
                 {isMissionActive && <MissionControlButtons mission={mission} />}
                 {mission.isCompleted && <MissionRestartButton mission={mission} />}
             </TitleSection>
-            <Typography
-                variant="body_long_italic"
-                group="paragraph"
-                color={tokens.colors.text.static_icons__secondary.hex}
-            >
+            <Typography variant="body_long" group="paragraph" color={tokens.colors.text.static_icons__secondary.hex}>
                 {mission.description && `${translatedDescription}: ${mission.description}`}
             </Typography>
             <StatusReason mission={mission}></StatusReason>

diff --git a/frontend/src/components/Pages/MissionPage/MissionPage.tsx b/frontend/src/components/Pages/MissionPage/MissionPage.tsx
@@ -19,7 +19,6 @@ const StyledMissionPage = styled.div`
     flex-direction: column;
     gap: 1rem;
     margin: 2rem;
-    margin-right: 0;
 `
 const TaskAndMapSection = styled.div`
     display: flex;