fix : bump packages versions

2024-12-29 12:29:51 +01:00
parent 0b8d0ad780
commit c651a08000
37 changed files with 865 additions and 824 deletions
--- a/.eslintrc.json
+++ b/.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
  }
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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-prettier": "^8.8.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-config-next": "^15.1.3",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-prettier": "^5.2.1",
    "typescript": "^5.7.2"
  }
 }
--- a/src/components/LinearProgressBar.tsx
+++ b/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>
--- a/src/components/board/capturedPieces.tsx
+++ b/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}
--- a/src/components/board/evaluationBar.tsx
+++ b/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"
--- a/src/components/board/index.tsx
+++ b/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}
--- a/src/components/slider.tsx
+++ b/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}
--- a/src/hooks/useScreenSize.ts
+++ b/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(() =>
--- a/src/pages/database.tsx
+++ b/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}
--- a/src/pages/index.tsx
+++ b/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" />
--- a/src/pages/play.tsx
+++ b/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}
-        md
+        size={{
+          xs: 12,
+          md: "grow",
+        }}
        sx={{
          backgroundColor: "secondary.main",
          borderColor: "primary.main",
--- a/src/sections/analysis/panelBody/analysisTab/accuracies.tsx
+++ b/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"
--- a/src/sections/analysis/panelBody/analysisTab/index.tsx
+++ b/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) => (
--- a/src/sections/analysis/panelBody/analysisTab/moveInfo.tsx
+++ b/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}
--- a/src/sections/analysis/panelBody/analysisTab/opening.tsx
+++ b/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>
--- a/src/sections/analysis/panelBody/classificationTab/index.tsx
+++ b/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%"
--- a/src/sections/analysis/panelBody/classificationTab/movesClassificationsRecap/classificationRow.tsx
+++ b/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"}
--- a/src/sections/analysis/panelBody/classificationTab/movesClassificationsRecap/index.tsx
+++ b/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}
--- a/src/sections/analysis/panelBody/classificationTab/movesPanel/index.tsx
+++ b/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) => (
--- a/src/sections/analysis/panelBody/classificationTab/movesPanel/moveItem.tsx
+++ b/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"
--- a/src/sections/analysis/panelBody/classificationTab/movesPanel/movesLine.tsx
+++ b/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}.
--- a/src/sections/analysis/panelBody/graphTab/index.tsx
+++ b/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%"
--- a/src/sections/analysis/panelHeader/gamePanel.tsx
+++ b/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>
--- a/src/sections/analysis/panelHeader/index.tsx
+++ b/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 />
--- a/src/sections/analysis/panelToolbar/goToLastPositionButton.tsx
+++ b/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";
--- a/src/sections/analysis/panelToolbar/index.tsx
+++ b/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">
--- a/src/sections/analysis/panelToolbar/nextMoveButton.tsx
+++ b/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";
--- a/src/sections/analysis/panelToolbar/saveButton.tsx
+++ b/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";
--- a/src/sections/engineSettings/arrowOptions.tsx
+++ b/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
--- a/src/sections/engineSettings/engineSettingsDialog.tsx
+++ b/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 />
--- a/src/sections/loadGame/chessComInput.tsx
+++ b/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 }}
-                secondaryTypographyProps={{ noWrap: true }}
+                slotProps={{
+                  primary: { noWrap: true },
+                  secondary: { noWrap: true },
+                }}
              />
            </ListItemButton>
          ))}
--- a/src/sections/loadGame/lichessInput.tsx
+++ b/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 }}
-                secondaryTypographyProps={{ noWrap: true }}
+                slotProps={{
+                  primary: { noWrap: true },
+                  secondary: { noWrap: true },
+                }}
              />
            </ListItemButton>
          ))}
--- a/src/sections/loadGame/loadGameDialog.tsx
+++ b/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";
--- a/src/sections/play/gameInProgress.tsx
+++ b/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>
--- a/src/sections/play/gameRecap.tsx
+++ b/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>

--- a/src/sections/play/gameSettings/gameSettingsDialog.tsx
+++ b/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