From 6f730faf5826da92b25e9a3e266a593042b6e7d2 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Mon, 2 May 2022 22:17:19 +0530
Subject: [PATCH] create FormPaper component

---
 src/components/FormPaper/Footer.tsx           | 20 +++++++++++++++++++
 .../Title.tsx => FormPaper/HeaderText.tsx}    |  5 +++--
 src/components/FormPaper/index.tsx            | 11 ++++++++++
 3 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 src/components/FormPaper/Footer.tsx
 rename src/components/{Card/Title.tsx => FormPaper/HeaderText.tsx} (74%)
 create mode 100644 src/components/FormPaper/index.tsx

diff --git a/src/components/FormPaper/Footer.tsx b/src/components/FormPaper/Footer.tsx
new file mode 100644
index 000000000..00e6fb62b
--- /dev/null
+++ b/src/components/FormPaper/Footer.tsx
@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+import { ContainerProps } from '@mui/material';
+import Container from 'components/Container';
+
+const FormPaperFooter: FC<ContainerProps> = ({ sx, style, ...props }) => {
+    return (
+        <Container
+            disableGutters
+            style={{ flexDirection: 'row', ...style }}
+            sx={{
+                mt: 3,
+                ...sx,
+            }}
+            {...props}>
+            {props.children}
+        </Container>
+    );
+};
+
+export default FormPaperFooter;
diff --git a/src/components/Card/Title.tsx b/src/components/FormPaper/HeaderText.tsx
similarity index 74%
rename from src/components/Card/Title.tsx
rename to src/components/FormPaper/HeaderText.tsx
index 2a86035ab..ed0f92a12 100644
--- a/src/components/Card/Title.tsx
+++ b/src/components/FormPaper/HeaderText.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { Typography, TypographyProps } from '@mui/material';
 
-const CardTitle: FC<TypographyProps> = (props) => {
+const FormPaperHeaderText: FC<TypographyProps> = ({ sx, ...props }) => {
     return (
         <Typography
             sx={{
@@ -9,6 +9,7 @@ const CardTitle: FC<TypographyProps> = (props) => {
                 fontWeight: '600',
                 textAlign: 'left',
                 mb: 8,
+                ...sx,
             }}
             {...props}>
             {props.children}
@@ -16,4 +17,4 @@ const CardTitle: FC<TypographyProps> = (props) => {
     );
 };
 
-export default CardTitle;
+export default FormPaperHeaderText;
diff --git a/src/components/FormPaper/index.tsx b/src/components/FormPaper/index.tsx
new file mode 100644
index 000000000..73ee69ddc
--- /dev/null
+++ b/src/components/FormPaper/index.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Paper, PaperProps } from '@mui/material';
+import { FC } from 'react';
+
+const FormPaper: FC<PaperProps> = ({ sx, children, ...props }) => (
+    <Paper sx={{ maxWidth: '360px', py: 4, px: 2, ...sx }} {...props}>
+        {children}
+    </Paper>
+);
+
+export default FormPaper;