fix : bump packages versions

.eslintrc.json

@@ -26,6 +26,7 @@
     "prettier/prettier": ["error", {"endOfLine": "auto"}],
     "require-jsdoc": "off",
     "@typescript-eslint/no-unused-vars": "error",
-    "react/no-unescaped-entities": 0
+    "react/no-unescaped-entities": 0,
+    "@typescript-eslint/no-deprecated": 1
   }
 }

package.json

@@ -35,10 +35,10 @@
     "@typescript-eslint/eslint-plugin": "^8.18.2",
     "@typescript-eslint/parser": "^8.18.2",
     "eslint": "^8.57.1",
-    "eslint-config-next": "^13.4.5",
+    "eslint-config-next": "^15.1.3",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-prettier": "^5.2.1",
     "typescript": "^5.7.2"
   }
 }

src/components/LinearProgressBar.tsx

@@ -1,5 +1,5 @@
 import {
-  Grid,
+  Grid2 as Grid,
   LinearProgress,
   LinearProgressProps,
   Typography,
@@ -12,21 +12,20 @@ const LinearProgressBar = (
   if (props.value === 0) return null;
 
   return (
-    <Grid item container alignItems="center" justifyContent="center" xs={12}>
+    <Grid container alignItems="center" justifyContent="center" size={12}>
       <Typography variant="caption" align="center">
         {props.label}
       </Typography>
       <Grid
-        item
         container
-        xs={12}
         width="90%"
         alignItems="center"
         justifyContent="center"
         wrap="nowrap"
         columnGap={2}
+        size={12}
       >
-        <Grid item sx={{ width: "100%" }}>
+        <Grid sx={{ width: "100%" }}>
           <LinearProgress
             variant="determinate"
             {...props}
@@ -46,7 +45,7 @@ const LinearProgressBar = (
             })}
           />
         </Grid>
-        <Grid item>
+        <Grid>
           <Typography variant="body2" color="text.secondary">{`${Math.round(
             props.value
           )}%`}</Typography>

src/components/board/capturedPieces.tsx

@@ -1,6 +1,6 @@
 import { getCapturedPieces, getMaterialDifference } from "@/lib/chess";
 import { Color } from "@/types/enums";
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import { Chess } from "chess.js";
 import { PrimitiveAtom, useAtomValue } from "jotai";
 import { CSSProperties, useMemo } from "react";
@@ -25,7 +25,7 @@ export default function CapturedPieces({ gameAtom, color }: Props) {
   }, [game, color]);
 
   return (
-    <Grid item container alignItems="end" xs="auto" columnGap={0.6}>
+    <Grid container alignItems="end" columnGap={0.6} size="auto">
       {cssProps.map((cssProp, i) => (
         <span
           key={i}

src/components/board/evaluationBar.tsx

@@ -1,4 +1,4 @@
-import { Box, Grid, Typography } from "@mui/material";
+import { Box, Grid2 as Grid, Typography } from "@mui/material";
 import { PrimitiveAtom, atom, useAtomValue } from "jotai";
 import { useEffect, useState } from "react";
 import { getEvaluationBarValue } from "@/lib/chess";
@@ -32,7 +32,6 @@ export default function EvaluationBar({
 
   return (
     <Grid
-      item
       container
       justifyContent="center"
       alignItems="center"

src/components/board/index.tsx

@@ -1,4 +1,4 @@
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import { Chessboard } from "react-chessboard";
 import { PrimitiveAtom, atom, useAtomValue, useSetAtom } from "jotai";
 import {
@@ -220,7 +220,6 @@ export default function Board({
 
   return (
     <Grid
-      item
       container
       justifyContent="center"
       alignItems="center"
@@ -236,21 +235,19 @@ export default function Board({
       )}
 
       <Grid
-        item
         container
         rowGap={1}
         justifyContent="center"
         alignItems="center"
         paddingLeft={showEvaluationBar ? 2 : 0}
-        xs
+        size="grow"
       >
         <Grid
-          item
           container
-          xs={12}
           justifyContent="center"
           alignItems="center"
           columnGap={2}
+          size={12}
         >
           <Typography>
             {boardOrientation === Color.White ? blackPlayer : whitePlayer}
@@ -263,12 +260,11 @@ export default function Board({
         </Grid>
 
         <Grid
-          item
           container
           justifyContent="center"
           alignItems="center"
           ref={boardRef}
-          xs={12}
+          size={12}
         >
           <Chessboard
             id={`${boardId}-${canPlay}`}
@@ -296,12 +292,11 @@ export default function Board({
         </Grid>
 
         <Grid
-          item
           container
-          xs={12}
           justifyContent="center"
           alignItems="center"
           columnGap={2}
+          size={12}
         >
           <Typography>
             {boardOrientation === Color.White ? whitePlayer : blackPlayer}

src/components/slider.tsx

@@ -1,4 +1,4 @@
-import { Grid, Slider as MuiSlider, Typography } from "@mui/material";
+import { Grid2 as Grid, Slider as MuiSlider, Typography } from "@mui/material";
 
 interface Props {
   value: number;
@@ -6,7 +6,7 @@ interface Props {
   min: number;
   max: number;
   label: string;
-  xs?: number;
+  size?: number;
   marksFilter?: number;
 }
 
@@ -16,16 +16,15 @@ export default function Slider({
   label,
   value,
   setValue,
-  xs,
+  size,
   marksFilter = 1,
 }: Props) {
   return (
     <Grid
-      item
       container
-      xs={xs ?? 11}
       justifyContent="center"
       alignItems="center"
+      size={size ?? 11}
     >
       <Typography id={`input-${label}`} textAlign="left" width="100%">
         {label}

src/hooks/useScreenSize.ts

@@ -2,12 +2,12 @@ import { useEffect, useState } from "react";
 
 export const useScreenSize = () => {
   const [screenSize, setScreenSize] = useState({
-    width: document?.querySelector(".MuiGrid-root")?.clientWidth ?? 500,
+    width: document?.querySelector(".MuiGrid2-root")?.clientWidth ?? 500,
     height: window ? window.innerHeight - 120 : 500,
   });
 
   useEffect(() => {
-    const mainDiv = document?.querySelector(".MuiGrid-root");
+    const mainDiv = document?.querySelector(".MuiGrid2-root");
     if (!mainDiv) return;
 
     const observer = new ResizeObserver(() =>

src/pages/database.tsx

@@ -1,4 +1,4 @@
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import { Icon } from "@iconify/react";
 import {
   DataGrid,
@@ -147,18 +147,18 @@ export default function GameDatabase() {
       gap={4}
       marginTop={6}
     >
-      <Grid item container xs={12} justifyContent="center" alignItems="center">
+      <Grid container justifyContent="center" alignItems="center" size={12}>
         <LoadGameButton />
       </Grid>
 
-      <Grid item container xs={12} justifyContent="center" alignItems="center">
+      <Grid container justifyContent="center" alignItems="center" size={12}>
         <Typography variant="subtitle2">
           You have {games.length} game{games.length !== 1 && "s"} in your
           database
         </Typography>
       </Grid>
 
-      <Grid item maxWidth="100%" minWidth="50px">
+      <Grid maxWidth="100%" minWidth="50px">
         <DataGrid
           aria-label="Games list"
           rows={games}

src/pages/index.tsx

@@ -13,7 +13,7 @@ import {
 import {
   Box,
   Divider,
-  Grid,
+  Grid2 as Grid,
   Tab,
   Tabs,
   useMediaQuery,
@@ -64,14 +64,11 @@ export default function GameReview() {
 
       <Grid
         container
-        item
         justifyContent="center"
         alignItems="center"
         borderRadius={2}
         border={1}
         borderColor={"secondary.main"}
-        xs={12}
-        lg
         sx={{
           backgroundColor: "secondary.main",
           borderColor: "primary.main",
@@ -87,6 +84,10 @@ export default function GameReview() {
         display="grid"
         gridTemplateRows="repeat(4, auto) fit-content(100%)"
         marginTop={isLgOrGreater && window.innerHeight > 780 ? 4 : 0}
+        size={{
+          xs: 12,
+          lg: "grow",
+        }}
       >
         {isLgOrGreater ? (
           <PanelHeader key="analysis-panel-header" />

src/pages/play.tsx

@@ -3,7 +3,7 @@ import GameInProgress from "@/sections/play/gameInProgress";
 import GameRecap from "@/sections/play/gameRecap";
 import GameSettingsButton from "@/sections/play/gameSettings/gameSettingsButton";
 import { isGameInProgressAtom } from "@/sections/play/states";
-import { Grid } from "@mui/material";
+import { Grid2 as Grid } from "@mui/material";
 import { useAtomValue } from "jotai";
 
 export default function Play() {
@@ -15,15 +15,16 @@ export default function Play() {
 
       <Grid
         container
-        item
         marginTop={{ xs: 0, md: "2.5em" }}
         justifyContent="center"
         alignItems="center"
         borderRadius={2}
         border={1}
         borderColor={"secondary.main"}
-        xs={12}
+        size={{
-        md
+          xs: 12,
+          md: "grow",
+        }}
         sx={{
           backgroundColor: "secondary.main",
           borderColor: "primary.main",

src/sections/analysis/panelBody/analysisTab/accuracies.tsx

@@ -1,4 +1,4 @@
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { gameEvalAtom } from "../../states";
 
@@ -9,12 +9,11 @@ export default function Accuracies() {
 
   return (
     <Grid
-      item
       container
-      xs={12}
       justifyContent="center"
       alignItems="center"
       columnGap={{ xs: "8vw", md: 10 }}
+      size={12}
     >
       <Typography
         align="center"

src/sections/analysis/panelBody/analysisTab/index.tsx

@@ -1,4 +1,9 @@
-import { Grid, GridProps, List, Typography } from "@mui/material";
+import {
+  Grid2 as Grid,
+  Grid2Props as GridProps,
+  List,
+  Typography,
+} from "@mui/material";
 import { useAtomValue } from "jotai";
 import {
   boardAtom,
@@ -39,9 +44,8 @@ export default function AnalysisTab(props: GridProps) {
 
   return (
     <Grid
-      item
       container
-      xs={12}
+      size={12}
       justifyContent="center"
       alignItems="start"
       height="100%"
@@ -60,14 +64,14 @@ export default function AnalysisTab(props: GridProps) {
       <Opening />
 
       {isGameOver && (
-        <Grid item xs={12}>
+        <Grid size={12}>
           <Typography align="center" fontSize="0.9rem">
             Game is over
           </Typography>
         </Grid>
       )}
 
-      <Grid item container xs={12} justifyContent="center" alignItems="center">
+      <Grid container justifyContent="center" alignItems="center" size={12}>
         <List sx={{ maxWidth: "95%", padding: 0 }}>
           {!board.isCheckmate() &&
             engineLines.map((line) => (

src/sections/analysis/panelBody/analysisTab/moveInfo.tsx

@@ -1,4 +1,4 @@
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { boardAtom, currentPositionAtom } from "../../states";
 import { useMemo } from "react";
@@ -36,7 +36,7 @@ export default function MoveInfo() {
       : `${bestMoveSan} was the best move`;
 
   return (
-    <Grid item container columnGap={5} xs={12} justifyContent="center">
+    <Grid container columnGap={5} justifyContent="center" size={12}>
       {moveLabel && (
         <Typography align="center" fontSize="0.9rem">
           {moveLabel}

src/sections/analysis/panelBody/analysisTab/opening.tsx

@@ -1,5 +1,5 @@
 import { useCurrentPosition } from "../../hooks/useCurrentPosition";
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 
 export default function Opening() {
   const position = useCurrentPosition();
@@ -8,7 +8,7 @@ export default function Opening() {
   if (!opening) return null;
 
   return (
-    <Grid item xs={12}>
+    <Grid size={12}>
       <Typography align="center" fontSize="0.9rem">
         {opening}
       </Typography>

src/sections/analysis/panelBody/classificationTab/index.tsx

@@ -1,4 +1,4 @@
-import { Grid, GridProps } from "@mui/material";
+import { Grid2 as Grid, Grid2Props as GridProps } from "@mui/material";
 import MovesPanel from "./movesPanel";
 import MovesClassificationsRecap from "./movesClassificationsRecap";
 
@@ -6,7 +6,6 @@ export default function ClassificationTab(props: GridProps) {
   return (
     <Grid
       container
-      item
       justifyContent="center"
       alignItems="start"
       height="100%"

src/sections/analysis/panelBody/classificationTab/movesClassificationsRecap/classificationRow.tsx

@@ -1,5 +1,5 @@
 import { Color, MoveClassification } from "@/types/enums";
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { boardAtom, gameAtom, gameEvalAtom } from "../../../states";
 import { useMemo } from "react";
@@ -71,16 +71,14 @@ export default function ClassificationRow({ classification }: Props) {
   return (
     <Grid
       container
-      item
       justifyContent="space-evenly"
       alignItems="center"
-      xs={12}
       wrap="nowrap"
       color={moveClassificationColors[classification]}
+      size={12}
     >
       <Grid
         container
-        item
         justifyContent="center"
         alignItems="center"
         width={"3rem"}
@@ -93,7 +91,6 @@ export default function ClassificationRow({ classification }: Props) {
 
       <Grid
         container
-        item
         justifyContent="start"
         alignItems="center"
         width={"7rem"}
@@ -118,7 +115,6 @@ export default function ClassificationRow({ classification }: Props) {
 
       <Grid
         container
-        item
         justifyContent="center"
         alignItems="center"
         width={"3rem"}

src/sections/analysis/panelBody/classificationTab/movesClassificationsRecap/index.tsx

@@ -1,5 +1,5 @@
 import { usePlayersNames } from "@/hooks/usePlayerNames";
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import { gameAtom, gameEvalAtom } from "../../../states";
 import { MoveClassification } from "@/types/enums";
 import ClassificationRow from "./classificationRow";
@@ -14,21 +14,19 @@ export default function MovesClassificationsRecap() {
   return (
     <Grid
       container
-      item
       justifyContent="center"
       alignItems="center"
       rowGap={1}
-      xs={6}
       sx={{ scrollbarWidth: "thin", overflowY: "auto" }}
       maxHeight="100%"
+      size={6}
     >
       <Grid
-        item
         container
         alignItems="center"
         justifyContent="space-evenly"
         wrap="nowrap"
-        xs={12}
+        size={12}
       >
         <Typography width="12rem" align="center" noWrap fontSize="0.9rem">
           {whiteName}

src/sections/analysis/panelBody/classificationTab/movesPanel/index.tsx

@@ -1,4 +1,4 @@
-import { Grid } from "@mui/material";
+import { Grid2 as Grid } from "@mui/material";
 import MovesLine from "./movesLine";
 import { useMemo } from "react";
 import { useAtomValue } from "jotai";
@@ -40,13 +40,12 @@ export default function MovesPanel() {
   return (
     <Grid
       container
-      item
       justifyContent="center"
       alignItems="start"
       gap={0.8}
       sx={{ scrollbarWidth: "thin", overflowY: "auto" }}
       maxHeight="100%"
-      xs={6}
+      size={6}
       id="moves-panel"
     >
       {gameMoves?.map((moves, idx) => (

src/sections/analysis/panelBody/classificationTab/movesPanel/moveItem.tsx

@@ -1,5 +1,5 @@
 import { MoveClassification } from "@/types/enums";
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import Image from "next/image";
 import { useAtomValue } from "jotai";
 import { boardAtom, currentPositionAtom, gameAtom } from "../../../states";
@@ -40,7 +40,6 @@ export default function MoveItem({ san, moveClassification, moveIdx }: Props) {
 
   return (
     <Grid
-      item
       container
       justifyContent="center"
       alignItems="center"

src/sections/analysis/panelBody/classificationTab/movesPanel/movesLine.tsx

@@ -1,5 +1,5 @@
 import { MoveClassification } from "@/types/enums";
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import MoveItem from "./moveItem";
 
 interface Props {
@@ -11,11 +11,10 @@ export default function MovesLine({ moves, moveNb }: Props) {
   return (
     <Grid
       container
-      item
       justifyContent="space-evenly"
       alignItems="center"
-      xs={12}
       wrap="nowrap"
+      size={12}
     >
       <Typography width="2rem" fontSize="0.9rem">
         {moveNb}.

src/sections/analysis/panelBody/graphTab/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Grid, GridProps } from "@mui/material";
+import { Box, Grid2 as Grid, Grid2Props as GridProps } from "@mui/material";
 import { useAtomValue } from "jotai";
 import {
   Area,
@@ -35,7 +35,6 @@ export default function GraphTab(props: GridProps) {
   return (
     <Grid
       container
-      item
       justifyContent="center"
       alignItems="start"
       height="100%"

src/sections/analysis/panelHeader/gamePanel.tsx

@@ -1,4 +1,4 @@
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import { useGameDatabase } from "@/hooks/useGameDatabase";
 import { useAtomValue } from "jotai";
 import { gameAtom } from "../states";
@@ -20,27 +20,26 @@ export default function GamePanel() {
 
   return (
     <Grid
-      item
       container
-      xs={11}
       justifyContent="space-evenly"
       alignItems="center"
       rowGap={1}
       columnGap={3}
+      size={11}
     >
-      <Grid item container xs justifyContent="center" alignItems="center">
+      <Grid container justifyContent="center" alignItems="center" size="grow">
         <Typography noWrap fontSize="0.9rem">
           Site : {gameFromUrl?.site || game.header().Site || "?"}
         </Typography>
       </Grid>
 
-      <Grid item container xs justifyContent="center" alignItems="center">
+      <Grid container justifyContent="center" alignItems="center" size="grow">
         <Typography noWrap fontSize="0.9rem">
           Date : {gameFromUrl?.date || game.header().Date || "?"}
         </Typography>
       </Grid>
 
-      <Grid item container xs justifyContent="center" alignItems="center">
+      <Grid container justifyContent="center" alignItems="center" size="grow">
         <Typography noWrap fontSize="0.9rem">
           Result : {result}
         </Typography>

src/sections/analysis/panelHeader/index.tsx

@@ -1,5 +1,5 @@
 import { Icon } from "@iconify/react";
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import GamePanel from "./gamePanel";
 import LoadGame from "./loadGame";
 import AnalyzeButton from "./analyzeButton";
@@ -12,20 +12,18 @@ export default function PanelHeader() {
 
   return (
     <Grid
-      item
       container
       justifyContent="center"
       alignItems="center"
-      xs={12}
       rowGap={2}
+      size={12}
     >
       <Grid
-        item
         container
-        xs={12}
         justifyContent="center"
         alignItems="center"
         columnGap={1}
+        size={12}
       >
         <Icon icon="streamline:clipboard-check" height={24} />
 
@@ -35,13 +33,12 @@ export default function PanelHeader() {
       </Grid>
 
       <Grid
-        item
         container
-        xs={12}
         justifyContent="center"
         alignItems="center"
         rowGap={2}
         columnGap={12}
+        size={12}
       >
         <GamePanel />
         <LoadGame />

src/sections/analysis/panelToolbar/goToLastPositionButton.tsx

@@ -1,5 +1,5 @@
 import { Icon } from "@iconify/react";
-import { Grid, IconButton, Tooltip } from "@mui/material";
+import { Grid2 as Grid, IconButton, Tooltip } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { boardAtom, gameAtom } from "../states";
 import { useChessActions } from "@/hooks/useChessActions";

src/sections/analysis/panelToolbar/index.tsx

@@ -1,4 +1,4 @@
-import { Grid, IconButton, Tooltip } from "@mui/material";
+import { Grid2 as Grid, IconButton, Tooltip } from "@mui/material";
 import { Icon } from "@iconify/react";
 import { useAtomValue } from "jotai";
 import { boardAtom } from "../states";
@@ -35,7 +35,7 @@ export default function PanelToolBar() {
   }, [undoBoardMove, boardHistory, resetBoard, board]);
 
   return (
-    <Grid container item justifyContent="center" alignItems="center" xs={12}>
+    <Grid container justifyContent="center" alignItems="center" size={12}>
       <FlipBoardButton />
 
       <Tooltip title="Reset board">

src/sections/analysis/panelToolbar/nextMoveButton.tsx

@@ -1,5 +1,5 @@
 import { Icon } from "@iconify/react";
-import { Grid, IconButton, Tooltip } from "@mui/material";
+import { Grid2 as Grid, IconButton, Tooltip } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { boardAtom, gameAtom } from "../states";
 import { useChessActions } from "@/hooks/useChessActions";

src/sections/analysis/panelToolbar/saveButton.tsx

@@ -1,6 +1,6 @@
 import { useGameDatabase } from "@/hooks/useGameDatabase";
 import { Icon } from "@iconify/react";
-import { Grid, IconButton, Tooltip } from "@mui/material";
+import { Grid2 as Grid, IconButton, Tooltip } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { useRouter } from "next/router";
 import { boardAtom, gameAtom, gameEvalAtom } from "../states";

src/sections/engineSettings/arrowOptions.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, FormControlLabel, Grid } from "@mui/material";
+import { Checkbox, FormControlLabel, Grid2 as Grid } from "@mui/material";
 import {
   showBestMoveArrowAtom,
   showPlayerMoveIconAtom,
@@ -18,10 +18,9 @@ export default function ArrowOptions() {
   return (
     <Grid
       container
-      item
       justifyContent="space-evenly"
       alignItems="center"
-      xs={12}
+      size={12}
       gap={3}
     >
       <FormControlLabel

src/sections/engineSettings/engineSettingsDialog.tsx

@@ -12,7 +12,7 @@ import {
   OutlinedInput,
   DialogActions,
   Typography,
-  Grid,
+  Grid2 as Grid,
 } from "@mui/material";
 import {
   engineNameAtom,
@@ -62,14 +62,13 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
         </Typography>
         <Grid
           marginTop={4}
-          item
           container
           justifyContent="center"
           alignItems="center"
-          xs={12}
           rowGap={3}
+          size={12}
         >
-          <Grid item container xs={12} justifyContent="center">
+          <Grid container justifyContent="center" size={12}>
             <FormControl variant="outlined">
               <InputLabel id="dialog-select-label">Engine</InputLabel>
               <Select
@@ -111,7 +110,7 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
             setValue={setMultiPv}
             min={2}
             max={6}
-            xs={6}
+            size={6}
           />
 
           <ArrowOptions />

src/sections/loadGame/chessComInput.tsx

@@ -5,7 +5,7 @@ import { ChessComGame } from "@/types/chessCom";
 import {
   CircularProgress,
   FormControl,
-  Grid,
+  Grid2 as Grid,
   ListItemButton,
   ListItemText,
   TextField,
@@ -60,12 +60,11 @@ export default function ChessComInput({ pgn, setPgn }: Props) {
       {chessComUsername && (
         <Grid
           container
-          item
-          xs={12}
           gap={2}
           justifyContent="center"
           alignContent="center"
           minHeight={100}
+          size={12}
         >
           {games.map((game) => (
             <ListItemButton
@@ -85,8 +84,10 @@ export default function ChessComInput({ pgn, setPgn }: Props) {
                 )
                   .toLocaleString()
                   .slice(0, -3)}`}
-                primaryTypographyProps={{ noWrap: true }}
+                slotProps={{
-                secondaryTypographyProps={{ noWrap: true }}
+                  primary: { noWrap: true },
+                  secondary: { noWrap: true },
+                }}
               />
             </ListItemButton>
           ))}

src/sections/loadGame/lichessInput.tsx

@@ -5,7 +5,7 @@ import { LichessGame } from "@/types/lichess";
 import {
   CircularProgress,
   FormControl,
-  Grid,
+  Grid2 as Grid,
   ListItemButton,
   ListItemText,
   TextField,
@@ -60,12 +60,11 @@ export default function LichessInput({ pgn, setPgn }: Props) {
       {lichessUsername && (
         <Grid
           container
-          item
-          xs={12}
           gap={2}
           justifyContent="center"
           alignContent="center"
           minHeight={100}
+          size={12}
         >
           {games.map((game) => (
             <ListItemButton
@@ -87,8 +86,10 @@ export default function LichessInput({ pgn, setPgn }: Props) {
                 )
                   .toLocaleString()
                   .slice(0, -3)}`}
-                primaryTypographyProps={{ noWrap: true }}
+                slotProps={{
-                secondaryTypographyProps={{ noWrap: true }}
+                  primary: { noWrap: true },
+                  secondary: { noWrap: true },
+                }}
               />
             </ListItemButton>
           ))}

src/sections/loadGame/loadGameDialog.tsx

@@ -13,7 +13,7 @@ import {
   OutlinedInput,
   DialogActions,
   Typography,
-  Grid,
+  Grid2 as Grid,
 } from "@mui/material";
 import { Chess } from "chess.js";
 import { useState } from "react";

src/sections/play/gameInProgress.tsx

@@ -1,4 +1,9 @@
-import { Button, CircularProgress, Grid, Typography } from "@mui/material";
+import {
+  Button,
+  CircularProgress,
+  Grid2 as Grid,
+  Typography,
+} from "@mui/material";
 import { useAtom, useAtomValue } from "jotai";
 import { gameAtom, isGameInProgressAtom } from "./states";
 import { useEffect } from "react";
@@ -22,30 +27,28 @@ export default function GameInProgress() {
 
   return (
     <Grid
-      item
       container
-      xs={12}
       justifyContent="center"
       alignItems="center"
       gap={2}
+      size={12}
     >
       <Grid
         container
-        item
         justifyContent="center"
         alignItems="center"
-        xs={12}
         gap={2}
+        size={12}
       >
         <Typography>Game in progress</Typography>
         <CircularProgress size={20} color="info" />
       </Grid>
 
-      <Grid item container justifyContent="center" alignItems="center" xs={12}>
+      <Grid container justifyContent="center" alignItems="center" size={12}>
         <UndoMoveButton />
       </Grid>
 
-      <Grid item container justifyContent="center" alignItems="center" xs={12}>
+      <Grid container justifyContent="center" alignItems="center" size={12}>
         <Button variant="outlined" onClick={handleResign}>
           Resign
         </Button>

src/sections/play/gameRecap.tsx

@@ -1,6 +1,6 @@
 import { useAtomValue } from "jotai";
 import { gameAtom, isGameInProgressAtom, playerColorAtom } from "./states";
-import { Button, Grid, Typography } from "@mui/material";
+import { Button, Grid2 as Grid, Typography } from "@mui/material";
 import { Color } from "@/types/enums";
 import { setGameHeaders } from "@/lib/chess";
 import { useGameDatabase } from "@/hooks/useGameDatabase";
@@ -40,14 +40,13 @@ export default function GameRecap() {
 
   return (
     <Grid
-      item
       container
-      xs={12}
       justifyContent="center"
       alignItems="center"
       gap={2}
+      size={12}
     >
-      <Grid item container xs={12} justifyContent="center">
+      <Grid container justifyContent="center" size={12}>
         <Typography>{getResultLabel()}</Typography>
       </Grid>
 

src/sections/play/gameSettings/gameSettingsDialog.tsx

@@ -12,7 +12,7 @@ import {
   OutlinedInput,
   DialogActions,
   Typography,
-  Grid,
+  Grid2 as Grid,
   FormGroup,
   FormControlLabel,
   Switch,
@@ -87,14 +87,13 @@ export default function GameSettingsDialog({ open, onClose }: Props) {
         </Typography>
         <Grid
           marginTop={4}
-          item
           container
           justifyContent="center"
           alignItems="center"
-          xs={12}
           rowGap={3}
+          size={12}
         >
-          <Grid item container xs={12} justifyContent="center">
+          <Grid container justifyContent="center" size={12}>
             <FormControl variant="outlined">
               <InputLabel id="dialog-select-label">Bot's engine</InputLabel>
               <Select