From 07a3d2155d788242989dd5cafd7db27913dbf7d0 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Fri, 20 May 2022 22:11:09 +0530
Subject: [PATCH] use form title consistently

---
 src/pages/change-email/index.tsx    | 9 +++------
 src/pages/change-password/index.tsx | 8 ++------
 src/pages/credentials/index.tsx     | 4 +---
 3 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/src/pages/change-email/index.tsx b/src/pages/change-email/index.tsx
index 74d4c246f..69d4666f9 100644
--- a/src/pages/change-email/index.tsx
+++ b/src/pages/change-email/index.tsx
@@ -1,5 +1,4 @@
-import VerticallyCentered, { CenteredFlex } from 'components/Container';
-import LogoImg from 'components/LogoImg';
+import VerticallyCentered from 'components/Container';
 import React, { useEffect } from 'react';
 import constants from 'utils/strings/constants';
 import router from 'next/router';
@@ -7,6 +6,7 @@ import ChangeEmailForm from 'components/ChangeEmail';
 import { PAGES } from 'constants/pages';
 import { getData, LS_KEYS } from 'utils/storage/localStorage';
 import FormPaper from 'components/Form/FormPaper';
+import FormPaperTitle from 'components/Form/FormPaper/Title';
 
 function ChangeEmailPage() {
     useEffect(() => {
@@ -19,10 +19,7 @@ function ChangeEmailPage() {
     return (
         <VerticallyCentered>
             <FormPaper>
-                <CenteredFlex mb={8}>
-                    <LogoImg src="/icon.svg" />
-                    {constants.CHANGE_EMAIL}
-                </CenteredFlex>
+                <FormPaperTitle>{constants.CHANGE_EMAIL}</FormPaperTitle>
                 <ChangeEmailForm />
             </FormPaper>
         </VerticallyCentered>
diff --git a/src/pages/change-password/index.tsx b/src/pages/change-password/index.tsx
index a1014f033..f3e6eac3b 100644
--- a/src/pages/change-password/index.tsx
+++ b/src/pages/change-password/index.tsx
@@ -15,13 +15,12 @@ import SetPasswordForm, {
 import { SESSION_KEYS } from 'utils/storage/sessionStorage';
 import { PAGES } from 'constants/pages';
 import { KEK, UpdatedKey } from 'types/user';
-import { CenteredFlex } from 'components/Container';
-import LogoImg from 'components/LogoImg';
 import LinkButton from 'components/pages/gallery/LinkButton';
 import VerticallyCentered from 'components/Container';
 import FormPaper from 'components/Form/FormPaper';
 import FormPaperFooter from 'components/Form/FormPaper/Footer';
 import { Divider } from '@mui/material';
+import FormPaperTitle from 'components/Form/FormPaper/Title';
 
 export default function ChangePassword() {
     const [token, setToken] = useState<string>();
@@ -82,10 +81,7 @@ export default function ChangePassword() {
     return (
         <VerticallyCentered>
             <FormPaper>
-                <CenteredFlex mb={4}>
-                    <LogoImg src="/icon.svg" />
-                    {constants.CHANGE_PASSWORD}
-                </CenteredFlex>
+                <FormPaperTitle>{constants.CHANGE_PASSWORD}</FormPaperTitle>
                 <SetPasswordForm
                     callback={onSubmit}
                     buttonText={constants.CHANGE_PASSWORD}
diff --git a/src/pages/credentials/index.tsx b/src/pages/credentials/index.tsx
index 3434901ed..fe8d55ad0 100644
--- a/src/pages/credentials/index.tsx
+++ b/src/pages/credentials/index.tsx
@@ -102,9 +102,7 @@ export default function Credentials() {
     return (
         <FormContainer>
             <FormPaper style={{ minWidth: '320px' }}>
-                <FormPaperTitle sx={{ mb: 4 }}>
-                    {constants.PASSWORD}
-                </FormPaperTitle>
+                <FormPaperTitle>{constants.PASSWORD}</FormPaperTitle>
                 <SingleInputForm
                     callback={verifyPassphrase}
                     placeholder={constants.RETURN_PASSPHRASE_HINT}