Remove legacy image import

frontend/src/common/EmptyBlob.tsx

@@ -1,25 +1,18 @@
 import { Stack } from '@mui/material'
 import Typography from '@mui/material/Typography'
-import Image from "next/image"
+import Image from 'next/image'
 
 type EmptyBlobProps = {
   text: string
 }
 
 export default function EmptyBlob({ text }: EmptyBlobProps) {
+  const css = { maxWidth: '100%', height: 'auto' }
+
   return (
-    (<Stack spacing={1} alignItems='center'>
-      <Image
-        src='/emptyBlob.svg'
-        alt='Empty blob'
-        width={120}
-        height={120}
-        data-test='emptyBlobImage'
-        style={{
-          maxWidth: "100%",
-          height: "auto"
-        }} />
+    <Stack spacing={1} alignItems='center'>
+      <Image src='/emptyBlob.svg' alt='Empty blob' width={120} height={120} data-test='emptyBlobImage' style={css} />
       <Typography color='text.secondary'>{text}</Typography>
-    </Stack>)
-  );
+    </Stack>
+  )
 }

lib/landing/src/NavBar.tsx

@@ -12,7 +12,7 @@ import Tooltip from '@mui/material/Tooltip'
 import MenuItem from '@mui/material/MenuItem'
 import GitHubIcon from '@mui/icons-material/GitHub'
 import Link from './Link'
-import Image from 'next/legacy/image'
+import Image from 'next/image'
 import imageLoader from './imageLoader'
 
 import bailoLogo from '../public/Bailo-logo-reverse.png'

lib/landing/src/Wrapper.tsx

@@ -6,7 +6,7 @@ import CssBaseline from '@mui/material/CssBaseline'
 import { styled, ThemeProvider, useTheme } from '@mui/material/styles'
 import Toolbar from '@mui/material/Toolbar'
 import Head from 'next/head'
-import Image from 'next/legacy/image'
+import Image from 'next/image'
 import Link from './Link'
 import imageLoader from './imageLoader'
 import { Button, IconButton, Tooltip } from '@mui/material'