From 75d23963985b1604116211c22d38a14bf7f474bf Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Thu, 9 May 2024 11:38:24 +0530
Subject: [PATCH] [web] Show email on password screen

---
 .../photos/src/components/Directory/index.tsx |  3 +--
 .../styledComponents/LivePhotoBtn.tsx         |  3 +--
 .../photos/src/components/WatchFolder.tsx     |  2 +-
 web/packages/accounts/pages/credentials.tsx   | 20 +++++++++++++++++--
 4 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/web/apps/photos/src/components/Directory/index.tsx b/web/apps/photos/src/components/Directory/index.tsx
index a99581134..2fc4be58e 100644
--- a/web/apps/photos/src/components/Directory/index.tsx
+++ b/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 }) => `
diff --git a/web/apps/photos/src/components/PhotoViewer/styledComponents/LivePhotoBtn.tsx b/web/apps/photos/src/components/PhotoViewer/styledComponents/LivePhotoBtn.tsx
index 40de098f5..00b8979d5 100644
--- a/web/apps/photos/src/components/PhotoViewer/styledComponents/LivePhotoBtn.tsx
+++ b/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;
diff --git a/web/apps/photos/src/components/WatchFolder.tsx b/web/apps/photos/src/components/WatchFolder.tsx
index 710a54168..4d2144e0c 100644
--- a/web/apps/photos/src/components/WatchFolder.tsx
+++ b/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";
diff --git a/web/packages/accounts/pages/credentials.tsx b/web/packages/accounts/pages/credentials.tsx
index 3e8fbabbe..36425c142 100644
--- a/web/packages/accounts/pages/credentials.tsx
+++ b/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;
+`;