[MergeDups] Migrate from deprecated Grid

src/goals/DefaultGoal/DisplayProgress.tsx

@@ -1,4 +1,4 @@
-import { Grid, LinearProgress, Paper, Typography } from "@mui/material";
+import { LinearProgress, Paper, Stack, Typography } from "@mui/material";
 import { ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
@@ -30,17 +30,14 @@ export default function DisplayProgress(): ReactElement | null {
       : "goal.progress";
 
   return numSteps > 1 ? (
-    <Paper key={currentStep}>
-      <Grid container direction="column">
-        <Grid item xs>
-          <Typography variant={"h4"}>
-            {t(stepTranslateId, { val1: currentStep + 1, val2: numSteps })}
-          </Typography>
-        </Grid>
-        <Grid item xs>
-          <LinearProgress variant="determinate" value={percentComplete} />
-        </Grid>
-      </Grid>
+    <Paper>
+      <Stack>
+        <Typography variant={"h4"}>
+          {t(stepTranslateId, { val1: currentStep + 1, val2: numSteps })}
+        </Typography>
+
+        <LinearProgress value={percentComplete} variant="determinate" />
+      </Stack>
     </Paper>
   ) : null;
 }

src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/SidebarDrop.tsx

@@ -1,6 +1,6 @@
 import { Droppable } from "@hello-pangea/dnd";
 import { ArrowForwardIos, HelpOutline } from "@mui/icons-material";
-import { Grid, IconButton, Typography } from "@mui/material";
+import { Grid2, IconButton, Typography } from "@mui/material";
 import { type ReactElement } from "react";
 
 import SidebarDragSense from "goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/SidebarDragSense";
@@ -29,21 +29,24 @@ export default function SidebarDrop(): ReactElement {
           {...providedDroppable.droppableProps}
           style={{ backgroundColor: "lightblue", height: "100%", padding: 20 }}
         >
-          <Grid container justifyContent="space-between">
+          <Grid2 container justifyContent="space-between">
             <IconButton
               id="sidebar-close"
               onClick={() => dispatch(setSidebar())}
             >
               <ArrowForwardIos />
             </IconButton>
+
             <IconButton
               id="sidebar-help"
               onClick={() => openUserGuide("goals.html#merge-a-sense")}
             >
               <HelpOutline />
             </IconButton>
-          </Grid>
+          </Grid2>
+
           <Typography variant="h5">{vernacular}</Typography>
+
           {sidebar.mergeSenses.map((mergeSense, index) => (
             <SidebarDragSense
               index={index}

src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/index.tsx

@@ -1,6 +1,12 @@
 import { DragDropContext, Droppable, DropResult } from "@hello-pangea/dnd";
 import { Delete } from "@mui/icons-material";
-import { Drawer, Grid, ImageList, ImageListItem, Tooltip } from "@mui/material";
+import {
+  Drawer,
+  Grid2,
+  ImageList,
+  ImageListItem,
+  Tooltip,
+} from "@mui/material";
 import { CSSProperties, ReactElement, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "react-toastify";
@@ -26,7 +32,6 @@ import {
 } from "goals/MergeDuplicates/Redux/MergeDupsReduxTypes";
 import { useAppDispatch, useAppSelector } from "rootRedux/hooks";
 import { type StoreState } from "rootRedux/types";
-import theme from "types/theme";
 
 export default function MergeDragDrop(): ReactElement {
   const dispatch = useAppDispatch();
@@ -212,14 +217,13 @@ export default function MergeDragDrop(): ReactElement {
     return sidebarOpen ? (
       <Drawer
         anchor={document.body.dir === "rtl" ? "left" : "right"}
-        variant="persistent"
         open={sidebarOpen}
-        SlideProps={{
-          style: {
-            height: `calc(100% - ${appBarHeight}px)`,
-            top: appBarHeight,
+        slotProps={{
+          transition: {
+            sx: { height: `calc(100% - ${appBarHeight}px)`, top: appBarHeight },
           },
         }}
+        variant="persistent"
       >
         <SidebarDrop />
       </Drawer>
@@ -240,9 +244,9 @@ export default function MergeDragDrop(): ReactElement {
 
   return (
     <DragDropContext onDragEnd={handleDrop}>
-      <Grid container>
-        <Grid item columns={1} key={"trash"} style={{ marginTop: "70vh" }}>
-          <Droppable key={trashId} droppableId={trashId}>
+      <Grid2 container>
+        <Grid2 columns={1} sx={{ mt: "70vh" }}>
+          <Droppable droppableId={trashId} key={trashId}>
             {(provided): ReactElement => (
               <div ref={provided.innerRef}>
                 <Tooltip title={t("mergeDups.helpText.delete")} placement="top">
@@ -252,36 +256,36 @@ export default function MergeDragDrop(): ReactElement {
               </div>
             )}
           </Droppable>
-        </Grid>
-        <Grid item sm={11} xs={10 /* Allow trash icon more space. */}>
-          <ImageList rowHeight="auto" cols={colCount} style={{ width: "90vw" }}>
-            {Object.keys(words).map((key) => (
-              <ImageListItem
-                key={key}
-                style={{ height: "70vh", margin: theme.spacing(1) }}
-              >
-                <DropWord wordId={key} />
-              </ImageListItem>
-            ))}
-            <ImageListItem key={newId} style={{ margin: theme.spacing(1) }}>
-              <DropWord wordId={newId} />
+        </Grid2>
+
+        <ImageList cols={colCount} rowHeight="auto" sx={{ width: "90vw" }}>
+          {Object.keys(words).map((key) => (
+            <ImageListItem key={key} sx={{ height: "70vh", m: 1 }}>
+              <DropWord wordId={key} />
             </ImageListItem>
-            {renderSidebar()}
-            <CancelConfirmDialog
-              open={!!override}
-              text={override?.protectReason ?? ""}
-              handleCancel={() => setOverride(undefined)}
-              handleConfirm={onConfirmOverride}
-            />
-            <CancelConfirmDialog
-              open={!!srcToDelete}
-              text="mergeDups.helpText.deleteDialog"
-              handleCancel={() => setSrcToDelete(undefined)}
-              handleConfirm={onConfirmDelete}
-            />
-          </ImageList>
-        </Grid>
-      </Grid>
+          ))}
+
+          <ImageListItem key={newId} sx={{ m: 1 }}>
+            <DropWord wordId={newId} />
+          </ImageListItem>
+
+          {renderSidebar()}
+
+          <CancelConfirmDialog
+            open={!!override}
+            text={override?.protectReason ?? ""}
+            handleCancel={() => setOverride(undefined)}
+            handleConfirm={onConfirmOverride}
+          />
+
+          <CancelConfirmDialog
+            open={!!srcToDelete}
+            text="mergeDups.helpText.deleteDialog"
+            handleCancel={() => setSrcToDelete(undefined)}
+            handleConfirm={onConfirmDelete}
+          />
+        </ImageList>
+      </Grid2>
     </DragDropContext>
   );
 }

src/goals/MergeDuplicates/MergeDupsStep/SaveDeferButtons.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, FormControlLabel, Grid } from "@mui/material";
+import { Checkbox, FormControlLabel, Grid2 } from "@mui/material";
 import { ReactElement, useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -13,7 +13,6 @@ import {
 import { asyncAdvanceStep } from "goals/Redux/GoalActions";
 import { useAppDispatch, useAppSelector } from "rootRedux/hooks";
 import { StoreState } from "rootRedux/types";
-import theme from "types/theme";
 
 export default function SaveDeferButtons(): ReactElement {
   const dispatch = useAppDispatch();
@@ -52,43 +51,41 @@ export default function SaveDeferButtons(): ReactElement {
   };
 
   return (
-    <Grid container justifyContent="flex-start">
-      <Grid item>
-        <LoadingButton
-          loading={isSaving}
-          buttonProps={{
-            style: { marginInlineEnd: theme.spacing(3) },
-            onClick: saveContinue,
-            title: t("mergeDups.helpText.saveAndContinue"),
-            id: "merge-save",
-          }}
-        >
-          {t("buttons.saveAndContinue")}
-        </LoadingButton>
-        <LoadingButton
-          loading={isDeferring}
-          buttonProps={{
-            color: "secondary",
-            style: { marginInlineEnd: theme.spacing(3) },
-            onClick: defer,
-            title: t("mergeDups.helpText.defer"),
-            id: "merge-defer",
-          }}
-        >
-          {t("buttons.defer")}
-        </LoadingButton>
-        {hasProtected && (
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={overrideProtection}
-                onChange={() => dispatch(toggleOverrideProtection())}
-              />
-            }
-            label={t("mergeDups.helpText.protectedOverride")}
-          />
-        )}
-      </Grid>
-    </Grid>
+    <Grid2 container spacing={3}>
+      <LoadingButton
+        loading={isSaving}
+        buttonProps={{
+          onClick: saveContinue,
+          title: t("mergeDups.helpText.saveAndContinue"),
+          id: "merge-save",
+        }}
+      >
+        {t("buttons.saveAndContinue")}
+      </LoadingButton>
+
+      <LoadingButton
+        loading={isDeferring}
+        buttonProps={{
+          color: "secondary",
+          onClick: defer,
+          title: t("mergeDups.helpText.defer"),
+          id: "merge-defer",
+        }}
+      >
+        {t("buttons.defer")}
+      </LoadingButton>
+
+      {hasProtected && (
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={overrideProtection}
+              onChange={() => dispatch(toggleOverrideProtection())}
+            />
+          }
+          label={t("mergeDups.helpText.protectedOverride")}
+        />
+      )}
+    </Grid2>
   );
 }

src/goals/MergeDuplicates/MergeDupsStep/index.tsx

@@ -1,12 +1,11 @@
-import { Typography } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import { ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 
 import MergeDragDrop from "goals/MergeDuplicates/MergeDupsStep/MergeDragDrop";
 import SaveDeferButtons from "goals/MergeDuplicates/MergeDupsStep/SaveDeferButtons";
 import { useAppSelector } from "rootRedux/hooks";
 import { type StoreState } from "rootRedux/types";
-import theme from "types/theme";
 
 export default function MergeDupsStep(): ReactElement {
   const wordCount = useAppSelector(
@@ -18,9 +17,10 @@ export default function MergeDupsStep(): ReactElement {
 
   return wordCount ? (
     <>
-      <div style={{ background: "#eee", padding: theme.spacing(1) }}>
+      <Box sx={{ bgcolor: "#eee", p: 1, pb: 0 }}>
         <MergeDragDrop />
-      </div>
+      </Box>
+
       <SaveDeferButtons />
     </>
   ) : (