[frontend] Migrate away from deprecated Grid

public/locales/en/translation.json

@@ -82,6 +82,7 @@
     "resetRequestInstructions": "We will send a one-time reset link for your account to your email.",
     "submit": "Submit",
     "resetFail": "Password reset error",
+    "resetSuccess": "Password reset successful",
     "resetDone": "If you have correctly entered your email or username, a password reset link has been sent to your email address.",
     "backToLogin": "Back To Login"
   },
@@ -286,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/AnalyticsConsent/index.tsx

@@ -1,4 +1,4 @@
-import { Button, Grid, Theme, Typography, useMediaQuery } from "@mui/material";
+import { Button, Grid2, Stack, Typography } from "@mui/material";
 import Drawer from "@mui/material/Drawer";
 import { ReactElement } from "react";
 import { useTranslation } from "react-i18next";
@@ -17,8 +17,6 @@ export default function AnalyticsConsent(props: ConsentProps): ReactElement {
   const rejectAnalytics = (): void => props.onChangeConsent(false);
   const clickedAway = (): void => props.onChangeConsent(undefined);
 
-  const isXs = useMediaQuery<Theme>((th) => th.breakpoints.only("xs"));
-
   function ConsentButton(props: {
     onClick: () => void;
     text: string;
@@ -41,13 +39,12 @@ export default function AnalyticsConsent(props: ConsentProps): ReactElement {
       onClose={!props.required ? clickedAway : undefined}
       PaperProps={{ style: { padding: 20 } }}
     >
-      <Grid
-        container
-        direction={isXs ? "column" : "row"}
+      <Stack
+        direction={{ xs: "column", sm: "row" }}
         alignItems="center"
         spacing={3}
       >
-        <Grid item xs>
+        <div>
           <Typography
             variant="h6"
             style={{ color: themeColors.primary, fontWeight: 600 }}
@@ -58,22 +55,19 @@ export default function AnalyticsConsent(props: ConsentProps): ReactElement {
           <Typography variant="body1">
             {t("analyticsConsent.consentModal.description")}
           </Typography>
-        </Grid>
-        <Grid item container xs="auto" spacing={1}>
-          <Grid item>
-            <ConsentButton
-              onClick={acceptAnalytics}
-              text={t("analyticsConsent.consentModal.acceptAllBtn")}
-            />
-          </Grid>
-          <Grid item>
-            <ConsentButton
-              onClick={rejectAnalytics}
-              text={t("analyticsConsent.consentModal.acceptNecessaryBtn")}
-            />
-          </Grid>
-        </Grid>
-      </Grid>
+        </div>
+
+        <Grid2 container size="auto" spacing={1}>
+          <ConsentButton
+            onClick={acceptAnalytics}
+            text={t("analyticsConsent.consentModal.acceptAllBtn")}
+          />
+          <ConsentButton
+            onClick={rejectAnalytics}
+            text={t("analyticsConsent.consentModal.acceptNecessaryBtn")}
+          />
+        </Grid2>
+      </Stack>
     </Drawer>
   );
 }

src/components/AppBar/index.tsx

@@ -1,4 +1,4 @@
-import { AppBar, Grid, Toolbar } from "@mui/material";
+import { AppBar, Stack, Toolbar } from "@mui/material";
 import { ReactElement, useEffect, useState } from "react";
 import { useLocation } from "react-router";
 
@@ -29,22 +29,29 @@ export default function AppBarComponent(): ReactElement {
         style={{ maxHeight: appBarHeight, zIndex: theme.zIndex.drawer + 1 }}
       >
         <Toolbar>
-          <Grid container justifyContent="space-between" alignItems="center">
-            <Grid item>
+          <Stack
+            alignItems="center"
+            direction="row"
+            justifyContent="space-between"
+            width="100%"
+          >
+            <div>
               <Logo />
               {!!getProjectId() && (
                 <NavigationButtons currentTab={currentTab} />
               )}
-            </Grid>
-            <Grid item>
+            </div>
+
+            <div>
               {!!getProjectId() && <ProjectButtons currentTab={currentTab} />}
               <DownloadButton colorSecondary />
-            </Grid>
-            <Grid item>
+            </div>
+
+            <div>
               <UserMenu currentTab={currentTab} />
               <UserGuideButton />
-            </Grid>
-          </Grid>
+            </div>
+          </Stack>
         </Toolbar>
       </AppBar>
     </div>

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/DataEntry/DataEntryHeader.tsx

@@ -5,7 +5,6 @@ import { useTranslation } from "react-i18next";
 import { Key } from "ts-key-enum";
 
 import { SemanticDomainFull } from "api/models";
-import theme from "types/theme";
 
 interface DataEntryHeaderProps {
   domain: SemanticDomainFull;
@@ -23,11 +22,7 @@ export default function DataEntryHeader(
   const { t } = useTranslation();
 
   return (
-    <Typography
-      variant="h4"
-      align="center"
-      style={{ marginBottom: theme.spacing(2) }}
-    >
+    <Typography align="center" variant="h4">
       {t("addWords.domainTitle", { val1: domain.name, val2: domain.id })}
       <bdi>
         <Typography>{domain.description}</Typography>

src/components/DataEntry/DataEntryTable/NewEntry/VernDialog.tsx

@@ -1,7 +1,7 @@
 import {
   Dialog,
   DialogContent,
-  Grid,
+  Grid2,
   ListItemText,
   MenuList,
   Typography,
@@ -214,51 +214,38 @@ interface DialogListItemTextProps {
 const DialogListItemText = (props: DialogListItemTextProps): ReactElement => {
   return (
     <ListItemText>
-      <Grid
+      <Grid2
         alignItems="center"
         columnSpacing={4}
         container
         justifyContent="align-start"
         rowSpacing={1}
       >
-        <Grid item xs="auto">
-          <Typography variant={props.isSubitem ? "h6" : "h5"}>
-            {props.text}
-          </Typography>
-        </Grid>
+        <Typography variant={props.isSubitem ? "h6" : "h5"}>
+          {props.text}
+        </Typography>
+
         {!!props.word && (
           <>
             {props.showGlosses && (
-              <Grid item xs="auto">
-                <SensesTextSummary
-                  definitionsOrGlosses="glosses"
-                  maxLengthPerSense={20}
-                  senses={props.word.senses}
-                />
-              </Grid>
+              <SensesTextSummary
+                definitionsOrGlosses="glosses"
+                maxLengthPerSense={20}
+                senses={props.word.senses}
+              />
             )}
             {props.showDefinitions && (
-              <Grid item xs="auto">
-                <SensesTextSummary
-                  definitionsOrGlosses="definitions"
-                  maxLengthPerSense={50}
-                  senses={props.word.senses}
-                />
-              </Grid>
-            )}
-            {props.showPartOfSpeech && (
-              <Grid item xs="auto">
-                <PartOfSpeechCell word={props.word} />
-              </Grid>
-            )}
-            {props.showDomain && (
-              <Grid item xs>
-                <DomainsCell word={props.word} />
-              </Grid>
+              <SensesTextSummary
+                definitionsOrGlosses="definitions"
+                maxLengthPerSense={50}
+                senses={props.word.senses}
+              />
             )}
+            {props.showPartOfSpeech && <PartOfSpeechCell word={props.word} />}
+            {props.showDomain && <DomainsCell word={props.word} />}
           </>
         )}
-      </Grid>
+      </Grid2>
     </ListItemText>
   );
 };