Scope

web/packages/accounts/components/layouts/centered-paper.tsx

@@ -1,13 +1,6 @@
 import { CenteredFill } from "@/base/components/containers";
 import { AppNavbarNormalFlow } from "@/base/components/Navbar";
-import { isSxArray } from "@/base/components/utils/sx";
-import {
-    Paper,
-    Stack,
-    styled,
-    Typography,
-    type TypographyProps,
-} from "@mui/material";
+import { Paper, Stack, styled, Typography } from "@mui/material";
 
 /**
  * An ad-hoc component that abstracts the layout common to many of the pages
@@ -43,16 +36,10 @@ const AccountsPagePaper = styled(Paper)(({ theme }) => ({
     gap: theme.spacing(4),
 }));
 
-export const AccountsPageTitle: React.FC<TypographyProps> = ({
-    sx,
+export const AccountsPageTitle: React.FC<React.PropsWithChildren> = ({
     children,
-    ...rest
 }) => (
-    <Typography
-        variant="h3"
-        sx={[{ flex: 1 }, ...(sx ? (isSxArray(sx) ? sx : [sx]) : [])]}
-        {...rest}
-    >
+    <Typography variant="h3" sx={{ flex: 1 }}>
         {children}
     </Typography>
 );

web/packages/accounts/pages/verify.tsx

@@ -214,14 +214,17 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
 
     return (
         <AccountsPageContents>
-            <AccountsPageTitle sx={{ wordBreak: "break-word" }}>
+            <AccountsPageTitle>
                 <Trans
                     i18nKey="email_sent"
                     components={{
                         a: (
                             <Box
                                 component={"span"}
-                                sx={{ color: "text.muted" }}
+                                sx={{
+                                    color: "text.muted",
+                                    wordBreak: "break-word",
+                                }}
                             />
                         ),
                     }}