[web] Show email on password screen (#1664)

<img width="292" alt="Screenshot 2024-05-09 at 11 39 46"
src="https://github.com/ente-io/ente/assets/24503581/6e0a615e-473d-4eed-b2b9-7e65ea57b578">

web/apps/photos/src/components/Directory/index.tsx

@@ -1,8 +1,7 @@
 import { ensureElectron } from "@/next/electron";
 import log from "@/next/log";
 import LinkButton from "@ente/shared/components/LinkButton";
-import { Tooltip } from "@mui/material";
-import { styled } from "@mui/material/styles";
+import { Tooltip, styled } from "@mui/material";
 
 const DirectoryPathContainer = styled(LinkButton)(
     ({ width }) => `

web/apps/photos/src/components/PhotoViewer/styledComponents/LivePhotoBtn.tsx

@@ -1,5 +1,4 @@
-import { Paper } from "@mui/material";
-import { styled } from "@mui/material/styles";
+import { Paper, styled } from "@mui/material";
 
 export const LivePhotoBtnContainer = styled(Paper)`
     border-radius: 4px;

web/apps/photos/src/components/WatchFolder.tsx

@@ -25,8 +25,8 @@ import {
     Stack,
     Tooltip,
     Typography,
+    styled,
 } from "@mui/material";
-import { styled } from "@mui/material/styles";
 import { CollectionMappingChoiceModal } from "components/Upload/CollectionMappingChoiceModal";
 import { t } from "i18next";
 import { AppContext } from "pages/_app";

web/packages/accounts/pages/credentials.tsx

@@ -5,7 +5,6 @@ import { VerticallyCentered } from "@ente/shared/components/Container";
 import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
 import FormPaperFooter from "@ente/shared/components/Form/FormPaper/Footer";
-import FormPaperTitle from "@ente/shared/components/Form/FormPaper/Title";
 import LinkButton from "@ente/shared/components/LinkButton";
 import VerifyMasterPasswordForm, {
     VerifyMasterPasswordFormProps,
@@ -39,6 +38,7 @@ import {
     setKey,
 } from "@ente/shared/storage/sessionStorage";
 import { KeyAttributes, User } from "@ente/shared/user/types";
+import { Typography, styled } from "@mui/material";
 import { t } from "i18next";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
@@ -259,7 +259,7 @@ export default function Credentials({ appContext, appName }: PageProps) {
     return (
         <VerticallyCentered>
             <FormPaper style={{ minWidth: "320px" }}>
-                <FormPaperTitle>{t("PASSWORD")}</FormPaperTitle>
+                <Title>{user.email}</Title>
 
                 <VerifyMasterPasswordForm
                     buttonText={t("VERIFY_PASSPHRASE")}
@@ -281,3 +281,19 @@ export default function Credentials({ appContext, appName }: PageProps) {
         </VerticallyCentered>
     );
 }
+
+const Title: React.FC<React.PropsWithChildren> = ({ children }) => {
+    return (
+        <Title_>
+            <Typography variant="h2">{t("PASSWORD")}</Typography>
+            <Typography color="text.faint">{children}</Typography>
+        </Title_>
+    );
+};
+
+const Title_ = styled("div")`
+    margin-block-end: 4rem;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+`;