update layout

src/pages/Proof/Payment/Pay_DN.js

@@ -51,7 +51,10 @@ const isAfter = checkIsOnlyOnlinePayment();
                                 {isAfter ? (
                                 <Typography
                                     variant="h4"
-                                    sx={{ textAlign: "left", ml: 8, mr: 4, mt: 4 }}
+                                    sx={{ textAlign: "left", ml: 8, mr: 4, mt: 4,
+                                            textDecoration: "underline",
+                                            textDecorationThickness: "2px",
+                                            textUnderlineOffset: "4px" }}
                                 >
                                     <FormattedMessage id="proofPaymentHeader_demandNote2" />
                                 </Typography>
@@ -63,7 +66,9 @@ const isAfter = checkIsOnlyOnlinePayment();
                                     ml: 4,
                                     mr: 4,
                                     mt: 4,
-                                    borderBottom: "1px solid black"
+                                    textDecoration: "underline",
+                                    textDecorationThickness: "2px",
+                                    textUnderlineOffset: "4px"
                                     }}
                                 >
                                     <FormattedMessage id="proofPaymentHeader_demandNote" />

src/pages/Proof/Payment/Pay_Office.js

@@ -51,7 +51,10 @@ const isAfter = checkIsOnlyOnlinePayment();
                                 {isAfter ? (
                                 <Typography
                                     variant="h4"
-                                    sx={{ textAlign: "left", ml: 8, mr: 4, mt: 4 }}
+                                    sx={{ textAlign: "left", ml: 8, mr: 4, mt: 4, 
+                                            textDecoration: "underline",
+                                            textDecorationThickness: "2px",
+                                            textUnderlineOffset: "4px" }}
                                 >
                                     <FormattedMessage id="proofPaymentHeader_office2" />
                                 </Typography>
@@ -63,7 +66,9 @@ const isAfter = checkIsOnlyOnlinePayment();
                                     ml: 4,
                                     mr: 4,
                                     mt: 4,
-                                    borderBottom: "1px solid black"
+                                    textDecoration: "underline",
+                                    textDecorationThickness: "2px",
+                                    textUnderlineOffset: "4px"
                                     }}
                                 >
                                     <FormattedMessage id="proofPaymentHeader_office" />

src/pages/Proof/Payment/Pay_Online.js

@@ -157,7 +157,10 @@ const Index = () => {
                                     {isAfter ? (
                                     <Typography
                                         variant="h4"
-                                        sx={{ textAlign: "left", ml: 8, mr: 4, mt: 4 }}
+                                        sx={{ textAlign: "left", ml: 8, mr: 4, mt: 4,
+                                            textDecoration: "underline",
+                                            textDecorationThickness: "2px",
+                                            textUnderlineOffset: "4px" }}
                                     >
                                         <FormattedMessage id="proofPaymentHeader_online2" />
                                     </Typography>
@@ -169,7 +172,9 @@ const Index = () => {
                                         ml: 4,
                                         mr: 4,
                                         mt: 4,
-                                        borderBottom: "1px solid black"
+                                        textDecoration: "underline",
+                                        textDecorationThickness: "2px",
+                                        textUnderlineOffset: "4px"
                                         }}
                                     >
                                         <FormattedMessage id="proofPaymentHeader_online" />