From 2cd999802d076cde6e3d66643791c07441d54ab3 Mon Sep 17 00:00:00 2001
From: Jason Chuang <jchuang@2fi-solutions.com.hk>
Date: Tue, 6 Jan 2026 04:42:30 +0800
Subject: [PATCH] update layout

---
 src/pages/Proof/Payment/Pay_DN.js     | 9 +++++++--
 src/pages/Proof/Payment/Pay_Office.js | 9 +++++++--
 src/pages/Proof/Payment/Pay_Online.js | 9 +++++++--
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/pages/Proof/Payment/Pay_DN.js b/src/pages/Proof/Payment/Pay_DN.js
index ac24b48..fe40882 100644
--- a/src/pages/Proof/Payment/Pay_DN.js
+++ b/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" />
diff --git a/src/pages/Proof/Payment/Pay_Office.js b/src/pages/Proof/Payment/Pay_Office.js
index e75ace5..1c20105 100644
--- a/src/pages/Proof/Payment/Pay_Office.js
+++ b/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" />
diff --git a/src/pages/Proof/Payment/Pay_Online.js b/src/pages/Proof/Payment/Pay_Online.js
index a4f8acf..e71c457 100644
--- a/src/pages/Proof/Payment/Pay_Online.js
+++ b/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" />