[WordCard, *Completed] 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,13 +28,8 @@ export default function SenseCard(props: SenseCardProps): ReactElement {
   const semDoms = props.sense.semanticDomains;
 
   return (
-    <Card
-      style={{
-        backgroundColor: props.bgColor || "white",
-        marginBottom: 10,
-      }}
-    >
-      <CardContent style={{ position: "relative" }}>
+    <Card sx={{ bgcolor: props.bgColor || "white" }}>
+      <CardContent sx={{ position: "relative" }}>
         {/* Part of speech (if any) */}
         <div style={{ insetInlineStart: 0, position: "absolute", top: 0 }}>
           {gramInfo.catGroup !== GramCatGroup.Unspecified && (

src/components/WordCard/SenseCardText.tsx

@@ -1,14 +1,15 @@
 import {
+  Box,
+  SxProps,
   Table,
   TableBody,
   TableCell,
   TableRow,
   Typography,
 } from "@mui/material";
-import { CSSProperties, ReactElement } from "react";
+import { ReactElement } from "react";
 
 import { Sense } from "api/models";
-import theme from "types/theme";
 import { TypographyWithFont } from "utilities/fontComponents";
 
 interface SenseInLanguage {
@@ -70,10 +71,10 @@ export default function SenseCardText(props: SenseCardTextProps): ReactElement {
   );
 }
 
-const defStyle: CSSProperties = {
+const defSx: SxProps = {
   borderInlineStart: "1px solid black",
-  marginBottom: theme.spacing(1),
-  paddingInlineStart: theme.spacing(1),
+  mb: 1,
+  paddingInlineStart: 1,
 };
 
 interface SenseTextRowsProps {
@@ -87,18 +88,14 @@ function SenseTextRows(props: SenseTextRowsProps): ReactElement {
     <>
       {/* Gloss */}
       <TableRow key={lang}>
-        <TableCell style={{ borderBottom: "none" }}>
+        <TableCell sx={{ borderBottom: "none" }}>
           <Typography variant="caption">
             {lang}
             {":"}
           </Typography>
         </TableCell>
-        <TableCell style={{ borderBottom: "none" }}>
-          <TypographyWithFont
-            lang={lang}
-            style={{ marginBottom: theme.spacing(1) }}
-            variant="h6"
-          >
+        <TableCell sx={{ borderBottom: "none" }}>
+          <TypographyWithFont lang={lang} sx={{ mb: 1 }} variant="h6">
             {props.senseInLang.glossText}
           </TypographyWithFont>
         </TableCell>
@@ -107,13 +104,13 @@ function SenseTextRows(props: SenseTextRowsProps): ReactElement {
       {/* Definition */}
       {!!props.senseInLang.definitionText && !props.hideDefs && (
         <TableRow key={lang + "def"}>
-          <TableCell style={{ borderBottom: "none" }} />
-          <TableCell style={{ borderBottom: "none" }}>
-            <div style={defStyle}>
+          <TableCell sx={{ borderBottom: "none" }} />
+          <TableCell sx={{ borderBottom: "none" }}>
+            <Box sx={defSx}>
               <TypographyWithFont color="textSecondary" lang={lang}>
                 {props.senseInLang.definitionText}
               </TypographyWithFont>
-            </div>
+            </Box>
           </TableCell>
         </TableRow>
       )}

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";
 
@@ -8,7 +8,7 @@ import SensesTextSummary from "components/WordCard/SensesTextSummary";
 import { groupGramInfo } from "utilities/wordUtilities";
 
 interface SummarySenseCardProps {
-  backgroundColor?: string;
+  bgcolor?: string;
   senses: Sense[];
 }
 
@@ -28,13 +28,8 @@ export default function SummarySenseCard(
   const domIds = [...new Set(semDoms.map((d) => d.id))].sort();
 
   return (
-    <Card
-      style={{
-        backgroundColor: props.backgroundColor || "white",
-        marginBottom: 10,
-      }}
-    >
-      <CardContent style={{ position: "relative" }}>
+    <Card sx={{ bgcolor: props.bgcolor || "white", mb: 1 }}>
+      <CardContent sx={{ position: "relative" }}>
         {/* Parts of speech */}
         {groupedGramInfo.map((info) => (
           <PartOfSpeechButton
@@ -57,13 +52,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";
@@ -89,13 +90,7 @@ export default function WordCard(props: WordCardProps): ReactElement {
         buttonLabel={
           full ? WordCardLabel.ButtonCondense : WordCardLabel.ButtonExpand
         }
-        icon={
-          full ? (
-            <CloseFullscreen sx={{ color: (t) => t.palette.grey[900] }} />
-          ) : (
-            <OpenInFull sx={{ color: (t) => t.palette.grey[600] }} />
-          )
-        }
+        icon={full ? <CloseFullscreen /> : <OpenInFull />}
         onClick={() => setFull(!full)}
       />
     </>
@@ -130,14 +125,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} />
         )}