Merge branch 'web-access-fix-2' into uat

public/favicon.svg

@@ -2,7 +2,7 @@
 <path d="M1.63954 13.3644L3.95187 11.052L3.95428 11.0496H8.30453L6.5736 12.7806L6.12669 13.2275L4.35415 15L4.57368 15.2201L14.5039 25.1498L24.6537 15L22.8805 13.2275L22.7557 13.102L20.7033 11.0496H25.0535L25.0559 11.052L26.8683 12.8644L29.0039 15L14.5039 29.5L0.00390625 15L1.63954 13.3644ZM14.5039 0.5L22.8823 8.87842H18.5321L14.5039 4.85024L10.4757 8.87842H6.12548L14.5039 0.5Z" fill="#096DD9"/>
 <path d="M4.35477 15.0002L6.12731 13.2276L6.57422 12.7807L4.84389 11.0498H3.9549L3.95249 11.0522L1.64016 13.3645L3.85961 15.5731L4.35477 15.0002Z" fill="url(#paint0_linear_112102_1824)"/>
 <path d="M22.8814 13.2276L24.6545 15.0002L24.479 15.1757L24.4796 15.1763L26.8691 12.8646L25.0568 11.0522L25.0544 11.0498H24.8783L22.7565 13.1022L22.8814 13.2276Z" fill="url(#paint1_linear_112102_1824)"/>
-<path d="M3.9497 11.0498L3.95211 11.0522L6.12693 13.2276L14.5041 21.6043L25.0586 11.0498H3.9497Z" fill="#1890FF"/>
+<path d="M3.9497 11.0498L3.95211 11.0522L6.12693 13.2276L14.5041 21.6043L25.0586 11.0498H3.9497Z" fill="#0C489E"/>
 <defs>
 <linearGradient id="paint0_linear_112102_1824" x1="5.62978" y1="11.5889" x2="2.57161" y2="14.6471" gradientUnits="userSpaceOnUse">
 <stop stop-color="#023B95"/>

src/assets/style/navbarStyles.css

@@ -11,7 +11,7 @@
   top: 0px;
   width: 100%;
   z-index: 9999;
-  border-bottom: 3px solid #0C489E;
+  border-bottom: 3px solid #0c489e;
   min-height: 77px;
 }
 
@@ -112,7 +112,7 @@
 
 #navbar div li a:hover,
 #navbar div li button.navTrigger:hover{
-  color: #0C489E;
+  color: #1565C0;
 }
 
 #navbar div li a:hover::after,
@@ -122,7 +122,7 @@
   content: "";
   width: 80%;
   height: 3px;
-  background:#0C489E;
+  background:#1565C0;
   position: absolute;
   bottom: -5px;
   left: 20px;
@@ -166,7 +166,7 @@
 
 #navbar a:focus-visible,
 #navbar button.navTrigger:focus-visible{
-  outline: 3px solid #0C489E;
+  outline: 3px solid #0c489e;
   outline-offset: 2px;
   border-radius: 10px;
 }
@@ -234,7 +234,7 @@
   text-decoration: none;
   font-size: 1.1rem;
   font-weight: 600;
-  color: #0C489E;
+  color: #0c489e;
   transition: 0.3s ease-in-out;
   text-align: center;
 }
@@ -242,7 +242,7 @@
   text-decoration: none;
   font-size: 1.1rem;
   font-weight: 600;
-  color: #0C489E;
+  color: #0c489e;
   transition: 0.3s ease-in-out;
   text-align: center;
 }
@@ -284,7 +284,7 @@
   transition: 0.3s ease-in-out;
 }
 #sidebar li a:hover{
-  color: #0C489E;
+  color: #0c489e;
 }
 #sidebar div li ul{
   background: white;
@@ -344,12 +344,12 @@
 /* Hover / focus */
 #sidebar li > a:hover,
 #sidebar li > button.navTrigger:hover{
-  color: #0C489E;
+  color: #0c489e;
 }
 
 #sidebar li > a:focus-visible,
 #sidebar li > button.navTrigger:focus-visible{
-  outline: 3px solid #0C489E;
+  outline: 3px solid #0c489e;
   outline-offset: 2px;
   border-radius: 10px;
 }

src/assets/style/styles.css

@@ -72,7 +72,7 @@ a:active {
   [role="link"],
   [tabindex]:not([tabindex="-1"])
 ):focus-visible {
-  outline: 3px solid #0C489E;
+  outline: 3px solid #0c489e;
   outline-offset: 2px;
   border-radius: 4px;
 }
@@ -95,9 +95,9 @@ a:active {
 /* ===== MUI DataGrid keyboard focus (WCAG 2.4.7 / 2.4.11) ===== */
 .MuiDataGrid-columnHeader:focus-visible,
 .MuiDataGrid-cell:focus-visible {
-  outline: 3px solid #0C489E;
+  outline: 3px solid #0c489e;
   outline-offset: -2px;
-  box-shadow: 0 0 0 3px rgba(12, 72, 158, 0.25);
+  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.25);
 }
 
 /* Contained buttons only */
