From a3d893769bbf1a9adbc6f58fff32fd626fc48086 Mon Sep 17 00:00:00 2001
From: "Mariana R. Santos" <mrica@equinor.com>
Date: Fri, 10 Jan 2025 09:49:18 +0100
Subject: [PATCH] Improve mission map appearance

---
 .../MissionPage/MapPosition/MissionMapView.tsx      | 13 +++----------
 .../components/Pages/MissionPage/MissionPage.tsx    |  2 +-
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx b/frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx
index 5eaeb002..7b21c3f1 100644
--- a/frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx
+++ b/frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx
@@ -1,5 +1,3 @@
-import { Card, Typography } from '@equinor/eds-core-react'
-import { tokens } from '@equinor/eds-tokens'
 import { Mission } from 'models/Mission'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
@@ -15,12 +13,11 @@ interface MissionProps {
     mission: Mission
 }
 
-const MapCard = styled(Card)`
+const MapCard = styled.div`
     display: flex;
+    flex-direction: column;
     max-width: 600px;
-    padding: 16px;
     justify-items: center;
-    gap: 5px;
 `
 const StyledMap = styled.canvas`
     object-fit: contain;
@@ -86,9 +83,6 @@ export const MissionMapView = ({ mission }: MissionProps) => {
         [mission.tasks]
     )
 
-    let displayedMapName = mapInfo?.mapName.split('.')[0].replace(/[^0-9a-z-A-Z ]/g, ' ')
-    displayedMapName = displayedMapName ? displayedMapName.charAt(0).toUpperCase() + displayedMapName.slice(1) : ' '
-
     useEffect(() => {
         if (mapInfo?.mapName) {
             BackendAPICaller.getMap(mission.installationCode!, mapInfo.mapName)
@@ -143,8 +137,7 @@ export const MissionMapView = ({ mission }: MissionProps) => {
     }, [updateMap, mapContext])
 
     return (
-        <MapCard style={{ boxShadow: tokens.elevation.raised }}>
-            <Typography variant="h4">{displayedMapName}</Typography>
+        <MapCard>
             <StyledElements>
                 <StyledMap id="mapCanvas" />
                 {imageObjectURL.current !== NoMap && mapContext && <MapCompass />}
diff --git a/frontend/src/components/Pages/MissionPage/MissionPage.tsx b/frontend/src/components/Pages/MissionPage/MissionPage.tsx
index ab0f97a6..800abdaa 100644
--- a/frontend/src/components/Pages/MissionPage/MissionPage.tsx
+++ b/frontend/src/components/Pages/MissionPage/MissionPage.tsx
@@ -45,7 +45,7 @@ const StyledTableAndMap = styled.div`
     display: flex;
     flex-wrap: wrap;
     align-items: top;
-    gap: 24px;
+    gap: 30px;
 `
 const StyledMissionPageContent = styled.div`
     display: flex;