Update UI

src/pages/Proof/Create_FromApp/ApplicationDetails.js

@@ -5,6 +5,7 @@ import {
     Stack,
     TextField,
     FormLabel,
+    Typography
 } from '@mui/material';
 import MainCard from "components/MainCard";
 import * as React from "react";
@@ -12,12 +13,12 @@ import { useFormik } from 'formik';
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const SearchPublicNoticeForm = ({formData}) => {
+const SearchPublicNoticeForm = ({ formData }) => {
 
     const [data, setData] = React.useState({});
 
     React.useEffect(() => {
-        if(formData)
+        if (formData)
             setData(formData);
     }, [formData]);
 
@@ -58,7 +59,9 @@ const SearchPublicNoticeForm = ({formData}) => {
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center">
-                        Application Details
+                        <Typography variant="h5" sx={{ mb: 2, borderBottom: "1px solid black" }}>
+                            Application Details
+                        </Typography>
                     </Grid>
                 </CardContent>
 

src/pages/Proof/Create_FromApp/GazetteDetails.js

@@ -4,6 +4,7 @@ import {
     CardContent,
     FormLabel,
     TextField,
+    Typography
 } from '@mui/material';
 import MainCard from "components/MainCard";
 import * as React from "react";
@@ -60,7 +61,9 @@ const GazetteDetails = ({ formData }) => {
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center">
-                        Gazette Details
+                        <Typography variant="h5" sx={{ mb: 2, borderBottom: "1px solid black" }}>
+                            Gazette Details
+                        </Typography>
                     </Grid>
                 </CardContent>
 

src/pages/Proof/Create_FromApp/ProofForm.js

@@ -162,7 +162,9 @@ const FormPanel = ({ formData }) => {
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center">
-                        Proof
+                        <Typography variant="h5" sx={{ mb: 2, borderBottom: "1px solid black" }}>
+                            Proof
+                        </Typography>
                     </Grid>
                 </CardContent>
 

src/pages/Proof/Create_FromApp/index.js

@@ -1,6 +1,6 @@
 // material-ui
 import {
-    Grid,
+    Grid, Box
 } from '@mui/material';
 import MainCard from "components/MainCard";
 import * as UrlUtils from "utils/ApiPathConst";
@@ -44,7 +44,7 @@ const Index = () => {
                     responseData.data["faxNumber"] = JSON.parse(responseData.data.contactFaxNo).faxNumber;
                     responseData.data["fax_countryCode"] = JSON.parse(responseData.data.contactFaxNo).countryCode;
 
-                    responseData.data["issueNoStr"] = responseData.data.issueVolume+"/"+responseData.data.issueYear+" No. "+responseData.data.issueNo
+                    responseData.data["issueNoStr"] = responseData.data.issueVolume + "/" + responseData.data.issueYear + " No. " + responseData.data.issueNo
                     responseData.data["issueDate"] = DateUtils.dateStr(responseData.data.issueDate);
 
                     responseData.data["groupType"] = responseData.data.groupNo.charAt(0);
@@ -58,44 +58,59 @@ const Index = () => {
         !onReady ?
             <LoadingComponent />
             :
+
             <Grid container sx={{ minHeight: '85vh', backgroundColor: '#eee' }} direction="column" spacing={1} >
-                {/*row 1*/}
-                <Grid item xs={12} md={12} lg={12}>
-                    <Grid container direction="row" justify="flex-start" alignItems="stretch" spacing={1}>
-                        <Grid item xs={12} md={12} lg={8}>
-                            <ApplicationDetails
-                                formData={record}
-                                style={{
-                                    display: "flex",
-                                    height: "100%",
-                                    flex: 1
-                                }}
-                            />
+                <MainCard
+                    elevation={0}
+                    border={false}
+                    content={false}>
+                    {/*row 1*/}
+                    <Grid item xs={12} md={12} lg={12}>
+                        <Grid container direction="row" justify="flex-start" alignItems="stretch" spacing={1}>
+                            <Grid item xs={12} md={12} lg={8}>
+                                <Box xs={12} ml={4} mt={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                                    <ApplicationDetails
+                                        formData={record}
+                                        style={{
+                                            display: "flex",
+                                            height: "100%",
+                                            flex: 1
+                                        }}
+                                    />
+                                </Box>
+                            </Grid>
+                            <Grid item xs={12} md={12} lg={4} >
+                                <Box xs={12} ml={4} mt={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                                    <GazetteDetails
+                                        formData={record}
+                                        style={{
+                                            display: "flex",
+                                            height: "100%",
+                                            flex: 1
+                                        }}
+                                    />
+                                </Box>
+                            </Grid>
                         </Grid>
-                        <Grid item xs={12} md={12} lg={4} >
-                            <GazetteDetails
+                    </Grid>
+                    {/*row 2*/}
+                    <Grid item xs={12} md={12} lg={12}>
+                        <MainCard elevation={0}
+                            border={false}
+                            content={false}
+                        >
+                                <Box xs={12} ml={4} mt={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+
+                            <ProofForm
                                 formData={record}
-                                style={{
-                                    display: "flex",
-                                    height: "100%",
-                                    flex: 1
-                                }}
                             />
-                        </Grid>
+                            </Box>
+                            <br/>
+                        </MainCard>
                     </Grid>
-                </Grid>
-                {/*row 2*/}
-                <Grid item xs={12} md={12} lg={12}>
-                    <MainCard elevation={0}
-                        border={false}
-                        content={false}
-                    >
-                        <ProofForm
-                            formData={record}
-                        />
-                    </MainCard>
-                </Grid>
+                </MainCard>
             </Grid>
+
     );
 };