Improve appearance of no missions available dialog

frontend/src/components/Pages/FrontPage/MissionOverview/ScheduleMissionDialog/NoMissionsDialog.tsx

@@ -1,43 +1,33 @@
-import { Button, Card, Dialog, Typography } from '@equinor/eds-core-react'
+import { Button, Typography } from '@equinor/eds-core-react'
 import styled from 'styled-components'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { MissionButton } from 'components/Displays/MissionButtons/MissionButton'
+import { StyledDialog } from 'components/Styles/StyledComponents'
 
-const StyledMissionDialog = styled.div`
-    display: flex;
-    justify-content: space-between;
-`
-const StyledAutoComplete = styled(Card)`
-    display: flex;
-    justify-content: center;
-    padding: 8px;
-    gap: 25px;
-    box-shadow: none;
-`
 const StyledMissionSection = styled.div`
     display: flex;
-    margin-left: auto;
-    margin-right: 0;
+    justify-content: end;
     gap: 10px;
 `
 
 export const NoMissionsDialog = ({ closeDialog }: { closeDialog: () => void }): JSX.Element => {
     const { TranslateText } = useLanguageContext()
     return (
-        <StyledMissionDialog>
-            <Dialog open={true} isDismissable>
-                <StyledAutoComplete>
-                    <Typography variant="h5">
-                        {TranslateText('This installation has no missions - Please create mission')}
-                    </Typography>
-                    <StyledMissionSection>
-                        <MissionButton />
-                        <Button onClick={closeDialog} variant="outlined">
-                            {TranslateText('Cancel')}
-                        </Button>
-                    </StyledMissionSection>
-                </StyledAutoComplete>
-            </Dialog>
-        </StyledMissionDialog>
+        <StyledDialog open={true} isDismissable>
+            <StyledDialog.Header>
+                <Typography variant="h3">{TranslateText('No missions available')}</Typography>
+            </StyledDialog.Header>
+            <StyledDialog.Content>
+                <Typography variant="body_short">
+                    {TranslateText('This installation does not have missions. Please create mission.')}
+                </Typography>
+            </StyledDialog.Content>
+            <StyledMissionSection>
+                <Button onClick={closeDialog} variant="outlined">
+                    {TranslateText('Cancel')}
+                </Button>
+                <MissionButton />
+            </StyledMissionSection>
+        </StyledDialog>
     )
 }

frontend/src/language/en.json

@@ -11,7 +11,7 @@
     "Name": "Name",
     "Completion Time": "Completion Time",
     "Please select installation": "Please select installation",
-    "This installation has no missions - Please create mission": "This installation has no missions - Please create mission",
+    "This installation does not have missions. Please create mission.": "This installation does not have missions. Please create mission.",
     "Cancel": "Cancel",
     "Add mission": "Add mission",
     "Select missions": "Select missions",
@@ -205,5 +205,6 @@
     "Completed Tasks": "Completed Tasks",
     "Confirm plant": "Confirm plant",
     "Failed to retrieve echo missions": "Failed to retrieve echo missions",
-    "Request error": "Request error"
+    "Request error": "Request error",
+    "No missions available": "No missions available"
 }

frontend/src/language/no.json

@@ -11,7 +11,7 @@
     "Name": "Navn",
     "Completion Time": "Fullført tid",
     "Please select installation": "Vennligst velg anlegg",
-    "This installation has no missions - Please create mission": "Dette anlegget har ingen oppdrag - Vennligst lag oppdrag",
+    "This installation does not have missions. Please create mission.": "Dette anlegget har ingen oppdrag. Vennligst lag oppdrag.",
     "Cancel": "Avbryt",
     "Add mission": "Legg til oppdrag",
     "Select missions": "Velg oppdrag",
@@ -205,5 +205,6 @@
     "Completed Tasks": "Fullførte oppgaver",
     "Confirm plant": "Bekreft anlegg",
     "Failed to retrieve echo missions": "Kunne ikke hente ut oppdrag fra echo",
-    "Request error": "Forespørselsfeil"
+    "Request error": "Forespørselsfeil",
+    "No missions available": "Ingen oppdrag tilgjengelig"
 }