[DataEntry] Migrate from deprecated Grid (#3880)

Author: imnasnainaec

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,23 +22,19 @@ 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>
       </bdi>
       <Switch
         id="questionVisibilitySwitch"
         onChange={() => props.setQuestionVisibility(!props.questionsVisible)}
-        icon={<Help style={{ fontSize: 21 }} />}
-        checkedIcon={<Help style={{ fontSize: 21 }} />}
+        icon={<Help sx={{ fontSize: 19 }} />}
+        checkedIcon={<Help sx={{ fontSize: 19 }} />}
         checked={props.questionsVisible}
         color="primary"
-        style={{ paddingTop: "8px" }}
+        sx={{ pt: "11px" }}
         disabled={!domain.questions.length}
         onKeyDown={(e) => {
           if (e.key === Key.Enter) {

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

@@ -1,7 +1,7 @@
 import {
   Dialog,
   DialogContent,
-  Grid,
+  Grid2,
   ListItemText,
   MenuList,
   Typography,
@@ -117,7 +117,7 @@ export function VernList(props: VernListProps): ReactElement {
       <StyledMenuItem
         key={sense?.guid ?? word.id}
         onClick={() => props.onSelect(word.id, sense?.guid)}
-        sx={isSense ? { marginInlineStart: theme.spacing(4) } : conditionalGrey}
+        sx={isSense ? { marginInlineStart: 4 } : conditionalGrey}
       >
         <DialogListItemText
           isSubitem={isSense}
@@ -163,7 +163,7 @@ export function VernList(props: VernListProps): ReactElement {
         <StyledMenuItem
           key={`${word.id}-new-sense`}
           onClick={() => props.onSelect(word.id, "")}
-          sx={{ marginInlineStart: theme.spacing(4) }}
+          sx={{ marginInlineStart: 4 }}
         >
           <DialogListItemText isSubitem text={t("addWords.newSense")} />
         </StyledMenuItem>
@@ -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>
   );
 };

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

@@ -1,6 +1,5 @@
-import { AutocompleteCloseReason, Grid, Typography } from "@mui/material";
+import { AutocompleteCloseReason, Grid2, Typography } from "@mui/material";
 import {
-  CSSProperties,
   ReactElement,
   RefObject,
   useCallback,
@@ -22,7 +21,6 @@ import VernDialog from "components/DataEntry/DataEntryTable/NewEntry/VernDialog"
 import { focusInput } from "components/DataEntry/utilities";
 import PronunciationsFrontend from "components/Pronunciations/PronunciationsFrontend";
 import { type StoreState } from "rootRedux/types";
-import theme from "types/theme";
 import { FileWithSpeakerId } from "types/word";
 
 export enum NewEntryId {
@@ -38,11 +36,6 @@ export enum FocusTarget {
   Vernacular,
 }
 
-const gridItemStyle = (spacing: number): CSSProperties => ({
-  paddingInline: theme.spacing(spacing),
-  position: "relative",
-});
-
 interface NewEntryProps {
   analysisLang: WritingSystem;
   vernacularLang: WritingSystem;
@@ -224,44 +217,48 @@ export default function NewEntry(props: NewEntryProps): ReactElement {
   };
 
   return (
-    <Grid alignItems="center" container id={NewEntryId.GridNewEntry}>
-      <Grid container item xs={4} style={gridItemStyle(2)}>
-        <Grid item xs={12}>
-          <VernWithSuggestions
-            isNew
-            vernacular={newVern}
-            vernInput={vernInput}
-            updateVernField={(newValue: string, openDialog?: boolean) =>
-              updateVernField(newValue, openDialog)
+    <Grid2
+      alignItems="center"
+      container
+      id={NewEntryId.GridNewEntry}
+      spacing={1}
+    >
+      <Grid2 size={4}>
+        <VernWithSuggestions
+          isNew
+          vernacular={newVern}
+          vernInput={vernInput}
+          updateVernField={(newValue: string, openDialog?: boolean) =>
+            updateVernField(newValue, openDialog)
+          }
+          onBlur={() => setVernOpen(true)}
+          onClose={(_, reason: AutocompleteCloseReason) => {
+            // Handle if the user fully types an identical vernacular to a suggestion
+            // and selects it from the Autocomplete. This should open the dialog.
+            if (reason === "selectOption") {
+              // User pressed Enter or Left Click on an item.
+              setVernOpen(true);
             }
-            onBlur={() => setVernOpen(true)}
-            onClose={(_, reason: AutocompleteCloseReason) => {
-              // Handle if the user fully types an identical vernacular to a suggestion
-              // and selects it from the Autocomplete. This should open the dialog.
-              if (reason === "selectOption") {
-                // User pressed Enter or Left Click on an item.
-                setVernOpen(true);
-              }
-            }}
-            onFocus={handleOnVernFocus}
-            suggestedVerns={suggestedVerns}
-            // To prevent unintentional no-gloss or wrong-gloss submissions
-            // and to simplify interactions with Autocomplete and with the dialogs:
-            // if Enter is pressed from the vern field, move focus to gloss field.
-            handleEnter={() => focus(FocusTarget.Gloss)}
-            vernacularLang={vernacularLang}
-            textFieldId={NewEntryId.TextFieldVern}
-            onUpdate={() => conditionalFocus(FocusTarget.Vernacular)}
-          />
-          <VernDialog
-            open={vernOpen && !!suggestedDups.length && !selectedDup}
-            handleClose={handleCloseVernDialog}
-            vernacularWords={suggestedDups}
-            analysisLang={analysisLang.bcp47}
-          />
-        </Grid>
-      </Grid>
-      <Grid item xs={4} style={gridItemStyle(1)}>
+          }}
+          onFocus={handleOnVernFocus}
+          suggestedVerns={suggestedVerns}
+          // To prevent unintentional no-gloss or wrong-gloss submissions
+          // and to simplify interactions with Autocomplete and with the dialogs:
+          // if Enter is pressed from the vern field, move focus to gloss field.
+          handleEnter={() => focus(FocusTarget.Gloss)}
+          vernacularLang={vernacularLang}
+          textFieldId={NewEntryId.TextFieldVern}
+          onUpdate={() => conditionalFocus(FocusTarget.Vernacular)}
+        />
+        <VernDialog
+          open={vernOpen && !!suggestedDups.length && !selectedDup}
+          handleClose={handleCloseVernDialog}
+          vernacularWords={suggestedDups}
+          analysisLang={analysisLang.bcp47}
+        />
+      </Grid2>
+
+      <Grid2 size={4}>
         <GlossWithSuggestions
           isNew
           gloss={newGloss}
@@ -272,8 +269,9 @@ export default function NewEntry(props: NewEntryProps): ReactElement {
           textFieldId={NewEntryId.TextFieldGloss}
           onUpdate={() => conditionalFocus(FocusTarget.Gloss)}
         />
-      </Grid>
-      <Grid item xs={1} style={gridItemStyle(1)}>
+      </Grid2>
+
+      <Grid2 size={1}>
         {!selectedDup?.id && (
           // note is not available if user selected to modify an existing entry
           <NoteButton
@@ -282,32 +280,35 @@ export default function NewEntry(props: NewEntryProps): ReactElement {
             updateNote={setNewNote}
           />
         )}
-      </Grid>
-      <Grid item xs={2} style={gridItemStyle(1)}>
+      </Grid2>
+
+      <Grid2 size={2}>
         <PronunciationsFrontend
           audio={newAudio}
           deleteAudio={delNewAudio}
           replaceAudio={repNewAudio}
           uploadAudio={addNewAudio}
           onClick={() => focus(FocusTarget.Gloss)}
         />
-      </Grid>
-      <Grid item xs={1} style={gridItemStyle(1)}>
+      </Grid2>
+
+      <Grid2 size={1}>
         <DeleteEntry
           buttonId={NewEntryId.ButtonDelete}
           removeEntry={() => resetState()}
         />
-      </Grid>
+      </Grid2>
+
       <EnterGrid />
-    </Grid>
+    </Grid2>
   );
 }
 
 function EnterGrid(): ReactElement {
   const { t } = useTranslation();
   return (
-    <Grid item xs={12} style={{ paddingInlineStart: theme.spacing(2) }}>
+    <Grid2 size={12} sx={{ paddingInlineStart: 1 }}>
       <Typography variant="body2">{t("addWords.pressEnter")}</Typography>
-    </Grid>
+    </Grid2>
   );
 }