[ProjectSettings, SiteSettings] Migrate from deprecated Grid

public/locales/en/translation.json

@@ -287,6 +287,7 @@
       "searchPlaceholder": "Search...",
       "searchTitle": "Find Users",
       "emailLabel": "Email",
+      "emailMessage": "Message (optional)",
       "toastSuccess": "User added to the project.",
       "toastFail": "Failed to add user to the project."
     },

src/components/Dialogs/UploadImage.tsx

@@ -1,4 +1,4 @@
-import { Grid, Typography } from "@mui/material";
+import { Grid2, Typography } from "@mui/material";
 import { FormEvent, ReactElement, useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -53,25 +53,23 @@ export default function ImageUpload(props: ImageUploadProps): ReactElement {
           {t("createProject.fileSelected", { val: filename })}
         </Typography>
       )}
-      <Grid container spacing={1} justifyContent="flex-start">
-        <Grid item>
-          <FileInputButton
-            updateFile={(file) => updateFile(file)}
-            accept="image/*"
-          >
-            {t("buttons.browse")}
-          </FileInputButton>
-        </Grid>
-        <Grid item>
-          <LoadingDoneButton
-            loading={loading}
-            done={done}
-            buttonProps={{ type: "submit", id: "image-upload-save" }}
-          >
-            {t("buttons.save")}
-          </LoadingDoneButton>
-        </Grid>
-      </Grid>
+
+      <Grid2 container spacing={1} justifyContent="flex-start">
+        <FileInputButton
+          updateFile={(file) => updateFile(file)}
+          accept="image/*"
+        >
+          {t("buttons.browse")}
+        </FileInputButton>
+
+        <LoadingDoneButton
+          loading={loading}
+          done={done}
+          buttonProps={{ type: "submit", id: "image-upload-save" }}
+        >
+          {t("buttons.save")}
+        </LoadingDoneButton>
+      </Grid2>
     </form>
   );
 }

src/components/Dialogs/ViewImageDialog.tsx

@@ -1,4 +1,4 @@
-import { Dialog, DialogContent, DialogTitle, Grid, Icon } from "@mui/material";
+import { Dialog, DialogContent, DialogTitle, Grid2, Icon } from "@mui/material";
 import { ReactElement } from "react";
 
 import { CloseButton, DeleteButtonWithDialog } from "components/Buttons";
@@ -39,16 +39,14 @@ export default function ViewImageDialog(
       </DialogTitle>
       <DialogContent>
         <img src={props.imgSrc || undefined} />
-        <Grid container justifyContent="flex-end">
-          <Grid item>
-            <DeleteButtonWithDialog
-              buttonId={props.buttonIdDelete ?? "delete-image"}
-              buttonLabel={props.buttonLabelDelete ?? "Delete image"}
-              delete={handleDelete}
-              textId={props.deleteTextId ?? ""}
-            />
-          </Grid>
-        </Grid>
+        <Grid2 container justifyContent="flex-end">
+          <DeleteButtonWithDialog
+            buttonId={props.buttonIdDelete ?? "delete-image"}
+            buttonLabel={props.buttonLabelDelete ?? "Delete image"}
+            delete={handleDelete}
+            textId={props.deleteTextId ?? ""}
+          />
+        </Grid2>
       </DialogContent>
     </Dialog>
   );

src/components/ProjectSettings/BaseSettings.tsx

@@ -3,7 +3,8 @@ import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
-  Grid,
+  Box,
+  Stack,
   Typography,
 } from "@mui/material";
 import { type ReactElement, type ReactNode } from "react";
@@ -15,6 +16,8 @@ interface BaseSettingsProps {
   icon: ReactNode;
   /** If maxWidth not specified, defaults to 700px. */
   maxWidth?: string | number;
+  /** If minWidth not specified, defaults to Accordion's default. */
+  minWidth?: string | number;
   /** Setting title (goes second in `AccordionSummary` after icon). */
   title: ReactNode;
 }
