Update frontend dependencies

geneit_app/src/routes/auth/LoginRoute.tsx

@@ -11,7 +11,7 @@ import {
 } from "@mui/material";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
 import * as React from "react";
@@ -167,7 +167,7 @@ export function LoginRoute(): React.ReactElement {
         </Button>
 
         <Grid container>
-          <Grid item xs>
+          <Grid>
             <Typography variant="body2" color={"primary"}>
               <Link
                 to="/password_forgotten"
@@ -177,7 +177,7 @@ export function LoginRoute(): React.ReactElement {
               </Link>
             </Typography>
           </Grid>
-          <Grid item>
+          <Grid>
             <Typography variant="body2" color={"primary"}>
               <Link
                 to="/new-account"

geneit_app/src/routes/family/genealogy/FamilyCoupleRoute.tsx

@@ -3,7 +3,8 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import EditIcon from "@mui/icons-material/Edit";
 import FileDownloadIcon from "@mui/icons-material/FileDownload";
 import SaveIcon from "@mui/icons-material/Save";
-import { Button, Grid, Stack } from "@mui/material";
+import { Button, Stack } from "@mui/material";
+import Grid from "@mui/material/Grid2";
 import React from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { ServerApi } from "../../../api/ServerApi";
@@ -352,7 +353,7 @@ export function CouplePage(p: {
 
       <Grid container spacing={2}>
         {/* General info */}
-        <Grid item sm={12} md={6}>
+        <Grid size={{ sm: 12, md: 6 }}>
           <PropertiesBox title="Informations générales">
             {/* Husband */}
             <br />
@@ -427,7 +428,7 @@ export function CouplePage(p: {
 
         {
           /* Photo */ !family.family.disable_couple_photos && (
-            <Grid item sm={12} md={6}>
+            <Grid size={{ sm: 12, md: 6 }}>
               <PropertiesBox title="Photo">
                 <div style={{ textAlign: "center" }}>
                   <CouplePhoto couple={couple} width={150} />
@@ -474,7 +475,7 @@ export function CouplePage(p: {
 
         {/* Children */}
         {p.children && (
-          <Grid item sm={12} md={6}>
+          <Grid size={{ sm: 12, md: 6 }}>
             <PropertiesBox title="Enfants">
               {p.children.length === 0 ? (
                 <>Aucun enfant</>

geneit_app/src/routes/family/genealogy/FamilyMemberRoute.tsx

@@ -7,12 +7,12 @@ import FileDownloadIcon from "@mui/icons-material/FileDownload";
 import SaveIcon from "@mui/icons-material/Save";
 import {
   Button,
-  Grid,
   ListItemAvatar,
   ListItemButton,
   ListItemText,
   Stack,
 } from "@mui/material";
+import Grid from "@mui/material/Grid2";
 import * as EmailValidator from "email-validator";
 import React from "react";
 import { useNavigate, useParams } from "react-router-dom";
@@ -384,7 +384,7 @@ export function MemberPage(p: {
 
       <Grid container spacing={2}>
         {/* General info */}
-        <Grid item sm={12} md={6}>
+        <Grid size={{ sm: 12, md: 6 }}>
           <PropertiesBox title="Informations générales">
             {/* Sex */}
             <SexSelection
@@ -504,7 +504,7 @@ export function MemberPage(p: {
         </Grid>
 
         {/* Photo */}
-        <Grid item sm={12} md={6}>
+        <Grid size={{ sm: 12, md: 6 }}>
           <PropertiesBox title="Photo">
             <div style={{ textAlign: "center" }}>
               <MemberPhoto member={member} width={150} />
@@ -549,7 +549,7 @@ export function MemberPage(p: {
 
         {/* Contact */}
         {(p.editing || member.hasContactInfo) && (
-          <Grid item sm={12} md={6}>
+          <Grid size={{ sm: 12, md: 6 }}>
             <PropertiesBox title="Contact">
               {/* Email */}
               <PropEdit
@@ -630,7 +630,7 @@ export function MemberPage(p: {
 
         {/* Bio */}
         {(p.editing || member.hasNote) && (
-          <Grid item sm={12} md={6}>
+          <Grid size={{ sm: 12, md: 6 }}>
             <PropertiesBox title="Biographie">
               <PropEdit
                 label="Biographie"
@@ -651,7 +651,7 @@ export function MemberPage(p: {
 
         {/* Couples */}
         {p.couples && (
-          <Grid item sm={12} md={6}>
+          <Grid size={{ sm: 12, md: 6 }}>
             <PropertiesBox title={member.sex === "F" ? "Époux" : "Épouse"}>
               {p.couples!.length === 0 ? (
                 <>{member.sex === "F" ? "Aucun époux" : "Aucune épouse"}</>
@@ -678,7 +678,7 @@ export function MemberPage(p: {
 
         {/* Children */}
         {p.children && (
-          <Grid item sm={12} md={6}>
+          <Grid size={{ sm: 12, md: 6 }}>
             <PropertiesBox title="Enfants">
               {p.children.length === 0 ? (
                 <>Aucun enfant</>
@@ -707,7 +707,7 @@ export function MemberPage(p: {
 
         {/* Siblings */}
         {p.siblings && (
-          <Grid item sm={12} md={6}>
+          <Grid size={{ sm: 12, md: 6 }}>
             <PropertiesBox title="Frères et sœurs">
               {p.siblings.length === 0 ? (
                 <>Aucun frère ou sœur</>

geneit_app/src/widgets/BaseLoginpage.tsx

@@ -3,7 +3,7 @@ import Icon from "@mdi/react";
 import Avatar from "@mui/material/Avatar";
 import Box from "@mui/material/Box";
 import CssBaseline from "@mui/material/CssBaseline";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
 import * as React from "react";
@@ -40,10 +40,7 @@ export function BaseLoginPage() {
     <Grid container component="main" sx={{ height: "100vh" }}>
       <CssBaseline />
       <Grid
-        item
-        xs={false}
-        sm={4}
-        md={7}
+        size={{ xs: false, sm: 4, md: 7 }}
         sx={{
           backgroundImage: "url(/login_splash.jpg)",
           backgroundRepeat: "no-repeat",
@@ -55,7 +52,12 @@ export function BaseLoginPage() {
           backgroundPosition: "center",
         }}
       />
-      <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
+      <Grid
+        size={{ xs: 12, sm: 8, md: 5 }}
+        component={Paper}
+        elevation={6}
+        square
+      >
         <Box
           sx={{
             my: 8,