Improve mission map appearance

equinor · Jan 10, 2025 · 386d373 · 386d373
1 parent 753f438
commit 386d373
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 18 deletions.
diff --git a/frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx b/frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx
@@ -15,12 +15,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;
@@ -143,7 +142,7 @@ export const MissionMapView = ({ mission }: MissionProps) => {
     }, [updateMap, mapContext])
 
     return (
-        <MapCard style={{ boxShadow: tokens.elevation.raised }}>
+        <MapCard>
             <Typography variant="h4">{displayedMapName}</Typography>
             <StyledElements>
                 <StyledMap id="mapCanvas" />

diff --git 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: 35px;
 `
 const StyledMissionPageContent = styled.div`
     display: flex;
@@ -132,7 +132,6 @@ export const MissionPage = () => {
                         <StyledCardsWidth>
                             <MissionHeader mission={selectedMission} />
                             <TaskAndMapSection>
-                                <Typography variant="h4">{TranslateText('Tasks')}</Typography>
                                 <StyledTableAndMap>
                                     <TaskTable tasks={selectedMission?.tasks} />
                                     {selectedMission.missionId && <MissionMapView mission={selectedMission} />}

diff --git a/frontend/src/components/Pages/MissionPage/TaskOverview/TaskTable.tsx b/frontend/src/components/Pages/MissionPage/TaskOverview/TaskTable.tsx
@@ -8,6 +8,10 @@ import { getColorsFromTaskStatus } from 'utils/MarkerStyles'
 import { InspectionType } from 'models/Inspection'
 import { useInspectionsContext } from 'components/Contexts/InpectionsContext'
 
+const StyledTableSection = styled.div`
+    display: flex;
+    flex-direction: column;
+`
 const StyledTable = styled(Table)`
     display: block;
     overflow: auto;
@@ -22,18 +26,21 @@ export const TaskTable = ({ tasks }: TaskTableProps) => {
     const { TranslateText } = useLanguageContext()
 
     return (
-        <StyledTable>
-            <Table.Head>
-                <Table.Row>
-                    <Table.Cell>#</Table.Cell>
-                    <Table.Cell>{TranslateText('Tag-ID')}</Table.Cell>
-                    <Table.Cell>{TranslateText('Description')}</Table.Cell>
-                    <Table.Cell>{TranslateText('Inspection Types')}</Table.Cell>
-                    <Table.Cell>{TranslateText('Status')}</Table.Cell>
-                </Table.Row>
-            </Table.Head>
-            <Table.Body>{tasks && <TaskTableRows tasks={tasks} />}</Table.Body>
-        </StyledTable>
+        <StyledTableSection>
+            <Typography variant="h4">{TranslateText('Tasks')}</Typography>
+            <StyledTable>
+                <Table.Head>
+                    <Table.Row>
+                        <Table.Cell>#</Table.Cell>
+                        <Table.Cell>{TranslateText('Tag-ID')}</Table.Cell>
+                        <Table.Cell>{TranslateText('Description')}</Table.Cell>
+                        <Table.Cell>{TranslateText('Inspection Types')}</Table.Cell>
+                        <Table.Cell>{TranslateText('Status')}</Table.Cell>
+                    </Table.Row>
+                </Table.Head>
+                <Table.Body>{tasks && <TaskTableRows tasks={tasks} />}</Table.Body>
+            </StyledTable>
+        </StyledTableSection>
     )
 }