@@ -29,17 +32,14 @@ export default function BaseSettings(props: BaseSettingsProps): ReactElement {
         background: (theme) => theme.palette.background.default,
         border: (theme) => `1px solid ${theme.palette.divider}`,
         maxWidth: props.maxWidth || "700px",
+        minWidth: props.minWidth,
       }}
     >
       <AccordionSummary expandIcon={<ExpandMore />}>
-        <Grid container spacing={2} style={{ flexWrap: "nowrap" }}>
-          <Grid item style={{ marginTop: 4, color: "grey" }}>
-            {props.icon}
-          </Grid>
-          <Grid item>
-            <Typography variant="h5">{props.title}</Typography>
-          </Grid>
-        </Grid>
+        <Stack direction="row" spacing={1}>
+          <Box sx={{ color: "grey", paddingTop: 0.5 }}>{props.icon}</Box>
+          <Typography variant="h5">{props.title}</Typography>
+        </Stack>
       </AccordionSummary>
       <AccordionDetails>{props.body}</AccordionDetails>
     </Accordion>

src/components/ProjectSettings/ProjectAutocomplete.tsx

@@ -1,5 +1,5 @@
 import { HelpOutline } from "@mui/icons-material";
-import { Grid, MenuItem, Select, Tooltip } from "@mui/material";
+import { MenuItem, Select, Stack, Tooltip } from "@mui/material";
 import { type ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -18,31 +18,28 @@ export default function ProjectAutocomplete(
   };
 
   return (
-    <Grid container>
-      <Grid>
-        <Select
-          variant="standard"
-          value={props.project.autocompleteSetting}
-          onChange={(e) =>
-            updateAutocompleteSetting(e.target.value as OffOnSetting)
-          }
-        >
-          <MenuItem value={OffOnSetting.Off}>
-            {t("projectSettings.autocomplete.off")}
-          </MenuItem>
-          <MenuItem value={OffOnSetting.On}>
-            {t("projectSettings.autocomplete.on")}
-          </MenuItem>
-        </Select>
-      </Grid>
-      <Grid>
-        <Tooltip
-          title={t("projectSettings.autocomplete.hint")}
-          placement={document.body.dir === "rtl" ? "left" : "right"}
-        >
-          <HelpOutline fontSize="small" />
-        </Tooltip>
-      </Grid>
-    </Grid>
+    <Stack direction="row">
+      <Select
+        variant="standard"
+        value={props.project.autocompleteSetting}
+        onChange={(e) =>
+          updateAutocompleteSetting(e.target.value as OffOnSetting)
+        }
+      >
+        <MenuItem value={OffOnSetting.Off}>
+          {t("projectSettings.autocomplete.off")}
+        </MenuItem>
+        <MenuItem value={OffOnSetting.On}>
+          {t("projectSettings.autocomplete.on")}
+        </MenuItem>
+      </Select>
+
+      <Tooltip
+        title={t("projectSettings.autocomplete.hint")}
+        placement={document.body.dir === "rtl" ? "left" : "right"}
+      >
+        <HelpOutline fontSize="small" />
+      </Tooltip>
+    </Stack>
   );
 }

src/components/ProjectSettings/ProjectDomains.tsx

