update style.

src/assets/style/styles.css

@@ -105,12 +105,10 @@ a:active {
 
 /* Contained buttons only */
 .MuiButton-contained {
-  border: 2px solid #0C489E;
   box-shadow: none;
 }
 
 .MuiButton-contained:hover {
-  border: 2px solid #0C489E;
 }
 
 /* iAM Smart button — keep green border */

src/layout/MainLayout/Header/index.js

@@ -808,7 +808,7 @@ function Header(props) {
   // =============================
   return isUserLoggedIn() ? (
     <Box>
-      <AppBar component="nav">
+      <AppBar component="nav" elevation={0}>
         <Toolbar id="nav" width="100%">
           {isGLDLoggedIn() ? (
             <Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={0} sx={{ width: { xs: "100%", md: "5%" } }}>
@@ -921,7 +921,7 @@ function Header(props) {
     </Box>
   ) : (
     <Box>
-      <AppBar component="nav">
+      <AppBar component="nav" elevation={0}>
         <Toolbar id="nav" width="100%">
           <Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={0} sx={{ width: { xs: "100%", md: "25%" } }}>
             <Box sx={{ flexGrow: 1, display: { xs: "none", sm: "none", md: "block" } }}>

src/layout/MainLayout/index.js

@@ -62,7 +62,7 @@ const MainLayout = () => {
         <Box sx={{backgroundColor:'#ffffff', display: 'flex', width: '100%', flexDirection: "column", paddingTop: { xs: "5px", sm: "25px", md: "43px" }}}>
           <Header/>
           {/* <Drawer open={open} handleDrawerToggle={handleDrawerToggle} /> */}
-          <Box style={{ width: '100%', flexGrow: 1 } } sx={{ paddingTop: "38px" }}>
+          <Box style={{ width: '100%', flexGrow: 1 }} sx={{ paddingTop: "36px" }}>
             {/* <Toolbar /> */}
             {/* <Breadcrumbs navigation={navigation} title /> */}
             <Outlet />

src/pages/Announcement/Search_Public/SearchForm.js

@@ -195,7 +195,9 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, onGridReady }) =>
                             <Grid item sx={{ ml: 3 }}>
                                 <Button
                                     variant="contained"
+                                    color="cancel"
                                     onClick={resetForm}
+                                    aria-label={intl.formatMessage({ id: 'reset' })}
                                 >
                                     <FormattedMessage id="reset"></FormattedMessage>
                                 </Button>

src/pages/Proof/Reply_Public/ProofForm.js

@@ -687,10 +687,14 @@ const FormPanel = ({ formData }) => {
                                         <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                             <Button
                                                 variant="contained"
-                                                color="success"
                                                 type="submit"
                                                 disabled={actionValue == false && isOverReviseDeadline()}
                                                 aria-label={intl.formatMessage({ id: 'submitReply' })}
+                                                sx={{
+                                                    backgroundColor: '#0C489E',
+                                                    color: '#FFFFFF',
+                                                    '&:hover': { backgroundColor: '#093A7A' },
+                                                }}
                                             >
                                                 <FormattedMessage id="submitReply" />
                                             </Button>

src/pages/Proof/Search_Public/DataGrid.js

@@ -100,6 +100,10 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
     }
 
 
+    const renderHeaderWithAria = (params) => (
+        <span aria-label={params.colDef.headerName}>{params.colDef.headerName}</span>
+    );
+
     const columns = [
         {
             field: 'actions',
@@ -107,6 +111,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             width: isMdOrLg ? 'auto' : 200,
             flex: isMdOrLg ? 1.5 : undefined,
             cellClassName: 'actions',
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
                 return clickableLink('/proof/reply/' + params.row.id, params.row.refNo);
             },
@@ -117,6 +122,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             headerName: isORGLoggedIn() ? intl.formatMessage({ id: 'gazetteCount3' }) : intl.formatMessage({ id: 'gazetteCount2' }),
             width: isMdOrLg ? 'auto' : 330,
             flex: isMdOrLg ? 2 : undefined,
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
                 // let appNo = params.row.appNo;
                 // let code = params.row.groupNo;
@@ -132,6 +138,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             headerName: intl.formatMessage({ id: 'proofDate' }),
             width: isMdOrLg ? 'auto' : 200,
             flex: isMdOrLg ? 1.5 : undefined,
+            renderHeader: renderHeaderWithAria,
             valueGetter: (params) => {
                 return DateUtils.datetimeStr(params?.value);
             }
@@ -142,6 +149,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             headerName: intl.formatMessage({ id: 'replyBefore' }),
             width: isMdOrLg ? 'auto' : 200,
             flex: isMdOrLg ? 1.5 : undefined,
+            renderHeader: renderHeaderWithAria,
             valueGetter: (params) => {
                 const proofPaymentDeadline = DateUtils.convertToDate(params?.value);
                 return DateUtils.datetimeStr(
@@ -156,6 +164,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             headerName: intl.formatMessage({ id: 'replyDate' }),
             width: isMdOrLg ? 'auto' : 200,
             flex: isMdOrLg ? 1.5 : undefined,
+            renderHeader: renderHeaderWithAria,
             valueGetter: (params) => {
                 return params?.value ? DateUtils.datetimeStr(params?.value) : "";
             }
@@ -165,6 +174,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             headerName: intl.formatMessage({ id: 'status' }),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
                 return locale === 'en' ? ProofStatus.getStatus_Eng(params) : locale === 'zh-HK' ? ProofStatus.getStatus_Cht(params) : ProofStatus.getStatus_Cn(params);
             },
@@ -175,6 +185,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             headerName: intl.formatMessage({ id: 'fee' }),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
+            renderHeader: renderHeaderWithAria,
             valueGetter: (params) => {
                 return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
             }

src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js

@@ -715,7 +715,11 @@ const ApplicationDetailCard = (
                                                                 sx={{
                                                                     textTransform: 'capitalize',
                                                                     alignItems: 'end',
-                                                                }}>
+                                                                    backgroundColor: '#0C489E',
+                                                                    color: '#FFFFFF',
+                                                                    '&:hover': { backgroundColor: '#093A7A' },
+                                                                }}
+                                                            >
                                                                 <DownloadIcon />
                                                             </Button>
                                                         </Grid>

src/pages/PublicNotice/Details_GLD/tabTableDetail/PaymentTab.js

@@ -17,6 +17,10 @@ export default function SubmittedTab({ appId, setCount }) {
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
 
+    const renderHeaderWithAria = (params) => (
+        <span aria-label={params.colDef.headerName}>{params.colDef.headerName}</span>
+    );
+
     const columns = [
         {
             field: 'actions',
@@ -24,6 +28,7 @@ export default function SubmittedTab({ appId, setCount }) {
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             cellClassName: 'actions',
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
                 return clickableLink('/paymentPage/details/' + params.row.id, params.row.transNo);
             },
@@ -34,6 +39,7 @@ export default function SubmittedTab({ appId, setCount }) {
             headerName: 'Trans. Date',
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
+            renderHeader: renderHeaderWithAria,
             valueGetter: (params) => {
                 return DateUtils.datetimeStr(params.value);
             }
@@ -44,6 +50,7 @@ export default function SubmittedTab({ appId, setCount }) {
             headerName: 'Status',
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
                 return PaymentStatus.getStatus_Eng(params);
             }
@@ -53,6 +60,7 @@ export default function SubmittedTab({ appId, setCount }) {
             field: 'payAmount',
             headerName: 'Amount',
             width: 150,
+            renderHeader: renderHeaderWithAria,
             valueGetter: (params) => {
                 return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
             }

src/pages/PublicNotice/Details_GLD/tabTableDetail/ProofTab.js

@@ -28,6 +28,10 @@ export default function ProofTab({appId, setCount}) {
         });
     };
 
+    const renderHeaderWithAria = (params) => (
+        <span aria-label={params.colDef.headerName}>{params.colDef.headerName}</span>
+    );
+
     const columns = [
         {
            
@@ -36,6 +40,7 @@ export default function ProofTab({appId, setCount}) {
             width: isMdOrLg ? 'auto' : 200,
             flex: isMdOrLg ? 1 : undefined,
             cellClassName: 'actions',
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
                 return clickableLink('/proof/reply/' + params.row.id, params.row.refNo);
             },
@@ -45,6 +50,7 @@ export default function ProofTab({appId, setCount}) {
             headerName: 'Status',
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
                 return ProofStatus.getStatus_Eng(params);
             },
@@ -54,7 +60,7 @@ export default function ProofTab({appId, setCount}) {
             headerName: 'Proof Issue Date',
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
-
+            renderHeader: renderHeaderWithAria,
             valueGetter: (params) => {
                 return DateUtils.datetimeStr(params?.value);
             }
@@ -64,6 +70,7 @@ export default function ProofTab({appId, setCount}) {
             headerName: 'Confirmed/Return Date',
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
+            renderHeader: renderHeaderWithAria,
             valueGetter: (params) => {
                 return params?.value?DateUtils.datetimeStr(params?.value):"";
             }
@@ -73,7 +80,7 @@ export default function ProofTab({appId, setCount}) {
             headerName: 'Fee',
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
-
+            renderHeader: renderHeaderWithAria,
             valueGetter: (params) => {
                 return (params?.value)?"$ "+FormatUtils.currencyFormat(params?.value):"";
             }
@@ -82,6 +89,7 @@ export default function ProofTab({appId, setCount}) {
             type: 'actions',
             headerName: 'Proof Slip',
             width: 100,
+            renderHeader: renderHeaderWithAria,
             cellClassName: 'actions',
             getActions: (params) => {
                 if(params.row.action == null) return[];

src/pages/PublicNotice/Details_GLD/tabTableDetail/StatusHistoryTab.js

@@ -13,6 +13,10 @@ export default function StatusHistoryTab({appId, setCount}) {
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
 
+    const renderHeaderWithAria = (params) => (
+        <span aria-label={params.colDef.headerName}>{params.colDef.headerName}</span>
+    );
+
     const columns = [
         {
             id: 'created',
@@ -20,6 +24,7 @@ export default function StatusHistoryTab({appId, setCount}) {
             headerName: 'Date',
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
+            renderHeader: renderHeaderWithAria,
             valueGetter: (params) => {
                 return DateUtils.datetimeStr(params?.value);
             }
@@ -31,6 +36,7 @@ export default function StatusHistoryTab({appId, setCount}) {
             headerName: 'Changed By',
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
+            renderHeader: renderHeaderWithAria,
         },
         {
             id: 'status',
@@ -38,6 +44,7 @@ export default function StatusHistoryTab({appId, setCount}) {
             headerName: 'Status',
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
                 return [StatusUtils.getStatusEng(params)]
             },

src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js

@@ -222,7 +222,6 @@ const ApplicationDetailCard = (
                                         <Button
                                             variant="contained"
                                             onClick={cancelledClick()}
-                                            color="edit"
                                             disabled={currentApplicationDetailData.status == "rejected"
                                                 || currentApplicationDetailData.status == "cancelled"
                                                 || currentApplicationDetailData.status == "withdrawn"
@@ -239,6 +238,11 @@ const ApplicationDetailCard = (
                                             title={intl.formatMessage({ id: 'cancelApp' })}
                                             startIcon={<CloseIcon />}
                                             aria-label={intl.formatMessage({ id: 'cancelApp' })}
+                                            sx={{
+                                                backgroundColor: '#0C489E',
+                                                color: '#FFFFFF',
+                                                '&:hover': { backgroundColor: '#093A7A' },
+                                            }}
                                         >
                                             <FormattedMessage id="cancelApp" />
                                         </Button>
@@ -659,12 +663,16 @@ const ApplicationDetailCard = (
                                                             </Typography>
                                                             <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                                 <Button
-                                                                    sx={{ ml: 3 }}
+                                                                    sx={{
+                                                                        ml: 3,
+                                                                        backgroundColor: '#0C489E',
+                                                                        color: '#FFFFFF',
+                                                                        '&:hover': { backgroundColor: '#093A7A' },
+                                                                    }}
                                                                     variant="contained"
                                                                     onClick={onDownloadClick()}
                                                                     aria-label={intl.formatMessage({ id: 'download' })}
                                                                     title={intl.formatMessage({ id: 'download' })}
-                                                                    color="save"
                                                                     disabled={!fileDetail?.filename||onDownload}
                                                                     startIcon={<DownloadIcon sx={{ alignItems: "center" }} />}
                                                                 >

src/pages/PublicNotice/Details_Public/tabTableDetail/PaymentTab.js

@@ -21,6 +21,10 @@ export default function SubmittedTab({ appId, setCount }) {
     
   const { locale } = intl;
 
+    const renderHeaderWithAria = (params) => (
+        <span aria-label={params.colDef.headerName}>{params.colDef.headerName}</span>
+    );
+
     const columns = [
         {
             field: 'actions',
@@ -28,6 +32,7 @@ export default function SubmittedTab({ appId, setCount }) {
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             cellClassName: 'actions',
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
                 return clickableLink('/paymentPage/details/' + params.row.id, params.row.transNo);
             },
@@ -38,6 +43,7 @@ export default function SubmittedTab({ appId, setCount }) {
             headerName: intl.formatMessage({id: 'payDate'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
+            renderHeader: renderHeaderWithAria,
             valueGetter: (params) => {
                 return DateUtils.datetimeStr(params.value);
             }
@@ -48,6 +54,7 @@ export default function SubmittedTab({ appId, setCount }) {
             headerName: intl.formatMessage({id: 'payStatus'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
                 return locale === 'en' ? PaymentStatus.getStatus_Eng(params):PaymentStatus.getStatus_Cht(params);
             }
@@ -57,6 +64,7 @@ export default function SubmittedTab({ appId, setCount }) {
             field: 'payAmount',
             headerName: intl.formatMessage({id: 'fee'}),
             width: 150,
+            renderHeader: renderHeaderWithAria,
             valueGetter: (params) => {
                 return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
             }

src/pages/PublicNotice/Details_Public/tabTableDetail/ProofTab.js

@@ -19,6 +19,9 @@ export default function ProofTab({appId, setCount}) {
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
     const { locale } = intl;
 
+    const renderHeaderWithAria = (params) => (
+        <span aria-label={params.colDef.headerName}>{params.colDef.headerName}</span>
+    );
 
     const columns = [
         {
@@ -27,6 +30,7 @@ export default function ProofTab({appId, setCount}) {
             headerName: intl.formatMessage({id: 'proofId'}),
             width: 200,
             cellClassName: 'actions',
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
                 return clickableLink('/proof/reply/' + params.row.id, params.row.refNo);
             },
@@ -36,6 +40,7 @@ export default function ProofTab({appId, setCount}) {
             headerName: intl.formatMessage({id: 'status'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
                 return locale === 'en' ? ProofStatus.getStatus_Eng(params) : ProofStatus.getStatus_Cht(params);
             },
@@ -46,6 +51,7 @@ export default function ProofTab({appId, setCount}) {
             headerName: intl.formatMessage({id: 'proofDate'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
+            renderHeader: renderHeaderWithAria,
             valueGetter: (params) => {
                 return DateUtils.datetimeStr(params?.value);
             }
@@ -56,6 +62,7 @@ export default function ProofTab({appId, setCount}) {
             headerName: intl.formatMessage({id: 'replyDate'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
+            renderHeader: renderHeaderWithAria,
             valueGetter: (params) => {
                 return params?.value?DateUtils.datetimeStr(params?.value):"";
             }
@@ -66,6 +73,7 @@ export default function ProofTab({appId, setCount}) {
             headerName: intl.formatMessage({id: 'fee'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
+            renderHeader: renderHeaderWithAria,
             valueGetter: (params) => {
                 return (params?.value)?"$ "+FormatUtils.currencyFormat(params?.value):"";
             }

src/pages/PublicNotice/Details_Public/tabTableDetail/StatusHistoryTab.js

@@ -1,5 +1,6 @@
 // material-ui
 import * as React from 'react';
+import { useTheme, useMediaQuery } from '@mui/material';
 import {FiDataGrid} from "components/FiDataGrid";
 import * as DateUtils from "utils/DateUtils"
 import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
@@ -9,7 +10,7 @@ import {GET_PUBLIC_NOTICE_APPLY_DETAIL_STATUS_HISTORY } from "utils/ApiPathConst
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function StatusHistoryTab({appId, setCount}) {
-
+    const { useState, useEffect } = React;
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
 
@@ -21,6 +22,10 @@ export default function StatusHistoryTab({appId, setCount}) {
         set_appId(appId);
     }, []);
 
+    const renderHeaderWithAria = (params) => (
+        <span aria-label={params.colDef.headerName}>{params.colDef.headerName}</span>
+    );
+
     const columns = [
         {
             id: 'created',
@@ -28,6 +33,7 @@ export default function StatusHistoryTab({appId, setCount}) {
             headerName: 'Date',
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
+            renderHeader: renderHeaderWithAria,
             valueGetter: (params) => {
                 return DateUtils.datetimeStr(params?.value);
             }
@@ -39,6 +45,7 @@ export default function StatusHistoryTab({appId, setCount}) {
             headerName: 'Changed By',
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
+            renderHeader: renderHeaderWithAria,
         },
         {
             id: 'status',
@@ -46,6 +53,7 @@ export default function StatusHistoryTab({appId, setCount}) {
             headerName: 'Status',
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
                 return [StatusUtils.getStatusEng(params)]
             },

src/pages/PublicNotice/ListPanel/BaseGrid.js

@@ -28,6 +28,9 @@ export default function BaseGrid({setCount, url}) {
         navigate('/publicNotice/'+ params.id);
     };
 
+    const renderHeaderWithAria = (params) => (
+        <span aria-label={params.colDef.headerName}>{params.colDef.headerName}</span>
+    );
 
     const columns = [
         {
@@ -36,6 +39,7 @@ export default function BaseGrid({setCount, url}) {
             headerName: intl.formatMessage({id: 'applicationId'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
                 return [params.row.appNo+getModeIntl(params,intl)]
             },
@@ -46,6 +50,7 @@ export default function BaseGrid({setCount, url}) {
             headerName: intl.formatMessage({id: 'submitDate'}),
             width: isMdOrLg ? 'auto' : 300,
             flex: isMdOrLg ? 1 : undefined,
+            renderHeader: renderHeaderWithAria,
             valueGetter:(params)=>{
                 return DateUtils.datetimeStr(params?.value);
             }
@@ -57,6 +62,7 @@ export default function BaseGrid({setCount, url}) {
             headerName:  isORGLoggedIn()? intl.formatMessage({id: 'gazetteCount2_1'}) : intl.formatMessage({id: 'myRemarks'}),
             width: isMdOrLg ? 'auto' : 400,
             flex: isMdOrLg ? 3 : undefined,
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => (
                 isORGLoggedIn()? 
                     isDummyLoggedIn()?
@@ -88,6 +94,7 @@ export default function BaseGrid({setCount, url}) {
             headerName: intl.formatMessage({id: 'status'}),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
                 return [getStatusIntl(params,intl)]
             },
@@ -96,6 +103,7 @@ export default function BaseGrid({setCount, url}) {
             field: 'actions',
             headerName: '',
             width: 160,
+            renderHeader: renderHeaderWithAria,
             cellClassName: 'actions',
             renderCell: (params) => {
                 return <Button aria-label={intl.formatMessage({id: 'viewDetail'})} onClick={handleDetailClick(params)}>

src/pages/PublicNotice/ListPanel/PendingPaymentTab.js

@@ -81,6 +81,10 @@ export default function SubmittedTab({ setCount, url }) {
         navigate('/publicNotice/' + params.id);
     };
 
+    const renderHeaderWithAria = (params) => (
+        <span aria-label={params.colDef.headerName}>{params.colDef.headerName}</span>
+    );
+
     const handlePaymentBtn = () => {
         let appIdList = [];
         let paymentCheckList = [];
@@ -175,6 +179,7 @@ export default function SubmittedTab({ setCount, url }) {
             headerName: intl.formatMessage({ id: 'applicationId' }),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
+            renderHeader: renderHeaderWithAria,
         },
         {
             id: 'created',
@@ -182,6 +187,7 @@ export default function SubmittedTab({ setCount, url }) {
             headerName: intl.formatMessage({ id: 'submitDate' }),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
+            renderHeader: renderHeaderWithAria,
             valueGetter: (params) => {
                 return DateUtils.datetimeStr(params.value);
             }
@@ -192,6 +198,7 @@ export default function SubmittedTab({ setCount, url }) {
             headerName: isORGLoggedIn() ? intl.formatMessage({ id: 'gazetteCount2_1' }) : intl.formatMessage({ id: 'myRemarks' }),
             width: isMdOrLg ? 'auto' : 400,
             flex: isMdOrLg ? 3 : undefined,
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => (
                 isORGLoggedIn() ?
                         isDummyLoggedIn()?
@@ -222,6 +229,7 @@ export default function SubmittedTab({ setCount, url }) {
             headerName: intl.formatMessage({ id: 'price' }),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
                 return FormatUtils.currencyFormat(params.row.fee)
             },
@@ -230,6 +238,7 @@ export default function SubmittedTab({ setCount, url }) {
             id: 'paymentMethodAndDeadLine',
             field: 'paymentMethodAndDeadLine',
             headerName: intl.formatMessage({ id: 'paymentMethodAndDeadLine' }),
+            renderHeader: renderHeaderWithAria,
             width: isMdOrLg ? 'auto' : 250,
             flex: isMdOrLg ? 2 : undefined,
             renderCell: (params) => (
@@ -287,6 +296,7 @@ export default function SubmittedTab({ setCount, url }) {
             headerName: intl.formatMessage({ id: 'status' }),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
                 return [StatusUtils.getStatusIntl(params, intl)]
             },
@@ -296,6 +306,7 @@ export default function SubmittedTab({ setCount, url }) {
             type: 'actions',
             headerName: '',
             width: 150,
+            renderHeader: renderHeaderWithAria,
             cellClassName: 'actions',
             renderCell: (params) => {
                 return <Button aria-label={intl.formatMessage({ id: 'viewDetail' })} onClick={handleDetailClick(params)}>
@@ -431,7 +442,6 @@ export default function SubmittedTab({ setCount, url }) {
 
                 <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                     <Button
-                        color="create"
                         variant="contained"
                         aria-label={intl.formatMessage({ id: 'payOnlineBtn' })}
                         onClick={() => { handlePaymentBtn() }}

src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js

@@ -35,6 +35,10 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
         navigate('/publicNotice/' + params.id);
     };
 
+    const renderHeaderWithAria = (params) => (
+        <span aria-label={params.colDef.headerName}>{params.colDef.headerName}</span>
+    );
+
     const columns = [
         {
             id: 'appNo',
@@ -42,6 +46,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             headerName: intl.formatMessage({ id: 'applicationId' }),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
                 return [params.row.appNo+getModeIntl(params,intl)]
             },
@@ -52,6 +57,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             headerName: intl.formatMessage({ id: 'submitDate' }),
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
+            renderHeader: renderHeaderWithAria,
             valueGetter: (params) => {
                 return DateUtils.datetimeStr(params?.value);
             }
@@ -88,6 +94,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             headerName: isORGLoggedIn() ? intl.formatMessage({ id: 'gazetteCount2_1' }) : intl.formatMessage({ id: 'myRemarks' }),
             width: isMdOrLg ? 'auto' : 400,
             flex: isMdOrLg ? 3 : undefined,
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => (
                 isORGLoggedIn() ?
                     isDummyLoggedIn()?
@@ -117,6 +124,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             field: 'status',
             headerName: intl.formatMessage({ id: 'status' }),
             width: 200,
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
                 return [StatusUtils.getStatusIntl(params, intl)]
             },
@@ -126,6 +134,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             type: 'actions',
             headerName: '',
             width: 150,
+            renderHeader: renderHeaderWithAria,
             cellClassName: 'actions',
             renderCell: (params) => {
                 return <Button onClick={handleDetailClick(params)}

src/pages/PublicNotice/ListPanel/index.js

@@ -124,7 +124,11 @@ const PublicNotice = () => {
                     <Stack direction="row" justifyContent="flex-end" alignItems="center">
                         <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                             <Box sx={{ mr: { md: "47px" } }}>
-                                <Button aria-label={intl.formatMessage({ id: 'applyPublicNotice' })} variant="contained" onClick={() => { onBtnClick() }}>
+                                <Button
+                                    aria-label={intl.formatMessage({ id: 'applyPublicNotice' })}
+                                    variant="contained"
+                                    onClick={() => { onBtnClick() }}
+                                >
                                     <FormattedMessage id="applyPublicNotice" />
                                 </Button>
                             </Box>

src/pages/PublicNotice/Search_GLD/DataGrid.js

@@ -53,6 +53,10 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
         return groupNo
     }
 
+    const renderHeaderWithAria = (params) => (
+        <span aria-label={params.colDef.headerName}>{params.colDef.headerName}</span>
+    );
+
     const columns = [
         {
             field: 'actions',
@@ -60,6 +64,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             sortable: false,
             width: 150,
             cellClassName: 'actions',
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
                 return clickableLink('/application/' + params.id, params.row.appNo);
             },
@@ -70,6 +75,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             headerName: 'Mode',
             sortable: false,
             width: 100,
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
                 return [StatusUtils.getModeEng(params)]
             },
@@ -80,6 +86,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             headerName: 'Status',
             sortable: false,
             width: 240,
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
                 return [StatusUtils.getStatusEng(params)]
             },
@@ -90,6 +97,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             headerName: 'With Proof',
             sortable: false,
             width: 120,
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
                 return [params.row.proofId != null ? "Yes" : ""]
             },
@@ -101,6 +109,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             sortable: false,
             flex: 1,
             minWidth: 200,
+            renderHeader: renderHeaderWithAria,
             valueGetter: (params) => {
                 return DateUtils.datetimeStr(params?.value);
             }
@@ -112,6 +121,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             sortable: false,
             minWidth: 250,
             flex: 2,
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
                 let company = params.row.enCompanyName != null ? params.row.enCompanyName : params.row.chCompanyName;
                 company = company != null ? company : "";
@@ -131,6 +141,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             sortable: false,
             flex: 1.5,
             minWidth: 350,
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => (
                 <div>
                     {genIssueNo(params)}

src/pages/PublicNotice/Search_Mark_As_Paid_GLD/DataGrid.js

@@ -115,6 +115,10 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
 
     };
 
+    const renderHeaderWithAria = (params) => (
+        <span aria-label={params.colDef.headerName}>{params.colDef.headerName}</span>
+    );
+
     const columns = [
         {
             field: 'actions',
@@ -122,6 +126,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             sortable: false,
             width: 150,
             cellClassName: 'actions',
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
                 return clickableLink('/application/' + params.id, params.row.appNo);
             },
@@ -132,6 +137,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             headerName: 'Customer Name',
             flex: 1,
             minWidth: 50,
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
                 let company = params.row.enCompanyName != null ? params.row.enCompanyName : params.row.chCompanyName;
                 company = company != null ? company : "";
@@ -150,6 +156,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             sortable: false,
             flex: 1.5,
             minWidth: 350,
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => (
                 <div>
                     {genIssueNo(params)}
@@ -165,6 +172,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             sortable: false,
             minWidth: 250,
             flex: 2,
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {
                 let paymentMethod = params.row.paymentMethod!=null?intl.formatMessage({ id: utils.getPaymentMethod(params.row.paymentMethod)}):""
                 return (<>
@@ -178,6 +186,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             headerName: 'Amount($)',
             flex: 1,
             minWidth: 100,
+            renderHeader: renderHeaderWithAria,
             valueGetter: (params) => {
                 return FormatUtils.currencyFormat(params?.value);
             }
@@ -188,6 +197,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             headerName: 'Remarks',
             flex: 2,
             minWidth: 200,
+            renderHeader: renderHeaderWithAria,
             renderCell: (params) => {            
                 const handleBlur = (event) => {
                     const newValue = event.target.value;

src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js

@@ -223,6 +223,7 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                                 <Button
                                                     variant="contained"
                                                     onClick={onEditClick}
+                                                    color="success"
                                                 >
                                                     Edit
                                                 </Button>

src/pages/User/DetailsPage_Organization/UserInformationCard_Organization_Pub.js

@@ -149,6 +149,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
                                             <Button
                                                 variant="contained"
                                                 onClick={onEditClick}
+                                                color="success"
                                             >
                                                 <FormattedMessage id="edit" />
 

src/pages/User/ManagePage_OrgPublic/index.js

@@ -89,13 +89,13 @@ const ManageOrgUserPage = () => {
                 </>
             )
         } else if (!params.row.verifiedBy) {
-            return getStatusTag({ color: "#fca503", text: intl.formatMessage({ id: 'pendingFor' }) })
+            return getStatusTag({ color: "#A36B01", text: intl.formatMessage({ id: 'pendingFor' }) })
         } else if (params.row.status === "active") {
-            return getStatusTag({ color: "#73AD21", text: intl.formatMessage({ id: 'active' }) })
+            return getStatusTag({ color: "#578319", text: intl.formatMessage({ id: 'active' }) })
         }
         return getStatusTag({ text: params.row.status })
     }
-
+    
     function getStatusTag({ color = "#000", textColor = "#FFF", text = "" }) {
         return (
             <div style={{ borderRadius: "25px", "background": color, "color": textColor, "padding": "5px 10px 5px 10px" }}><b>{text}</b></div>

src/pages/authentication/RegisterCustom.js

@@ -138,15 +138,19 @@ const RegisterCustom = () => {
                     href="/registerFrom"
                     variant="contained"
                     sx={{
+                      backgroundColor: '#0C489E',
+                      color: '#FFFFFF',
                       border: '1px solid #0C489E',
-                      boxShadow: 'none', // optional, cleaner look
+                      boxShadow: 'none',
                       '&:hover': {
-                        border: '1px solid #0C489E',
+                        backgroundColor: '#093A7A',
+                        color: '#FFFFFF',
+                        border: '1px solid #093A7A',
                         boxShadow: 'none',
                       },
                     }}
                   >
-                    <Typography variant="h5">
+                    <Typography variant="h5" sx={{ color: 'inherit' }}>
                       <FormattedMessage id="registerNewPersonalUser" />
                     </Typography>
                   </Button>
@@ -164,15 +168,19 @@ const RegisterCustom = () => {
                     variant="contained"
                     sx={{
                       mt: 0.5,
+                      backgroundColor: '#0C489E',
+                      color: '#FFFFFF',
                       border: '1px solid #0C489E',
                       boxShadow: 'none',
                       '&:hover': {
-                        border: '1px solid #0C489E',
+                        backgroundColor: '#093A7A',
+                        color: '#FFFFFF',
+                        border: '1px solid #093A7A',
                         boxShadow: 'none',
                       },
                     }}
                   >
-                    <Typography component="h2" variant="h5">
+                    <Typography component="h2" variant="h5" sx={{ color: 'inherit' }}>
                       <FormattedMessage id="registerNewBusinessUser" />
                     </Typography>
                   </Button>

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

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

src/translations/zh-CN.json

@@ -603,7 +603,7 @@
   "userGuide10":"10. 下载缴款单缴付款项",
   "userGuidePub10":"10. 付款",
 
-  "Dashboard": "仪表板",
+  "Dashboard": "主页",
   "event": "活动",
   "lgce_alt": "2025年立法会换届选举",
   "lgce_title": "2025年立法会换届选举",

src/translations/zh-HK.json

@@ -604,7 +604,7 @@
   "userGuide10":"10. 下載繳款單繳付款項",
   "userGuidePub10":"10. 付款",
 
-  "Dashboard": "儀表板",
+  "Dashboard": "主頁",
   "event": "活動",
   "lgce_alt": "2025年立法會換屆選舉",
   "lgce_title": "2025年立法會換屆選舉",

src/utils/CommonFunction.js

@@ -208,7 +208,7 @@ export const notifyActionSuccess = (actionMsg) => {
 export const notifyActionError = (actionMsg) => {
     toast.error(`${actionMsg}`, {
         position: "bottom-right",
-        autoClose: 10000,
+        autoClose: 20000,
         hideProgressBar: false,
         closeOnClick: true,
         pauseOnHover: true,