@@ -122,7 +122,7 @@ a:active {
 
 /* ===== Outlined button focus ===== */
 .MuiButton-outlined:focus-visible {
-  outline: 3px solid #0C489E;
+  outline: 3px solid #0c489e;
   outline-offset: 2px;
 }
 

src/components/AdminLogo/index.js

@@ -34,7 +34,7 @@ const LogoSection = ({ sx, to }) => {
           ...sx,
           /* ✅ WCAG 2.4.7 focus indicator */
           '&:focus-visible': {
-            outline: '3px solid #0C489E',
+            outline: '3px solid #0c489e',
             outlineOffset: '2px',
             borderRadius: '6px'
           }
@@ -42,7 +42,7 @@ const LogoSection = ({ sx, to }) => {
       >
         <Stack direction="column" justifyContent="center" alignItems="center" >
           <Logo />
-          <span style={{ color: checkSysEnv()!=''?'red':'#0C489E'}} id="systemTitle">PNSPS</span>
+          <span style={{ color: checkSysEnv()!=''?'red':'#0c489e'}} id="systemTitle">PNSPS</span>
         </Stack>
       </ButtonBase>
 

src/components/FileDeleteButton.js

@@ -0,0 +1,27 @@
+import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
+import { IconButton } from '@mui/material';
+import { useIntl } from 'react-intl';
+import { handleActionKeyDown } from 'utils/CommonFunction';
+
+export default function FileDeleteButton({ onDelete, icon: IconComponent = RemoveCircleOutlineIcon, color = 'error' }) {
+    const intl = useIntl();
+    const label = intl.formatMessage({ id: 'ariaDeleteFile' });
+
+    const handleDelete = (event) => {
+        onDelete(event);
+    };
+
+    return (
+        <IconButton
+            size="small"
+            color={color}
+            tabIndex={0}
+            aria-label={label}
+            title={label}
+            onClick={handleDelete}
+            onKeyDown={(event) => handleActionKeyDown(event, handleDelete)}
+        >
+            <IconComponent fontSize="small" />
+        </IconButton>
+    );
+}

src/components/FileList.js

@@ -11,6 +11,8 @@ import { FiDataGrid } from './FiDataGrid';
 import {useTheme} from "@emotion/react";
 import {useMediaQuery} from "@mui/material";
 import {useIntl} from "react-intl";
+import { createDeleteFileColumn } from 'utils/fileListColumns';
+import { CONTAINED_PRIMARY_BLUE } from "themes/colorConst";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function FileList({ refType, refId, allowDelete, sx, dateHideable,lang, ...props }) {
@@ -94,11 +96,10 @@ export default function FileList({ refType, refId, allowDelete, sx, dateHideable
                     return [
                         <GridActionsCellItem
                             key="OutSave"
-                            icon={<Icon.Download />}
+                            icon={<Icon.Download sx={{ color: CONTAINED_PRIMARY_BLUE }} />}
                             label="Download"
                             className="textPrimary"
                             onClick={onDownloadClick(params.id, params.row.skey, params.row.filename)}
-                            color="primary"
                             disabled={onDownload}
                         />]
                 },
@@ -143,11 +144,10 @@ export default function FileList({ refType, refId, allowDelete, sx, dateHideable
                     return [
                         <GridActionsCellItem
                             key="OutSave"
-                            icon={<Icon.Download />}
+                            icon={<Icon.Download sx={{ color: CONTAINED_PRIMARY_BLUE }} />}
                             label="Download"
                             className="textPrimary"
                             onClick={onDownloadClick(params.id, params.row.skey, params.row.filename)}
-                            color="primary"
                             disabled={onDownload}
                         />]
                 },
@@ -175,24 +175,10 @@ export default function FileList({ refType, refId, allowDelete, sx, dateHideable
 
 
     if (allowDelete) {
-        columns.push({
-            field: 'actions',
-            type: 'actions',
-            headerName: 'Delete',
-            width: 100,
-            cellClassName: 'actions',
-            getActions: (params) => {
-                return [
-                    <GridActionsCellItem
-                        key="OutSave"
-                        icon={<Icon.Delete />}
-                        label="Delete"
-                        className="textPrimary"
-                        onClick={onDeleteClick(params.id, params.row.skey, params.row.filename)}
-                        color="primary"
-                    />]
-            },
-        });
+        columns.push(createDeleteFileColumn(
+            (id, row) => onDeleteClick(id, row.skey, row.filename),
+            { icon: Icon.Delete, color: 'primary', width: 100 }
+        ));
     }
 
     return (

src/components/MobileLogo/index.js

@@ -30,7 +30,7 @@ const LogoSection = ({ sx, to }) => {
 
       /* WCAG 2.4.7 – visible keyboard focus */
       '&:focus-visible': {
-        outline: '3px solid #0C489E',
+        outline: '3px solid #0c489e',
         outlineOffset: '2px',
         borderRadius: '6px'
       }

src/components/RegisterStepIcon.js

@@ -0,0 +1,55 @@
+import { Box, useTheme } from '@mui/material';
+
+/** Darker green for completed register steps (matches PAY button hover). */
+export const REGISTER_STEP_COMPLETED_COLOR = '#488F52';
+
+export const registerStepStyle = {
+  width: { lg: '40%', md: '70%', xs: '100%' },
+  boxShadow: 1,
+  backgroundColor: '#FFFFFF',
+  padding: 2,
+  '& .MuiStepLabel-label': { color: '#424242' },
+  '& .MuiStepConnector-line': { borderColor: '#9E9E9E' },
+  '& .MuiStepConnector-root.Mui-completed .MuiStepConnector-line': {
+    borderColor: REGISTER_STEP_COMPLETED_COLOR,
+  },
+  '& .MuiStepConnector-root.Mui-active .MuiStepConnector-line': {
+    borderColor: 'warning.main',
+  },
+};
+
+const RegisterStepIcon = ({ active, completed, className, icon }) => {
+  const theme = useTheme();
+  let circleColor = '#757575';
+  let textColor = '#FFFFFF';
+
+  if (completed) {
+    circleColor = REGISTER_STEP_COMPLETED_COLOR;
+  } else if (active) {
+    circleColor = theme.palette.warning.main;
+    textColor = '#1A1A1A';
+  }
+
+  return (
+    <Box
+      className={className}
+      sx={{
+        width: '2rem',
+        height: '2rem',
+        borderRadius: '50%',
+        backgroundColor: circleColor,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: textColor,
+        fontSize: '1rem',
+        fontWeight: 600,
+        lineHeight: 1,
+      }}
+    >
+      {icon}
+    </Box>
+  );
+};
+
+export default RegisterStepIcon;

src/components/iAmSmartButton.js

@@ -25,7 +25,7 @@ export function IAmSmartButton({ label, onClickFun, fullWidth }) {
 
     return (
         <Button onClick={()=>doOnClick()}  sx={{textTransform: 'none'}} color="iAmSmart" fullWidth={fullWidth} size="large" variant="outlined" startIcon={<img src={iAmSmartICon} alt={intl.formatMessage({ id: 'iAmSmartAlt' })} width="30" />}>
-        <Typography variant="h5">
+        <Typography component="span" variant="h5">
             {_label}
         </Typography>
       </Button>  

src/index.js

@@ -58,7 +58,10 @@ root.render(
     <ReduxProvider store={store}>
       <SysSettingProvider>
         <I18nProvider>
-          <BrowserRouter basename="/">
+          <BrowserRouter
+            basename="/"
+            future={{ v7_startTransition: true, v7_relativeSplatPath: true }}
+          >
             <RefreshTokenProvider>
               <AutoLogoutProvider>
                 <GreyWrapper>

src/layout/MainLayout/Header/HeaderContent/LocaleSelector.js

@@ -64,7 +64,8 @@ const LocaleSelector = () => {
             }}
             aria-label={intl.formatMessage({id: 'openLanguage'})}
             ref={anchorRef}
-            aria-controls={open ? 'profile-grow' : undefined}
+            aria-controls={open ? 'locale-selector-menu' : undefined}
+            aria-expanded={open}
             aria-haspopup="true"
             onClick={handleToggle}
             >
@@ -103,6 +104,7 @@ const LocaleSelector = () => {
                         >
                             <ClickAwayListener onClickAway={handleClose}>
                                 <List
+                                    id="locale-selector-menu"
                                     component="nav"
                                 >
                                     <ListItem disablePadding>

src/layout/MainLayout/Header/HeaderContent/Notification.js

@@ -77,7 +77,7 @@ const Notification = () => {
 
           /* ✅ WCAG 2.4.7 focus indicator */
           '&:focus-visible': {
-            outline: '3px solid #0C489E',
+            outline: '3px solid #0c489e',
             outlineOffset: '2px',
             borderRadius: '6px'
           }

src/layout/MainLayout/Header/index.js

@@ -775,7 +775,7 @@ function Header(props) {
     <Stack id="sidebar" direction="column" justifyContent="center" alignItems="center" sx={{ textAlign: "center", width: "300px" }}>
       <Box sx={{ mr: 2, mt: 1, display: { md: "none" } }}>
         <MobileLogo />
-        <span style={{ color: checkSysEnv() !== "" ? "red" : "#0C489E" }} id="mobileTitle">
+        <span style={{ color: checkSysEnv() !== "" ? "red" : "#0c489e" }} id="mobileTitle">
           PNSPS
         </span>
       </Box>
@@ -794,7 +794,7 @@ function Header(props) {
     <Stack id="sidebar" direction="column" justifyContent="center" alignItems="center" onClick={handleDrawerToggle} sx={{ textAlign: "center" }}>
       <Box sx={{ mr: 2, mt: 1, display: { md: "none" } }}>
         <MobileLogo />
-        <span style={{ color: checkSysEnv() !== "" ? "red" : "#0C489E" }} id="mobileTitle">
+        <span style={{ color: checkSysEnv() !== "" ? "red" : "#0c489e" }} id="mobileTitle">
           PNSPS
         </span>
       </Box>
@@ -826,13 +826,13 @@ function Header(props) {
                 onClick={handleDrawerToggle}
                 sx={{ mr: 2, display: { md: "none" } }}
               >
-                <MenuIcon style={{ color: "#0C489E" }} />
+                <MenuIcon style={{ color: "#0c489e" }} />
               </IconButton>
               <Box sx={{ flexGrow: 1, mr: 2, display: { sm: "block", md: "none" } }}>
                 <Stack direction="row" justifyContent="space-between" alignItems="center" width="100%">
                   <MobileLogo />
                   <Stack justifyContent="flex-start" alignItems="flex-start" width="100%" ml={2}>
-                    <span style={{ color: checkSysEnv() !== "" ? "red" : "#0C489E" }} id="mobileTitle">
+                    <span style={{ color: checkSysEnv() !== "" ? "red" : "#0c489e" }} id="mobileTitle">
                       PNSPS
                     </span>
                   </Stack>
@@ -848,7 +848,7 @@ function Header(props) {
                 <Stack direction="row" justifyContent="flex-start" alignItems="center">
                   <Logo />
                   <Stack justifyContent="flex-start" alignItems="center">
-                    <span style={{ color: checkSysEnv() !== "" ? "#B00020" : "#0C489E" }} id="systemTitle">
+                    <span style={{ color: checkSysEnv() !== "" ? "#B00020" : "#0c489e" }} id="systemTitle">
                       <FormattedMessage id="PNSPS" />
                     </span>
                   </Stack>
@@ -863,14 +863,14 @@ function Header(props) {
                 onClick={handleDrawerToggle}
                 sx={{ mr: 2, display: { md: "none" } }}
               >
-                <MenuIcon style={{ color: "#0C489E" }} />
+                <MenuIcon style={{ color: "#0c489e" }} />
               </IconButton>
 
               <Box sx={{ flexGrow: 1, mr: 2, display: { sm: "block", md: "none" } }}>
                 <Stack direction="row" justifyContent="space-between" alignItems="center" width="100%">
                   <MobileLogo />
                   <Stack justifyContent="flex-start" alignItems="flex-start" width="100%" ml={2}>
-                    <span style={{ color: checkSysEnv() !== "" ? "red" : "#0C489E" }} id="mobileTitle">
+                    <span style={{ color: checkSysEnv() !== "" ? "red" : "#000" }} id="mobileTitle">
                       <FormattedMessage id="PNSPS" />
                     </span>
                   </Stack>
@@ -946,14 +946,14 @@ function Header(props) {
               onClick={handleDrawerToggle}
               sx={{ mr: 2, display: { md: "none" } }}
             >
-              <MenuIcon style={{ color: "#0C489E" }} />
+              <MenuIcon style={{ color: "#0c489e" }} />
             </IconButton>
 
             <Box sx={{ flexGrow: 1, mr: 2, display: { sm: "block", md: "none" } }}>
               <Stack direction="row" justifyContent="space-between" alignItems="center" width="100%">
                 <MobileLogo />
                 <Stack justifyContent="flex-start" alignItems="flex-start" width="100%" ml={2}>
-                  <span style={{ color: checkSysEnv() !== "" ? "red" : "#0C489E" }} id="mobileTitle">
+                  <span style={{ color: checkSysEnv() !== "" ? "red" : "#0c489e" }} id="mobileTitle">
                     <FormattedMessage id="PNSPS" />
                   </span>
                 </Stack>

src/layout/MainLayout/index.js

@@ -67,7 +67,7 @@ const MainLayout = () => {
             {/* <Breadcrumbs navigation={navigation} title /> */}
             <Outlet />
           </Box>
-          <Box sx={{borderTop: "3px solid #0C489E"}}>
+          <Box sx={{borderTop: "3px solid #0c489e"}}>
             <Footer/>
           </Box>
         </Box>

src/pages/Announcement/Search/index.js

@@ -72,7 +72,7 @@ const UserSearchPage_Individual = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>Announcement</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>Announcement</Typography>
                         </Stack>
                     </div>
                 </Grid>

src/pages/Announcement/Search_Public/index.js

@@ -75,7 +75,7 @@ const UserSearchPage_Individual = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}><FormattedMessage id="announcement" /></Typography>
+                            <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}><FormattedMessage id="announcement" /></Typography>
                         </Stack>
                     </div>
                 </Grid>

src/pages/AuditLog/index.js

@@ -61,7 +61,7 @@ const AuditLogPage = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>Audit Log</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>Audit Log</Typography>
                         </Stack>
                     </div>
                 </Grid>

src/pages/DemandNote/Create/index.js

@@ -68,7 +68,7 @@ const Index = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>
                                 Create Demand Note
                             </Typography>
                         </Stack>

src/pages/DemandNote/Export/index.js

@@ -68,7 +68,7 @@ const Index = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>
                                 Export for GDN (Non Creditor) 
                             </Typography>
                         </Stack>

src/pages/DemandNote/Search/DataGrid.js

@@ -27,6 +27,7 @@ import { PNSPS_BUTTON_THEME } from "themes/buttonConst";
 import { ThemeProvider } from "@emotion/react";
 import { isGrantedAny } from "auth/utils";
 import { useIntl } from "react-intl";
+import { PRIMARY_CONTAINED_BUTTON_SX } from "themes/colorConst";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchDemandNote({ applySearch, searchCriteria, applyGridOnReady }) {
@@ -334,6 +335,7 @@ export default function SearchDemandNote({ applySearch, searchCriteria, applyGri
                                 <Button
                                     component="span"
                                     variant="contained"
+                                    sx={PRIMARY_CONTAINED_BUTTON_SX}
                                 >
                                     Attach DN
                                 </Button>

src/pages/DemandNote/Search/index.js

@@ -93,7 +93,7 @@ const UserSearchPage_Individual = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>
                                 Demand Note
                             </Typography>
                         </Stack>

src/pages/GFMIS/index.js

@@ -208,7 +208,7 @@ const Index = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>
                             GFMIS Generate XML
                             </Typography>
                         </Stack>

src/pages/JVM/index.js

@@ -87,7 +87,7 @@ const JVMDefault = () => {
       <Grid item xs={12}>
         <div style={BackgroundHead}>
           <Stack direction="row" height='70px' justifyContent="space-between" alignItems="center">
-            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>
+            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>
               System Background Status
             </Typography>
           </Stack>

src/pages/Message/Details/index.js

@@ -18,6 +18,7 @@ const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/Loa
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import { FormattedMessage } from "react-intl";
 import usePageTitle from 'components/usePageTitle';
+import { PRIMARY_CONTAINED_BUTTON_SX } from 'themes/colorConst';
 
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
@@ -91,8 +92,8 @@ const Index = () => {
                                     {record?.subject}
                                     </Typography>
                                     <Typography sx={{p:1}} align="justify">{DateUtils.datetimeStr(record?.sentDate)}</Typography>
-                                    <Typography variant="body1" sx={{ p:4, textAlign: "left" }} align="justify" backgroundColor="#f8f8f8">
-                                        <div  dangerouslySetInnerHTML={{__html: record?.content}}></div>
+                                    <Typography component="div" variant="body1" sx={{ p: 4, textAlign: "left", bgcolor: "#f8f8f8" }} align="justify">
+                                        <div dangerouslySetInnerHTML={{ __html: record?.content }} />
                                     </Typography>
 
                                     <Typography component="h3" variant="h4" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
@@ -100,7 +101,7 @@ const Index = () => {
                                             component="span"
                                             variant="contained"
                                             size="large"
-                                            sx={{ m: 4 }}
+                                            sx={{ m: 4, ...PRIMARY_CONTAINED_BUTTON_SX }}
                                             onClick={() => {
                                                 navigate(-1);
                                             }}

src/pages/Organization/SearchPage/index.js

@@ -72,7 +72,7 @@ const OrganizationSearchPage = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>View Organisation</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>View Organisation</Typography>
                         </Stack>
                     </div>
                 </Grid>

src/pages/Payment/Details_GLD/DataGrid.js

@@ -4,6 +4,7 @@ import {
 } from '@mui/material';
 import {
     isORGLoggedIn,
+    formatPaymentParticularsLength,
   } from "utils/Utils";
 import * as React from 'react';
 import * as FormatUtils from "utils/FormatUtils"
@@ -48,7 +49,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
                     {isORGLoggedIn()&&params.row.careOf!=null&&params.row.careOf!=""?<>{params.row.careOf}<br /></>:null}
                     App No: {appNo}<br/>
                     Issue Date: {DateUtils.dateValue(params.row.issueDate)}<br/>
-                    Length: {params.row.length+ " cm"}</div>
+                    Length: {formatPaymentParticularsLength(params.row)}</div>
             },
         },
         {

src/pages/Payment/Details_GLD/PaymentDetails.js

@@ -164,7 +164,7 @@ const PaymentDetails = ({ formData,doPrint,onDownload }) => {
                                                 Payment Receipt:
                                             </FormLabel>
                                         </Grid>
-                                        <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
+                                        <Grid item xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
                                             <Button className="printHidden" variant="contained" disabled={onDownload} sx={{ mt:2 }} onClick={doPrint}>
                                                 <DownloadIcon/>
                                                 <Typography sx={{fontSize: "16px"}}>Download</Typography>

src/pages/Payment/Details_Public/DataGrid.js

@@ -4,6 +4,7 @@ import {
 } from '@mui/material';
 import {
     isORGLoggedIn,
+    formatPaymentParticularsLength,
   } from "utils/Utils";
 import * as React from 'react';
 import * as FormatUtils from "utils/FormatUtils"
@@ -75,7 +76,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
                     {isORGLoggedIn()&&params.row.careOf!=null&&params.row.careOf!=""?<>{params.row.careOf}<br /></>:null}
                     <FormattedMessage id="applicationId"/>: {appNo}<br/>
                     <FormattedMessage id="gazetteDate"/>: {locale === 'en' ? DateUtils.dateValue(params.row.issueDate) : DateUtils.dateStr_Cht(params.row.issueDate)}<br/>
-                    <FormattedMessage id="gazetteLength"/>: {params.row.length+ " cm"}</div>
+                    <FormattedMessage id="gazetteLength"/>: {formatPaymentParticularsLength(params.row, intl)}</div>
             },
         },
         {

src/pages/Payment/Details_Public/index.js

@@ -21,6 +21,7 @@ import ForwardIcon from '@mui/icons-material/Forward';
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import {FormattedMessage,useIntl} from "react-intl";
 import usePageTitle from "components/usePageTitle";
+import { toReceiptLanguage } from "utils/Utils";
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -76,10 +77,8 @@ const Index = () => {
     const doPrint = () => {
         // window.print();
         setOnDownload(true)
-        const local = locale
-        // console.log(local)
         HttpUtils.fileDownload({
-            url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+params.id+"/"+local,
+            url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+params.id+"/"+toReceiptLanguage(locale),
             onResponse:()=>{
                 setOnDownload(false)
             },

src/pages/Payment/FPS/AckPage.js

@@ -24,6 +24,7 @@ const DataGrid = Loadable(React.lazy(() => import('../Details_Public/DataGrid'))
 
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import {FormattedMessage,useIntl} from "react-intl";
+import { toReceiptLanguage } from "utils/Utils";
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -162,10 +163,8 @@ const AckPage = () => {
     const doPrint = () => {
         // window.print();
         setOnDownload(true)
-        const local = locale
         HttpUtils.fileDownload({
-            // url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+localStorage.getItem("paymentId")+"/"+local,
-            url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+paymentData.id+"/"+local,
+            url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+paymentData.id+"/"+toReceiptLanguage(locale),
             onResponse:()=>{
                 setOnDownload(false)
             },

src/pages/Payment/FPS/FPS.js

@@ -485,11 +485,17 @@ const Index = () => {
                                             component="span"
                                             variant="contained"
                                             size="large"
-                                            color="error"
                                             onClick={()=>{
                                                 cancelPayment();
                                             }}
-                                            sx={{ m: 4 }}
+                                            sx={{
+                                                m: 4,
+                                                backgroundColor: (theme) => theme.palette.error.darker,
+                                                color: (theme) => theme.palette.error.contrastText,
+                                                '&:hover': {
+                                                    backgroundColor: (theme) => theme.palette.error.dark,
+                                                },
+                                            }}
                                         >
                                             <FormattedMessage id="payCancel"/>
                                         </Button>

src/pages/Payment/FPS/fpscallback.js

@@ -24,6 +24,7 @@ const DataGrid = Loadable(React.lazy(() => import('../Details_Public/DataGrid'))
 
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import {FormattedMessage,useIntl} from "react-intl";
+import { toReceiptLanguage } from "utils/Utils";
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -152,9 +153,8 @@ const Fpscallback = () => {
         const params = new URLSearchParams(window.location.search);
         // window.print();
         setOnDownload(true)
-        const local = locale
         HttpUtils.fileDownload({
-            url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+params.get("PAYMENT_ID")+"/"+local,
+            url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+params.get("PAYMENT_ID")+"/"+toReceiptLanguage(locale),
             onResponse:()=>{
                 setOnDownload(false)
             },

src/pages/Payment/MultiPaymentWindow.js

@@ -32,6 +32,7 @@ import UnionPayIcon from "assets/images/icons/unionpay.svg";
 import PpsIcon from "assets/images/icons/ppshk.svg";
 import FpsIcon from "assets/images/icons/fps.svg";
 import {FormattedMessage, useIntl} from "react-intl";
+import { PRIMARY_CONTAINED_BUTTON_SX, PAY_CONTAINED_BUTTON_SX } from "themes/colorConst";
 import * as HttpUtils from "utils/HttpUtils"
 import * as UrlUtils from "utils/ApiPathConst"
 
@@ -442,7 +443,7 @@ const MultiPaymentWindow = (props) => {
       </FormikProvider>
       <Stack direction="row" justifyContent="space-around">
         <DialogActions>
-          <Button variant="contained" onClick={closeHandle()} autoFocus >
+          <Button variant="contained" onClick={closeHandle()} autoFocus sx={PRIMARY_CONTAINED_BUTTON_SX}>
             <FormattedMessage id="cancel"/>
           </Button>
         </DialogActions>
@@ -451,7 +452,7 @@ const MultiPaymentWindow = (props) => {
             props.onPayment? 
               <LoadingComponent disableText={true} alignItems="flex-start"/> 
             :
-            <Button variant="contained" color="success" onClick={confirmPaymentHandle()} disabled={paymentMethod === "" || isLimit || isPPSLimit}>
+            <Button variant="contained" onClick={confirmPaymentHandle()} disabled={paymentMethod === "" || isLimit || isPPSLimit} sx={PAY_CONTAINED_BUTTON_SX}>
               <FormattedMessage id="pay"/>
             </Button>
           }

src/pages/Payment/PaymentCallback.js

@@ -21,6 +21,7 @@ const DataGrid = Loadable(React.lazy(() => import('./Details_Public/DataGrid')))
 
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import {FormattedMessage,useIntl} from "react-intl";
+import { toReceiptLanguage } from "utils/Utils";
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -159,11 +160,8 @@ const Index = () => {
     const doPrint = () => {
         // window.print();
         setOnDownload(true)
-        const local = locale
-        console.log(local)
         HttpUtils.fileDownload({
-            // url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+localStorage.getItem("paymentId")+"/"+local,
-            url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+paymentData.id+"/"+local,
+            url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+paymentData.id+"/"+toReceiptLanguage(locale),
             onResponse:()=>{
                 setOnDownload(false)
             },

src/pages/Payment/Search_GLD/index.js

@@ -71,7 +71,7 @@ const Index = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>
                                 Online Payment Record
                             </Typography>
                         </Stack>

src/pages/Payment/index.js

@@ -23,6 +23,7 @@ import {
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import {ThemeProvider} from "@emotion/react";
 import {PNSPS_BUTTON_THEME} from "../../themes/buttonConst";
+import { PRIMARY_CONTAINED_BUTTON_SX, PAY_CONTAINED_BUTTON_SX } from "themes/colorConst";
 import {
     FormattedMessage,
     useIntl
@@ -490,16 +491,16 @@ const Index = () => {
                             variant="contained"
                             // color="error"
                             onClick={() => paymentClick()}
-                            sx={{ mt: 4 }}
+                            sx={{ mt: 4, ...PAY_CONTAINED_BUTTON_SX }}
                         >
-                        <FormattedMessage id="pay"/>
+                        <FormattedMessage id="selectPaymentMethodBtn"/>
                     </Button>
                     <Button
                             component="span"
                             variant="contained"
                             // color="error"
                             onClick={() => { navigate("/publicNotice") }}
-                            sx={{ mt: 4 }}
+                            sx={{ mt: 4, ...PRIMARY_CONTAINED_BUTTON_SX }}
                         >
                         <FormattedMessage id="cancel"/>
                     </Button>

src/pages/Proof/Create_FromApp/UploadFileTable.js

@@ -2,11 +2,10 @@
 import * as React from 'react';
 import {
     DataGrid,
-    GridActionsCellItem,
     GridRowModes
 } from "@mui/x-data-grid";
-import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
 import { useEffect } from "react";
+import { createDeleteFileColumn } from 'utils/fileListColumns';
 // import {useNavigate} from "react-router-dom";
 // import { useTheme } from '@mui/material/styles';
 import {
@@ -17,7 +16,6 @@ import {
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function UploadFileTable({ recordList, setRecordList, showPageColumn, _checkCode, _expectedCode }) {
-
     const [rows, setRows] = React.useState(recordList);
     const [rowModesModel, setRowModesModel] = React.useState({});
     const [showPage, setShowPage] = React.useState(false);
@@ -67,6 +65,8 @@ export default function UploadFileTable({ recordList, setRecordList, showPageCol
         setRows(rows.filter((row) => row.id !== id));
     }
 
+    const deleteColumn = createDeleteFileColumn((id) => handleCancelClick(id));
+
     const handlePreviewClick = (param) => () => {
         var reader = new FileReader();
         reader.onload = function () {
@@ -87,25 +87,7 @@ export default function UploadFileTable({ recordList, setRecordList, showPageCol
 
 
     const columns = showPage?[
-        {
-            field: 'actions',
-            type: 'actions',
-            headerName: '',
-            width: 30,
-            cellClassName: 'actions',
-            // hide:true,
-            getActions: ({ id }) => {
-                return [
-                    <GridActionsCellItem
-                        key="OutSave"
-                        icon={<RemoveCircleOutlineIcon />}
-                        label="delete"
-                        className="textPrimary"
-                        onClick={handleCancelClick(id)}
-                        color="error"
-                    />]
-            },
-        },
+        deleteColumn,
         {
             field: 'name',
             headerName: 'File Name',
@@ -132,25 +114,7 @@ export default function UploadFileTable({ recordList, setRecordList, showPageCol
             hide: true
         },
     ]:[
-        {
-            field: 'actions',
-            type: 'actions',
-            headerName: '',
-            width: 30,
-            cellClassName: 'actions',
-            // hide:true,
-            getActions: ({ id }) => {
-                return [
-                    <GridActionsCellItem
-                        key="OutSave"
-                        icon={<RemoveCircleOutlineIcon />}
-                        label="delete"
-                        className="textPrimary"
-                        onClick={handleCancelClick(id)}
-                        color="error"
-                    />]
-            },
-        },
+        deleteColumn,
         {
             field: 'name',
             headerName: 'File Name',

src/pages/Proof/Create_FromApp/index.js

@@ -79,7 +79,7 @@ const Index = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>Create Proof</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>Create Proof</Typography>
                         </Stack>
                     </div>
                 </Grid>

src/pages/Proof/Payment/Pay_Online.js

@@ -32,6 +32,37 @@ const BackgroundHead = {
     backgroundPosition: 'right'
 }
 
+const contentBoxSx = {
+    px: { xs: 2, sm: 3, md: 5, lg: 6 },
+    maxWidth: 1500,
+    width: '100%',
+};
+
+const headerSx = {
+    textAlign: 'left',
+    mt: 4,
+    fontSize: { xs: '1.15rem', sm: '1.35rem', md: '1.5rem' },
+    textDecoration: 'underline',
+    textDecorationThickness: '2px',
+    textUnderlineOffset: '4px',
+};
+
+const bodySx = {
+    mt: 4,
+    textAlign: 'left',
+    fontSize: { xs: '1rem', sm: '1.1rem', md: '1.25rem' },
+    lineHeight: 1.6,
+};
+
+const payButtonSx = {
+    minWidth: 'unset',
+    px: { xs: 2, sm: 3 },
+    py: 1.25,
+    whiteSpace: 'nowrap',
+    width: { xs: '100%', sm: 'auto' },
+    fontSize: { xs: '1rem', sm: '1.2rem' },
+};
+
 import {
     // useEffect,
     useState
@@ -151,37 +182,19 @@ const Index = () => {
                     </Grid>
                     {/*row 1*/}
                     <Grid item xs={12} md={12} >
-                        <Grid container justifyContent="flex-start" alignItems="center" >
-                            <center>
-                                <Grid item xs={12} md={8} >
+                        <Grid container justifyContent="center" alignItems="center" >
+                                <Grid item xs={12} md={11} lg={10} sx={contentBoxSx}>
                                     {isAfter ? (
-                                    <Typography
-                                        variant="h4"
-                                        sx={{ textAlign: "left", ml: 8, mr: 4, mt: 4,
-                                            textDecoration: "underline",
-                                            textDecorationThickness: "2px",
-                                            textUnderlineOffset: "4px" }}
-                                    >
+                                    <Typography variant="h4" sx={headerSx}>
                                         <FormattedMessage id="proofPaymentHeader_online2" />
                                     </Typography>
                                     ) : (
-                                    <Typography
-                                        variant="h4"
-                                        sx={{
-                                        textAlign: "left",
-                                        ml: 4,
-                                        mr: 4,
-                                        mt: 4,
-                                        textDecoration: "underline",
-                                        textDecorationThickness: "2px",
-                                        textUnderlineOffset: "4px"
-                                        }}
-                                    >
+                                    <Typography variant="h4" sx={headerSx}>
                                         <FormattedMessage id="proofPaymentHeader_online" />
                                     </Typography>
                                     )}
 
-                                    <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
+                                    <Typography variant="h5" sx={bodySx}>
                                         <div dangerouslySetInnerHTML={{
                                             __html: intl.formatMessage(
                                                 {
@@ -215,26 +228,39 @@ const Index = () => {
                                     </Typography>
 
                                     {!checkPaymentSuspension()?
-                                        <Typography variant="h4" sx={{ ml: 8, textAlign: "left" }}>
+                                        <Stack
+                                            direction={{ xs: 'column', sm: 'row' }}
+                                            alignItems={{ xs: 'stretch', sm: 'center' }}
+                                            sx={{ mt: 4, gap: { xs: 1.5, sm: 2 } }}
+                                        >
                                             <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                 <Button
                                                     component="span"
                                                     variant="contained"
-                                                    // sx={{ ml: { sm: 4, md: 4, lg: 4 }, mr: 4, mt: { xs: 2, sm: 2 }, mb: { xs: 2, sm: 2 } }}
-                                                    sx={{mr: 4 }}
+                                                    sx={payButtonSx}
                                                     onClick={() => { setIsPopUp(true) }}
                                                 >
                                                     <FormattedMessage id="payInstantly" />
                                                 </Button>
                                             </ThemeProvider>
 
-                                            <FormattedMessage id="or" />
+                                            <Typography
+                                                component="span"
+                                                variant="h4"
+                                                sx={{
+                                                    textAlign: { xs: 'center', sm: 'left' },
+                                                    fontSize: { xs: '1rem', sm: '1.25rem' },
+                                                    my: { xs: 0.5, sm: 0 },
+                                                }}
+                                            >
+                                                <FormattedMessage id="or" />
+                                            </Typography>
 
                                             <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                 <Button
                                                     component="span"
                                                     variant="contained"
-                                                    sx={{ ml: { sm: 4, md: 4, lg: 4 }, mr: 4, mt: { xs: 2, sm: 2 }, mb: { xs: 2, sm: 2 } }}
+                                                    sx={payButtonSx}
                                                     onClick={() => {
                                                         navigate("/publicNotice");
                                                     }}
@@ -242,10 +268,10 @@ const Index = () => {
                                                     <FormattedMessage id="payLater" />
                                                 </Button>
                                             </ThemeProvider>
-                                        </Typography>:null
+                                        </Stack>:null
                                     }
 
-                                    <Typography variant="h4" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
+                                    <Typography variant="h4" sx={bodySx}>
                                         <div dangerouslySetInnerHTML={{
                                             __html: intl.formatMessage(
                                                 {
@@ -258,7 +284,6 @@ const Index = () => {
 
 
                                 </Grid>
-                            </center>
                         </Grid>
                     </Grid>
                     <div>

src/pages/Proof/Reply_GLD/ApplicationDetails.js

@@ -350,7 +350,7 @@ const ApplicationDetailCard = ({
                                         {
                                             formik.values.groupType == "Private Bill"
                                                 ?
-                                                <Typography variant="h5">( {data.noOfPages} page x $6,552 )</Typography>
+                                                <Typography variant="h5">( {data.noOfPages} {data.noOfPages === 1 ? 'page' : 'pages'} x $6,552 )</Typography>
                                                 :
                                                 <Typography variant="h5">( {data.length} cm x {data.colCount == 2 ? "$364 Double Column" : "$182 Single Column"} )</Typography>
                                         }

src/pages/Proof/Reply_GLD/UploadFileTable.js

@@ -1,19 +1,16 @@
 // material-ui
-import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
 import {
     DataGrid,
-    GridActionsCellItem,
     GridRowModes
 } from "@mui/x-data-grid";
 import * as React from 'react';
 import { useEffect } from "react";
-// import {useNavigate} from "react-router-dom";
-// import { useTheme } from '@mui/material/styles';
 import {
     Box,
     Stack
 } from '@mui/material';
 import {useIntl} from "react-intl";
+import { createDeleteFileColumn } from 'utils/fileListColumns';
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function UploadFileTable({recordList, setRecordList,}) {
@@ -52,26 +49,10 @@ export default function UploadFileTable({recordList, setRecordList,}) {
         setRows(rows.filter((row) => row.id !== id));
     }
 
+    const deleteColumn = createDeleteFileColumn((id) => handleCancelClick(id));
+
     const columns = [
-        {
-            field: 'actions',
-            type: 'actions',
-            headerName: '',
-            width: 30,
-            cellClassName: 'actions',
-            // hide:true,
-            getActions: ({id}) => {
-                return [
-                    <GridActionsCellItem
-                        key="OutSave"
-                        icon={<RemoveCircleOutlineIcon/>}
-                        label="delete"
-                        className="textPrimary"
-                        onClick={handleCancelClick(id)}
-                        color="error"
-                    />]
-            },
-        },
+        deleteColumn,
         {
             id: 'name',
             field: 'name',

src/pages/Proof/Reply_Public/ApplicationDetails.js

@@ -70,7 +70,7 @@ const ApplicationDetailCard = ({ formData, }) => {
             border={false}
             content={false}
         >
-            <Typography variant="h4" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
+            <Typography variant="h4" component="h2" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
                 <FormattedMessage id="publicNoticePaymentProofInfo" />
             </Typography>
             <form>
@@ -262,12 +262,12 @@ const ApplicationDetailCard = ({ formData, }) => {
                                         <>
                                             <Grid item xs={12} md={12} lg={12}
                                                 sx={{ display: 'flex', alignItems: 'center' }}>
-                                                <Typography variant="h5" display="inline">
+                                                <Typography variant="h5" component="span" display="inline">
                                                     <FormattedMessage id="commentDeadline" />：
                                                 </Typography>
                                             </Grid>
                                             <Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}>
-                                                <Typography variant="h5">&emsp;
+                                                <Typography variant="h5" component="span">&emsp;
                                                     {locale === 'en' ?
                                                         `${intl.formatMessage({ id: 'before' })} ${DateUtils.dateFormat(data?.reviseDeadline, intl.formatMessage({ id: "paymentMethodDatetimeStrFormat" }))?.replace("am", "a.m.")?.replace("pm", "p.m.")} `
                                                         :
@@ -278,12 +278,12 @@ const ApplicationDetailCard = ({ formData, }) => {
 
                                             <Grid item xs={12} md={12} lg={12}
                                                 sx={{ display: 'flex', alignItems: 'center' }}>
-                                                <Typography variant="h5" display="inline">
+                                                <Typography variant="h5" component="span" display="inline">
                                                     <FormattedMessage id="paymentDeadline" />：
                                                 </Typography>
                                             </Grid>
                                             <Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}>
-                                                <Typography variant="h5">&emsp;
+                                                <Typography variant="h5" component="span">&emsp;
                                                     {locale === 'en' ?
                                                         `${intl.formatMessage({ id: 'before' })}  ${DateUtils.dateFormat(data?.expiryDate, intl.formatMessage({ id: "paymentMethodDatetimeStrFormat" }))?.replace("am", "a.m.")?.replace("pm", "p.m.")} `
                                                         :
@@ -304,14 +304,14 @@ const ApplicationDetailCard = ({ formData, }) => {
                                         </Typography>
                                     </Grid>
                                     <Grid item xs={12} sm={9} md={9} lg={9} sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>
-                                        <Typography variant="h4" style={{ color: "#0049B8", fontWeight: "bold", }}>{FormatUtils.currencyFormat(data.fee)}</Typography>
+                                        <Typography variant="h4" component="span" style={{ color: "#0049B8", fontWeight: "bold", }}>{FormatUtils.currencyFormat(data.fee)}</Typography>
                                     </Grid>
                                     <Grid item xs={12} md={9} lg={9} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}>
                                         {
                                             formik.values.groupType === "Private Bill"
                                                 ?
                                                 <Typography>
-                                                    <Typography variant="pnspsFormParagraph">( {data.noOfPages} {intl.formatMessage({ id: 'page' })} x $6,552 )</Typography>
+                                                    <Typography variant="pnspsFormParagraph">( {data.noOfPages} {intl.formatMessage({ id: data.noOfPages === 1 ? 'page' : 'pages' })} x $6,552 )</Typography>
                                                 </Typography>
                                                 :
                                                 <Typography>

src/pages/Proof/Reply_Public/ProofForm.js

@@ -24,6 +24,7 @@ import * as DateUtils from "utils/DateUtils"
 import Loadable from 'components/Loadable';
 import { notifyActionSuccess } from 'utils/CommonFunction';
 import { PNSPS_BUTTON_THEME } from "themes/buttonConst";
+import { PRIMARY_CONTAINED_BUTTON_SX } from "themes/colorConst";
 import { ThemeProvider } from "@emotion/react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { 
@@ -251,7 +252,7 @@ const FormPanel = ({ formData }) => {
             border={false}
             content={false}>
 
-            <Typography variant="h4" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
+            <Typography variant="h4" component="h2" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
                 <FormattedMessage id="publicNoticePaymentProofComment" />
             </Typography>
 
@@ -261,7 +262,7 @@ const FormPanel = ({ formData }) => {
                     formik.values.replyDate ?
                         <Grid container direction="column" sx={{ paddingLeft: 0, paddingRight: 0 }}>
                             <Grid item xs={12} sm={12} md={12} lg={8} textAlign="left">
-                                <Typography variant="h5">
+                                <Typography variant="h5" component="span">
                                     <FormattedMessage id="proofReplyDate" /> :&nbsp;
                                     {
                                         locale === 'en' ?
@@ -272,7 +273,7 @@ const FormPanel = ({ formData }) => {
                                 </Typography>
                             </Grid>
                             <Grid item xs={12} md={12} textAlign="left">
-                                <Typography variant="h5">
+                                <Typography variant="h5" component="span">
                                     <FormattedMessage id="proofReply" /> : {formik.values.action ?
                                         (<span style={{ color: 'green' }}>
                                             <FormattedMessage id="proofErrorFree" />
@@ -284,7 +285,7 @@ const FormPanel = ({ formData }) => {
                                 </Typography>
                             </Grid>
                             {/* <Grid item xs={12} md={12} textAlign="left">
-                                <Typography variant="h5">
+                                <Typography variant="h5" component="span">
                                     <FormattedMessage id="proofReply" /> :&nbsp;
                                     <span style={{ color: 'green' }}>
                                         {
@@ -321,7 +322,7 @@ const FormPanel = ({ formData }) => {
                             isOverTime() ?
                                 <Grid container direction="column" sx={{ paddingLeft: 0, paddingRight: 0 }} spacing={1}>
                                     <Grid item xs={12} md={12} textAlign="left">
-                                        <Typography variant="h5"><FormattedMessage id="MSG.proofOutOfTime" /></Typography>
+                                        <Typography variant="h5" component="span"><FormattedMessage id="MSG.proofOutOfTime" /></Typography>
                                     </Grid>
                                 </Grid>
                                 :
@@ -380,7 +381,7 @@ const FormPanel = ({ formData }) => {
                                                                                     <li><FormattedMessage id="store" /></li>
                                                                                     <li><FormattedMessage id="post" /></li>
                                                                                 </ul>
-                                                                                <Typography variant="h6">
+                                                                                <Typography variant="h6" component="span">
                                                                                     <div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "proofNote" }) }} />
                                                                                 </Typography>
                                                                             </>
@@ -534,7 +535,7 @@ const FormPanel = ({ formData }) => {
                                                                                                     <li><FormattedMessage id="store" /></li>
                                                                                                     <li><FormattedMessage id="post" /></li>
                                                                                                 </ul>
-                                                                                                <Typography variant="h6">
+                                                                                                <Typography variant="h6" component="span">
                                                                                                     <div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "proofNote" }) }} />
                                                                                                 </Typography>
                                                                                             </>
@@ -597,13 +598,13 @@ const FormPanel = ({ formData }) => {
                                                         </Grid>
                                                     } 
                                                     {/* <Grid item xs={12}>
-                                                        <Typography variant="h6" height="100%" >
+                                                        <Typography variant="h6" component="span" height="100%" >
                                                             <div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "proofNote" }) }} />
                                                         </Typography>
                                                     </Grid> */}
                                                     {!isOnlyOnlinePayment?
                                                         <Grid item xs={12}>
-                                                            <Typography variant="h6" height="100%" >
+                                                            <Typography variant="h6" component="span" height="100%" >
                                                                 <div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "proofImportant" }) }} />
                                                             </Typography>
                                                         </Grid>:null
@@ -617,14 +618,14 @@ const FormPanel = ({ formData }) => {
                                                     {
                                                         isOverReviseDeadline() ?
                                                             <Grid item xs={12} md={12} textAlign="left">
-                                                                <Typography variant="h5" style={{ color: "red" }}>
+                                                                <Typography variant="h5" component="span" style={{ color: "red" }}>
                                                                     <FormattedMessage id="MSG.overReviseDeadline" />
                                                                 </Typography>
                                                             </Grid>
                                                             :
                                                             <>
                                                                 <Grid item xs={12} md={12} textAlign="left">
-                                                                    <Typography variant="h5">
+                                                                    <Typography variant="h5" component="span">
                                                                         <FormattedMessage id="requiredUploadFix" />：
                                                                     </Typography>
                                                                 </Grid>
@@ -632,10 +633,10 @@ const FormPanel = ({ formData }) => {
                                                                 <Grid item xs={12} md={12} textAlign="left">
                                                                     <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                                         <Button
-                                                                            color="save"
                                                                             variant="contained"
                                                                             type="button"
                                                                             aria-label={intl.formatMessage({ id: 'upload' })}
+                                                                            sx={PRIMARY_CONTAINED_BUTTON_SX}
                                                                             disabled={attachments.length >= (formik.values.groupType === "Private Bill" ? 2 : 1)}
                                                                             onClick={() => {
                                                                                 if (fileInputRef.current) {
@@ -683,7 +684,7 @@ const FormPanel = ({ formData }) => {
                                             <Grid item xs={12} sm={12} md={12} lg={12}>
                                                 <Stack direction="row" alignItems="center">
                                                     <FormLabel sx={{ paddingRight: 2, paddingBottom: 3, textAlign: "center" }}>
-                                                        <Typography variant="h5">
+                                                        <Typography variant="h5" component="span">
                                                             <FormattedMessage id="sign" />：
                                                         </Typography>
                                                     </FormLabel>
@@ -718,9 +719,9 @@ const FormPanel = ({ formData }) => {
                                                 disabled={(actionValue == false && isOverReviseDeadline()) || isSubmitting}
                                                 aria-label={intl.formatMessage({ id: 'submitReply' })}
                                                 sx={{
-                                                    backgroundColor: '#0C489E',
+                                                    backgroundColor: '#0c489e',
                                                     color: '#FFFFFF',
-                                                    '&:hover': { backgroundColor: '#093A7A' },
+                                                    '&:hover': { backgroundColor: '#1565c0' },
                                                 }}
                                             >
                                                 {isSubmitting ? <FormattedMessage id="loading" /> : <FormattedMessage id="submitReply" />}
@@ -753,7 +754,7 @@ const FormPanel = ({ formData }) => {
                         {warningTitle}
                     </DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
-                        <Typography variant="h5" style={{ padding: '16px' }}>{warningText}</Typography>
+                        <Typography variant="h5" component="span" style={{ padding: '16px' }}>{warningText}</Typography>
                     </DialogContent>
                     <DialogActions>
                         <Button

src/pages/Proof/Reply_Public/UploadFileTable.js

@@ -2,18 +2,15 @@
 import * as React from 'react';
 import {
     DataGrid,
-    GridActionsCellItem,
     GridRowModes
 } from "@mui/x-data-grid";
-import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
 import {useEffect} from "react";
-// import {useNavigate} from "react-router-dom";
-// import { useTheme } from '@mui/material/styles';
 import {
     Stack, useMediaQuery
 } from '@mui/material';
 import {useTheme} from "@emotion/react";
 import {useIntl} from "react-intl";
+import { createDeleteFileColumn } from 'utils/fileListColumns';
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function UploadFileTable({recordList, setRecordList,}) {
@@ -54,26 +51,10 @@ export default function UploadFileTable({recordList, setRecordList,}) {
         setRows(rows.filter((row) => row.id !== id));
     }
 
+    const deleteColumn = createDeleteFileColumn((id) => handleCancelClick(id));
+
     const columns = [
-        {
-            field: 'actions',
-            type: 'actions',
-            headerName: '',
-            width: 30,
-            cellClassName: 'actions',
-            // hide:true,
-            getActions: ({id}) => {
-                return [
-                    <GridActionsCellItem
-                        key="OutSave"
-                        icon={<RemoveCircleOutlineIcon/>}
-                        label="delete"
-                        className="textPrimary"
-                        onClick={handleCancelClick(id)}
-                        color="error"
-                    />]
-            },
-        },
+        deleteColumn,
         {
             id: 'name',
             field: 'name',

src/pages/Proof/Search_GLD/index.js

@@ -86,7 +86,7 @@ const UserSearchPage_Individual = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>Proof</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>Proof</Typography>
                         </Stack>
                     </div>
                 </Grid>

src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js

@@ -33,6 +33,7 @@ import { ThemeProvider } from "@emotion/react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useState, useEffect, useRef } from 'react';
 import { checkPaymentSuspension } from "utils/Utils";
+import { PRIMARY_CONTAINED_BUTTON_SX } from "themes/colorConst";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -457,7 +458,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) =>
                                                                                     <li><FormattedMessage id="store" /></li>
                                                                                     <li><FormattedMessage id="post" /></li>
                                                                                 </ul>
-                                                                                <Typography variant="h6">
+                                                                                <Typography variant="h6" component="span">
                                                                                     <div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "proofNote" }) }} />
                                                                                 </Typography>
                                                                             </>
@@ -545,8 +546,9 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) =>
                                                     <Button
                                                         aria-label={intl.formatMessage({ id: 'uploadFileBtn' })}
                                                         component="span"
-                                                        variant="outlined"
+                                                        variant="contained"
                                                         size="large"
+                                                        sx={PRIMARY_CONTAINED_BUTTON_SX}
                                                     >{attachment ? intl.formatMessage({ id: 'uploadFileBtn' }) : intl.formatMessage({ id: 'reUpload' })}</Button>
                                                 </label>
                                             </Grid>
@@ -627,7 +629,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) =>
                                                     "aria-label": intl.formatMessage({ id: "applyTickStr" })
                                                 }}
                                             />
-                                            <Typography variant="h6" height="100%" >
+                                            <Typography variant="h6" component="span" height="100%" >
                                                 <div style={{ padding: 12, textAlign: 'justify' }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "applyTickStr" }) }} />
                                             </Typography>
                                         </Stack>
@@ -650,7 +652,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) =>
                                     </Grid>
 
                                     <Grid item xs={12}>
-                                        <Typography variant="h6" height="100%" >
+                                        <Typography variant="h6" component="span" height="100%" >
                                             <div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "applyPublicNoticeText" }) }} />
                                         </Typography>
                                     </Grid>
@@ -676,7 +678,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) =>
                         {warningTitle}
                     </DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
-                        <Typography variant="h5" style={{ padding: '16px' }}>
+                        <Typography variant="h5" component="span" style={{ padding: '16px' }}>
                             {warningText}
                         </Typography>
                     </DialogContent>

src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js

@@ -749,9 +749,9 @@ const ApplicationDetailCard = (
                                                                 sx={{
                                                                     textTransform: 'capitalize',
                                                                     alignItems: 'end',
-                                                                    backgroundColor: '#0C489E',
+                                                                    backgroundColor: '#0c489e',
                                                                     color: '#FFFFFF',
-                                                                    '&:hover': { backgroundColor: '#093A7A' },
+                                                                    '&:hover': { backgroundColor: '#1565c0' },
                                                                 }}
                                                             >
                                                                 <DownloadIcon />

src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js

@@ -40,6 +40,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import EditNoteIcon from '@mui/icons-material/EditNote';
 import DownloadIcon from '@mui/icons-material/Download';
 import { PNSPS_BUTTON_THEME } from "../../../themes/buttonConst";
+import { PRIMARY_CONTAINED_BUTTON_SX } from "themes/colorConst";
 import { ThemeProvider } from "@emotion/react";
 import { FormattedMessage, useIntl } from "react-intl";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -239,9 +240,9 @@ const ApplicationDetailCard = (
                                             startIcon={<CloseIcon />}
                                             aria-label={intl.formatMessage({ id: 'cancelApp' })}
                                             sx={{
-                                                backgroundColor: '#0C489E',
+                                                backgroundColor: '#0c489e',
                                                 color: '#FFFFFF',
-                                                '&:hover': { backgroundColor: '#093A7A' },
+                                                '&:hover': { backgroundColor: '#1565c0' },
                                             }}
                                         >
                                             <FormattedMessage id="cancelApp" />
@@ -253,7 +254,7 @@ const ApplicationDetailCard = (
                     </div>
                     :null
                 }
-                <Typography variant="h4" sx={{ mb: 2, borderBottom: "1px solid black" }}>
+                <Typography variant="h4" component="h3" sx={{ mb: 2, borderBottom: "1px solid black" }}>
                     <FormattedMessage id="publicNoticeDetailTitle" />
                 </Typography>
                 <form>
@@ -665,9 +666,9 @@ const ApplicationDetailCard = (
                                                                 <Button
                                                                     sx={{
                                                                         ml: 3,
-                                                                        backgroundColor: '#0C489E',
+                                                                        backgroundColor: '#0c489e',
                                                                         color: '#FFFFFF',
-                                                                        '&:hover': { backgroundColor: '#093A7A' },
+                                                                        '&:hover': { backgroundColor: '#1565c0' },
                                                                     }}
                                                                     variant="contained"
                                                                     onClick={onDownloadClick()}
@@ -752,30 +753,34 @@ const ApplicationDetailCard = (
                             }}
                         >
                             <DialogTitle>
-                                <Typography variant="h3" >
+                                <Typography variant="h3" component="span">
                                     <FormattedMessage id="payConfirm" />
                                 </Typography>
                             </DialogTitle>
                             <DialogContent style={{ display: 'flex', }}>
                                 <Stack direction="column" justifyContent="space-between">
-                                    <Typography variant="h4">
+                                    <Typography variant="h4" component="span">
                                         <FormattedMessage id="totalAmount" /> ($): {FormatUtils.currencyFormat(fee)}
                                     </Typography>
                                 </Stack>
                             </DialogContent>
                             <DialogActions>
                                 <Button
+                                    variant="contained"
                                     onClick={() => setIsPopUp(false)}
                                     aria-label={intl.formatMessage({ id: 'close' })}
+                                    sx={PRIMARY_CONTAINED_BUTTON_SX}
                                 >
-                                    <Typography variant="pnspsFormParagraph">
+                                    <Typography variant="pnspsFormParagraph" sx={{ color: 'inherit' }}>
                                         <FormattedMessage id="close" />
                                     </Typography></Button>
                                 <Button
+                                    variant="contained"
                                     onClick={() => doPayment()}
                                     aria-label={intl.formatMessage({ id: 'confirm' })}
+                                    sx={PRIMARY_CONTAINED_BUTTON_SX}
                                 >
-                                    <Typography variant="pnspsFormParagraph">
+                                    <Typography variant="pnspsFormParagraph" sx={{ color: 'inherit' }}>
                                         <FormattedMessage id="confirm" />
                                     </Typography></Button>
                             </DialogActions>
@@ -794,7 +799,7 @@ const ApplicationDetailCard = (
                             }}
                         >
                             <DialogTitle></DialogTitle>
-                            <Typography variant="h2" style={{ padding: '16px' }}><FormattedMessage id="MSG.actionFail" /></Typography>
+                            <Typography variant="h2" component="span" style={{ padding: '16px' }}><FormattedMessage id="MSG.actionFail" /></Typography>
                             <DialogContent style={{ display: 'flex', }}>
                                 <Stack direction="column" justifyContent="space-between">
                                     {
@@ -826,7 +831,7 @@ const ApplicationDetailCard = (
                             }}
                         >
                             <DialogTitle></DialogTitle>
-                            <Typography variant="h4" style={{ paddingLeft: '24px' }}><FormattedMessage id="MSG.actionFail" /></Typography>
+                            <Typography variant="h4" component="span" style={{ paddingLeft: '24px' }}><FormattedMessage id="MSG.actionFail" /></Typography>
                             <DialogContent style={{ display: 'flex', }}>
                                 <Stack direction="column" justifyContent="space-between">
                                     <div dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: 'MSG.paymentHolded' }, { appNo: paymentHoldedErrText }) }} />
@@ -834,7 +839,7 @@ const ApplicationDetailCard = (
                             </DialogContent>
                             <DialogActions>
                                 <Button onClick={() => setPaymentHoldedErr(false)} aria-label={intl.formatMessage({ id: 'close' })}>
-                                    <Typography variant="h5">
+                                    <Typography variant="h5" component="span">
                                         <FormattedMessage id="close" />
                                     </Typography></Button>
                             </DialogActions>

src/pages/PublicNotice/Details_Public/index.js

@@ -34,6 +34,7 @@ import ForwardIcon from '@mui/icons-material/Forward';
 import { notifyActionSuccess } from "utils/CommonFunction";
 import { FormattedMessage, useIntl } from "react-intl";
 import usePageTitle from "components/usePageTitle";
+import { PRIMARY_OUTLINED_BUTTON_SX } from "themes/colorConst";
 // ==============================|| Body - DEFAULT ||============================== //
 
 const DashboardDefault = () => {
@@ -190,7 +191,7 @@ const DashboardDefault = () => {
               <Button
                 aria-label={intl.formatMessage({ id: 'back' })}
                 title={intl.formatMessage({ id: 'back' })}
-                sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }}
+                sx={{ ml: 0, mt: 2.5, borderWidth: '2px', ...PRIMARY_OUTLINED_BUTTON_SX }}
                 variant="outlined" onClick={() => { navigate("/publicNotice") }}
               >
                 <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />

src/pages/PublicNotice/ListPanel/BaseGrid.js

@@ -15,6 +15,7 @@ import {
 import {useTheme} from "@emotion/react";
 import {getStatusIntl,getModeIntl } from "utils/statusUtils/PublicNoteStatusUtils";
 import {FormattedMessage, useIntl} from "react-intl";
+import { PRIMARY_TEXT_BUTTON_SX } from "themes/colorConst";
 
 // ==============================|| EVENT TABLE ||============================== //
 
@@ -106,7 +107,7 @@ export default function BaseGrid({setCount, url}) {
             renderHeader: renderHeaderWithAria,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button aria-label={intl.formatMessage({id: 'viewDetail'})} onClick={handleDetailClick(params)}>
+                return <Button aria-label={intl.formatMessage({id: 'viewDetail'})} onClick={handleDetailClick(params)} sx={PRIMARY_TEXT_BUTTON_SX}>
                     <FormattedMessage id="viewDetail"/>
                 </Button>;
             },

src/pages/PublicNotice/ListPanel/PendingPaymentTab.js

@@ -29,6 +29,7 @@ import {
 import { ThemeProvider, useTheme } from "@emotion/react";
 import { PNSPS_BUTTON_THEME } from "../../../themes/buttonConst";
 import { FormattedMessage, useIntl } from "react-intl";
+import { PRIMARY_TEXT_BUTTON_SX, PRIMARY_CONTAINED_BUTTON_SX } from "themes/colorConst";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SubmittedTab({ setCount, url }) {
@@ -309,7 +310,7 @@ export default function SubmittedTab({ setCount, url }) {
             renderHeader: renderHeaderWithAria,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button aria-label={intl.formatMessage({ id: 'viewDetail' })} onClick={handleDetailClick(params)}>
+                return <Button aria-label={intl.formatMessage({ id: 'viewDetail' })} onClick={handleDetailClick(params)} sx={PRIMARY_TEXT_BUTTON_SX}>
                     <FormattedMessage id="viewDetail" />
                 </Button>;
             },
@@ -484,13 +485,13 @@ export default function SubmittedTab({ setCount, url }) {
                         </Stack>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => setIsPopUp(false)} aria-label={intl.formatMessage({ id: 'close' })}>
-                            <Typography variant="h5">
+                        <Button variant="contained" onClick={() => setIsPopUp(false)} aria-label={intl.formatMessage({ id: 'close' })} sx={PRIMARY_CONTAINED_BUTTON_SX}>
+                            <Typography variant="h5" sx={{ color: 'inherit' }}>
                                 <FormattedMessage id="close" />
                             </Typography></Button>
 
-                        <Button onClick={() => doPayment()} aria-label={intl.formatMessage({ id: 'confirm' })}>
-                            <Typography variant="h5">
+                        <Button variant="contained" onClick={() => doPayment()} aria-label={intl.formatMessage({ id: 'confirm' })} sx={PRIMARY_CONTAINED_BUTTON_SX}>
+                            <Typography variant="h5" sx={{ color: 'inherit' }}>
                                 <FormattedMessage id="confirm" />
                             </Typography></Button>
                     </DialogActions>

src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js

@@ -17,6 +17,7 @@ import {getModeIntl } from "utils/statusUtils/PublicNoteStatusUtils";
 import { useTheme } from "@emotion/react";
 import { FormattedMessage, useIntl } from "react-intl";
 import * as React from 'react';
+import { PRIMARY_TEXT_BUTTON_SX } from "themes/colorConst";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnReady, applySearch }) {
@@ -139,6 +140,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             renderCell: (params) => {
                 return <Button onClick={handleDetailClick(params)}
                     aria-label={intl.formatMessage({ id: 'viewDetail' })}
+                    sx={PRIMARY_TEXT_BUTTON_SX}
                 >
                     <FormattedMessage id="viewDetail" />
                 </Button>;

src/pages/PublicNotice/Search_GLD/index.js

@@ -84,7 +84,7 @@ const UserSearchPage_Individual = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>Application</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>Application</Typography>
                         </Stack>
                     </div>
                 </Grid>

src/pages/PublicNotice/Search_Mark_As_Paid_GLD/index.js

@@ -84,7 +84,7 @@ const UserSearchPage_Individual = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>Mark Payment</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>Mark Payment</Typography>
                         </Stack>
                     </div>
                 </Grid>

src/pages/Recon/index.js

@@ -125,7 +125,7 @@ const Index = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>
                             Recon Report
                             </Typography>
                         </Stack>

src/pages/Report/FullList/index.js

@@ -74,7 +74,7 @@ const ReportSearchPage = () => {
                 <Grid item xs={12} mb={2}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>Gazette Notice Full List</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>Gazette Notice Full List</Typography>
                         </Stack>
                     </div>
                 </Grid>

src/pages/Report/Summary/index.js

@@ -74,7 +74,7 @@ const ReportSearchPage = () => {
                 <Grid item xs={12} mb={2}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>Summary of Gazette Notice</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>Summary of Gazette Notice</Typography>
                         </Stack>
                     </div>
                 </Grid>

src/pages/Setting/DrImport/index.js

@@ -14,6 +14,7 @@ import { notifyActionError } from 'utils/CommonFunction';
 import { FormattedMessage, useIntl } from "react-intl";
 
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+import { PRIMARY_OUTLINED_BUTTON_SX } from 'themes/colorConst';
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -168,6 +169,7 @@ const Index = () => {
                                             component="span"
                                             variant="outlined"
                                             size="large"
+                                            sx={PRIMARY_OUTLINED_BUTTON_SX}
                                         >Import DR Excel</Button>
                                     </label>
                                 </Grid>
@@ -199,6 +201,7 @@ const Index = () => {
                                             component="span"
                                             variant="outlined"
                                             size="large"
+                                            sx={PRIMARY_OUTLINED_BUTTON_SX}
                                         >Import Offline Mode Application</Button>
                                     </label>
                                 </Grid>

src/pages/User/ChangePasswordPage/index.js

@@ -215,13 +215,13 @@ const Index = () => {
                                 <Grid container spacing={4} sx={{ minHeight: {xs:"80vh", sm:"50vh", md: "50vh", lg:"70vh", xl:"50vh"} }} direction="column" justifyContent="flex-start" alignItems="center">
                                     {isPasswordExpiry()?    
                                         <Grid item width="70%" xs={12} md={12} lg={12} sx={{ mb: 1, mt:2 }}>
-                                            <Typography variant="h5">
+                                            <Typography variant="h5" component="span">
                                                 <FormattedMessage id="passwordExpired"/>
                                             </Typography>
                                         </Grid>
                                         : 
                                         <Grid item xs={12} md={12} lg={12} sx={{ mb: 1, mt:2 }}>
-                                            <Typography variant="h5" >
+                                            <Typography variant="h5" component="span">
                                                 <FormattedMessage id="setNewPassword"/>
                                             </Typography>
                                         </Grid>
@@ -433,14 +433,14 @@ const Index = () => {
                                         <DialogTitle></DialogTitle>
                                         <DialogContent style={{ display: 'flex', }}>
                                             <Stack direction="column" justifyContent="space-between">
-                                                <Typography variant="h5" style={{ padding: '10px' }}>
+                                                <Typography variant="h5" component="span" style={{ padding: '10px' }}>
                                                     <FormattedMessage id ="changePasswordConfirm"/>
                                                 </Typography>
                                             </Stack>
                                         </DialogContent>
                                         <DialogActions>
                                             <Button disabled={isChangingPassword} onClick={() => setComfirmChangeMessage(false)}>
-                                                <Typography variant="h5">
+                                                <Typography variant="h5" component="span">
                                                     <FormattedMessage id="close"/>
                                                 </Typography>
                                             </Button>
@@ -449,7 +449,7 @@ const Index = () => {
                                                 onClick={() => goLogin(changePasswordValues)}
                                                 startIcon={isChangingPassword ? <CircularProgress color="inherit" size={18} /> : null}
                                             >
-                                                <Typography variant="h5">
+                                                <Typography variant="h5" component="span">
                                                     <FormattedMessage id="confirm"/>
                                                 </Typography>
                                             </Button>
@@ -468,13 +468,13 @@ const Index = () => {
                                         }}
                                     >
                                         <DialogTitle>
-                                            <Typography variant="h5" style={{ padding: '10px' }}>
+                                            <Typography variant="h5" component="span" style={{ padding: '10px' }}>
                                                 <FormattedMessage id ="MSG.actionFail"/>
                                             </Typography>
                                         </DialogTitle>
                                         <DialogContent style={{ display: 'flex', }}>
                                             <Stack direction="column" justifyContent="space-between">
-                                                <Typography variant="h5">
+                                                <Typography variant="h5" component="span">
                                                     {
                                                         expiryErrText
                                                     }
@@ -483,7 +483,7 @@ const Index = () => {
                                         </DialogContent>
                                         <DialogActions>
                                             <Button onClick={() => setExpiryErr(false)}>
-                                                <Typography variant="h5">
+                                                <Typography variant="h5" component="span">
                                                     <FormattedMessage id="close"/>
                                                 </Typography>
                                             </Button>
@@ -498,13 +498,13 @@ const Index = () => {
                                     <CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} />
                                 </Grid>
                                 <Grid item xs={12} md={12} lg={12} sx={{ mb: 1, mt:5,}}>
-                                    <Typography display="inline" variant="h4">
+                                    <Typography display="inline" variant="h4" component="span">
                                         <FormattedMessage id="resetPasswordSuccess"/>
                                     </Typography>
                                 </Grid>
                                 <Grid item xs={12} md={12} lg={12} sx={{ mb: 1, mt:5,}}>
                                     <Button color="success" variant="outlined" onClick={()=>logout()}>
-                                        <Typography variant="h5">
+                                        <Typography variant="h5" component="span">
                                             <FormattedMessage id="backToLogin"/>
                                         </Typography>
                                     </Button>

src/pages/User/DetailPage/index.js

@@ -242,7 +242,7 @@ const UserMaintainPage = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>{isNewRecord ? "Create GLD User" : "Maintain GLD User"}</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>{isNewRecord ? "Create GLD User" : "Maintain GLD User"}</Typography>
                         </Stack>
                     </div>
                 </Grid>

src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js

@@ -17,6 +17,7 @@ import * as ComboData from "utils/ComboData";
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 import Loadable from 'components/Loadable';
 import { notifyActiveSuccess, notifyLockSuccess, notifySaveSuccess, notifyVerifySuccess } from 'utils/CommonFunction';
+import { PRIMARY_CONTAINED_BUTTON_SX } from 'themes/colorConst';
 import { useIntl } from "react-intl";
 import { PNSPS_BUTTON_THEME } from "themes/buttonConst";
 import { ThemeProvider } from "@emotion/react";
@@ -288,7 +289,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                                     <Button
                                                         variant="contained"
                                                         type="submit"
-                                                        color="success"
+                                                        sx={PRIMARY_CONTAINED_BUTTON_SX}
                                                     >
                                                         Save
                                                     </Button>

src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js

@@ -19,6 +19,7 @@ const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingCo
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 import {notifySaveSuccess,} from 'utils/CommonFunction';
+import { PRIMARY_CONTAINED_BUTTON_SX } from 'themes/colorConst';
 import {FormattedMessage, useIntl} from "react-intl";
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
@@ -166,7 +167,7 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
                                             aria-label={intl.formatMessage({id: 'save'})}
                                             variant="contained"
                                             type="submit"
-                                            color="success"
+                                            sx={PRIMARY_CONTAINED_BUTTON_SX}
                                             disabled={formik.isSubmitting}
                                         >
                                             <FormattedMessage id="save" />

src/pages/User/ManagePage_OrgPublic/index.js

@@ -53,7 +53,14 @@ const ManageOrgUserPage = () => {
         '& .MuiDataGrid-footerContainer': {
             border: 1,
             borderColor: "#EEE"
-        }
+        },
+        "& .MuiDataGrid-columnHeaderTitle": {
+            whiteSpace: "normal",
+            lineHeight: "normal"
+        },
+        "& .MuiDataGrid-columnHeader": {
+            height: "unset !important"
+        },
     }
 
     const [_searchCriteria, set_searchCriteria] = React.useState({});
@@ -78,9 +85,9 @@ const ManageOrgUserPage = () => {
         });
     }
 
-    /** DataGrid `headerName` must be a string; use `renderHeader` for styled markup. */
-    const renderStyledHeader = (params) => (
-        <Typography variant="h5">{params.colDef.headerName}</Typography>
+    /** Match /proof/search grid column header styling (inherits MuiDataGrid columnHeader color). */
+    const renderHeaderWithAria = (params) => (
+        <span aria-label={params.colDef.headerName}>{params.colDef.headerName}</span>
     );
 
     function getStatus(params) {
@@ -127,7 +134,7 @@ const ManageOrgUserPage = () => {
             id: 'username',
             field: 'username',
             headerName: intl.formatMessage({ id: 'loginName' }),
-            renderHeader: renderStyledHeader,
+            renderHeader: renderHeaderWithAria,
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
 
@@ -135,8 +142,8 @@ const ManageOrgUserPage = () => {
         {
             id: 'contactPerson',
             field: 'contactPerson',
-            headerName: intl.formatMessage({ id: 'userName' }),
-            renderHeader: renderStyledHeader,
+            headerName: intl.formatMessage({ id: 'contactPerson' }),
+            renderHeader: renderHeaderWithAria,
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
 
@@ -145,7 +152,7 @@ const ManageOrgUserPage = () => {
             id: 'contactTel',
             field: 'contactTel',
             headerName: intl.formatMessage({ id: 'userContactNumber' }),
-            renderHeader: renderStyledHeader,
+            renderHeader: renderHeaderWithAria,
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
@@ -157,7 +164,7 @@ const ManageOrgUserPage = () => {
             id: 'emailBus',
             field: 'emailBus',
             headerName: intl.formatMessage({ id: 'userContactEmail' }),
-            renderHeader: renderStyledHeader,
+            renderHeader: renderHeaderWithAria,
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
         },
@@ -165,7 +172,7 @@ const ManageOrgUserPage = () => {
             id: 'lastLogin',
             field: 'lastLogin',
             headerName: intl.formatMessage({ id: 'lastLoginDate' }),
-            renderHeader: renderStyledHeader,
+            renderHeader: renderHeaderWithAria,
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
@@ -176,7 +183,7 @@ const ManageOrgUserPage = () => {
             id: 'lastApply',
             field: 'lastApply',
             headerName: intl.formatMessage({ id: 'lastSubmissionDate' }),
-            renderHeader: renderStyledHeader,
+            renderHeader: renderHeaderWithAria,
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             valueGetter: () => {
@@ -186,7 +193,7 @@ const ManageOrgUserPage = () => {
         {
             field: 'actions',
             headerName: intl.formatMessage({ id: 'status' }),
-            renderHeader: renderStyledHeader,
+            renderHeader: renderHeaderWithAria,
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             cellClassName: 'actions',
@@ -199,7 +206,7 @@ const ManageOrgUserPage = () => {
             field: 'primaryUser',
             type: 'bool',
             headerName: intl.formatMessage({ id: 'primary' }),
-            renderHeader: renderStyledHeader,
+            renderHeader: renderHeaderWithAria,
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
@@ -272,7 +279,7 @@ const ManageOrgUserPage = () => {
                         <FormattedMessage id="confirm" />
                     </DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
-                        <Typography variant="h5" style={{ padding: '16px' }}>{warningText}</Typography>
+                        <Typography variant="h5" component="span" style={{ padding: '16px' }}>{warningText}</Typography>
                     </DialogContent>
                     <DialogActions>
                         <Button onClick={() => {

src/pages/User/SearchPage/index.js

@@ -92,7 +92,7 @@ const UserSettingPage = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>View GLD User</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>View GLD User</Typography>
                         </Stack>
                     </div>
                 </Grid>

src/pages/User/SearchPage_Individual/index.js

@@ -64,7 +64,7 @@ const UserSearchPage_Individual = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>
                                 View Individual User
                             </Typography>
                         </Stack>

src/pages/User/SearchPage_Organization/index.js

@@ -68,7 +68,7 @@ const UserSearchPage_Organization = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>View Organisation User</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>View Organisation User</Typography>
                         </Stack>
                     </div>
                 </Grid>

src/pages/authentication/BusRegister.js

@@ -12,7 +12,8 @@ import {
   Button, StepLabel,
   CircularProgress,
 } from '@mui/material';
-import VisibilityIcon from '@mui/icons-material/Visibility';
+import { POST_USERNAME, POST_VERIFY_CAPTCHA } from "utils/ApiPathConst";
+import RegisterStepIcon, { registerStepStyle } from 'components/RegisterStepIcon';
 
 // project import
 import Loadable from 'components/Loadable';
@@ -21,8 +22,8 @@ import { notifyActionError } from 'utils/CommonFunction';
 const CustomFormWizard = Loadable(lazy(() => import('./auth-forms/BusCustomFormWizard')));
 const AuthWrapper = Loadable(lazy(() => import('./AuthWrapperCustom')));
 import axios from "axios";
-import { POST_USERNAME, POST_VERIFY_CAPTCHA } from "utils/ApiPathConst";
 import {FormattedMessage, useIntl} from "react-intl";
+import { PRIMARY_CONTAINED_BUTTON_SX } from "themes/colorConst";
 // import CustomFormWizard from './auth-forms/BusCustomFormWizard';
 // import AuthWrapper from './AuthWrapperCustom';
 
@@ -37,6 +38,7 @@ const BusRegister = () => {
   const [base64Url, setBase64Url] = useState("")
   const [checkCode, setCheckCode] = useState("")
   const [isNextBusy, setIsNextBusy] = useState(false);
+  const [registrationComplete, setRegistrationComplete] = useState(false);
   const intl = useIntl();
   const steps = [
     intl.formatMessage({id: 'personalInformation'}),
@@ -44,30 +46,6 @@ const BusRegister = () => {
     intl.formatMessage({id: 'finishSubmission'})
   ];
 
-  const stepStyle = {
-    width: { lg: "40%", md: "70%", xs: "100%" },
-    boxShadow: 1,
-    backgroundColor: "#FFFFFF",
-    padding: 2,
-
-    /* Inactive (default) */
-    "& .MuiStepIcon-root": { color: "#757575", fontSize: "2rem" },          // darker grey
-    "& .MuiStepLabel-label": { color: "#424242" },                           // label darker
-    "& .MuiStepConnector-line": { borderColor: "#9E9E9E" },                  // connector darker
-
-    /* Active */
-    "& .Mui-active": {
-      "&.MuiStepIcon-root": { color: "warning.main", fontSize: "2rem" },
-      "& .MuiStepConnector-line": { borderColor: "warning.main" }
-    },
-
-    /* Completed */
-    "& .Mui-completed": {
-      "&.MuiStepIcon-root": { color: "#0C489E", fontSize: "2rem" },           // use your strong blue
-      "& .MuiStepConnector-line": { borderColor: "#0C489E" }
-    }
-  };
-
   const totalSteps = () => {
     return steps.length;
   };
@@ -147,51 +125,30 @@ const BusRegister = () => {
   const handleReset = () => {
     setActiveStep(0);
     setCompleted({});
+    setRegistrationComplete(false);
   };
 
+  const isStepCompleted = (index) => index < activeStep || registrationComplete;
+
   return (
     // <AuthWrapper>
     <Stack sx={{ width: '100%', fontSize: '2rem', paddingTop: '35px', bgcolor: 'backgroundColor.default' }} alignItems="center">
-      <Stepper activeStep={activeStep} sx={stepStyle}>
+      <Stepper activeStep={activeStep} sx={registerStepStyle}>
         {steps.map((label, index) => (
-          <Step key={label} completed={completed[index]} readOnly={true}>
-            {index < 2 ? (
-              <StepButton
-                aria-current={activeStep === index ? "step" : undefined}
-                // onClick={handleStep(index)}
-              >
-                <StepLabel
-                  sx={{
-                    flexDirection: "column",
-                    "& .MuiStepLabel-iconContainer": { paddingRight: 0 },
-                  }}
-                >
-                  <Typography variant="step1">{label}</Typography>
-                </StepLabel>
-              </StepButton>
-            ) : (
-              <StepButton
-                aria-current={activeStep === index ? "step" : undefined}
-                sx={
-                  activeStep === 2
-                    ? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } }
-                    : allStepsCompleted()
-                      ? { "& .MuiSvgIcon-root": { color: "#0C489E", fontSize: "2rem" } }
-                      : { color: "rgba(0,0,0,0.6)" }
-                }
-                icon={<VisibilityIcon />}
-                // onClick={handleStep(index)}
+          <Step key={label} completed={isStepCompleted(index)} readOnly={true}>
+            <StepButton
+              aria-current={activeStep === index ? "step" : undefined}
+            >
+              <StepLabel
+                StepIconComponent={RegisterStepIcon}
+                sx={{
+                  flexDirection: "column",
+                  "& .MuiStepLabel-iconContainer": { paddingRight: 0 },
+                }}
               >
-                <StepLabel
-                  sx={{
-                    flexDirection: "column",
-                    "& .MuiStepLabel-iconContainer": { paddingRight: 0 },
-                  }}
-                >
-                  <Typography variant="step1">{label}</Typography>
-                </StepLabel>
-              </StepButton>
-            )}
+                <Typography variant="step1">{label}</Typography>
+              </StepLabel>
+            </StepButton>
           </Step>
         ))}
       </Stepper>
@@ -215,6 +172,7 @@ const BusRegister = () => {
               setUsername={setUsername}
               setBase64Url={setBase64Url}
               setCheckCode={setCheckCode}
+              onRegistrationComplete={() => setRegistrationComplete(true)}
             />
             {/* <CustomFormWizard step={activeStep} /> */}
           </AuthWrapper>
@@ -249,33 +207,33 @@ const BusRegister = () => {
             {activeStep === totalSteps() - 2 ?
               (
                 <Button
-                  variant="outlined"
+                  variant="contained"
                   disabled={isNextBusy}
                   onClick={handleNext}
                   aria-busy={isNextBusy}
-                  sx={{ mr: 1, minWidth: 120 }}
+                  sx={{ mr: 1, minWidth: 120, ...PRIMARY_CONTAINED_BUTTON_SX }}
                 >
                   {isNextBusy ? (
                     <CircularProgress size={22} color="inherit" aria-hidden />
                   ) : (
-                    <Typography variant="h5">
+                    <Typography variant="h5" sx={{ color: 'inherit' }}>
                       <FormattedMessage id="submit"/>
                     </Typography>
                   )}
                 </Button>
               ) : (activeStep === totalSteps() - 1 ?
                 (
-                  <Button variant="outlined" color="inherit"
-                    disabled={true} sx={{ mr: 1 }}>
-                    <Typography variant="h5">
+                  <Button variant="contained" color="inherit"
+                    disabled={true} sx={{ mr: 1, ...PRIMARY_CONTAINED_BUTTON_SX }}>
+                    <Typography variant="h5" sx={{ color: 'inherit' }}>
                       <FormattedMessage id="submit"/>
                     </Typography>
                   </Button>
                 ) :
                 (
                   // <Button disabled={updateValid} variant="outlined" onClick={handleNext} sx={{ mr: 1 }}>
-                  <Button disabled={!updateValid || isNextBusy} variant="outlined" onClick={handleNext} sx={{ mr: 1 }}>
-                    <Typography variant="h5">
+                  <Button disabled={!updateValid || isNextBusy} variant="contained" onClick={handleNext} sx={{ mr: 1, ...PRIMARY_CONTAINED_BUTTON_SX }}>
+                    <Typography variant="h5" sx={{ color: 'inherit' }}>
                       <FormattedMessage id="continue"/>
                     </Typography>
                   </Button>

src/pages/authentication/ForgotPassword/ForgotPasswordApplyForm.js

@@ -128,17 +128,17 @@ const ForgotPasswordApplyForm = () => {
                         <Grid container spacing={2} sx={{ minHeight: '40vh' }} direction="column" justifyContent="flex-start" alignItems="center">
                             <Grid item xs={12} md={12} lg={12} sx={{ mb: 1, mt:5, display: { xs: 'none', sm: 'none', md: 'block' } }}>
                                 <InputLabel htmlFor="email-login-title">
-                                    <Typography variant="h5" >
+                                    <Typography variant="h5" component="span">
                                         <FormattedMessage id="forgotPasswordSubTitle"/>
                                     </Typography>
                                 </InputLabel>
                             </Grid>
                             <Grid item xs={12} md={12} lg={12} sx={{ mb: 1, mt:5, display: { md: 'none', xl: 'none', lg: 'none' } }}>
                                 <InputLabel htmlFor="email-login-subtitle">
-                                    <Typography variant="h6" >
+                                    <Typography variant="h6" component="span">
                                         <FormattedMessage id="forgotPasswordSubTitle1"/>
                                     </Typography>
-                                    <Typography variant="h6" >
+                                    <Typography variant="h6" component="span">
                                         <FormattedMessage id="forgotPasswordSubTitle2"/>
                                     </Typography>
                                 </InputLabel>
@@ -212,7 +212,7 @@ const ForgotPasswordApplyForm = () => {
                         <FormattedMessage id="attention"/>
                     </DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
-                        {/* <Typography variant="h5" style={{ padding: '16px' }}>{warningText}</Typography> */}
+                        {/* <Typography variant="h5" component="span" style={{ padding: '16px' }}>{warningText}</Typography> */}
                     </DialogContent>
                     <DialogActions>
                         <Button

src/pages/authentication/ForgotUsername/ForgotUsernameApplyForm.js

@@ -127,17 +127,17 @@ const ForgotUsernameApplyForm = () => {
                         <Grid container spacing={2} sx={{ minHeight: '40vh' }} direction="column" justifyContent="flex-start" alignItems="center">
                             <Grid item xs={12} md={12} lg={12} sx={{ mb: 1, mt:5, display: { xs: 'none', sm: 'none', md: 'block' } }}>
                                 <InputLabel htmlFor="email-login-title">
-                                    <Typography variant="h5" >
+                                    <Typography variant="h5" component="span">
                                         <FormattedMessage id="forgotUsernameSubTitle"/>
                                     </Typography>
                                 </InputLabel>
                             </Grid>
                             <Grid item xs={12} md={12} lg={12} sx={{ mb: 1, mt:5, display: { md: 'none', xl: 'none', lg: 'none' } }}>
                                 <InputLabel htmlFor="email-login-subtitle">
-                                    <Typography variant="h6" >
+                                    <Typography variant="h6" component="span">
                                         <FormattedMessage id="forgotUsernameSubTitle1"/>
                                     </Typography>
-                                    <Typography variant="h6" >
+                                    <Typography variant="h6" component="span">
                                         <FormattedMessage id="forgotPasswordSubTitle2"/>
                                     </Typography>
                                 </InputLabel>
@@ -211,7 +211,7 @@ const ForgotUsernameApplyForm = () => {
                         <FormattedMessage id="attention"/>
                     </DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
-                        {/* <Typography variant="h5" style={{ padding: '16px' }}>{warningText}</Typography> */}
+                        {/* <Typography variant="h5"component="span" style={{ padding: '16px' }}>{warningText}</Typography> */}
                     </DialogContent>
                     <DialogActions>
                         <Button

src/pages/authentication/IAmSmartRegister.js

@@ -13,10 +13,11 @@ import {
   Stack,
   Typography,
   Button,
+  StepLabel,
   CircularProgress,
 } from '@mui/material';
-import VisibilityIcon from '@mui/icons-material/Visibility';
 import { GET_ID, POST_VERIFY_CAPTCHA } from "utils/ApiPathConst";
+import RegisterStepIcon, { registerStepStyle } from 'components/RegisterStepIcon';
 
 // project import
 import Loadable from 'components/Loadable';
@@ -24,32 +25,10 @@ import { lazy } from 'react';
 import { notifyActionError } from 'utils/CommonFunction';
 import axios from "axios";
 import {FormattedMessage, useIntl} from "react-intl";
+import { PRIMARY_CONTAINED_BUTTON_SX } from "themes/colorConst";
 const CustomFormWizard = Loadable(lazy(() => import('./auth-forms/IAmSmartFormWizard')));
 const AuthWrapper = Loadable(lazy(() => import('./AuthWrapperCustom')));
 // ================================|| REGISTER ||================================ //
-  const stepStyle = {
-    width: { lg: "40%", md: "70%", xs: "100%" },
-    boxShadow: 1,
-    backgroundColor: "#FFFFFF",
-    padding: 2,
-
-    /* Inactive (default) */
-    "& .MuiStepIcon-root": { color: "#757575", fontSize: "2rem" },          // darker grey
-    "& .MuiStepLabel-label": { color: "#424242" },                           // label darker
-    "& .MuiStepConnector-line": { borderColor: "#9E9E9E" },                  // connector darker
-
-    /* Active */
-    "& .Mui-active": {
-      "&.MuiStepIcon-root": { color: "warning.main", fontSize: "2rem" },
-      "& .MuiStepConnector-line": { borderColor: "warning.main" }
-    },
-
-    /* Completed */
-    "& .Mui-completed": {
-      "&.MuiStepIcon-root": { color: "#0C489E", fontSize: "2rem" },           // use your strong blue
-      "& .MuiStepConnector-line": { borderColor: "#0C489E" }
-    }
-  };
 
 const Register = () => {
   const [activeStep, setActiveStep] = useState(0);
@@ -61,6 +40,7 @@ const Register = () => {
   const [checkCode, setCheckCode] = useState("")
   const [idNo, setIdNo] = useState("");
   const [isNextBusy, setIsNextBusy] = useState(false);
+  const [registrationComplete, setRegistrationComplete] = useState(false);
   const intl = useIntl();
   const steps = [
     intl.formatMessage({id: 'personalInformation'}),
@@ -152,37 +132,30 @@ const Register = () => {
   const handleReset = () => {
     setActiveStep(0);
     setCompleted({});
+    setRegistrationComplete(false);
   };
 
+  const isStepCompleted = (index) => index < activeStep || registrationComplete;
+
   return (
     // <AuthWrapper>
     <Stack sx={{ width: '100%', fontSize: '2rem', paddingTop: '65px', bgcolor: 'backgroundColor.default' }} alignItems="center">
-      <Stepper activeStep={activeStep} sx={stepStyle}>
+      <Stepper activeStep={activeStep} sx={registerStepStyle}>
         {steps.map((label, index) => (
-          <Step key={label} completed={completed[index]} readOnly={true}>
-            {index < 2 ? (
-              <StepButton
-                aria-current={activeStep === index ? "step" : undefined}
-                // onClick={handleStep(index)}
-              >
-                <Typography variant="step1">{label}</Typography>
-              </StepButton>
-            ) : (
-              <StepButton
-                aria-current={activeStep === index ? "step" : undefined}
-                sx={
-                  activeStep === 2
-                    ? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } }
-                    : allStepsCompleted()
-                      ? { "& .MuiSvgIcon-root": { color: "#0C489E", fontSize: "2rem" } }
-                      : { color: "rgba(0,0,0,0.6)" }
-                }
-                icon={<VisibilityIcon />}
-                // onClick={handleStep(index)}
+          <Step key={label} completed={isStepCompleted(index)} readOnly={true}>
+            <StepButton
+              aria-current={activeStep === index ? "step" : undefined}
+            >
+              <StepLabel
+                StepIconComponent={RegisterStepIcon}
+                sx={{
+                  flexDirection: "column",
+                  "& .MuiStepLabel-iconContainer": { paddingRight: 0 },
+                }}
               >
                 <Typography variant="step1">{label}</Typography>
-              </StepButton>
-            )}
+              </StepLabel>
+            </StepButton>
           </Step>
         ))}
       </Stepper>
@@ -207,6 +180,7 @@ const Register = () => {
               setIdNo={setIdNo}
               setBase64Url={setBase64Url}
               setCheckCode={setCheckCode}
+              onRegistrationComplete={() => setRegistrationComplete(true)}
             />
             {/* <CustomFormWizard step={activeStep} /> */}
           </AuthWrapper>
@@ -239,33 +213,33 @@ const Register = () => {
             {activeStep === totalSteps() - 2 ?
               (
                 <Button
-                  variant="outlined"
+                  variant="contained"
                   disabled={isNextBusy}
                   onClick={handleNext}
                   aria-busy={isNextBusy}
-                  sx={{ mr: 1, minWidth: 120 }}
+                  sx={{ mr: 1, minWidth: 120, ...PRIMARY_CONTAINED_BUTTON_SX }}
                 >
                   {isNextBusy ? (
                     <CircularProgress size={22} color="inherit" aria-hidden />
                   ) : (
-                    <Typography variant="h5">
+                    <Typography variant="h5" sx={{ color: 'inherit' }}>
                       <FormattedMessage id="submit"/>
                     </Typography>
                   )}
                 </Button>
               ) : (activeStep === totalSteps() - 1 ?
                 (
-                  <Button variant="outlined" color="inherit"
-                    disabled={true} sx={{ mr: 1 }}>
-                    <Typography variant="h5">
+                  <Button variant="contained" color="inherit"
+                    disabled={true} sx={{ mr: 1, ...PRIMARY_CONTAINED_BUTTON_SX }}>
+                    <Typography variant="h5" sx={{ color: 'inherit' }}>
                       <FormattedMessage id="submit"/>
                     </Typography>
                   </Button>
                 ) :
                 (
                   // <Button disabled={updateValid} variant="outlined" onClick={handleNext} sx={{ mr: 1 }}>
-                  <Button disabled={!updateValid || isNextBusy} variant="outlined" onClick={handleNext} sx={{ mr: 1 }}>
-                    <Typography variant="h5">
+                  <Button disabled={!updateValid || isNextBusy} variant="contained" onClick={handleNext} sx={{ mr: 1, ...PRIMARY_CONTAINED_BUTTON_SX }}>
+                    <Typography variant="h5" sx={{ color: 'inherit' }}>
                       <FormattedMessage id="continue"/>
                     </Typography>
                   </Button>

src/pages/authentication/Register.js

@@ -15,8 +15,8 @@ import {
   Button, StepLabel,
   CircularProgress,
 } from '@mui/material';
-import VisibilityIcon from '@mui/icons-material/Visibility';
 import { POST_USERNAME, POST_VERIFY_CAPTCHA  } from "utils/ApiPathConst";
+import RegisterStepIcon, { registerStepStyle } from 'components/RegisterStepIcon';
 
 // project import
 import Loadable from 'components/Loadable';
@@ -25,6 +25,7 @@ import { notifyActionError } from 'utils/CommonFunction';
 import axios from "axios";
 import {FormattedMessage, useIntl} from "react-intl";
 import usePageTitle from "components/usePageTitle";
+import { PRIMARY_CONTAINED_BUTTON_SX } from "themes/colorConst";
 const CustomFormWizard = Loadable(lazy(() => import('./auth-forms/CustomFormWizard')));
 const AuthWrapper = Loadable(lazy(() => import('./AuthWrapperCustom')));
 // ================================|| REGISTER ||================================ //
@@ -38,6 +39,7 @@ const Register = () => {
   const [base64Url, setBase64Url] = useState("")
   const [checkCode, setCheckCode] = useState("")
   const [isNextBusy, setIsNextBusy] = useState(false);
+  const [registrationComplete, setRegistrationComplete] = useState(false);
   const nextBusyRef = useRef(false);
   const intl = useIntl();
   // Localized document title/meta for register flow
@@ -48,30 +50,6 @@ const Register = () => {
     intl.formatMessage({id: 'finishSubmission'})
   ];
 
-  const stepStyle = {
-    width: { lg: "40%", md: "70%", xs: "100%" },
-    boxShadow: 1,
-    backgroundColor: "#FFFFFF",
-    padding: 2,
-
-    /* Inactive (default) */
-    "& .MuiStepIcon-root": { color: "#757575", fontSize: "2rem" },          // darker grey
-    "& .MuiStepLabel-label": { color: "#424242" },                           // label darker
-    "& .MuiStepConnector-line": { borderColor: "#9E9E9E" },                  // connector darker
-
-    /* Active */
-    "& .Mui-active": {
-      "&.MuiStepIcon-root": { color: "warning.main", fontSize: "2rem" },
-      "& .MuiStepConnector-line": { borderColor: "warning.main" }
-    },
-
-    /* Completed */
-    "& .Mui-completed": {
-      "&.MuiStepIcon-root": { color: "#0C489E", fontSize: "2rem" },           // use your strong blue
-      "& .MuiStepConnector-line": { borderColor: "#0C489E" }
-    }
-  };
-
   const totalSteps = () => {
     return steps.length;
   };
@@ -153,51 +131,30 @@ const Register = () => {
   const handleReset = () => {
     setActiveStep(0);
     setCompleted({});
+    setRegistrationComplete(false);
   };
 
+  const isStepCompleted = (index) => index < activeStep || registrationComplete;
+
   return (
     // <AuthWrapper>
     <Stack sx={{ width: '100%', fontSize: '2rem', paddingTop: '35px', bgcolor: 'backgroundColor.default' }} alignItems="center">
-      <Stepper activeStep={activeStep} sx={stepStyle}>
+      <Stepper activeStep={activeStep} sx={registerStepStyle}>
         {steps.map((label, index) => (
-          <Step key={label} completed={completed[index]} readOnly={true}>
-            {index < 2 ? (
-              <StepButton
-                aria-current={activeStep === index ? 'step' : undefined}
-                // onClick={handleStep(index)}
+          <Step key={label} completed={isStepCompleted(index)} readOnly={true}>
+            <StepButton
+              aria-current={activeStep === index ? 'step' : undefined}
+            >
+              <StepLabel
+                StepIconComponent={RegisterStepIcon}
+                sx={{
+                  flexDirection: 'column',
+                  "& .MuiStepLabel-iconContainer": { paddingRight: 0 }
+                }}
               >
-                <StepLabel
-                  sx={{
-                    flexDirection: 'column',
-                    "& .MuiStepLabel-iconContainer": { paddingRight: 0 }
-                  }}
-                >
-                  <Typography variant="step1">{label}</Typography>
-                </StepLabel>
-              </StepButton>
-            ) : (
-              <StepButton
-                aria-current={activeStep === index ? 'step' : undefined}
-                sx={
-                  activeStep === 2
-                    ? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } }
-                    : allStepsCompleted()
-                      ? { "& .MuiSvgIcon-root": { color: "#0C489E", fontSize: "2rem" } }
-                      : { color: "rgba(0,0,0,0.6)" }
-                }
-                icon={<VisibilityIcon />}
-                // onClick={handleStep(index)}
-              >
-                <StepLabel
-                  sx={{
-                    flexDirection: 'column',
-                    "& .MuiStepLabel-iconContainer": { paddingRight: 0 }
-                  }}
-                >
-                  <Typography variant="step1">{label}</Typography>
-                </StepLabel>
-              </StepButton>
-            )}
+                <Typography variant="step1">{label}</Typography>
+              </StepLabel>
+            </StepButton>
           </Step>
         ))}
       </Stepper>
@@ -221,6 +178,7 @@ const Register = () => {
               setUsername={setUsername}
               setBase64Url={setBase64Url}
               setCheckCode={setCheckCode}
+              onRegistrationComplete={() => setRegistrationComplete(true)}
             />
             {/* <CustomFormWizard step={activeStep} /> */}
           </AuthWrapper>
@@ -255,33 +213,33 @@ const Register = () => {
             {activeStep === totalSteps() - 2 ?
               (
                 <Button
-                  variant="outlined"
+                  variant="contained"
                   disabled={isNextBusy}
                   onClick={handleNext}
                   aria-busy={isNextBusy}
-                  sx={{ mr: 1, minWidth: 120 }}
+                  sx={{ mr: 1, minWidth: 120, ...PRIMARY_CONTAINED_BUTTON_SX }}
                 >
                   {isNextBusy ? (
                     <CircularProgress size={22} color="inherit" aria-hidden />
                   ) : (
-                    <Typography variant="h5">
+                    <Typography variant="h5" sx={{ color: 'inherit' }}>
                       <FormattedMessage id="submit"/>
                     </Typography>
                   )}
                 </Button>
               ) : (activeStep === totalSteps() - 1 ?
                 (
-                  <Button variant="outlined" color="inherit"
-                    disabled={true} sx={{ mr: 1 }}>
-                    <Typography variant="h5">
+                  <Button variant="contained" color="inherit"
+                    disabled={true} sx={{ mr: 1, ...PRIMARY_CONTAINED_BUTTON_SX }}>
+                    <Typography variant="h5" sx={{ color: 'inherit' }}>
                       <FormattedMessage id="submit"/>
                     </Typography>
                   </Button>
                 ) :
                 (
                   // <Button disabled={updateValid} variant="outlined" onClick={handleNext} sx={{ mr: 1 }}>
-                  <Button disabled={!updateValid || isNextBusy} variant="outlined" onClick={handleNext} sx={{ mr: 1 }}>
-                    <Typography variant="h5">
+                  <Button disabled={!updateValid || isNextBusy} variant="contained" onClick={handleNext} sx={{ mr: 1, ...PRIMARY_CONTAINED_BUTTON_SX }}>
+                    <Typography variant="h5" sx={{ color: 'inherit' }}>
                       <FormattedMessage id="continue"/>
                     </Typography>
                   </Button>

src/pages/authentication/RegisterCustom.js

@@ -142,19 +142,19 @@ const RegisterCustom = () => {
                     href="/registerFrom"
                     variant="contained"
                     sx={{
-                      backgroundColor: '#0C489E',
+                      backgroundColor: '#0c489e',
                       color: '#FFFFFF',
-                      border: '1px solid #0C489E',
+                      border: '1px solid #0c489e',
                       boxShadow: 'none',
                       '&:hover': {
-                        backgroundColor: '#093A7A',
+                        backgroundColor: '#1565c0',
                         color: '#FFFFFF',
-                        border: '1px solid #093A7A',
+                        border: '1px solid #1565c0',
                         boxShadow: 'none',
                       },
                     }}
                   >
-                    <Typography variant="h5" sx={{ color: 'inherit' }}>
+                    <Typography component="span" variant="h5" sx={{ color: 'inherit' }}>
                       <FormattedMessage id="registerNewPersonalUser" />
                     </Typography>
                   </Button>
@@ -164,7 +164,7 @@ const RegisterCustom = () => {
                   </Typography>
                 </Grid>
                 <Grid item xs={12} md={6} sx={{ borderLeft: 1, borderColor: 'grey.500' }}>
-                  <Typography mb={4} variant="h3">
+                  <Typography component="h2" mb={4} variant="h3">
                     <FormattedMessage id="businessUser" />
                   </Typography>
                   <Button
@@ -172,19 +172,19 @@ const RegisterCustom = () => {
                     variant="contained"
                     sx={{
                       mt: 0.5,
-                      backgroundColor: '#0C489E',
+                      backgroundColor: '#0c489e',
                       color: '#FFFFFF',
-                      border: '1px solid #0C489E',
+                      border: '1px solid #0c489e',
                       boxShadow: 'none',
                       '&:hover': {
-                        backgroundColor: '#093A7A',
+                        backgroundColor: '#1565c0',
                         color: '#FFFFFF',
-                        border: '1px solid #093A7A',
+                        border: '1px solid #1565c0',
                         boxShadow: 'none',
                       },
                     }}
                   >
-                    <Typography component="h2" variant="h5" sx={{ color: 'inherit' }}>
+                    <Typography component="span" variant="h5" sx={{ color: 'inherit' }}>
                       <FormattedMessage id="registerNewBusinessUser" />
                     </Typography>
                   </Button>

src/pages/authentication/auth-forms/AuthLoginCustom.js

@@ -369,9 +369,9 @@ const AuthLoginCustom = () => {
                     <Button disableElevation disabled={isButtonDisabled}
                       fullWidth size="large" type="submit" variant="contained" color="primary"
                       sx={{
-                        backgroundColor: "#0C489E",
+                        backgroundColor: "#0c489e",
                         color: "#FFFFFF",
-                        "&:hover": { backgroundColor: "#093A7A" },
+                        "&:hover": { backgroundColor: "#1565c0" },
                         "&.Mui-disabled": {
                           background: "#bbdefb",
                           color: "#fff",

src/pages/authentication/auth-forms/BusCustomFormWizard.js

@@ -55,7 +55,8 @@ import {PNSPS_LONG_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
 import {FormattedMessage, useIntl} from "react-intl";
 //import { Invaild } from 'utils/IconUtils';
-import { notifyActionError } from 'utils/CommonFunction';
+import { handleActionKeyDown, notifyActionError } from 'utils/CommonFunction';
+import { ADDRESS_LINE_MAX_LENGTH, isAddressLineWithinLimit, isRegisterAddressValid } from 'utils/registerValidation';
 
 // ============================|| FIREBASE - REGISTER ||============================ //
 
@@ -286,7 +287,7 @@ const BusCustomFormWizard = (props) => {
         (data.chCompanyName !== "" || data.enCompanyName !== "") &&
         data.enName !== "" &&
         data.chName !== "" &&
-        data.address1 !== "" &&
+        isRegisterAddressValid(data) &&
         data.email !== "" &&
         data.emailConfirm !== "" &&
         data.email === data.emailConfirm &&
@@ -343,6 +344,10 @@ const BusCustomFormWizard = (props) => {
 
         }
 
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
+
     }, [updateRows]);
 
     const handleBrNo = (brNo) => {
@@ -396,6 +401,8 @@ const BusCustomFormWizard = (props) => {
 
         setFileListData(saveFileList)
         setFileList(updatedFileList);
+        setUpdateRows(saveFileList);
+        event.target.value = '';
     };
 
     useEffect(() => {
@@ -494,6 +501,7 @@ const BusCustomFormWizard = (props) => {
                 ) => {
                     // console.log(response)
                     setCheckUpload(true)
+                    props.onRegistrationComplete?.();
                     setLoding(false);
                 })
                 .catch(error => {
@@ -669,7 +677,17 @@ const BusCustomFormWizard = (props) => {
             const syncOk = computeStep0ValidSync(values);
             if (!syncOk) {
                 setisValid(false);
-                if (!isDistrictSelectionValid()) {
+                if (!isRegisterAddressValid(values)) {
+                    if (values.address1 === '') {
+                        notifyActionError(intl.formatMessage({ id: 'validateAddressLine1' }));
+                    } else if (!isAddressLineWithinLimit(values.address1)) {
+                        notifyActionError(intl.formatMessage({ id: 'noMoreThenNWords' }, { num: ADDRESS_LINE_MAX_LENGTH, fieldname: intl.formatMessage({ id: 'addressLine1' }) + ": " }));
+                    } else if (!isAddressLineWithinLimit(values.address2)) {
+                        notifyActionError(intl.formatMessage({ id: 'noMoreThenNWords' }, { num: ADDRESS_LINE_MAX_LENGTH, fieldname: intl.formatMessage({ id: 'addressLine2' }) + ": " }));
+                    } else if (!isAddressLineWithinLimit(values.address3)) {
+                        notifyActionError(intl.formatMessage({ id: 'noMoreThenNWords' }, { num: ADDRESS_LINE_MAX_LENGTH, fieldname: intl.formatMessage({ id: 'addressLine3' }) + ": " }));
+                    }
+                } else if (!isDistrictSelectionValid()) {
                     setDistrictErrStr(getRequiredErrStr("district"));
                     setCheckDistrict(true);
                     notifyActionError(intl.formatMessage({ id: 'require' }, { fieldname: intl.formatMessage({ id: 'district' }) }));
@@ -721,14 +739,14 @@ const BusCustomFormWizard = (props) => {
                                 </Typography>
                             </Button>
                                 <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
-                                    <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>
+                                    <Typography display="inline" variant="h3"component="h1" sx={{ color: '#1A4399' }}>
                                         <FormattedMessage id="becomeNewBusinessUser"/>
                                     </Typography>
                                 </div>
-                                <Typography mt={0.25} variant="h6" sx={{ color: '#B00020' }}>
+                                <Typography mt={0.25} variant="h6" component="span" sx={{ color: '#B00020' }}>
                                     <FormattedMessage id="requireString"/>
                                 </Typography>
-                                <Typography mt={0.25} variant="h4" sx={{ color: 'primary.primary' }}>
+                                <Typography mt={0.25} variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                     <FormattedMessage id="yourLoginInformation"/>
                                 </Typography>
                                 {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
@@ -748,7 +766,7 @@ const BusCustomFormWizard = (props) => {
                                                     variant="contained"
                                                     onClick={handleCheckUsername}
                                                     sx={{ ml: 2, height: "40px" }}>
-                                                    <Typography variant="h6">檢查是否重覆</Typography>
+                                                    <Typography variant="h6" component="span">檢查是否重覆</Typography>
                                                 </Button> */}
                                             </Typography>
                                         </InputLabel>
@@ -815,10 +833,13 @@ const BusCustomFormWizard = (props) => {
                                                     endAdornment={
                                                         <InputAdornment position="end">
                                                             <IconButton
+                                                                role="button"
+                                                                tabIndex={0}
                                                                 aria-label={intl.formatMessage({
                                                                     id: showPassword ? "ariaHidePassword" : "ariaShowPassword"
                                                                 })}
                                                                 onClick={handleClickShowPassword}
+                                                                onKeyDown={(event) => handleActionKeyDown(event, handleClickShowPassword)}
                                                                 onMouseDown={handleMouseDownPassword}
                                                                 edge="end"
                                                                 size="large"
@@ -891,10 +912,13 @@ const BusCustomFormWizard = (props) => {
                                                     endAdornment={
                                                         <InputAdornment position="end">
                                                             <IconButton
+                                                                role="button"
+                                                                tabIndex={0}
                                                                 aria-label={intl.formatMessage({
                                                                     id: showConfirmPassword ? "ariaHidePassword" : "ariaShowPassword"
                                                                 })}
                                                                 onClick={handleClickShowConfirmPassword}
+                                                                onKeyDown={(event) => handleActionKeyDown(event, handleClickShowConfirmPassword)}
                                                                 onMouseDown={handleMouseDownPassword}
                                                                 edge="end"
                                                                 size="large"
@@ -929,7 +953,7 @@ const BusCustomFormWizard = (props) => {
                                 </Grid>
                                 <Grid item xs={12} mt={1} mb={1}>
                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                        <Typography display="inline" variant="h4" /*sx={{ color: '#1A4399' }}*/>
+                                        <Typography display="inline" variant="h4" component="h2" /*sx={{ color: '#1A4399' }}*/>
                                             <FormattedMessage id="yourBusinessInformation"/>
                                         </Typography>
                                         {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
@@ -1102,6 +1126,7 @@ const BusCustomFormWizard = (props) => {
                                             onBlur={formik.handleBlur}
                                             inputProps={{
                                                 "aria-label": intl.formatMessage({ id: "addressLine1" }),
+                                                maxLength: ADDRESS_LINE_MAX_LENGTH,
                                                 onKeyDown: (e) => {
                                                     if (e.key === 'Enter') {
                                                         e.preventDefault();
@@ -1120,6 +1145,7 @@ const BusCustomFormWizard = (props) => {
                                             placeholder={intl.formatMessage({id: 'addressLine2'})}
                                             inputProps={{
                                                 "aria-label": intl.formatMessage({ id: "addressLine2" }),
+                                                maxLength: ADDRESS_LINE_MAX_LENGTH,
                                                 onKeyDown: (e) => {
                                                     if (e.key === 'Enter') {
                                                         e.preventDefault();
@@ -1138,6 +1164,7 @@ const BusCustomFormWizard = (props) => {
                                             placeholder={intl.formatMessage({id: 'addressLine3'})}
                                             inputProps={{
                                                 "aria-label": intl.formatMessage({ id: "addressLine3" }),
+                                                maxLength: ADDRESS_LINE_MAX_LENGTH,
                                                 onKeyDown: (e) => {
                                                     if (e.key === 'Enter') {
                                                         e.preventDefault();
@@ -1246,7 +1273,7 @@ const BusCustomFormWizard = (props) => {
                                 </Grid>
                                 <Grid item xs={12} mt={1} mb={1}>
                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
+                                        <Typography display="inline" variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                             <FormattedMessage id="yourContact"/>
                                         </Typography>
                                     </Stack>
@@ -1524,20 +1551,21 @@ const BusCustomFormWizard = (props) => {
                                     <Grid container>
                                         <Grid item xs={12} md={12}>
                                             <Stack spacing={1} direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                                <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
+                                                <Typography display="inline" variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                                     <FormattedMessage id="businessRegCertAndDoc"/>
                                                     <span style={{ color: '#B00020' }}>*</span>
                                                 </Typography>
-                                                <Typography display="inline" variant="h6" sx={{ color: 'primary.primary' }}>
+                                                <Typography display="inline" variant="h6" component="span" sx={{ color: 'primary.primary' }}>
                                                     <FormattedMessage id="pleaseUploadDoc"/>
                                                 </Typography>
-                                                {/* <Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography>           */}
+                                                {/* <Typography display="inline" variant="h6" component="span" sx={{ fontSize: 12,color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography>           */}
                                                 <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
                                                     <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                                                         <Button
                                                             variant="contained"
                                                             sx={{ height: '40px' }}
                                                             type="button"
+                                                            tabIndex={0}
                                                             onClick={() => {
                                                                 if (fileInputRef.current) {
                                                                     fileInputRef.current.click();
@@ -1565,7 +1593,7 @@ const BusCustomFormWizard = (props) => {
                                                             style={{ display: 'none' }}
                                                         />
                                                     </ThemeProvider>
-                                                    {/* <Typography display="inline" variant="h6" sx={{ fontSize: 12, color: 'primary.primary'}}></Typography>           */}
+                                                    {/* <Typography display="inline" variant="h6" component="span" sx={{ fontSize: 12, color: 'primary.primary'}}></Typography>           */}
                                                 </Stack>
                                                 {fileList != null && props.step === 0 ?
                                                     <UploadFileTable key="uploadTable" recordList={fileListData} setUpdateRows={setUpdateRows} /> : null}
@@ -1581,7 +1609,7 @@ const BusCustomFormWizard = (props) => {
                             <Grid item xs={12} md={12}>
                                 <Grid container>
                                     <Grid item xs={12} md={12}>
-                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
+                                        <Typography display="inline" variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                             <FormattedMessage id="termsAndCondition"/>
                                             <span style={{ color: '#B00020' }}>*</span>
                                         </Typography>
@@ -1589,7 +1617,7 @@ const BusCustomFormWizard = (props) => {
                                     <Grid item xs={12} md={12}>
                                         <Grid container>
                                             <Grid item xs={12} md={12}>
-                                                <Typography variant="h6" height="100%" sx={{ textAlign: "left", /*overflow: "scroll",*/ borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0C489E" }}>
+                                                <Typography variant="h6" height="100%" sx={{ textAlign: "left", /*overflow: "scroll",*/ borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0c489e" }}>
                                                 <div style={{padding: 12}} dangerouslySetInnerHTML={{__html: intl.formatMessage({id: "termsAndCon"})}} />
                                                 </Typography>
                                             </Grid>
@@ -1642,7 +1670,7 @@ const BusCustomFormWizard = (props) => {
                             <Grid item xs={12} lg={12}>
                                 <Grid container>
                                     <Stack direction="column">
-                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
+                                        <Typography display="inline" variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                             <FormattedMessage id="verify"/>
                                             <span style={{ color: '#B00020' }}>*</span>
                                         </Typography>
@@ -1651,7 +1679,14 @@ const BusCustomFormWizard = (props) => {
                                                 <img src={captchaImg} alt="" />
                                             </Grid>
                                             <Grid item xs={1} lg={1} style={{ "border": "0px solid black" }}>
-                                                <IconButton aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })} size="large" onClick={() => { onCaptchaChange() }}>
+                                                <IconButton
+                                                    role="button"
+                                                    tabIndex={0}
+                                                    aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })}
+                                                    size="large"
+                                                    onClick={() => { onCaptchaChange() }}
+                                                    onKeyDown={(event) => handleActionKeyDown(event, () => onCaptchaChange())}
+                                                >
                                                     <LoopIcon fontSize="inherit" />
                                                 </IconButton>
                                             </Grid>
@@ -1689,9 +1724,9 @@ const BusCustomFormWizard = (props) => {
                                                 onClick={playCaptchaAudio}
                                                 aria-label={intl.formatMessage({ id: "captchaPlayAudio" })}
                                                 sx={{
-                                                    backgroundColor: '#0C489E',
+                                                    backgroundColor: '#0c489e',
                                                     color: '#FFFFFF',
-                                                    '&:hover': { backgroundColor: '#093A7A' },
+                                                    '&:hover': { backgroundColor: '#1565c0' },
                                                 }}
                                             >
                                                 <FormattedMessage id="captchaPlayAudio" />
@@ -1709,12 +1744,12 @@ const BusCustomFormWizard = (props) => {
                         <Grid item xs={12}>
                             <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                 <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
-                                    <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>
+                                    <Typography display="inline" variant="h3"component="h1" sx={{ color: '#1A4399' }}>
                                         <FormattedMessage id="becomeNewBusinessUser"/>
                                     </Typography>
                                 </div>
-                                {/* <Typography mt={0.25} variant="h6" sx={{ fontSize: 12,color: '#B00020'}}>註有*的項目必須輸入資料</Typography> */}
-                                <Typography mt={0.25} variant="h4" sx={{ color: 'primary.primary' }}>
+                                {/* <Typography mt={0.25} variant="h6" component="span" sx={{ fontSize: 12,color: '#B00020'}}>註有*的項目必須輸入資料</Typography> */}
+                                <Typography mt={0.25} variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                     <FormattedMessage id="yourLoginInformation"/>
                                 </Typography>
                                 {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
@@ -1736,7 +1771,7 @@ const BusCustomFormWizard = (props) => {
                                 </Grid>
                                 <Grid item xs={12} mt={1} mb={1}>
                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                        <Typography display="inline" variant="h4" /*sx={{ color: '#1A4399' }}*/>
+                                        <Typography display="inline" variant="h4" component="h2" /*sx={{ color: '#1A4399' }}*/>
                                             <FormattedMessage id="yourBusinessInformation"/>
                                         </Typography>
                                         {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
@@ -1837,7 +1872,7 @@ const BusCustomFormWizard = (props) => {
                                 </Grid>
                                 <Grid item xs={12} mt={1} mb={1}>
                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
+                                        <Typography display="inline" variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                             <FormattedMessage id="yourContact"/>
                                         </Typography>
                                     </Stack>
@@ -1886,8 +1921,8 @@ const BusCustomFormWizard = (props) => {
                                     <Grid container>
                                         <Grid item xs={12} md={12}>
                                             <Stack spacing={1} direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                                <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
-                                                    <FormattedMessage id="userIdDoc"/>
+                                                <Typography display="inline" variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
+                                                    <FormattedMessage id="businessRegCertAndDoc"/>
                                                 </Typography>
                                                 {fileList != null && props.step === 1 ?
                                                     <PreviewUploadFileTable key="previewTable" recordList={fileListData} /> : null}
@@ -1909,10 +1944,10 @@ const BusCustomFormWizard = (props) => {
                                     // SUCCESS page
                                     <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
                                         <CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} />
-                                        <Typography display="inline" variant="h4">
+                                        <Typography display="inline" variant="h4" component="span">
                                             <FormattedMessage id="registerSubmitted"/>
                                         </Typography>
-                                        <Typography display="inline" variant="h4">
+                                        <Typography display="inline" variant="h4" component="span">
                                             <FormattedMessage id="emailSent"/>
                                         </Typography>
                                         <Button variant="outlined" component={Link} to="/login" >
@@ -1925,7 +1960,7 @@ const BusCustomFormWizard = (props) => {
                                     <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
                                         {/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
                                         <CancelOutlinedIcon color="error" sx={{ width: "200px", height: "200px" }} />
-                                        <Typography display="inline" variant="h4">
+                                        <Typography display="inline" variant="h4" component="span">
                                             <FormattedMessage id="registerFail" />
                                         </Typography>
                                         <Button color="error" variant="outlined" component={Link} to="/login" ><Typography variant="pnspsFormHeader">

src/pages/authentication/auth-forms/CustomFormWizard.js

@@ -47,7 +47,8 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { Link } from 'react-router-dom';
 import { PNSPS_LONG_BUTTON_THEME } from "../../../themes/buttonConst";
 import * as HttpUtils from "../../../utils/HttpUtils";
-import { notifyActionError } from 'utils/CommonFunction';
+import { handleActionKeyDown, notifyActionError } from 'utils/CommonFunction';
+import { ADDRESS_LINE_MAX_LENGTH, isAddressLineWithinLimit, isRegisterAddressValid } from 'utils/registerValidation';
 // ============================|| FIREBASE - REGISTER ||============================ //
 
 const CustomFormWizard = (props) => {
@@ -377,7 +378,7 @@ const CustomFormWizard = (props) => {
         selectedIdDocType.type !== "" &&
         data.idNo !== "" &&
         handleName(data.enName, data.chName) &&
-        data.address1 !== "" &&
+        isRegisterAddressValid(data) &&
         data.email !== "" &&
         data.emailConfirm !== "" &&
         data.email == data.emailConfirm &&
@@ -432,6 +433,10 @@ const CustomFormWizard = (props) => {
 
         }
 
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
+
     }, [updateRows]);
 
     const handleFileUpload = (event) => {
@@ -473,6 +478,8 @@ const CustomFormWizard = (props) => {
 
         setFileListData(saveFileList)
         setFileList(updatedFileList);
+        setUpdateRows(saveFileList);
+        event.target.value = '';
     };
 
     useEffect(() => {
@@ -586,6 +593,7 @@ const CustomFormWizard = (props) => {
                 ) => {
                     // console.log(response)
                     setCheckUpload(true)
+                    props.onRegistrationComplete?.();
                     setLoding(false);
                 })
                 .catch(error => {
@@ -890,7 +898,17 @@ const CustomFormWizard = (props) => {
             const syncOk = computeStep0ValidSync(values);
             if (!syncOk) {
                 setisValid(false);
-                if (!isDistrictSelectionValid()) {
+                if (!isRegisterAddressValid(values)) {
+                    if (values.address1 === '') {
+                        notifyActionError(intl.formatMessage({ id: 'validateAddressLine1' }));
+                    } else if (!isAddressLineWithinLimit(values.address1)) {
+                        notifyActionError(intl.formatMessage({ id: 'noMoreThenNWords' }, { num: ADDRESS_LINE_MAX_LENGTH, fieldname: intl.formatMessage({ id: 'addressLine1' }) + ": " }));
+                    } else if (!isAddressLineWithinLimit(values.address2)) {
+                        notifyActionError(intl.formatMessage({ id: 'noMoreThenNWords' }, { num: ADDRESS_LINE_MAX_LENGTH, fieldname: intl.formatMessage({ id: 'addressLine2' }) + ": " }));
+                    } else if (!isAddressLineWithinLimit(values.address3)) {
+                        notifyActionError(intl.formatMessage({ id: 'noMoreThenNWords' }, { num: ADDRESS_LINE_MAX_LENGTH, fieldname: intl.formatMessage({ id: 'addressLine3' }) + ": " }));
+                    }
+                } else if (!isDistrictSelectionValid()) {
                     setDistrictErrStr(getRequiredErrStr("district"));
                     setCheckDistrict(true);
                     notifyActionError(intl.formatMessage({ id: 'require' }, { fieldname: intl.formatMessage({ id: 'district' }) }));
@@ -942,14 +960,14 @@ const CustomFormWizard = (props) => {
                                     </Typography>
                                 </Button>
                                 <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
-                                    <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>
+                                    <Typography display="inline" variant="h3" component="h1" sx={{ color: '#1A4399' }}>
                                         <FormattedMessage id="becomeNewPersonalUser" />
                                     </Typography>
                                 </div>
-                                <Typography mt={0.25} variant="h6" sx={{ color: '#B00020' }}>
+                                <Typography mt={0.25} variant="h6" component="span" sx={{ color: '#B00020' }}>
                                     <FormattedMessage id="requireString" />
                                 </Typography>
-                                <Typography mt={0.25} variant="h4" sx={{ color: 'primary.primary' }}>
+                                <Typography mt={0.25} variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                     <FormattedMessage id="yourLoginInformation" />
                                 </Typography>
                             </Stack>
@@ -966,7 +984,7 @@ const CustomFormWizard = (props) => {
                                                 {/*    variant="contained"*/}
                                                 {/*    onClick={handleCheckUsername}*/}
                                                 {/*    sx={{ ml: 2, height: "40px" }}>*/}
-                                                {/*    <Typography variant="h6">檢查是否重覆</Typography>*/}
+                                                {/*    <Typography variant="h6" component="span">檢查是否重覆</Typography>*/}
                                                 {/*</Button> **/}
                                             </Typography>
                                         </InputLabel>
@@ -1033,10 +1051,13 @@ const CustomFormWizard = (props) => {
                                                     endAdornment={
                                                         <InputAdornment position="end">
                                                             <IconButton
+                                                                role="button"
+                                                                tabIndex={0}
                                                                 aria-label={intl.formatMessage({
                                                                     id: showPassword ? "ariaHidePassword" : "ariaShowPassword"
                                                                 })}
                                                                 onClick={handleClickShowPassword}
+                                                                onKeyDown={(event) => handleActionKeyDown(event, handleClickShowPassword)}
                                                                 onMouseDown={handleMouseDownPassword}
                                                                 edge="end"
                                                                 size="large"
@@ -1109,10 +1130,13 @@ const CustomFormWizard = (props) => {
                                                     endAdornment={
                                                         <InputAdornment position="end">
                                                             <IconButton
+                                                                role="button"
+                                                                tabIndex={0}
                                                                 aria-label={intl.formatMessage({
                                                                     id: showConfirmPassword ? "ariaHidePassword" : "ariaShowPassword"
                                                                 })}
                                                                 onClick={handleClickShowConfirmPassword}
+                                                                onKeyDown={(event) => handleActionKeyDown(event, handleClickShowConfirmPassword)}
                                                                 onMouseDown={handleMouseDownPassword}
                                                                 edge="end"
                                                                 size="large"
@@ -1147,7 +1171,7 @@ const CustomFormWizard = (props) => {
                                 </Grid>
                                 <Grid item xs={12} mt={1} mb={1}>
                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
+                                        <Typography display="inline" variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                             <FormattedMessage id="yourPersonalInformation" />
                                         </Typography>
                                         {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
@@ -1161,7 +1185,7 @@ const CustomFormWizard = (props) => {
                                             <InputLabel htmlFor="idDocType-signup">
                                                 <Typography variant="pnspsFormHeader">
                                                     <FormattedMessage id="userIdDoc" />
-                                                    <span style={{ color: '#B00020' }}>*</span>
+                                                    <span style={{ color: '#131313' }}>*</span>
                                                 </Typography>
                                             </InputLabel>
                                             {/* {formik.touched.enName && formik.errors.enName && (
@@ -1462,6 +1486,7 @@ const CustomFormWizard = (props) => {
                                             onBlur={formik.handleBlur}
                                             inputProps={{
                                                 "aria-label": intl.formatMessage({ id: "addressLine1" }),
+                                                maxLength: ADDRESS_LINE_MAX_LENGTH,
                                                 onKeyDown: (e) => {
                                                     if (e.key === 'Enter') {
                                                         e.preventDefault();
@@ -1480,6 +1505,7 @@ const CustomFormWizard = (props) => {
                                             placeholder={intl.formatMessage({ id: 'addressLine2' })}
                                             inputProps={{
                                                 "aria-label": intl.formatMessage({ id: "addressLine2" }),
+                                                maxLength: ADDRESS_LINE_MAX_LENGTH,
                                                 onKeyDown: (e) => {
                                                     if (e.key === 'Enter') {
                                                         e.preventDefault();
@@ -1498,6 +1524,7 @@ const CustomFormWizard = (props) => {
                                             placeholder={intl.formatMessage({ id: 'addressLine3' })}
                                             inputProps={{
                                                 "aria-label": intl.formatMessage({ id: "addressLine3" }),
+                                                maxLength: ADDRESS_LINE_MAX_LENGTH,
                                                 onKeyDown: (e) => {
                                                     if (e.key === 'Enter') {
                                                         e.preventDefault();
@@ -1607,7 +1634,7 @@ const CustomFormWizard = (props) => {
                                 </Grid>
                                 <Grid item xs={12} mt={1} mb={1}>
                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
+                                        <Typography display="inline" variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                             <FormattedMessage id="yourContact" />
                                         </Typography>
                                     </Stack>
@@ -1851,7 +1878,7 @@ const CustomFormWizard = (props) => {
                                     <Grid container>
                                         <Grid item xs={12} md={12}>
                                             <Stack spacing={1} direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                                <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
+                                                <Typography display="inline" variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                                     <FormattedMessage id="userIdDoc" />
                                                     <span style={{ color: '#B00020' }}>*</span></Typography>
                                                 <Typography display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }}>
@@ -1866,6 +1893,7 @@ const CustomFormWizard = (props) => {
                                                             variant="contained"
                                                             sx={{ height: '40px' }}
                                                             type="button"
+                                                            tabIndex={0}
                                                             onClick={() => {
                                                                 if (fileInputRef.current) {
                                                                     fileInputRef.current.click();
@@ -1909,7 +1937,7 @@ const CustomFormWizard = (props) => {
                             <Grid item xs={12} md={12}>
                                 <Grid container>
                                     <Grid item xs={12} md={12}>
-                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
+                                        <Typography display="inline" variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                             <FormattedMessage id="termsAndCondition" />
                                             <span style={{ color: '#B00020' }}>*</span>
                                         </Typography>
@@ -1917,7 +1945,7 @@ const CustomFormWizard = (props) => {
                                     <Grid item xs={12} md={12}>
                                         <Grid container>
                                             <Grid item xs={12} md={12}>
-                                                <Typography variant="h6" height="100%" sx={{ textAlign: "left", /*overflow: "scroll",*/ borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0C489E" }}>
+                                                <Typography height="100%" sx={{ textAlign: "left", /*overflow: "scroll",*/ borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0c489e" }}>
                                                 <div style={{padding: 12}} dangerouslySetInnerHTML={{__html: intl.formatMessage({id: "termsAndCon"})}} />
                                                 </Typography>
                                             </Grid>
@@ -1970,7 +1998,7 @@ const CustomFormWizard = (props) => {
                             <Grid item xs={12} lg={12}>
                                 <Grid container>
                                     <Stack direction="column">
-                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
+                                        <Typography display="inline" variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                             <FormattedMessage id="verify" />
                                             <span style={{ color: '#B00020' }}>*</span>
                                         </Typography>
@@ -1979,7 +2007,14 @@ const CustomFormWizard = (props) => {
                                                 <img src={captchaImg} alt="" />
                                             </Grid>
                                             <Grid item xs={1} lg={1} style={{ "border": "0px solid black" }}>
-                                                <IconButton aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })} size="large" onClick={() => { onCaptchaChange() }}>
+                                                <IconButton
+                                                    role="button"
+                                                    tabIndex={0}
+                                                    aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })}
+                                                    size="large"
+                                                    onClick={() => { onCaptchaChange() }}
+                                                    onKeyDown={(event) => handleActionKeyDown(event, () => onCaptchaChange())}
+                                                >
                                                     <LoopIcon fontSize="inherit" />
                                                 </IconButton>
                                             </Grid>
@@ -2017,9 +2052,9 @@ const CustomFormWizard = (props) => {
                                                 onClick={playCaptchaAudio}
                                                 aria-label={intl.formatMessage({ id: "captchaPlayAudio" })}
                                                 sx={{
-                                                    backgroundColor: '#0C489E',
+                                                    backgroundColor: '#0c489e',
                                                     color: '#FFFFFF',
-                                                    '&:hover': { backgroundColor: '#093A7A' },
+                                                    '&:hover': { backgroundColor: '#1565c0' },
                                                 }}
                                             >
                                                 <FormattedMessage id="captchaPlayAudio" />
@@ -2037,12 +2072,12 @@ const CustomFormWizard = (props) => {
                         <Grid item xs={12} md={12}>
                             <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                 <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
-                                    <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>
+                                    <Typography display="inline" variant="h3" component="h1" sx={{ color: '#1A4399' }}>
                                         <FormattedMessage id="becomeNewPersonalUser" />
                                     </Typography>
                                 </div>
-                                {/* <Typography mt={0.25} variant="h6" sx={{ fontSize: 12,color: '#B00020'}}>註有*的項目必須輸入資料</Typography> */}
-                                <Typography mt={0.25} variant="h4" sx={{ color: 'primary.primary' }}>
+                                {/* <Typography mt={0.25} variant="h6" component="span" sx={{ fontSize: 12,color: '#B00020'}}>註有*的項目必須輸入資料</Typography> */}
+                                <Typography mt={0.25} variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                     <FormattedMessage id="yourLoginInformation" />
                                 </Typography>
                                 {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
@@ -2064,7 +2099,7 @@ const CustomFormWizard = (props) => {
                                 </Grid>
                                 <Grid item xs={12} mt={1} mb={1}>
                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
+                                        <Typography display="inline" variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                             <FormattedMessage id="yourPersonalInformation" />
                                         </Typography>
                                         {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
@@ -2107,8 +2142,11 @@ const CustomFormWizard = (props) => {
                                         </Typography>
                                     
                                         <IconButton
+                                            role="button"
+                                            tabIndex={0}
                                             aria-label={intl.formatMessage({ id: 'ariaToggleIdVisibility' })}
                                             onClick={handleClickShowId}
+                                            onKeyDown={(event) => handleActionKeyDown(event, handleClickShowId)}
                                             onMouseDown={handleMouseDownId}
                                             edge="end"
                                             size="medium"
@@ -2180,7 +2218,7 @@ const CustomFormWizard = (props) => {
                                 </Grid>
                                 <Grid item xs={12} mt={1} mb={1}>
                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
+                                        <Typography display="inline" variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                             <FormattedMessage id="yourContact" />
                                         </Typography>
                                     </Stack>
@@ -2221,7 +2259,7 @@ const CustomFormWizard = (props) => {
                                     <Grid container>
                                         <Grid item xs={12} md={12}>
                                             <Stack spacing={1} direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                                <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
+                                                <Typography display="inline" variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                                     <FormattedMessage id="userIdDoc" />
                                                 </Typography>
                                                 {fileList != null && props.step === 1 ?
@@ -2244,10 +2282,10 @@ const CustomFormWizard = (props) => {
                                     // SUCCESS page
                                     <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
                                         <CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} />
-                                        <Typography display="inline" variant="h4">
+                                        <Typography display="inline" variant="h4" component="span">
                                             <FormattedMessage id="registerSubmitted" />
                                         </Typography>
-                                        <Typography display="inline" variant="h4">
+                                        <Typography display="inline" variant="h4" component="span">
                                             <FormattedMessage id="emailSent" />
                                         </Typography>
                                         <Button variant="outlined" component={Link} to="/login" ><Typography variant="pnspsFormHeader">
@@ -2259,7 +2297,7 @@ const CustomFormWizard = (props) => {
                                     <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
                                         {/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
                                         <CancelOutlinedIcon color="error" sx={{ width: "200px", height: "200px" }} />
-                                        <Typography display="inline" variant="h4">
+                                        <Typography display="inline" variant="h4" component="span">
                                             <FormattedMessage id="registerFail" />
                                         </Typography>
                                         <Button color="error" variant="outlined" component={Link} to="/login" ><Typography variant="pnspsFormHeader">

src/pages/authentication/auth-forms/IAmSmartFormWizard.js

@@ -40,7 +40,8 @@ import LoopIcon from '@mui/icons-material/Loop';
 import { useTheme } from '@mui/material/styles';
 import { useLocation } from "react-router-dom";
 import { FormattedMessage, useIntl } from "react-intl";
-import { notifyActionError } from 'utils/CommonFunction';
+import { handleActionKeyDown, notifyActionError } from 'utils/CommonFunction';
+import { ADDRESS_LINE_MAX_LENGTH, isAddressLineWithinLimit, isRegisterAddressValid, splitAddressIntoLines } from 'utils/registerValidation';
 
 // ============================|| FIREBASE - REGISTER ||============================ //
 
@@ -199,20 +200,22 @@ const CustomFormWizard = (props) => {
             "phoneCountryCode": rd?.mobileNumber?.CountryCode ?? "",
         };
 
-        if (rd?.postalAddress) {
-            if (rd?.postalAddress?.EngPremisesAddress) {
-                data["address1"] = getAddressEng(rd?.postalAddress?.EngPremisesAddress);
-            } else if (rd.postalAddress.ChiPremisesAddress) {
-                data["address1"] = getAddressChi(rd?.postalAddress?.ChiPremisesAddress);
-            }
-        } else if (rd?.residentialAddress) {
-            if (rd?.residentialAddress?.EngPremisesAddress) {
-                data["address1"] = getAddressEng(rd?.residentialAddress?.EngPremisesAddress);
-            } else if (rd?.residentialAddress?.ChiPremisesAddress) {
-                data["address1"] = getAddressChi(rd?.residentialAddress?.ChiPremisesAddress);
-            }
+        let fullAddress = '';
+        if (rd?.postalAddress?.EngPremisesAddress) {
+            fullAddress = getAddressEng(rd.postalAddress.EngPremisesAddress);
+        } else if (rd?.postalAddress?.ChiPremisesAddress) {
+            fullAddress = getAddressChi(rd.postalAddress.ChiPremisesAddress);
+        } else if (rd?.residentialAddress?.EngPremisesAddress) {
+            fullAddress = getAddressEng(rd.residentialAddress.EngPremisesAddress);
+        } else if (rd?.residentialAddress?.ChiPremisesAddress) {
+            fullAddress = getAddressChi(rd.residentialAddress.ChiPremisesAddress);
         }
 
+        const { address1, address2, address3 } = splitAddressIntoLines(fullAddress);
+        data["address1"] = address1;
+        data["address2"] = address2;
+        data["address3"] = address3;
+
         setIAmSmartData(data);
 
     }
@@ -300,6 +303,8 @@ const CustomFormWizard = (props) => {
             formik.setFieldValue("phone", iAmSmartData.phone ?? "");
             formik.setFieldValue("phoneCountryCode", iAmSmartData.phoneCountryCode ?? "");
             formik.setFieldValue("address1", iAmSmartData.address1 ?? "");
+            formik.setFieldValue("address2", iAmSmartData.address2 ?? "");
+            formik.setFieldValue("address3", iAmSmartData.address3 ?? "");
             props.setIdNo(iAmSmartData.idNo ?? "");
             setLodingData(false)
         }
@@ -321,7 +326,7 @@ const CustomFormWizard = (props) => {
 
     /** All step-0 checks except duplicate-email result from /checkE1 (see checkEmail state). */
     const computeStep0ValidSync = (data) => (
-        data.address1 !== "" &&
+        isRegisterAddressValid(data) &&
         data.email !== "" &&
         data.emailConfirm !== "" &&
         data.email == data.emailConfirm &&
@@ -431,6 +436,7 @@ const CustomFormWizard = (props) => {
                 .then((response) => {
                     console.log(response)
                     setCheckUpload(true)
+                    props.onRegistrationComplete?.();
                     setLoding(false);
                 })
                 .catch(error => {
@@ -509,7 +515,17 @@ const CustomFormWizard = (props) => {
             const syncOk = computeStep0ValidSync(values);
             if (!syncOk) {
                 setisValid(false);
-                if (!isDistrictSelectionValid()) {
+                if (!isRegisterAddressValid(values)) {
+                    if (values.address1 === '') {
+                        notifyActionError(intl.formatMessage({ id: 'validateAddressLine1' }));
+                    } else if (!isAddressLineWithinLimit(values.address1)) {
+                        notifyActionError(intl.formatMessage({ id: 'noMoreThenNWords' }, { num: ADDRESS_LINE_MAX_LENGTH, fieldname: intl.formatMessage({ id: 'addressLine1' }) + ": " }));
+                    } else if (!isAddressLineWithinLimit(values.address2)) {
+                        notifyActionError(intl.formatMessage({ id: 'noMoreThenNWords' }, { num: ADDRESS_LINE_MAX_LENGTH, fieldname: intl.formatMessage({ id: 'addressLine2' }) + ": " }));
+                    } else if (!isAddressLineWithinLimit(values.address3)) {
+                        notifyActionError(intl.formatMessage({ id: 'noMoreThenNWords' }, { num: ADDRESS_LINE_MAX_LENGTH, fieldname: intl.formatMessage({ id: 'addressLine3' }) + ": " }));
+                    }
+                } else if (!isDistrictSelectionValid()) {
                     setDistrictErrStr(getRequiredErrStr("district"));
                     setCheckDistrict(true);
                     notifyActionError(intl.formatMessage({ id: 'require' }, { fieldname: intl.formatMessage({ id: 'district' }) }));
@@ -550,15 +566,15 @@ const CustomFormWizard = (props) => {
                                 <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
     
                                     <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
-                                        <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>
+                                        <Typography display="inline" variant="h3" component="h1" sx={{ color: '#1A4399' }}>
                                             <FormattedMessage id="becomeNewPersonalUser" />
                                         </Typography>
                                     </div>
     
-                                    <Typography mt={0.25} variant="h6" sx={{ color: '#B00020' }}>
+                                    <Typography mt={0.25} variant="h6" component="span" sx={{ color: '#B00020' }}>
                                         <FormattedMessage id="requireString" />。
                                     </Typography>
-                                    <Stack mt={1} direction="row" style={{ alignItems: "center" }}><img src={iAmSmartICon} alt="iAM Smart" width="25" /><Typography mt={0.25} variant="h6" >: <FormattedMessage id="MSG.providedByIAmSmart" /></Typography></Stack>
+                                    <Stack mt={1} direction="row" style={{ alignItems: "center" }}><img src={iAmSmartICon} alt="iAM Smart" width="25" /><Typography mt={0.25} variant="h6" component="span" >: <FormattedMessage id="MSG.providedByIAmSmart" /></Typography></Stack>
     
                                 </Stack>
                             </Grid>
@@ -566,7 +582,7 @@ const CustomFormWizard = (props) => {
                                 <Grid container spacing={1}>
                                     <Grid item xs={12} mt={1} mb={1}>
                                         <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                            <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
+                                            <Typography display="inline" variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                                 <FormattedMessage id="yourPersonalInformation" />
                                             </Typography>
                                         </Stack>
@@ -575,17 +591,20 @@ const CustomFormWizard = (props) => {
                                         <Grid container sx={{ mb: 1 }}>
     
                                             <InputLabel htmlFor="idDocType-signup">
-                                                <Typography variant="h5" sx={{ mr: 1 }}>
+                                                <Typography variant="h5" component="span" sx={{ mr: 1 }}>
                                                     <FormattedMessage id="HKIDcard" />: {iAmSmartData.idNo ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : <></>}
                                                     {/* {iAmSmartData.idNo + "(" + iAmSmartData.checkDigit + ")"} */}
                                                 </Typography>
                                                 <Stack direction="row">
-                                                    <Typography variant="h5">
+                                                    <Typography variant="h5" component="span">
                                                         {iAmSmartData?.idNo?.slice(0, 4)}{showId ? iAmSmartData?.idNo?.slice(4) : "****"}{showId ? '(' + iAmSmartData.checkDigit + ')' : null}
                                                     </Typography>
                                                     <IconButton
+                                                        role="button"
+                                                        tabIndex={0}
                                                         aria-label={intl.formatMessage({ id: 'ariaToggleIdVisibility' })}
                                                         onClick={handleClickShowId}
+                                                        onKeyDown={(event) => handleActionKeyDown(event, handleClickShowId)}
                                                         onMouseDown={handleMouseDownId}
                                                         edge="end"
                                                         size="medium"
@@ -600,7 +619,7 @@ const CustomFormWizard = (props) => {
                                     <Grid item xs={12} md={6}>
                                         <Stack spacing={1}>
                                             <InputLabel htmlFor="enName-signup">
-                                                <Typography variant="h5">
+                                                <Typography variant="h5" component="span">
                                                     <FormattedMessage id="userEnglishName" />: {iAmSmartData.enName}{iAmSmartData.enName ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : <></>}
                                                 </Typography>
     
@@ -610,7 +629,7 @@ const CustomFormWizard = (props) => {
                                     <Grid item xs={12} md={6}>
                                         <Stack spacing={1}>
                                             <InputLabel htmlFor="chName-signup">
-                                                <Typography variant="h5">
+                                                <Typography variant="h5" component="span">
                                                     {intl.formatMessage({ id: 'userChineseName' })}: {iAmSmartData.chName}{iAmSmartData.chName ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : <></>}
                                                 </Typography>
                                             </InputLabel>
@@ -619,7 +638,7 @@ const CustomFormWizard = (props) => {
                                     <Grid item xs={12}>
                                         <Stack spacing={1}>
                                             <InputLabel htmlFor="address1-signup">
-                                                <Typography variant="h5">
+                                                <Typography variant="h5" component="span">
                                                     <FormattedMessage id="formAddress" />
                                                     <span style={{ color: '#B00020' }}>*</span>
     
@@ -638,6 +657,7 @@ const CustomFormWizard = (props) => {
                                                     placeholder={intl.formatMessage({ id: 'addressLine1' })}
                                                     onBlur={formik.handleBlur}
                                                     inputProps={{
+                                                        maxLength: ADDRESS_LINE_MAX_LENGTH,
                                                         onKeyDown: (e) => {
                                                             if (e.key === 'Enter') {
                                                                 e.preventDefault();
@@ -659,6 +679,7 @@ const CustomFormWizard = (props) => {
                                                     onChange={formik.handleChange}
                                                     placeholder={intl.formatMessage({ id: 'addressLine2' })}
                                                     inputProps={{
+                                                        maxLength: ADDRESS_LINE_MAX_LENGTH,
                                                         onKeyDown: (e) => {
                                                             if (e.key === 'Enter') {
                                                                 e.preventDefault();
@@ -681,6 +702,7 @@ const CustomFormWizard = (props) => {
                                                     onChange={formik.handleChange}
                                                     placeholder={intl.formatMessage({ id: 'addressLine3' })}
                                                     inputProps={{
+                                                        maxLength: ADDRESS_LINE_MAX_LENGTH,
                                                         onKeyDown: (e) => {
                                                             if (e.key === 'Enter') {
                                                                 e.preventDefault();
@@ -772,7 +794,7 @@ const CustomFormWizard = (props) => {
                                     </Grid>
                                     <Grid item xs={12} mt={1} mb={1}>
                                         <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                            <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
+                                            <Typography display="inline" variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                                 <FormattedMessage id="yourContact" />
                                             </Typography>
                                         </Stack>
@@ -782,7 +804,7 @@ const CustomFormWizard = (props) => {
                                             <Grid item xs={12} md={6}>
                                                 <Stack spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
                                                     <InputLabel htmlFor="email-login">
-                                                        <Typography variant="h5">
+                                                        <Typography variant="h5" component="span">
                                                             <FormattedMessage id="userContactEmail" />
                                                             <span style={{ color: '#B00020' }}>*</span>
     
@@ -828,7 +850,7 @@ const CustomFormWizard = (props) => {
                                             <Grid item xs={12} md={6}>
                                                 <Stack spacing={1} >
                                                     <InputLabel htmlFor="emailConfirm-login">
-                                                        <Typography variant="h5">
+                                                        <Typography variant="h5" component="span">
                                                             <FormattedMessage id="confirmEmail" />
                                                             <span style={{ color: '#B00020' }}>*</span>
                                                         </Typography>
@@ -877,7 +899,7 @@ const CustomFormWizard = (props) => {
                                                     <Grid item xs={12} md={12}>
                                                         <Stack direction="column" spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
                                                             <InputLabel htmlFor="phone-signup">
-                                                                <Typography variant="h5">
+                                                                <Typography variant="h5" component="span">
                                                                     <FormattedMessage id="userContactNumber" />
                                                                     <span style={{ color: '#B00020' }}>*</span>
                                                                     
@@ -956,7 +978,7 @@ const CustomFormWizard = (props) => {
                                                     <Grid item xs={12} md={12}>
                                                         <Stack spacing={1} direction="column">
                                                             <InputLabel htmlFor="fax-signup">
-                                                                <Typography variant="h5">
+                                                                <Typography variant="h5" component="span">
                                                                     <FormattedMessage id="userFaxNumber" />
                                                                 </Typography>
                                                             </InputLabel>
@@ -1023,7 +1045,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} md={12}>
                                     <Grid container>
                                         <Grid item xs={12} md={12}>
-                                            <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
+                                            <Typography display="inline" variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                                 <FormattedMessage id="termsAndCondition" />
                                                 <span style={{ color: '#B00020' }}>*</span>
                                             </Typography>
@@ -1031,7 +1053,7 @@ const CustomFormWizard = (props) => {
                                         <Grid item xs={12} md={12}>
                                             <Grid container>
                                                 <Grid item xs={12} md={12}>
-                                                    <Typography variant="h5" sx={{ textAlign: "left", borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0C489E" }}>
+                                                    <Typography sx={{ textAlign: "left", borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0c489e" }}>
     
                                                         <div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "termsAndCon" }) }} />
                                                     </Typography>
@@ -1049,7 +1071,7 @@ const CustomFormWizard = (props) => {
                                                                     color="primary"
                                                                     size="small"
                                                                 />
-                                                                <Typography variant="h5">
+                                                                <Typography variant="h5" component="span">
                                                                     <FormattedMessage id="iConfirm" />
                                                                 </Typography>
                                                             </Grid>
@@ -1066,7 +1088,7 @@ const CustomFormWizard = (props) => {
                                                                     size="small"
                                                                     
                                                                 />
-                                                                <Typography variant="h5">
+                                                                <Typography variant="h5" component="span">
                                                                     <FormattedMessage id="rejectTerms" />
                                                                 </Typography>
                                                             </Grid>
@@ -1080,7 +1102,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} lg={12}>
                                     <Grid container>
                                         <Stack direction="column">
-                                            <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
+                                            <Typography display="inline" variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                                 <FormattedMessage id="verify" />
                                                 <span style={{ color: '#B00020' }}>*</span>
                                             </Typography>
@@ -1089,7 +1111,14 @@ const CustomFormWizard = (props) => {
                                                     <img src={captchaImg} alt="" />
                                                 </Grid>
                                                 <Grid item xs={1} lg={1} style={{ "border": "0px solid black" }}>
-                                                    <IconButton aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })} size="large" onClick={() => { onCaptchaChange() }}>
+                                                    <IconButton
+                                                        role="button"
+                                                        tabIndex={0}
+                                                        aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })}
+                                                        size="large"
+                                                        onClick={() => { onCaptchaChange() }}
+                                                        onKeyDown={(event) => handleActionKeyDown(event, () => onCaptchaChange())}
+                                                    >
                                                         <LoopIcon fontSize="inherit" />
                                                     </IconButton>
                                                 </Grid>
@@ -1123,9 +1152,9 @@ const CustomFormWizard = (props) => {
                                                     onClick={playCaptchaAudio}
                                                     aria-label={intl.formatMessage({ id: "captchaPlayAudio" })}
                                                     sx={{
-                                                        backgroundColor: '#0C489E',
+                                                        backgroundColor: '#0c489e',
                                                         color: '#FFFFFF',
-                                                        '&:hover': { backgroundColor: '#093A7A' },
+                                                        '&:hover': { backgroundColor: '#1565c0' },
                                                     }}
                                                 >
                                                     <FormattedMessage id="captchaPlayAudio" />
@@ -1143,7 +1172,7 @@ const CustomFormWizard = (props) => {
                             <Grid item xs={12} md={12}>
                                 <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                     <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
-                                        <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>
+                                        <Typography display="inline" variant="h3" component="h1" sx={{ color: '#1A4399' }}>
                                             <FormattedMessage id="becomeNewPersonalUser" />
                                         </Typography>
                                     </div>
@@ -1153,7 +1182,7 @@ const CustomFormWizard = (props) => {
                                 <Grid container spacing={2}>
                                     <Grid item xs={12} mt={1} mb={1}>
                                         <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                            <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
+                                            <Typography display="inline" variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                                 <FormattedMessage id="yourPersonalInformation" />
                                             </Typography>
                                             {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
@@ -1163,20 +1192,23 @@ const CustomFormWizard = (props) => {
                                     </Grid>
                                     <Grid item xs={12} md={12} >
                                         <Stack direction="row">
-                                            <Typography variant="h5" color={theme.palette.grey[600]} sx={{ mr: 1 }}>
+                                            <Typography variant="h5" component="h2" color={theme.palette.grey[600]} sx={{ mr: 1 }}>
                                                 <FormattedMessage id="userIdDoc" />
                                             </Typography>
-                                            <Typography variant="h5" name="preview-idDocType-1">
+                                            <Typography variant="h5" component="span" name="preview-idDocType-1">
                                                 {formik?.values?.idNo?.slice(0, 4)}
                                                 {/* {formik.values.idNo + "(" + formik.values.checkDigit + ")"} */}
                                             </Typography>
-                                            <Typography variant="h5" name="preview-idDocType-2">
+                                            <Typography variant="h5" component="span" name="preview-idDocType-2">
                                                 {showComId ? formik?.values?.idNo?.slice(4) : "****"}{showComId ? '(' + formik.values.checkDigit + ')' : null}
                                                 {/* {formik.values.idNo + "(" + formik.values.checkDigit + ")"} */}
                                             </Typography>
                                             <IconButton
+                                                role="button"
+                                                tabIndex={0}
                                                 aria-label={intl.formatMessage({ id: 'ariaToggleIdVisibility' })}
                                                 onClick={handleClickShowComId}
+                                                onKeyDown={(event) => handleActionKeyDown(event, handleClickShowComId)}
                                                 onMouseDown={handleMouseDownComId}
                                                 edge="end"
                                                 size="medium"
@@ -1187,10 +1219,10 @@ const CustomFormWizard = (props) => {
                                     </Grid>
                                     <Grid item xs={12} md={6}>
                                         <Stack spacing={1} direction="row">
-                                            <Typography variant="h5" color={theme.palette.grey[600]}>
+                                            <Typography variant="h5" component="span" color={theme.palette.grey[600]}>
                                                 <FormattedMessage id="userEnglishName" />:
                                             </Typography>
-                                            <Typography variant="h5" id="preview-enName-signup">
+                                            <Typography variant="h5" component="span" id="preview-enName-signup">
                                                 {formik.values.enName}
                                             </Typography>
                                             {iAmSmartData.enName ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : <></>}
@@ -1198,48 +1230,48 @@ const CustomFormWizard = (props) => {
                                     </Grid>
                                     <Grid item xs={12} md={6}>
                                         <Stack spacing={1} direction="row">
-                                            <Typography variant="h5" color={theme.palette.grey[600]}>
+                                            <Typography variant="h5" component="span" color={theme.palette.grey[600]}>
                                                 <FormattedMessage id="userChineseName" />:
                                             </Typography>
-                                            <Typography variant="h5" id="preview-chName-signup">
+                                            <Typography variant="h5" component="span" id="preview-chName-signup">
                                                 {formik.values.chName}
                                             </Typography>
                                         </Stack>
                                     </Grid>
                                     <Grid item xs={12}>
                                         <Stack spacing={1} direction="column">
-                                            <Typography variant="h5" color={theme.palette.grey[600]}>
+                                            <Typography variant="h5" component="span" color={theme.palette.grey[600]}>
                                                 <FormattedMessage id="formAddress" />:
                                             </Typography>
                                             <Stack spacing={1} direction="column">
-                                                <Typography variant="h5" id="preview-address1-signup">
+                                                <Typography variant="h5" component="span" id="preview-address1-signup">
                                                     {formik.values.address1}
                                                 </Typography>
                                                 {formik.values.address2 != null ?
-                                                    <Typography variant="h5" id="preview-address2-signup">
+                                                    <Typography variant="h5" component="span" id="preview-address2-signup">
                                                         {formik.values.address2}
                                                     </Typography>
                                                     : null}
                                                 {formik.values.address3 != null ?
-                                                    <Typography variant="h5" id="preview-address3-signup">
+                                                    <Typography variant="h5" component="span" id="preview-address3-signup">
                                                         {formik.values.address3}
                                                     </Typography>
                                                     : null}
                                                 {selectedAddress5.type === "hongKong" ?
                                                     <Stack direction="column">
-                                                        {/* <Typography variant="h5" color={theme.palette.grey[600]} id="preview-address4-signup">
+                                                        {/* <Typography variant="h5" component="span" color={theme.palette.grey[600]} id="preview-address4-signup">
                                                             <FormattedMessage id="region" />:
                                                         </Typography> */}
-                                                        <Typography variant="h5">
+                                                        <Typography variant="h5" component="span">
                                                             {!selectedAddress4 ? "" : intl.formatMessage({ id: selectedAddress4.type })}
                                                         </Typography>
                                                     </Stack>
                                                     : null}
                                                 <Stack direction="column">
-                                                    {/* <Typography variant="h5" color={theme.palette.grey[600]} id="preview-address5-signup">
+                                                    {/* <Typography variant="h5" component="span" color={theme.palette.grey[600]} id="preview-address5-signup">
                                                         <FormattedMessage id="regionOrCountry" />:
                                                     </Typography> */}
-                                                    <Typography variant="h5">
+                                                    <Typography variant="h5" component="span">
                                                         {intl.formatMessage({ id: selectedAddress5.type })}
                                                     </Typography>
                                                 </Stack>
@@ -1248,27 +1280,27 @@ const CustomFormWizard = (props) => {
                                     </Grid>
                                     <Grid item xs={12} mt={1} mb={1}>
                                         <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                            <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
+                                            <Typography display="inline" variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                                 <FormattedMessage id="yourContact" />
                                             </Typography>
                                         </Stack>
                                     </Grid>
                                     <Grid item xs={12} md={12}>
                                         <Stack spacing={1} direction="row">
-                                            <Typography variant="h5" color={theme.palette.grey[600]}>
+                                            <Typography variant="h5" component="span" color={theme.palette.grey[600]}>
                                                 <FormattedMessage id="userContactEmail" />:
                                             </Typography>
-                                            <Typography variant="h5" id="preview-email-signup">
+                                            <Typography variant="h5" component="span" id="preview-email-signup">
                                                 {formik.values.email}
                                             </Typography>
                                         </Stack>
                                     </Grid>
                                     <Grid item xs={12} md={6}>
                                         <Stack spacing={1} direction="row">
-                                            <Typography variant="h5" color={theme.palette.grey[600]}>
+                                            <Typography variant="h5" component="span" color={theme.palette.grey[600]}>
                                                 <FormattedMessage id="userContactNumber" />:
                                             </Typography>
-                                            <Typography variant="h5" id="preview-phone-signup">
+                                            <Typography variant="h5" component="span" id="preview-phone-signup">
                                                 +{formik.values.phoneCountryCode} {formik.values.phone}
                                             </Typography>
                                         </Stack>
@@ -1276,10 +1308,10 @@ const CustomFormWizard = (props) => {
                                     {formik.values.faxCountryCode != "" && formik.values.fax != "" ?
                                         <Grid item xs={12} md={6}>
                                             <Stack spacing={1} direction="row">
-                                                <Typography variant="h5" color={theme.palette.grey[600]}>
+                                                <Typography variant="h5" component="span" color={theme.palette.grey[600]}>
                                                     <FormattedMessage id="userFaxNumber" />:
                                                 </Typography>
-                                                <Typography variant="h5" id="preview-fax-signup">
+                                                <Typography variant="h5" component="span" id="preview-fax-signup">
                                                     +{formik.values.faxCountryCode} {formik.values.fax}
                                                 </Typography>
                                             </Stack>
@@ -1299,13 +1331,13 @@ const CustomFormWizard = (props) => {
                                         // SUCCESS page
                                         <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
                                             <CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} />
-                                            <Typography display="inline" variant="h4">
+                                            <Typography display="inline" variant="h4" component="span">
                                                 <FormattedMessage id="registerSubmitted" />
                                             </Typography>
-                                            <Typography display="inline" variant="h4">
+                                            <Typography display="inline" variant="h4" component="span">
                                                 <FormattedMessage id="emailSent" />
                                             </Typography>
-                                            <Button variant="outlined" component={Link} to="/login" ><Typography variant="h5">
+                                            <Button variant="outlined" component={Link} to="/login" ><Typography variant="h5" component="span">
                                                 <FormattedMessage id="backToLogin" />
                                             </Typography></Button>
                                         </Stack>
@@ -1314,10 +1346,10 @@ const CustomFormWizard = (props) => {
                                         <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
                                             {/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
                                             <CancelOutlinedIcon color="error" sx={{ width: "200px", height: "200px" }} />
-                                            <Typography display="inline" variant="h4">
+                                            <Typography display="inline" variant="h4" component="span">
                                                 <FormattedMessage id="registerFail" />
                                             </Typography>
-                                            <Button color="error" variant="outlined" component={Link} to="/login" ><Typography variant="h5">
+                                            <Button color="error" variant="outlined" component={Link} to="/login" ><Typography variant="h5" component="span">
                                                 <FormattedMessage id="backToLogin" />
                                             </Typography></Button>
                                         </Stack>

src/pages/authentication/auth-forms/UploadFileTable.js

@@ -1,116 +1,88 @@
 // material-ui
-import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
-import {
-    DataGrid,
-    GridActionsCellItem,
-    GridRowModes
-} from "@mui/x-data-grid";
 import * as React from 'react';
 import { useEffect } from "react";
-// import {useNavigate} from "react-router-dom";
-// import { useTheme } from '@mui/material/styles';
 import {
     Box,
     Stack,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
     Typography
 } from '@mui/material';
 import { FormattedMessage, useIntl } from "react-intl";
+import FileDeleteButton from 'components/FileDeleteButton';
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function UploadFileTable({ recordList, setUpdateRows, }) {
 
     const [rows, setRows] = React.useState(recordList);
-    const [rowModesModel, setRowModesModel] = React.useState({});
-    // const theme = useTheme();
 
     const intl = useIntl();
 
-    // const navigate = useNavigate()
-
     useEffect(() => {
         setRows(recordList);
-        // console.log(disableDelete);
     }, [recordList]);
 
-    function NoRowsOverlay() {
+    const handleCancelClick = (id) => {
+        setRows((prevRows) => {
+            const newRows = prevRows.filter((row) => row.id !== id);
+            setUpdateRows(newRows);
+            return newRows;
+        });
+    };
+
+    const formatFileSize = (size) => `${Math.ceil(size / 1024)} KB`;
+
+    if (rows.length === 0) {
         return (
-            <Stack height="100%" alignItems="center" justifyContent="center">
+            <Box
+                sx={{
+                    height: '200px',
+                    width: '100%',
+                    border: 1,
+                    borderColor: 'divider',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}
+            >
                 <Typography variant="h6">
                     <FormattedMessage id="noFile"/>
                 </Typography>
-                {/* <pre>(rows=&#123;[]&#125;)</pre> */}
-            </Stack>
+            </Box>
         );
     }
 
-    const handleCancelClick = (id) => () => {
-        setRowModesModel({
-            ...rowModesModel,
-            [id]: { mode: GridRowModes.View, ignoreModifications: true },
-        });
-        // console.log("Starting Delete")
-        // const editedRow = rows.find((row) => row.id === id);
-        // console.log(editedRow)
-        // console.log(editedRow.isNew)
-        setUpdateRows(rows.filter((row) => row.id !== id));
-        setRows(rows.filter((row) => row.id !== id));
-    }
-
-    const columns = [
-        {
-            field: 'actions',
-            type: 'actions',
-            headerName: '',
-            width: 30,
-            cellClassName: 'actions',
-            // hide:true,
-            getActions: ({ id }) => {
-                return [
-                    <GridActionsCellItem
-                        key="OutSave"
-                        icon={<RemoveCircleOutlineIcon />}
-                        label="delete"
-                        className="textPrimary"
-                        onClick={handleCancelClick(id)}
-                        color="error"
-                    />]
-            },
-        },
-        {
-            id: 'name',
-            field: 'name',
-            headerName: intl.formatMessage({ id: 'fileName' }),
-            flex: 4,
-        },
-        {
-            id: 'size',
-            field: 'size',
-            headerName: intl.formatMessage({ id: 'fileSize' }),
-            valueGetter: (params) => {
-                // console.log(params)
-                return Math.ceil(params.value / 1024) + " KB";
-            },
-            flex: 2,
-        },
-    ];
-
     return (
-        <Box style={{ height: '200px', width: '100%' }}>
-            <DataGrid
-                rows={rows}
-                columns={columns}
-                editMode="row"
-                sx={{ border: 1 }}
-                rowModesModel={rowModesModel}
-                disablePagination
-                components={{ NoRowsOverlay, }}
-                // hideFooterPagination={true}
-                disableSelectionOnClick
-                disableColumnMenu
-                disableColumnSelector
-                hideFooter
-                getRowHeight={()=>"auto"}
-            />
+        <Box sx={{ height: '200px', width: '100%', border: 1, borderColor: 'divider', overflow: 'auto' }}>
+            <Table size="small" aria-label={intl.formatMessage({ id: 'fileName' })}>
+                <TableHead>
+                    <TableRow>
+                        <TableCell padding="checkbox" sx={{ width: 48 }} />
+                        <TableCell>{intl.formatMessage({ id: 'fileName' })}</TableCell>
+                        <TableCell align="right">{intl.formatMessage({ id: 'fileSize' })}</TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {rows.map((row) => (
+                        <TableRow key={row.id}>
+                            <TableCell padding="checkbox">
+                                <FileDeleteButton onDelete={() => handleCancelClick(row.id)} />
+                            </TableCell>
+                            <TableCell>
+                                <Stack direction="row" alignItems="center">
+                                    <Typography variant="body2">{row.name}</Typography>
+                                </Stack>
+                            </TableCell>
+                            <TableCell align="right">
+                                <Typography variant="body2">{formatFileSize(row.size)}</Typography>
+                            </TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
         </Box>
     );
 }

src/pages/components-overview/Color.js

@@ -68,7 +68,7 @@ const ComponentColor = () => (
             <ColorBox bgcolor="primary.200" data={{ label: 'Blue-3', color: '#91d5ff' }} title="primary[200]" dark />
             <ColorBox bgcolor="primary.light" data={{ label: 'Blue-4', color: '#69c0ff' }} title="primary.light" dark />
             <ColorBox bgcolor="primary.400" data={{ label: 'Blue-5', color: '#40a9ff' }} title="primary[400]" />
-            <ColorBox bgcolor="primary.main" data={{ label: 'Blue-6', color: '#1890ff' }} title="primary.main" main />
+            <ColorBox bgcolor="primary.main" data={{ label: 'Blue-6', color: '#0c489e' }} title="primary.main" main />
             <ColorBox bgcolor="primary.dark" data={{ label: 'Blue-7', color: '#096dd9' }} title="primary.dark" />
             <ColorBox bgcolor="primary.700" data={{ label: 'Blue-8', color: '#0050b3' }} title="primary[700]" />
             <ColorBox bgcolor="primary.darker" data={{ label: 'Blue-9', color: '#003a8c' }} title="primary.darker" />

src/pages/dashboard/GLD/index.js

@@ -45,7 +45,7 @@ const DashboardDefault = () => {
       <Grid item xs={12}>
         <div style={BackgroundHead}>
           <Stack direction="row"  height='70px' justifyContent="flex-start" alignItems="center">
-            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>
+            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>
               {getWelcomeMsg()}, {userData.fullenName}
             </Typography>
           </Stack>

src/pages/dashboard/Public/Notice.js

@@ -32,9 +32,15 @@ const SearchDemandNoteForm = (props) => {
         listData.map((item, index) => {
             list.push(
                 <Stack key={item.id != null ? item.id : `announce-${index}`} direction="column">
-                    <Typography variant='h4' align="justify"><b>{locale === 'en' ?item.subjectEng:locale === 'zh-HK' ?item.subjectCht:item.subjectChs}</b></Typography>
-                    <Typography align="justify">{DateUtils.dateValue(item.announceDate)}</Typography>
-                    <Typography sx={{pt: 1}} align="justify">{locale === 'en' ?item.contentEng:locale === 'zh-HK' ?item.contentCht:item.contentChs}</Typography>
+                    <Typography component="h3" variant="h5" align="justify">
+                        {locale === 'en' ? item.subjectEng : locale === 'zh-HK' ? item.subjectCht : item.subjectChs}
+                    </Typography>
+                    <Typography component="span" variant="subtitle2" sx={{ color: '#000' }} align="justify">
+                        {DateUtils.dateValue(item.announceDate)}
+                    </Typography>
+                    <Typography component="span" variant="h6" sx={{ pt: 1, fontWeight: 400 }} align="justify">
+                        {locale === 'en' ? item.contentEng : locale === 'zh-HK' ? item.contentCht : item.contentChs}
+                    </Typography>
                     <Divider sx={{ pt: 1 }} />
                 </Stack>
             )

src/pages/dashboard/Public/index.js

@@ -100,22 +100,35 @@ const DashboardDefault = () => {
                         p: 2,
                         justifyContent: "flex-start",
                         textTransform: "none",
+                        fontSize: "inherit",
+                        fontWeight: "inherit",
 
                         // text always readable
                         color: "#1A1A1A",
 
                         // unread gets subtle highlight
                         backgroundColor: item.readTime ? "transparent" : "#F5F7FA",
-                        fontWeight: item.readTime ? 400 : 600,
 
                         "&:hover": {
                           backgroundColor: "#EEF2F7",
                         },
                       }}
                     >
-                        <Stack direction="column" >
-                            <Typography variant='string' align="justify"><b>{item.subject}</b></Typography>
-                            <Typography align="justify">{DateUtils.datetimeStr(item.sentDate)}</Typography>
+                        <Stack direction="column">
+                            <Typography
+                              component="h3"
+                              variant="h6"
+                              align="justify"
+                              sx={(theme) => ({
+                                ...theme.typography.h6,
+                                fontWeight: item.readTime ? 400 : 600,
+                              })}
+                            >
+                              {item.subject}
+                            </Typography>
+                            <Typography component="span" variant="subtitle2" sx={{ color: '#000' }} align="justify">
+                              {DateUtils.datetimeStr(item.sentDate)}
+                            </Typography>
                         </Stack>
                     </Button>
             ));
@@ -191,9 +204,9 @@ const DashboardDefault = () => {
                     p: 4,
                     justifyContent: "flex-start",
                     backgroundColor: "#e1edfc",
-                    border: "0px solid #0C489E",   // DARKER border (3:1+)
+                    border: "0px solid #0c489e",   // DARKER border (3:1+)
                     borderRadius: "10px",
-                    color: "#0C489E",              // icon + default text color
+                    color: "#1565C0",              // icon + default text color
                     "&:hover": {
                       backgroundColor: "#d6e6fb"
                     }
@@ -202,7 +215,7 @@ const DashboardDefault = () => {
                   <Stack direction="row" spacing={2}>
                     <AdsClickRoundedIcon />
                     <Stack direction="column" alignItems="flex-start">
-                      <Typography component="h2" variant="h4" sx={{ color: "#0C489E" }}>
+                      <Typography component="h2" variant="h4" sx={{ color: "#1565C0" }}>
                         <FormattedMessage id="submitApplication" />
                       </Typography>
                       <Typography sx={{ color: "#1A1A1A" }}>
@@ -220,7 +233,7 @@ const DashboardDefault = () => {
                     aria-label={intl.formatMessage({ id: 'viewAllAnnouncement' })}
                     onClick={() => { navigate("/announcement/search"); }}
                     sx={{
-                      color: '#0C489E',
+                      color: '#1565C0',
                       textTransform: 'none',
                       textDecoration: 'underline',
                       '&:hover': { textDecoration: 'underline' }
@@ -245,7 +258,7 @@ const DashboardDefault = () => {
                     aria-label={intl.formatMessage({ id: 'viewAllSystemMessage' })}
                     onClick={() => { navigate("/msg/search"); }}
                     sx={{
-                      color: '#0C489E',
+                      color: '#1565C0',
                       textTransform: 'none',
                       textDecoration: 'underline',
                       '&:hover': {
@@ -256,7 +269,7 @@ const DashboardDefault = () => {
                       <FormattedMessage id="viewAllSystemMessage" />
                     </u></Button>
                 </Stack>
-                <Box xs={12} md={12} sx={{ p: 1, fontSize: 12, border: '3px solid #eee', borderRadius: '10px' }} >
+                <Box xs={12} md={12} sx={{ p: 1, border: '3px solid #eee', borderRadius: '10px' }} >
                   <Message 
                     itemList = {itemList}
                   />
@@ -281,7 +294,7 @@ const DashboardDefault = () => {
                   <FormattedMessage id="systemNotice" />
                 </Typography>
               </DialogTitle>
-              <DialogContent style={{ color: 'red', display: 'flex', }}>
+              <DialogContent style={{ color: '#B00020', display: 'flex', }}>
                   <Typography variant="h5" style={{ padding: '16px' }}>
                     <div dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "suspensionMessageText" }) }} />
                   </Typography>

src/pages/extra-pages/UserMenuPub1/index.js

@@ -23,7 +23,7 @@ const BackgroundHead = {
   height: "auto",
   backgroundSize: "contain",
   backgroundRepeat: "no-repeat",
-  backgroundColor: "#0C489E",
+  backgroundColor: "#0c489e",
   backgroundPosition: "right",
 };
 

src/pages/pnspsUserGroupDetailPage/index.js

@@ -226,7 +226,7 @@ const UserMaintainPage = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>{isNewRecord ? "Create User Group" : "Maintain User Group"}</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>{isNewRecord ? "Create User Group" : "Maintain User Group"}</Typography>
                         </Stack>
                     </div>
                 </Grid>

src/pages/pnspsUserGroupSearchPage/index.js

@@ -72,7 +72,7 @@ const UserGroupSearchPanel = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>
                                 View User Group
                             </Typography>
                         </Stack>

src/themes/buttonConst.js

@@ -69,6 +69,9 @@ export const PNSPS_BUTTON_THEME = createTheme({
             },
         },
         MuiButton: {
+            defaultProps: {
+                disableRipple: true,
+            },
             styleOverrides: {
                 /* -----------------------------
                 Icon alignment
@@ -93,17 +96,24 @@ export const PNSPS_BUTTON_THEME = createTheme({
                 '@media (min-width: 1280px)': { minWidth: '9vw' },
                 textTransform: 'none',
                 alignItems: 'normal',
+                '&:active': {
+                    boxShadow: 'none',
+                    transform: 'none',
+                },
                 },
 
                 /* -----------------------------
                 Remove default contained elevation / blue focus
                 ------------------------------ */
-                contained: {
+                contained: ({ theme, ownerState }) => ({
                 boxShadow: 'none',
                 '&:hover': { boxShadow: 'none' },
-                '&:active': { boxShadow: 'none' },
-                '&.Mui-focusVisible': { boxShadow: 'none' },
+                '&:active': {
+                    backgroundColor: theme.palette[ownerState.color]?.main ?? theme.palette.primary.main,
+                    boxShadow: 'none',
                 },
+                '&.Mui-focusVisible': { boxShadow: 'none' },
+                }),
 
                 /* -----------------------------
                 RESET / CANCEL (contained + cancel)
@@ -123,7 +133,7 @@ export const PNSPS_BUTTON_THEME = createTheme({
                 },
 
                 '&:active': {
-                    backgroundColor: '#4A4A4A',
+                    backgroundColor: '#616161',
                     boxShadow: 'none !important',
                 },
 
@@ -145,10 +155,20 @@ export const PNSPS_BUTTON_THEME = createTheme({
                     backgroundColor: 'transparent',
                 },
 
+                '&:active': {
+                    backgroundColor: 'transparent',
+                },
+
                 '&.Mui-focusVisible': {
                     boxShadow: '0 0 0 3px rgba(66,66,66,0.4)',
                 },
                 },
+
+                outlined: {
+                '&:active': {
+                    backgroundColor: 'transparent',
+                },
+                },
             },
         },
     }
@@ -215,6 +235,9 @@ export const PNSPS_LONG_BUTTON_THEME = createTheme({
             },
         },
         MuiButton: {
+            defaultProps: {
+                disableRipple: true,
+            },
             styleOverrides: {
                 startIcon:{
                     display: 'flex',
@@ -240,6 +263,24 @@ export const PNSPS_LONG_BUTTON_THEME = createTheme({
                     },
                     textTransform: "none",
                     alignItems: 'normal',
+                    '&:active': {
+                        boxShadow: 'none',
+                        transform: 'none',
+                    },
+                },
+                contained: ({ theme, ownerState }) => ({
+                    boxShadow: 'none',
+                    '&:hover': { boxShadow: 'none' },
+                    '&:active': {
+                        backgroundColor: theme.palette[ownerState.color]?.main ?? theme.palette.primary.main,
+                        boxShadow: 'none',
+                    },
+                    '&.Mui-focusVisible': { boxShadow: 'none' },
+                }),
+                outlined: {
+                    '&:active': {
+                        backgroundColor: 'transparent',
+                    },
                 },
             },
         },

src/themes/colorConst.js

@@ -37,7 +37,7 @@ export const chartLineColor = [
 
 export const GENERAL_RED_COLOR = '#e03c04';
 
-export const TABLE_HEADER_TEXT_COLOR = "#3367D1";
+export const TABLE_HEADER_TEXT_COLOR = "#1565C0";
 
 export const GENERAL_INFO_COLOR = '#448df2';
 
@@ -49,6 +49,51 @@ export const GENERAL_BORDER_COLOR ='#e6ebf1';
 
 export const GENERAL_TEXT_COLOR ='#262626';
 
+/** Page header bar background (gazette banner strip). */
+export const HEADER_BACKGROUND_COLOR = '#0C489E';
+
+/** MUI default primary — used by applyPublicNotice contained button (PNSPS_LONG_BUTTON_THEME). WCAG AA: 3:1+ for UI components on white. */
+export const CONTAINED_PRIMARY_BLUE = '#0c489e';
+
+/** Validation error text/border — matches FormHelperText in styles.css (e.g. "Please enter password"). WCAG AA on white. */
+export const VALIDATION_ERROR_COLOR = '#B00020';
+
+export const PRIMARY_CONTAINED_BUTTON_SX = {
+    backgroundColor: CONTAINED_PRIMARY_BLUE,
+    color: '#FFFFFF',
+    '&:hover': {
+        backgroundColor: '#1565c0',
+    },
+};
+
+/** Dark green for Pay actions — matches PNSPS_BUTTON_THEME create color (#57B962), not light green (#4ac234). */
+export const CONTAINED_DARK_GREEN = '#57B962';
+
+export const PAY_CONTAINED_BUTTON_SX = {
+    backgroundColor: CONTAINED_DARK_GREEN,
+    color: '#FFFFFF',
+    '&:hover': {
+        backgroundColor: '#488F52',
+    },
+};
+
+export const PRIMARY_OUTLINED_BUTTON_SX = {
+    color: CONTAINED_PRIMARY_BLUE,
+    borderColor: CONTAINED_PRIMARY_BLUE,
+    '&:hover': {
+        borderColor: CONTAINED_PRIMARY_BLUE,
+        backgroundColor: 'rgba(25, 118, 210, 0.08)',
+    },
+};
+
+export const PRIMARY_TEXT_BUTTON_SX = {
+    color: CONTAINED_PRIMARY_BLUE,
+    fontWeight: 600,
+    '&:hover': {
+        backgroundColor: 'rgba(25, 118, 210, 0.08)',
+    },
+};
+
 export const formTheme = createTheme({
     components: {
         MuiFormLabel: {

src/themes/overrides/Button.js

@@ -10,17 +10,29 @@ export default function Button(theme) {
   return {
     MuiButton: {
       defaultProps: {
-        disableElevation: true
+        disableElevation: true,
+        disableRipple: true
       },
       styleOverrides: {
         root: {
-          fontWeight: 400
-        },
-        contained: {
-          ...disabledStyle
+          fontWeight: 400,
+          '&:active': {
+            boxShadow: 'none',
+            transform: 'none'
+          }
         },
+        contained: ({ theme: muiTheme, ownerState }) => ({
+          ...disabledStyle,
+          '&:active': {
+            backgroundColor: muiTheme.palette[ownerState.color]?.main ?? muiTheme.palette.primary.main,
+            boxShadow: 'none'
+          }
+        }),
         outlined: {
-          ...disabledStyle
+          ...disabledStyle,
+          '&:active': {
+            backgroundColor: 'transparent'
+          }
         }
       }
     }

src/themes/overrides/Checkbox.js

@@ -1,14 +1,31 @@
 // ==============================|| OVERRIDES - CHECKBOX ||============================== //
 
+import { CONTAINED_PRIMARY_BLUE } from '../colorConst';
+
 export default function Checkbox(theme) {
   
   const checkboxSize = "2rem"
 
   return {
     MuiCheckbox: {
+      defaultProps: {
+        disableRipple: true
+      },
       styleOverrides: {
         root: {
           color: theme.palette.secondary[300],
+          '&:hover': {
+            backgroundColor: 'transparent'
+          },
+          '&:active': {
+            backgroundColor: 'transparent'
+          },
+          '&.Mui-checked': {
+            color: CONTAINED_PRIMARY_BLUE
+          },
+          '&.Mui-focusVisible': {
+            boxShadow: '0 0 0 3px rgba(25, 118, 210, 0.35)'
+          },
           svg: {
             width: checkboxSize,
             height: checkboxSize,

src/themes/overrides/InputLabel.js

@@ -1,11 +1,22 @@
 // ==============================|| OVERRIDES - INPUT LABEL ||============================== //
 
+import { CONTAINED_PRIMARY_BLUE, VALIDATION_ERROR_COLOR } from '../colorConst';
+
 export default function InputLabel(theme) {
   return {
     MuiInputLabel: {
       styleOverrides: {
         root: {
-          color: theme.palette.grey[600]
+          color: theme.palette.grey[600],
+          '&.Mui-focused:not(.Mui-error)': {
+            color: CONTAINED_PRIMARY_BLUE
+          },
+          '&.Mui-error': {
+            color: VALIDATION_ERROR_COLOR
+          },
+          '&.Mui-focused.Mui-error': {
+            color: VALIDATION_ERROR_COLOR
+          }
         },
         outlined: {
           lineHeight: '0.8em',

src/themes/overrides/OutlinedInput.js

@@ -1,5 +1,6 @@
 // material-ui
 import { alpha } from '@mui/material/styles';
+import { CONTAINED_PRIMARY_BLUE, VALIDATION_ERROR_COLOR } from '../colorConst';
 
 // ==============================|| OVERRIDES - OUTLINED INPUT ||============================== //
 
@@ -18,22 +19,25 @@ export default function OutlinedInput(theme) {
           fontWeight: 600,
           lineHeight: 1.57,
           '&:hover .MuiOutlinedInput-notchedOutline': {
-            borderColor: theme.palette.primary.light
+            borderColor: theme.palette.grey[400]
           },
-          '&.Mui-focused': {
-            boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.2)}`,
+          '&.Mui-focused:not(.Mui-error)': {
+            boxShadow: `0 0 0 2px ${alpha(CONTAINED_PRIMARY_BLUE, 0.2)}`,
             '& .MuiOutlinedInput-notchedOutline': {
-              border: `1px solid ${theme.palette.primary.light}`
+              border: `1px solid ${CONTAINED_PRIMARY_BLUE}`
             }
           },
+          '&.Mui-error .MuiOutlinedInput-notchedOutline': {
+            borderColor: VALIDATION_ERROR_COLOR
+          },
           '&.Mui-error': {
             '&:hover .MuiOutlinedInput-notchedOutline': {
-              borderColor: theme.palette.error.light
+              borderColor: VALIDATION_ERROR_COLOR
             },
             '&.Mui-focused': {
-              boxShadow: `0 0 0 2px ${alpha(theme.palette.error.main, 0.2)}`,
+              boxShadow: `0 0 0 2px ${alpha(VALIDATION_ERROR_COLOR, 0.2)}`,
               '& .MuiOutlinedInput-notchedOutline': {
-                border: `1px solid ${theme.palette.error.light}`
+                border: `3px solid ${VALIDATION_ERROR_COLOR}`
               }
             }
           }

src/themes/overrides/Radio.js

@@ -0,0 +1,30 @@
+// ==============================|| OVERRIDES - RADIO ||============================== //
+
+import { CONTAINED_PRIMARY_BLUE } from '../colorConst';
+
+export default function Radio() {
+  return {
+    MuiRadio: {
+      defaultProps: {
+        disableRipple: true
+      },
+      styleOverrides: {
+        root: {
+          color: '#595959',
+          '&:hover': {
+            backgroundColor: 'transparent'
+          },
+          '&:active': {
+            backgroundColor: 'transparent'
+          },
+          '&.Mui-checked': {
+            color: CONTAINED_PRIMARY_BLUE
+          },
+          '&.Mui-focusVisible': {
+            boxShadow: '0 0 0 3px rgba(25, 118, 210, 0.35)'
+          }
+        }
+      }
+    }
+  };
+}

src/themes/overrides/Tab.js

@@ -3,12 +3,21 @@
 export default function Tab(theme) {
   return {
     MuiTab: {
+      defaultProps: {
+        disableRipple: true
+      },
       styleOverrides: {
         root: {
           minHeight: 46,
           color: theme.palette.text.primary,
           fontSize: "1.2rem",
-          fontWeight: 600
+          fontWeight: 600,
+          '&:active': {
+            backgroundColor: 'transparent'
+          },
+          '&:active:not(.Mui-selected)': {
+            color: theme.palette.text.primary
+          }
         }
       }
     }

src/themes/overrides/index.js

@@ -13,6 +13,7 @@ import LinearProgress from './LinearProgress';
 import Link from './Link';
 import ListItemIcon from './ListItemIcon';
 import OutlinedInput from './OutlinedInput';
+import Radio from './Radio';
 import Tab from './Tab';
 import TableCell from './TableCell';
 import Tabs from './Tabs';
@@ -40,6 +41,7 @@ export default function ComponentsOverrides(theme) {
     Link(),
     ListItemIcon(),
     OutlinedInput(theme),
+    Radio(),
     Tab(theme),
     TableCell(theme),
     Tabs(),

src/themes/theme/index.js

@@ -30,7 +30,7 @@ const Theme = (colors) => {
       200: blue[2],
       light: blue[3],
       400: blue[4],
-      main: blue[5],
+      main: '#0C489E',
       dark: blue[6],
       700: blue[7],
       darker: blue[8],

src/themes/themeConst.js

@@ -1,8 +1,7 @@
 import {createTheme} from "@mui/material";
 import Palette from "./palette";
 import Typography from "./typography";
-import {alpha} from "@mui/material/styles";
-import {GENERAL_TABLE_BOARDER_COLOR, TABLE_HEADER_TEXT_COLOR} from "./colorConst";
+import {GENERAL_TABLE_BOARDER_COLOR, TABLE_HEADER_TEXT_COLOR, CONTAINED_PRIMARY_BLUE, VALIDATION_ERROR_COLOR} from "./colorConst";
 const FONT_SIZE = '1.1rem';
 const TABLE_FONT_SIZE = '1.0rem';
 const HELPER_FONT_SIZE = '0.9rem';
@@ -44,18 +43,34 @@ export const PNSPS_THEME = createTheme({
             },
         },
         MuiButton: {
+            defaultProps: {
+                disableRipple: true,
+            },
             styleOverrides: {
                 root: ({ ownerState }) => ({
                 ...(ownerState.color === "cancel" && {
                     borderColor: "#9E9E9E",
                 }),
+                '&:active': {
+                    boxShadow: 'none',
+                    transform: 'none',
+                },
                 }),
-                contained: ({ ownerState }) => ({
+                contained: ({ theme, ownerState }) => ({
                 ...(ownerState.color === "cancel" && {
                     border: "2px solid #9E9E9E",
                     boxShadow: "none",
                 }),
+                '&:active': {
+                    backgroundColor: theme.palette[ownerState.color]?.main ?? theme.palette.primary.main,
+                    boxShadow: 'none',
+                },
                 }),
+                outlined: {
+                '&:active': {
+                    backgroundColor: 'transparent',
+                },
+                },
             },
         },
         MuiInputAdornment: {
@@ -131,6 +146,15 @@ export const PNSPS_THEME = createTheme({
                 root: {
                     color: 'rgba(0, 0, 0, 0.8)',
                     fontSize: '1.15rem',
+                    '&.Mui-focused': {
+                        color: CONTAINED_PRIMARY_BLUE,
+                    },
+                    '&.Mui-error': {
+                        color: VALIDATION_ERROR_COLOR,
+                    },
+                    '&.Mui-focused.Mui-error': {
+                        color: VALIDATION_ERROR_COLOR,
+                    },
                 },
             },
         },
@@ -220,7 +244,7 @@ export const PNSPS_THEME = createTheme({
                 },
 
                 '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-                    borderColor: theme.palette.primary.main,
+                    borderColor: CONTAINED_PRIMARY_BLUE,
                     borderWidth: 3,                 // thick focus indicator
                 },
 
@@ -232,16 +256,16 @@ export const PNSPS_THEME = createTheme({
                     padding: '5.5px 6px 5.5px 10px',  // 7.5-2, 8-2, 7.5-2, 12-2
                 },
 
-                /* Error state */
+                /* Error state — same red as FormHelperText (#B00020) */
                 '&.Mui-error .MuiOutlinedInput-notchedOutline': {
-                    borderColor: theme.palette.error.main,
+                    borderColor: VALIDATION_ERROR_COLOR,
                     borderWidth: 1,
                 },
                 '&.Mui-error:hover .MuiOutlinedInput-notchedOutline': {
-                    borderColor: theme.palette.error.main,
+                    borderColor: VALIDATION_ERROR_COLOR,
                 },
                 '&.Mui-error.Mui-focused .MuiOutlinedInput-notchedOutline': {
-                    borderColor: theme.palette.error.main,
+                    borderColor: VALIDATION_ERROR_COLOR,
                     borderWidth: 3,
                 },
 
@@ -262,6 +286,9 @@ export const PNSPS_THEME = createTheme({
             },
         },
         MuiCheckbox: {
+            defaultProps: {
+                disableRipple: true,
+            },
             styleOverrides: {
                 root: {
                 /* Default (unchecked) state — darker */
@@ -272,14 +299,44 @@ export const PNSPS_THEME = createTheme({
                     backgroundColor: 'transparent',
                 },
 
-                /* Checked state */
+                '&:active': {
+                    backgroundColor: 'transparent',
+                },
+
+                /* Checked state — same blue as applyPublicNotice button */
                 '&.Mui-checked': {
-                    color: theme.palette.primary.main,
+                    color: CONTAINED_PRIMARY_BLUE,
                 },
 
                 /* Focus-visible */
                 '&.Mui-focusVisible': {
-                    boxShadow: `0 0 0 3px ${alpha(theme.palette.primary.main, 0.35)}`,
+                    boxShadow: '0 0 0 3px rgba(25, 118, 210, 0.35)',
+                },
+                },
+            },
+        },
+        MuiRadio: {
+            defaultProps: {
+                disableRipple: true,
+            },
+            styleOverrides: {
+                root: {
+                color: '#595959',
+
+                '&:hover': {
+                    backgroundColor: 'transparent',
+                },
+
+                '&:active': {
+                    backgroundColor: 'transparent',
+                },
+
+                '&.Mui-checked': {
+                    color: CONTAINED_PRIMARY_BLUE,
+                },
+
+                '&.Mui-focusVisible': {
+                    boxShadow: '0 0 0 3px rgba(25, 118, 210, 0.35)',
                 },
                 },
             },
@@ -416,6 +473,9 @@ export const PNSPS_THEME = createTheme({
             },
         },
         MuiTab: {
+            defaultProps: {
+                disableRipple: true,
+            },
             styleOverrides: {
                 root: {
                 fontSize: TABLE_FONT_SIZE,   // ✅ unchanged
@@ -435,6 +495,14 @@ export const PNSPS_THEME = createTheme({
                     color: '#1565C0',
                 },
 
+                '&:active': {
+                    backgroundColor: 'transparent',
+                },
+
+                '&:active:not(.Mui-selected)': {
+                    color: '#424242',
+                },
+
                 // ✅ Keyboard TAB focus (visible & accessible)
                 '&.Mui-focusVisible': {
                     outline: '3px solid rgba(21, 101, 192, 0.55)',

src/translations/en.json

@@ -423,6 +423,7 @@
   "payMethod": "Payment methods",
   "epayMethod": " e-Payment Method",
   "selectPaymentMethod": "Please select a payment method",
+  "selectPaymentMethodBtn": "Select payment method",
   "payReceipt": "Payment Receipt",
   "contactPerson": "Contact Person",
   "requireContactPerson": "Please enter contact person",
@@ -511,13 +512,14 @@
   "fpsQrcodeTitle4":"Remaining time:",
   "fpsQrcodeTitle5":"s",
   "fpsQrcodeExpired":"QR code has expired.",
-  "fpsPaymentErrorMsg":"An error occurred while loading the payment. Please do not refresh the page. If the payment was not made successfully, please click 'Cancel payment' and try the payment again.",
+  "fpsPaymentErrorMsg":"An error occurred while loading the payment QR code. Please do not refresh/reload this page manually during the payment. If the payment was not made successfully, please click 'Cancel payment' button and make the payment again. Sorry for the inconvenience caused.",
 
   "payDnRemark": "Payment proof (e.g. ATM receipt, internet banking record) to be sent to [email protected] by {date} 12:30 p.m.",
   "payNPGORemark" :"Payment to be completed at NPGO Collection Office by {date} 12:30 p.m.",
 
   "before": "Before",
   "page": "Page",
+  "pages": "pages",
   "proofReplyDate": "Proof Reply Date",
   "proofReply": "Proof Reply",
   "proofErrorFree": "Pass for printing (without correction)",
@@ -528,6 +530,7 @@
   "submitReply": "Submit",
   "requiredUploadFix": "Please upload the modified file of the manuscript",
   "upload": "Upload",
+  "delete": "Delete",
   "actionFail": "Action failed: Please check the content and submit the reply again",
   "issueInvalidMsg": "Application for the selected publication volume has been closed. Please choose another volume to apply again.",
   "singleCol":"Single Column",
@@ -651,6 +654,7 @@
   "ariaApplicationGroup": "Application Group",
   "ariaProfileTabs": "Profile tabs",
   "ariaUploadPdfFile": "Upload PDF file",
+  "ariaDeleteFile": "Delete file",
   "ariaExportHolidayTemplate": "Export holiday template",
   "ariaUploadExcelFile": "Upload Excel file (.xlsx)",
   "ariaBackToHome": "Back to home",

src/translations/zh-CN.json

@@ -90,7 +90,7 @@
   "fpsQrcodeTitle4":"剩余时间:",
   "fpsQrcodeTitle5":"秒",
   "fpsQrcodeExpired":"二维码已过期",
-  "fpsPaymentErrorMsg":"载入付款时发生错误。请勿重新整理页面。如果付款未能成功完成，请按「取消付款」并重新尝试付款。",
+  "fpsPaymentErrorMsg":"载入支付二维码时发生错误。请勿在付款过程中更新此页面。如果付款未完成，请点击「取消支付」按钮并重新支付。由此造成的不便，敬请谅解。",
   
   "payDnRemark": "在{date}下午12时30分前将付款证明（例如银行入数纸或网上银行付款记录）电邮至 [email protected]",
   "payNPGORemark" :"在{date}下午12时30分前到北角政府合署收款处完成付款",
@@ -456,6 +456,7 @@
   "payMethod": "付款方式",
   "epayMethod": "电子付款方法",
   "selectPaymentMethod": "请选择付款方法",
+  "selectPaymentMethodBtn": "选择付款方法",
   "payReceipt": "付款收据",
   "contactPerson": "联络人",
   "requireContactPerson": "请输入联络人",
@@ -514,6 +515,7 @@
   "paymentDeadline": "网上确定付印最后限期",
   "before": "前",
   "page": "页",
+  "pages": "页",
   "proofReplyDate": "校对回复日期",
   "proofReply": "校对回复",
   "proofErrorFree": "可以付印（稿件正确）",
@@ -524,6 +526,7 @@
   "submitReply": "提交回复",
   "requiredUploadFix": "请上载稿件修改的档案",
   "upload": "上载",
+  "delete": "删除",
   "actionFail": "行动失败: 请检查内容并再次提交回复",
   "issueInvalidMsg": "所选刊登期数已截稿，请选择另一期重新申请。",
   "singleCol":"一格位",
@@ -647,6 +650,7 @@
   "ariaApplicationGroup": "申请组别",
   "ariaProfileTabs": "个人资料选项卡",
   "ariaUploadPdfFile": "上传 PDF 文件",
+  "ariaDeleteFile": "删除文件",
   "ariaExportHolidayTemplate": "导出假期模板",
   "ariaUploadExcelFile": "上传 Excel 文件 (.xlsx)",
   "ariaBackToHome": "返回主页",

src/translations/zh-HK.json

@@ -90,7 +90,7 @@
   "fpsQrcodeTitle4":"剩餘時間:",
   "fpsQrcodeTitle5":"秒",
   "fpsQrcodeExpired":"二維碼已過期",
-  "fpsPaymentErrorMsg":"載入付款時發生錯誤。請勿重新整理頁面。如果付款未能成功完成，請按「取消付款」並重新嘗試付款。",
+  "fpsPaymentErrorMsg":"載入支付二維碼時發生錯誤。請勿在付款過程中更新此頁面。如果付款未完成，請點擊「取消支付」按鈕並重新支付。由此造成的不便，敬請諒解。",
 
   "payDnRemark": "在{date}下午12時30分前將付款證明（例如銀行入數紙或網上銀行付款記錄）電郵至 [email protected]",
   "payNPGORemark" :"在{date}下午12時30分前到北角政府合署收款處完成付款",
@@ -457,6 +457,7 @@
   "payMethod": "付款方式",
   "epayMethod": "電子付款方法",
   "selectPaymentMethod": "請選擇付款方法",
+  "selectPaymentMethodBtn": "選擇付款方法",
   "payReceipt": "付款收據",
   "contactPerson": "聯絡人",
   "requireContactPerson": "請輸入聯絡人",
@@ -515,6 +516,7 @@
   "paymentDeadline": "網上確定付印最後限期",
   "before": "前",
   "page": "頁",
+  "pages": "頁",
   "proofReplyDate": "校對回覆日期",
   "proofReply": "校對回覆",
   "proofErrorFree": "可以付印（稿件正確）",
@@ -525,6 +527,7 @@
   "submitReply": "提交回覆",
   "requiredUploadFix": "請上載稿件修改的檔案",
   "upload": "上載",
+  "delete": "刪除",
   "actionFail": "行動失敗: 請檢查內容並再次提交回覆",
   "issueInvalidMsg": "所選刊登期數已截稿，請選擇另一期重新申請。",
   "singleCol":"一格位",
@@ -648,6 +651,7 @@
   "ariaApplicationGroup": "申請組別",
   "ariaProfileTabs": "個人檔案分頁",
   "ariaUploadPdfFile": "上載 PDF 檔案",
+  "ariaDeleteFile": "刪除檔案",
   "ariaExportHolidayTemplate": "匯出假期範本",
   "ariaUploadExcelFile": "上載 Excel 檔案 (.xlsx)",
   "ariaBackToHome": "返回主頁",

src/utils/CommonFunction.js

@@ -11,6 +11,14 @@ export const clickableLink=(link, label)=> {
     return <a href={link}>{label}</a>;
 }
 
+export const handleActionKeyDown = (event, action) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        event.stopPropagation();
+        action(event);
+    }
+};
+
 export function getDeletedRecordWithRefList(referenceList, updatedList) {
     return referenceList.filter(x => !updatedList.includes(x));
 }

src/utils/Utils.js

@@ -165,6 +165,31 @@ export const gazetteLength = (length,noOfPages) => {
     return countLength+" cm"
 }
 
+export const toReceiptLanguage = (locale) => {
+    if (locale === 'zh-CN' || locale === 'zh_CN') {
+        return 'zh_CN';
+    }
+    if (locale === 'zh-HK' || locale === 'zh_HK') {
+        return 'zh_HK';
+    }
+    return 'en';
+}
+
+export const formatPaymentParticularsLength = (row, intl) => {
+    if (row.groupTitle === 'Private Bill') {
+        const pages = row.noOfPages ?? 1;
+        if (intl) {
+            if (intl.locale === 'en') {
+                return pages === 1 ? '1 page' : `${pages} pages`;
+            }
+            const pageLabel = intl.formatMessage({ id: 'pages' });
+            return `${pages} ${pageLabel}`;
+        }
+        return pages === 1 ? '1 page' : `${pages} pages`;
+    }
+    return `${row.length ?? 0} cm`;
+}
+
 export const getUserId = () =>{
     if (localStorage.getItem('userData') != null){
         return JSON.parse(localStorage.getItem('userData')).id