@@ -9,7 +9,7 @@ import {
   Dialog,
   DialogContent,
   DialogTitle,
-  Grid,
+  Grid2,
   IconButton,
   Stack,
   Typography,
@@ -313,24 +313,29 @@ export function AddDomainDialog(props: AddDomainDialogProps): ReactElement {
   return (
     <Dialog open={props.open}>
       <DialogTitle>
-        <Grid container justifyContent="space-between">
-          <Grid item>{t("projectSettings.domains.add")}</Grid>
-          <Grid item>
+        <Grid2 container justifyContent="space-between">
+          {t("projectSettings.domains.add")}
+
+          <div>
             <IconButton
               id={ProjectDomainsId.ButtonDomainAddDialogConfirm}
               onClick={() => submit()}
+              size="small"
             >
-              <Check sx={{ color: (t) => t.palette.success.main }} />
+              <Check sx={{ color: "success.main" }} />
             </IconButton>
+
             <IconButton
               id={ProjectDomainsId.ButtonDomainAddDialogCancel}
               onClick={() => cancel()}
+              size="small"
             >
-              <Close sx={{ color: (t) => t.palette.error.main }} />
+              <Close sx={{ color: "error.main" }} />
             </IconButton>
-          </Grid>
-        </Grid>
+          </div>
+        </Grid2>
       </DialogTitle>
+
       <DialogContent>
         <Stack spacing={1}>
           <Box>

src/components/ProjectSettings/ProjectImport.tsx

@@ -1,4 +1,4 @@
-import { Grid, Typography } from "@mui/material";
+import { Grid2, Typography } from "@mui/material";
 import { type ReactElement, useEffect, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { toast } from "react-toastify";
@@ -75,8 +75,9 @@ export default function ProjectImport(
   };
 
   return (
-    <Grid container spacing={1}>
-      <Grid item xs={12}>
+    <Grid2 alignItems="center" container spacing={1}>
+      {/* Upload/LIFT instructions */}
+      <Grid2 size={12}>
         <Typography variant="body2">
           {t("projectSettings.import.body")}{" "}
           <Trans i18nKey="createProject.uploadFormat">
@@ -87,48 +88,43 @@ export default function ProjectImport(
             FillerTextC
           </Trans>
         </Typography>
-      </Grid>
+      </Grid2>
 
-      <Grid item>
-        {/* Choose file button */}
-        <FileInputButton
-          updateFile={setLiftFile}
-          accept=".zip"
-          buttonProps={{
-            "data-testid": ProjectImportIds.ButtonFileSelect,
-            disabled: uploadState === UploadState.Done,
-            id: ProjectImportIds.ButtonFileSelect,
-          }}
-        >
-          {t("projectSettings.import.chooseFile")}
-        </FileInputButton>
-      </Grid>
+      {/* Choose file button */}
+      <FileInputButton
+        updateFile={setLiftFile}
+        accept=".zip"
+        buttonProps={{
+          "data-testid": ProjectImportIds.ButtonFileSelect,
+          disabled: uploadState === UploadState.Done,
+          id: ProjectImportIds.ButtonFileSelect,
+        }}
+      >
+        {t("projectSettings.import.chooseFile")}
+      </FileInputButton>
 
-      <Grid item>
-        {/* Upload button */}
-        <LoadingDoneButton
-          buttonProps={{
-            "data-testid": ProjectImportIds.ButtonFileSubmit,
-            id: ProjectImportIds.ButtonFileSubmit,
-            onClick: uploadWords,
-          }}
-          disabled={!liftLangs}
-          done={uploadState === UploadState.Done}
-          loading={uploadState === UploadState.InProgress}
-        >
-          {t("buttons.upload")}
-        </LoadingDoneButton>
-      </Grid>
+      {/* Upload button */}
+      <LoadingDoneButton
+        buttonProps={{
+          "data-testid": ProjectImportIds.ButtonFileSubmit,
+          id: ProjectImportIds.ButtonFileSubmit,
+          onClick: uploadWords,
+        }}
+        disabled={!liftLangs}
+        done={uploadState === UploadState.Done}
+        loading={uploadState === UploadState.InProgress}
+      >
+        {t("buttons.upload")}
+      </LoadingDoneButton>
 
-      <Grid item>
-        {/* Displays the name of the selected file */}
-        {liftFile && (
-          <Typography variant="body1" noWrap>
-            {t("createProject.fileSelected", { val: liftFile.name })}
-          </Typography>
-        )}
-      </Grid>
+      {/* Name of the selected file */}
+      {liftFile && (
+        <Typography variant="body1" noWrap>
+          {t("createProject.fileSelected", { val: liftFile.name })}
+        </Typography>
+      )}
 
+      {/* Dialog if LIFT contents don't match vernacular language */}
       {liftLangs && (
         <CancelConfirmDialog
           buttonIdCancel={ProjectImportIds.ButtonDialogCancel}
@@ -143,6 +139,6 @@ export default function ProjectImport(
           })}
         />
       )}
-    </Grid>
+    </Grid2>
   );
 }