Edit error toast for XML upload (merge commit)

Merge branch 'feature/invalid-xml-toast' into 'main'
* Fix notification position

* Fix typo in WizardXMLUploadModal

Closes #972
See merge request https://gitlab.ci.csc.fi/sds-dev/sd-submit/metadata-submitter-frontend/-/merge_requests/1052

Approved-by: Hang Le <lhang@csc.fi>
Co-authored-by: Mariia Rogina <roginama@csc.fi>
Merged by Hang Le <lhang@csc.fi>

src/components/SubmissionWizard/WizardForms/WizardXMLUploadModal.tsx

@@ -1,5 +1,6 @@
 import React, { useRef, useEffect } from "react"
 
+import CancelIcon from "@mui/icons-material/Cancel"
 import Alert from "@mui/material/Alert"
 import Button from "@mui/material/Button"
 import CircularProgress from "@mui/material/CircularProgress"
@@ -68,6 +69,23 @@ const StyledButton = styled(Button)(() => ({
   height: "5rem",
 }))
 
+const CustomAlert = styled(Alert)(({ theme }) => ({
+  backgroundColor: theme.palette.background.paper,
+  borderLeft: `1.25rem solid ${theme.palette.error.main}`,
+  borderTop: `0.25rem solid ${theme.palette.error.main}`,
+  borderRight: `0.25rem solid ${theme.palette.error.main}`,
+  borderBottom: `0.25rem solid ${theme.palette.error.main}`,
+  color: theme.palette.secondary.main,
+  lineHeight: "1.75",
+  boxShadow: "0 0.25rem 0.625rem rgba(0, 0, 0, 0.2)",
+  position: "relative",
+  padding: "1rem",
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  fontSize: "1.75rem !important",
+}))
+
 const WizardXMLUploadModal = ({ open, handleClose, currentObject }: WizardXMLUploadModalProps) => {
   const dispatch = useAppDispatch()
   const objectType = useAppSelector(state => state.objectType)
@@ -243,7 +261,7 @@ const WizardXMLUploadModal = ({ open, handleClose, currentObject }: WizardXMLUpl
                     if (!response.ok) {
                       const errors = response.data.errors.map(
                         error =>
-                          ` ${error.reason} Position: ${error.position}, pointner: ${error.pointer}`
+                          ` ${error.reason} Position: ${error.position}, pointer: ${error.pointer}`
                       )
                       return `The file you attached is not valid ${objectType},
                       our server reported following error: ${response.data.detail} Detail: ${errors}`
@@ -264,17 +282,37 @@ const WizardXMLUploadModal = ({ open, handleClose, currentObject }: WizardXMLUpl
         >
           Cancel
         </StyledButton>
-        <Stack position="absolute" bottom="-30%" left="0" right="0">
+        <Stack position="absolute" bottom="-45%" left="0" right="0">
           {errors.fileUpload?.type === "isFile" && (
-            <Alert severity="error">Please attach a file.</Alert>
+            <CustomAlert
+              severity="error"
+              icon={
+                <CancelIcon sx={{ fontSize: "2rem", marginRight: "1rem", marginTop: "2rem" }} />
+              }
+            >
+              <Typography sx={{ margin: "0.75rem" }}>Please attach a file.</Typography>
+            </CustomAlert>
           )}
           {errors.fileUpload?.type === "isXML" && (
-            <Alert severity="error">Please attach an XML file.</Alert>
+            <CustomAlert
+              severity="error"
+              icon={<CancelIcon sx={{ fontSize: "2rem", marginRight: "1rem" }} />}
+            >
+              <Typography sx={{ margin: "0.75rem" }}>Please attach an XML file.</Typography>
+            </CustomAlert>
           )}
           {errors.fileUpload?.type === "isValidXML" && (
-            <Alert severity="error">{errors?.fileUpload?.message?.toString()}</Alert>
+            <CustomAlert
+              severity="error"
+              icon={<CancelIcon sx={{ fontSize: "2rem", marginRight: "1rem" }} />}
+            >
+              <Typography sx={{ margin: "0.75rem" }}>
+                {errors?.fileUpload?.message?.toString()}
+              </Typography>
+            </CustomAlert>
           )}
         </Stack>
+
         {loading && (
           <Stack
             width="100%"