From 55a26792da873fa63815b8f6521125ad01a2301a Mon Sep 17 00:00:00 2001 From: Danny Rorabaugh Date: Fri, 6 Jun 2025 10:43:01 -0400 Subject: [PATCH 1/7] [frontend] Migrate 5 components from deprecated Grid --- src/components/AnalyticsConsent/index.tsx | 40 ++-- src/components/AppBar/index.tsx | 25 ++- src/components/LandingPage/index.tsx | 14 +- .../ProjectScreen/CreateProject.tsx | 6 +- src/components/UserSettings/UserSettings.tsx | 212 +++++++++--------- 5 files changed, 144 insertions(+), 153 deletions(-) diff --git a/src/components/AnalyticsConsent/index.tsx b/src/components/AnalyticsConsent/index.tsx index 6888243d8c..c2bbae9a7b 100644 --- a/src/components/AnalyticsConsent/index.tsx +++ b/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((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 } }} > - - +
{t("analyticsConsent.consentModal.description")} - - - - - - - - - - +
+ + + + + + ); } diff --git a/src/components/AppBar/index.tsx b/src/components/AppBar/index.tsx index d814482f98..23c04f2577 100644 --- a/src/components/AppBar/index.tsx +++ b/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 }} > - - + +
{!!getProjectId() && ( )} - - +
+ +
{!!getProjectId() && } - - +
+ +
- - +
+ diff --git a/src/components/LandingPage/index.tsx b/src/components/LandingPage/index.tsx index 3ddbac3a5a..b967f019c6 100644 --- a/src/components/LandingPage/index.tsx +++ b/src/components/LandingPage/index.tsx @@ -1,6 +1,6 @@ import { Box, - Grid, + Grid2, Stack, Theme, Typography, @@ -44,16 +44,16 @@ export default function LandingPage(): ReactElement { return ( <> - - + + - - + + - - + + ); diff --git a/src/components/ProjectScreen/CreateProject.tsx b/src/components/ProjectScreen/CreateProject.tsx index 00586ea5e2..e395a9bf3c 100644 --- a/src/components/ProjectScreen/CreateProject.tsx +++ b/src/components/ProjectScreen/CreateProject.tsx @@ -2,7 +2,7 @@ import { Cancel } from "@mui/icons-material"; import { Card, CardContent, - Grid, + Grid2, IconButton, MenuItem, Select, @@ -299,7 +299,7 @@ export default function CreateProject(): ReactElement { /> )} {/* Form submission button */} - {t("createProject.create")} - + diff --git a/src/components/UserSettings/UserSettings.tsx b/src/components/UserSettings/UserSettings.tsx index 6aef1f47a4..97ff95dce0 100644 --- a/src/components/UserSettings/UserSettings.tsx +++ b/src/components/UserSettings/UserSettings.tsx @@ -3,9 +3,10 @@ import { Button, Card, CardContent, - Grid, + Grid2, MenuItem, Select, + Stack, TextField, Tooltip, Typography, @@ -133,16 +134,16 @@ export function UserSettings(props: { } return ( - + -
onSubmit(e)}> - - - - - - - + + onSubmit(e)}> + + {/* id: avatar, name, username */} + + + + + - - + + - - - - {t("userSettings.contact")} - - + {/* contact: phone, email */} + + + {t("userSettings.contact")} + - - - - - + + + + setPhone(e.target.value)} type="tel" /> - - - - - - - - + + + + + + + - - - + + + - - - - {t("userSettings.uiLanguage")} - - + {/* ui language */} + + + {t("userSettings.uiLanguage")} + - - setUiLang(e.target.value ?? "")} + /* Use `displayEmpty` and a conditional `renderValue` function to force + * something to appear when the menu is closed and its value is "" */ + displayEmpty + renderValue={ + uiLang + ? undefined + : () => t("userSettings.uiLanguageDefault") + } + > + + {t("userSettings.uiLanguageDefault")} + + {uiWritingSystems.map((ws) => ( + + {`${ws.bcp47} (${ws.name})`} - {uiWritingSystems.map((ws) => ( - - {`${ws.bcp47} (${ws.name})`} - - ))} - - - + ))} + + - - - - {t("userSettings.glossSuggestion")} - - + {/* gloss spelling suggestions */} + + + {t("userSettings.glossSuggestion")} + - + - - - - + + + {/* analytics consent */} {!RuntimeConfig.getInstance().isOffline() && ( - - - - {t("userSettings.analyticsConsent.title")} - - - - - - {t( - analyticsOn - ? "userSettings.analyticsConsent.consentYes" - : "userSettings.analyticsConsent.consentNo" - )} - - - - - - + + + {t("userSettings.analyticsConsent.title")} + + + + {t( + analyticsOn + ? "userSettings.analyticsConsent.consentYes" + : "userSettings.analyticsConsent.consentNo" + )} + + + + {displayConsent && ( )} - + )} - + {/* save button */} + - - - -
+ + + + - + ); } From 61847b090bcf499729d5127cd6caa818619eac55 Mon Sep 17 00:00:00 2001 From: Danny Rorabaugh Date: Wed, 11 Jun 2025 14:03:20 -0400 Subject: [PATCH 2/7] Tidy --- src/components/AnalyticsConsent/index.tsx | 12 +++++------- src/components/AppBar/index.tsx | 4 ++-- src/components/UserSettings/UserSettings.tsx | 14 +++++++------- 3 files changed, 14 insertions(+), 16 deletions(-) diff --git a/src/components/AnalyticsConsent/index.tsx b/src/components/AnalyticsConsent/index.tsx index c2bbae9a7b..0c5eeaa1ee 100644 --- a/src/components/AnalyticsConsent/index.tsx +++ b/src/components/AnalyticsConsent/index.tsx @@ -3,8 +3,6 @@ import Drawer from "@mui/material/Drawer"; import { ReactElement } from "react"; import { useTranslation } from "react-i18next"; -import { themeColors } from "types/theme"; - interface ConsentProps { onChangeConsent: (consentVal?: boolean) => void; required: boolean; @@ -24,7 +22,7 @@ export default function AnalyticsConsent(props: ConsentProps): ReactElement { return (