From a00b9f4cc5cc63f10b1c91dd0bc34abc36668e03 Mon Sep 17 00:00:00 2001
From: jason <jchuang@2fi-solutions.com.hk>
Date: Fri, 21 Aug 2026 16:05:44 +0800
Subject: [PATCH] FPS message update

---
 src/pages/Payment/FPS/FPS.js | 11 ++++++-----
 src/themes/themeConst.js     | 15 ++++++++-------
 src/translations/en.json     |  2 +-
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/pages/Payment/FPS/FPS.js b/src/pages/Payment/FPS/FPS.js
index f329065c..e5136db2 100644
--- a/src/pages/Payment/FPS/FPS.js
+++ b/src/pages/Payment/FPS/FPS.js
@@ -400,14 +400,14 @@ const Index = () => {
                         <Grid container justifyContent="flex-start" alignItems="center" width="100%">
                             <center style={{ width: '100%', display: 'block' }}>
                                 <Grid item xs={12} md={12} >
-                                    <Box sx={{ width: { xs: '90%', md: '50%' }, mx: 'auto', mt: 4, textAlign: 'left' }}>
+                                    <Box sx={{ width: { xs: '90%', md: '40%' }, mx: 'auto', mt: 4, textAlign: 'left' }}>
                                         {!isError &&
-                                            <Typography component="div" variant="body1" color="error" sx={{ fontSize: '20px' }}>
+                                            <Typography component="div" variant="body1" color="error" sx={{ fontSize: '20px', fontWeight: 700, textAlign: 'center' }}>
                                                 <FormattedMessage id="payAlert"/>
                                             </Typography>
                                         }
                                         {isError &&
-                                            <Typography component="div" variant="body1" color="error" sx={{ fontSize: '20px' }}>
+                                            <Typography component="div" variant="body1" color="error" sx={{ fontSize: '20px', fontWeight: 700, textAlign: 'justify' }}>
                                                 <FormattedMessage id="fpsPaymentErrorMsg1"/>
                                                 <Box
                                                     component="ul"
@@ -419,10 +419,11 @@ const Index = () => {
                                                         boxSizing: 'border-box',
                                                         listStylePosition: 'outside',
                                                         paddingLeft: '1.5em',
+                                                        textAlign: 'justify',
                                                     }}
                                                 >
-                                                    <li><FormattedMessage id="fpsPaymentErrorMsg2"/></li>
-                                                    <li><FormattedMessage id="fpsPaymentErrorMsg3"/></li>
+                                                    <li style={{fontWeight:'bold', textAlign: 'justify'}}><FormattedMessage id="fpsPaymentErrorMsg2"/></li>
+                                                    <li style={{fontWeight:'bold', textAlign: 'justify'}}><FormattedMessage id="fpsPaymentErrorMsg3"/></li>
                                                 </Box>
                                             </Typography>
                                         }
diff --git a/src/themes/themeConst.js b/src/themes/themeConst.js
index 703ad58f..bb4a6a26 100644
--- a/src/themes/themeConst.js
+++ b/src/themes/themeConst.js
@@ -48,13 +48,14 @@ export const PNSPS_THEME = createTheme({
             },
             styleOverrides: {
                 root: ({ ownerState }) => ({
-                ...(ownerState.color === "cancel" && {
-                    borderColor: "#9E9E9E",
-                }),
-                '&:active': {
-                    boxShadow: 'none',
-                    transform: 'none',
-                },
+                    ...(ownerState.color === "cancel" && {
+                        borderColor: "#9E9E9E",
+                    }),
+                    textTransform: 'none',
+                    '&:active': {
+                        boxShadow: 'none',
+                        transform: 'none',
+                    },
                 }),
                 contained: ({ theme, ownerState }) => ({
                 ...(ownerState.color === "cancel" && {
diff --git a/src/translations/en.json b/src/translations/en.json
index ca32e3c9..a44baa48 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -418,7 +418,7 @@
   "payId": "Payment No.",
   "payIdNRefer": "Payment No. / Payment Reference No.",
   "payConfirm": "Confirm payment",
-  "payCancel": "Cancel payment",
+  "payCancel": "Cancel Payment",
   "payAlert": "Please do not refresh or close this page during payment to avoid payment failure. In case of cancellation, please use the “Cancel Payment” button at the bottom of this page.",
   "payTotalDeatail": "Total Payment Amount",
   "payDeatail": "Total Payment Amount",