From 7447439674b0bebe9cf0f17e31d6736cd29b93c2 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Fri, 20 May 2022 17:07:02 +0530
Subject: [PATCH] use variant title for form title

---
 src/components/Form/FormPaper/HeaderText.tsx | 9 +--------
 src/components/Form/FormPaper/index.tsx      | 2 +-
 src/pages/login/index.tsx                    | 2 +-
 src/themes/darkThemeOptions.tsx              | 1 +
 4 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/components/Form/FormPaper/HeaderText.tsx b/src/components/Form/FormPaper/HeaderText.tsx
index 75d85f3f3..0de8bdfa2 100644
--- a/src/components/Form/FormPaper/HeaderText.tsx
+++ b/src/components/Form/FormPaper/HeaderText.tsx
@@ -3,14 +3,7 @@ import { Typography, TypographyProps } from '@mui/material';
 
 const FormPaperHeaderText: FC<TypographyProps> = ({ sx, ...props }) => {
     return (
-        <Typography
-            css={`
-                font-size: 32px;
-                font-weight: 600;
-                line-height: 40px;
-            `}
-            sx={{ mb: 8, ...sx }}
-            {...props}>
+        <Typography variant="title" sx={{ mb: 8, ...sx }} {...props}>
             {props.children}
         </Typography>
     );
diff --git a/src/components/Form/FormPaper/index.tsx b/src/components/Form/FormPaper/index.tsx
index 1e17f8a7a..a45aa5ed7 100644
--- a/src/components/Form/FormPaper/index.tsx
+++ b/src/components/Form/FormPaper/index.tsx
@@ -2,7 +2,7 @@ import { Paper, styled } from '@mui/material';
 
 const FormPaper = styled(Paper)(({ theme }) => ({
     padding: theme.spacing(4, 2),
-    width: '360px',
+    maxWidth: '360px',
     marginRight: theme.spacing(10),
     [theme.breakpoints.down('md')]: {
         marginRight: theme.spacing(5),
diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx
index f5caef135..07fac4fdc 100644
--- a/src/pages/login/index.tsx
+++ b/src/pages/login/index.tsx
@@ -37,7 +37,7 @@ export default function Home() {
         </VerticallyCentered>
     ) : (
         <FormContainer>
-            <FormPaper sx={{ minWidth: '320px' }}>
+            <FormPaper>
                 <Login signUp={register} />
             </FormPaper>
         </FormContainer>
diff --git a/src/themes/darkThemeOptions.tsx b/src/themes/darkThemeOptions.tsx
index a8f25556c..3dd919251 100644
--- a/src/themes/darkThemeOptions.tsx
+++ b/src/themes/darkThemeOptions.tsx
@@ -156,6 +156,7 @@ const darkThemeOptions = createTheme({
             fontSize: '32px',
             lineHeight: '40px',
             fontWeight: 600,
+            display: 'block',
         },
         fontFamily: ['Inter', 'sans-serif'].join(','),
     },