Improve alerts list

equinor · Oct 22, 2024 · 3ef8c03 · 3ef8c03
1 parent 3adf885
commit 3ef8c03
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 12 deletions.
diff --git a/frontend/src/components/Alerts/AlertsListItem.tsx b/frontend/src/components/Alerts/AlertsListItem.tsx
@@ -27,12 +27,14 @@ const StyledListHeading = styled(outline)`
     display: flex;
     justify-content: space-between;
     padding: 6px 5px 6px 5px;
+    border-radius: 3px 3px 0px 0px;
 `
 const StyledListItem = styled(outline)`
     display: flex;
     flex-direction: column;
     align-items: left;
     row-gap: 10px;
+    border-radius: 0px 0px 3px 3px;
 `
 
 const VerticalContent = styled.div`
@@ -59,6 +61,14 @@ const Right = styled.div`
     display: flex;
     align-items: right;
     justify-content: right;
+    align-content: center;
+`
+const StyledButton = styled(Button)`
+    margin-top: 6px;
+    right: 30px;
+    position: absolute;
+    height: 30px;
+    width: 30px;
 `
 
 interface AlertListInfo {
@@ -111,13 +121,9 @@ export const AlertListItem = ({ children, dismissAlert }: AlertProps) => {
     return (
         <Horizontal>
             {children}
-            <Button
-                variant="ghost_icon"
-                onClick={dismissAlert}
-                style={{ marginTop: '0px', right: '25px', position: 'absolute' }}
-            >
-                <Icon name={Icons.Clear}></Icon>
-            </Button>
+            <StyledButton variant="ghost_icon" onClick={dismissAlert}>
+                <Icon name={Icons.Clear} size={18}></Icon>
+            </StyledButton>
         </Horizontal>
     )
 }
diff --git a/frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx b/frontend/src/components/Pages/MissionPage/MapPosition/MissionMapView.tsx
@@ -130,7 +130,7 @@ export const MissionMapView = ({ mission }: MissionProps) => {
 
     return (
         <MapCard style={{ boxShadow: tokens.elevation.raised }}>
-            <Typography variant='h3'>{mission.map?.mapName}</Typography>
+            <Typography variant="h3">{mission.map?.mapName}</Typography>
             <SyledContainer>
                 <StyledElements>
                     <StyledMap id="mapCanvas" />

diff --git a/frontend/src/components/Pages/MissionPage/MissionHeader/MissionHeader.tsx b/frontend/src/components/Pages/MissionPage/MissionHeader/MissionHeader.tsx
@@ -25,7 +25,6 @@ const TitleSection = styled.div`
     display: flex;
     align-items: center;
     gap: 20px;
-
 `
 const InfoSection = styled.div`
     display: flex;

diff --git a/frontend/src/components/Pages/MissionPage/TaskOverview/TaskTable.tsx b/frontend/src/components/Pages/MissionPage/TaskOverview/TaskTable.tsx
@@ -5,7 +5,12 @@ import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { Task, TaskStatus } from 'models/Task'
 import { tokens } from '@equinor/eds-tokens'
 import { getColorsFromTaskStatus } from 'utils/MarkerStyles'
-import { StyledTableBody, StyledTableCaption, StyledTableCaptionGray, StyledTableCell } from 'components/Styles/StyledComponents'
+import {
+    StyledTableBody,
+    StyledTableCaption,
+    StyledTableCaptionGray,
+    StyledTableCell,
+} from 'components/Styles/StyledComponents'
 
 const StyledTable = styled(Table)`
     display: block;
@@ -36,7 +41,7 @@ export const TaskTable = ({ tasks }: { tasks: Task[] | undefined }) => {
             <StyledTableCaptionGray>
                 <StyledTypography variant="h2">{TranslateText('Tasks')}</StyledTypography>
             </StyledTableCaptionGray>
-            <Table.Head >
+            <Table.Head>
                 <Table.Row>
                     <StyledTableCell>#</StyledTableCell>
                     <StyledTableCell>{TranslateText('Tag-ID')}</StyledTableCell>

diff --git a/frontend/src/utils/DeckMapView.tsx b/frontend/src/utils/DeckMapView.tsx
@@ -125,7 +125,7 @@ export const DeckMapView = ({ deck, markedRobotPosition }: DeckProps) => {
             )}
             {!isLoading && (
                 <StyledMapLimits>
-                    <Typography variant='h2'>
+                    <Typography variant="h2">
                         {mapMetadata?.mapName ? mapMetadata.mapName : 'No map available'}
                     </Typography>
                     <StyledMapCompass>