[WordCard, goals] Migrate from deprecated Grid

src/components/Buttons/UndoButton.tsx

@@ -1,4 +1,4 @@
-import { Button, Grid } from "@mui/material";
+import { Button } from "@mui/material";
 import { ReactElement, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -30,35 +30,27 @@ export default function UndoButton(props: UndoButtonProps): ReactElement {
     }
   }, [isUndoAllowed, undoDialogOpen]);
 
-  return (
-    <Grid container direction="column" justifyContent="center">
-      {isUndoEnabled ? (
-        <div>
-          <Button
-            aria-label={props.buttonLabelEnabled ?? "Undo"}
-            data-testid={props.buttonIdEnabled}
-            id={props.buttonIdEnabled}
-            onClick={() => setUndoDialogOpen(true)}
-            variant="outlined"
-          >
-            {t(props.textIdEnabled)}
-          </Button>
-          <CancelConfirmDialog
-            open={undoDialogOpen}
-            text={props.textIdDialog}
-            handleCancel={() => setUndoDialogOpen(false)}
-            handleConfirm={() =>
-              props.undo().then(() => setUndoDialogOpen(false))
-            }
-            buttonIdCancel={props.buttonIdCancel}
-            buttonIdConfirm={props.buttonIdConfirm}
-          />
-        </div>
-      ) : (
-        <div>
-          <Button disabled>{t(props.textIdDisabled)}</Button>
-        </div>
-      )}
-    </Grid>
+  return isUndoEnabled ? (
+    <>
+      <Button
+        aria-label={props.buttonLabelEnabled ?? "Undo"}
+        data-testid={props.buttonIdEnabled}
+        id={props.buttonIdEnabled}
+        onClick={() => setUndoDialogOpen(true)}
+        variant="outlined"
+      >
+        {t(props.textIdEnabled)}
+      </Button>
+      <CancelConfirmDialog
+        open={undoDialogOpen}
+        text={props.textIdDialog}
+        handleCancel={() => setUndoDialogOpen(false)}
+        handleConfirm={() => props.undo().then(() => setUndoDialogOpen(false))}
+        buttonIdCancel={props.buttonIdCancel}
+        buttonIdConfirm={props.buttonIdConfirm}
+      />
+    </>
+  ) : (
+    <Button disabled>{t(props.textIdDisabled)}</Button>
   );
 }

src/components/WordCard/DomainChipsGrid.tsx

@@ -1,4 +1,4 @@
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { type ReactElement } from "react";
 
 import { type SemanticDomain } from "api/models";
@@ -26,12 +26,14 @@ export default function DomainChipsGrid(
   };
 
   return (
-    <Grid container spacing={2}>
+    <Grid2 container spacing={2}>
       {props.semDoms.map((d) => (
-        <Grid item key={`${d.id}${d.name}`}>
-          <DomainChip domain={updateName(d)} provenance={props.provenance} />
-        </Grid>
+        <DomainChip
+          domain={updateName(d)}
+          key={`${d.id}${d.name}`}
+          provenance={props.provenance}
+        />
       ))}
-    </Grid>
+    </Grid2>
   );
 }

src/components/WordCard/SenseCard.tsx

@@ -28,12 +28,7 @@ export default function SenseCard(props: SenseCardProps): ReactElement {
   const semDoms = props.sense.semanticDomains;
 
   return (
-    <Card
-      style={{
-        backgroundColor: props.bgColor || "white",
-        marginBottom: 10,
-      }}
-    >
+    <Card style={{ backgroundColor: props.bgColor || "white" }}>
       <CardContent style={{ position: "relative" }}>
         {/* Part of speech (if any) */}
         <div style={{ insetInlineStart: 0, position: "absolute", top: 0 }}>

src/components/WordCard/SummarySenseCard.tsx

@@ -1,4 +1,4 @@
-import { Card, CardContent, Chip, Grid, Typography } from "@mui/material";
+import { Card, CardContent, Chip, Grid2, Typography } from "@mui/material";
 import { ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -57,13 +57,11 @@ export default function SummarySenseCard(
         />
 
         {/* Semantic domain numbers */}
-        <Grid container spacing={1}>
+        <Grid2 container spacing={1}>
           {domIds.map((id) => (
-            <Grid item key={id}>
-              <Chip label={id} />
-            </Grid>
+            <Chip key={id} label={id} />
           ))}
-        </Grid>
+        </Grid2>
       </CardContent>
     </Card>
   );

src/components/WordCard/index.tsx

@@ -5,6 +5,7 @@ import {
   CardContent,
   CardHeader,
   IconButton,
+  Stack,
   Typography,
 } from "@mui/material";
 import { Fragment, ReactElement, useEffect, useState } from "react";
@@ -130,14 +131,16 @@ export default function WordCard(props: WordCardProps): ReactElement {
 
         {/* Senses */}
         {full ? (
-          senses.map((s) => (
-            <SenseCard
-              key={s.guid}
-              languages={languages}
-              provenance={provenance}
-              sense={s}
-            />
-          ))
+          <Stack spacing={1}>
+            {senses.map((s) => (
+              <SenseCard
+                key={s.guid}
+                languages={languages}
+                provenance={provenance}
+                sense={s}
+              />
+            ))}
+          </Stack>
         ) : (
           <SummarySenseCard senses={senses} />
         )}

src/goals/CharacterInventory/CharInv/CharacterDetail/index.tsx

@@ -1,5 +1,5 @@
 import { Close } from "@mui/icons-material";
-import { Grid, IconButton, Typography } from "@mui/material";
+import { Grid2, IconButton, Typography } from "@mui/material";
 import { ReactElement } from "react";
 
 import CharacterInfo from "goals/CharacterInventory/CharInv/CharacterDetail/CharacterInfo";
@@ -18,39 +18,39 @@ export default function CharacterDetail(
   props: CharacterDetailProps
 ): ReactElement {
   return (
-    <Grid
+    <Grid2
       container
       spacing={2}
       direction="row"
       justifyContent="flex-start"
       alignItems="center"
       style={{ padding: theme.spacing(1) }}
     >
-      <Grid item xs={3}>
+      <Grid2 size={3}>
         <Typography variant="h1" align="center">
           {props.character}
           {""}
           {/* There is a zero-width joiner here in case of non-printing characters. */}
         </Typography>
-      </Grid>
-      <Grid item xs={8}>
+      </Grid2>
+      <Grid2 size={8}>
         <CharacterStatusControl character={props.character} />
-      </Grid>
-      <Grid item xs={1}>
+      </Grid2>
+      <Grid2 size={1}>
         <IconButton onClick={() => props.close()} size="large">
           {" "}
           <Close />
         </IconButton>
-      </Grid>
-      <Grid item xs={12}>
+      </Grid2>
+      <Grid2 size={12}>
         <CharacterInfo character={props.character} />
-      </Grid>
-      <Grid item xs={12}>
+      </Grid2>
+      <Grid2 size={12}>
         <CharacterWords character={props.character} />
-      </Grid>
-      <Grid item xs={12}>
+      </Grid2>
+      <Grid2 size={12}>
         <FindAndReplace initialFindValue={props.character} />
-      </Grid>
-    </Grid>
+      </Grid2>
+    </Grid2>
   );
 }