update layout

src/pages/Proof/Payment/Pay_DN.js

@@ -48,12 +48,27 @@ const isAfter = checkIsOnlyOnlinePayment();
                     <Grid container justifyContent="flex-start" alignItems="center" >
                         <center>
                             <Grid item xs={12} md={8} >
-                                <Typography variant="h4" sx={{ textAlign: "left", ml: 4, mr: 4, mt: 4, borderBottom: "1px solid black" }}>
-                                    <FormattedMessage
-                                            id={isAfter ? "proofPaymentHeader_demandNote2" : "proofPaymentHeader_demandNote"}
-                                    />
+                                {isAfter ? (
+                                <Typography
+                                    variant="h4"
+                                    sx={{ textAlign: "left", ml: 8, mr: 4, mt: 4 }}
+                                >
+                                    <FormattedMessage id="proofPaymentHeader_demandNote2" />
                                 </Typography>
-
+                                ) : (
+                                <Typography
+                                    variant="h4"
+                                    sx={{
+                                    textAlign: "left",
+                                    ml: 4,
+                                    mr: 4,
+                                    mt: 4,
+                                    borderBottom: "1px solid black"
+                                    }}
+                                >
+                                    <FormattedMessage id="proofPaymentHeader_demandNote" />
+                                </Typography>
+                                )}
 
                                 <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
                                     <div dangerouslySetInnerHTML={{

src/pages/Proof/Payment/Pay_Office.js

@@ -48,11 +48,28 @@ const isAfter = checkIsOnlyOnlinePayment();
                     <Grid container justifyContent="flex-start" alignItems="center" >
                         <center>
                             <Grid item xs={12} md={8} >
-                                <Typography variant="h4" sx={{ textAlign: "left", ml: 4, mr: 4, mt: 4, borderBottom: "1px solid black" }}>
-                                    <FormattedMessage
-                                            id={isAfter ? "proofPaymentHeader_office2" : "proofPaymentHeader_office"}
-                                    />
+                                {isAfter ? (
+                                <Typography
+                                    variant="h4"
+                                    sx={{ textAlign: "left", ml: 8, mr: 4, mt: 4 }}
+                                >
+                                    <FormattedMessage id="proofPaymentHeader_office2" />
                                 </Typography>
+                                ) : (
+                                <Typography
+                                    variant="h4"
+                                    sx={{
+                                    textAlign: "left",
+                                    ml: 4,
+                                    mr: 4,
+                                    mt: 4,
+                                    borderBottom: "1px solid black"
+                                    }}
+                                >
+                                    <FormattedMessage id="proofPaymentHeader_office" />
+                                </Typography>
+                                )}
+
 
 
                                 <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>

src/pages/Proof/Payment/Pay_Online.js

@@ -154,11 +154,28 @@ const Index = () => {
                         <Grid container justifyContent="flex-start" alignItems="center" >
                             <center>
                                 <Grid item xs={12} md={8} >
-                                    <Typography variant="h4" sx={{ textAlign: "left", ml: 4, mr: 4, mt: 4, borderBottom: "1px solid black" }}>
-                                        <FormattedMessage
-                                            id={isAfter ? "proofPaymentHeader_online2" : "proofPaymentHeader_online"}
-                                    />
+                                    {isAfter ? (
+                                    <Typography
+                                        variant="h4"
+                                        sx={{ textAlign: "left", ml: 8, mr: 4, mt: 4 }}
+                                    >
+                                        <FormattedMessage id="proofPaymentHeader_online2" />
                                     </Typography>
+                                    ) : (
+                                    <Typography
+                                        variant="h4"
+                                        sx={{
+                                        textAlign: "left",
+                                        ml: 4,
+                                        mr: 4,
+                                        mt: 4,
+                                        borderBottom: "1px solid black"
+                                        }}
+                                    >
+                                        <FormattedMessage id="proofPaymentHeader_online" />
+                                    </Typography>
+                                    )}
+
                                     <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
                                         <div dangerouslySetInnerHTML={{
                                             __html: intl.formatMessage(