various changes

src/assets/style/navbarStyles.css

@@ -112,7 +112,7 @@
 
 #navbar div li a:hover,
 #navbar div li button.navTrigger:hover{
-  color: #1976d2;
+  color: #1565C0;
 }
 
 #navbar div li a:hover::after,
@@ -122,7 +122,7 @@
   content: "";
   width: 80%;
   height: 3px;
-  background:#1976d2;
+  background:#1565C0;
   position: absolute;
   bottom: -5px;
   left: 20px;

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/pages/Message/Details/index.js

@@ -92,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" }}>

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/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/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,12 +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 { useIntl } from 'react-intl';
+import { createDeleteFileColumn } from 'utils/fileListColumns';
 // import {useNavigate} from "react-router-dom";
 // import { useTheme } from '@mui/material/styles';
 import {
@@ -18,9 +16,6 @@ import {
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function UploadFileTable({ recordList, setRecordList, showPageColumn, _checkCode, _expectedCode }) {
-    const intl = useIntl();
-    const deleteFileLabel = intl.formatMessage({ id: 'ariaDeleteFile' });
-
     const [rows, setRows] = React.useState(recordList);
     const [rowModesModel, setRowModesModel] = React.useState({});
     const [showPage, setShowPage] = React.useState(false);
@@ -70,24 +65,7 @@ export default function UploadFileTable({ recordList, setRecordList, showPageCol
         setRows(rows.filter((row) => row.id !== id));
     }
 
-    const renderDeleteAction = (id) => (
-        <GridActionsCellItem
-            key="delete"
-            icon={<RemoveCircleOutlineIcon />}
-            label={deleteFileLabel}
-            title={deleteFileLabel}
-            className="textPrimary"
-            onClick={handleCancelClick(id)}
-            onKeyDown={(event) => {
-                if (event.key === 'Enter' || event.key === ' ') {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    handleCancelClick(id)(event);
-                }
-            }}
-            color="error"
-        />
-    );
+    const deleteColumn = createDeleteFileColumn((id) => handleCancelClick(id));
 
     const handlePreviewClick = (param) => () => {
         var reader = new FileReader();
@@ -109,15 +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 }) => [renderDeleteAction(id)],
-        },
+        deleteColumn,
         {
             field: 'name',
             headerName: 'File Name',
@@ -144,15 +114,7 @@ export default function UploadFileTable({ recordList, setRecordList, showPageCol
             hide: true
         },
     ]:[
-        {
-            field: 'actions',
-            type: 'actions',
-            headerName: '',
-            width: 30,
-            cellClassName: 'actions',
-            // hide:true,
-            getActions: ({ id }) => [renderDeleteAction(id)],
-        },
+        deleteColumn,
         {
             field: 'name',
             headerName: 'File Name',

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/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/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 { 
@@ -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) {

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/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 ||============================== //
@@ -765,17 +766,21 @@ const ApplicationDetailCard = (
                             </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>

src/pages/PublicNotice/ListPanel/PendingPaymentTab.js

@@ -29,7 +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 } from "themes/colorConst";
+import { PRIMARY_TEXT_BUTTON_SX, PRIMARY_CONTAINED_BUTTON_SX } from "themes/colorConst";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SubmittedTab({ setCount, url }) {
@@ -485,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/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/authentication/BusRegister.js

@@ -23,6 +23,7 @@ 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';
 
@@ -249,33 +250,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/Register.js

@@ -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 ||================================ //
@@ -255,33 +256,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/auth-forms/UploadFileTable.js

@@ -1,10 +1,8 @@
 // material-ui
-import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
 import * as React from 'react';
 import { useEffect } from "react";
 import {
     Box,
-    IconButton,
     Stack,
     Table,
     TableBody,
@@ -14,7 +12,7 @@ import {
     Typography
 } from '@mui/material';
 import { FormattedMessage, useIntl } from "react-intl";
-import { handleActionKeyDown } from 'utils/CommonFunction';
+import FileDeleteButton from 'components/FileDeleteButton';
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function UploadFileTable({ recordList, setUpdateRows, }) {
@@ -71,17 +69,7 @@ export default function UploadFileTable({ recordList, setUpdateRows, }) {
                     {rows.map((row) => (
                         <TableRow key={row.id}>
                             <TableCell padding="checkbox">
-                                <IconButton
-                                    size="small"
-                                    color="error"
-                                    role="button"
-                                    tabIndex={0}
-                                    aria-label={intl.formatMessage({ id: 'ariaDeleteFile' })}
-                                    onClick={() => handleCancelClick(row.id)}
-                                    onKeyDown={(event) => handleActionKeyDown(event, () => handleCancelClick(row.id))}
-                                >
-                                    <RemoveCircleOutlineIcon fontSize="small" />
-                                </IconButton>
+                                <FileDeleteButton onDelete={() => handleCancelClick(row.id)} />
                             </TableCell>
                             <TableCell>
                                 <Stack direction="row" alignItems="center">

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 component="div" 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 variant="subtitle2" sx={{ color: '#000' }} align="justify">
+                        {DateUtils.dateValue(item.announceDate)}
+                    </Typography>
+                    <Typography component="h4" 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 variant="subtitle2" sx={{ color: '#000' }} align="justify">
+                              {DateUtils.datetimeStr(item.sentDate)}
+                            </Typography>
                         </Stack>
                     </Button>
             ));
@@ -193,7 +206,7 @@ const DashboardDefault = () => {
                     backgroundColor: "#e1edfc",
                     border: "0px solid #1976d2",   // DARKER border (3:1+)
                     borderRadius: "10px",
-                    color: "#1976d2",              // 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: "#1976d2" }}>
+                      <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: '#1976d2',
+                      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: '#1976d2',
+                      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/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';
 
@@ -66,6 +66,17 @@ export const PRIMARY_CONTAINED_BUTTON_SX = {
     },
 };
 
+/** 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,

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",

src/translations/zh-CN.json

@@ -456,6 +456,7 @@
   "payMethod": "付款方式",
   "epayMethod": "电子付款方法",
   "selectPaymentMethod": "请选择付款方法",
+  "selectPaymentMethodBtn": "选择付款方法",
   "payReceipt": "付款收据",
   "contactPerson": "联络人",
   "requireContactPerson": "请输入联络人",

src/translations/zh-HK.json

@@ -457,6 +457,7 @@
   "payMethod": "付款方式",
   "epayMethod": "電子付款方法",
   "selectPaymentMethod": "請選擇付款方法",
+  "selectPaymentMethodBtn": "選擇付款方法",
   "payReceipt": "付款收據",
   "contactPerson": "聯絡人",
   "requireContactPerson": "請輸入聯絡人",

src/utils/CommonFunction.js

@@ -14,6 +14,7 @@ export const clickableLink=(link, label)=> {
 export const handleActionKeyDown = (event, action) => {
     if (event.key === 'Enter' || event.key === ' ') {
         event.preventDefault();
+        event.stopPropagation();
         action(event);
     }
 };

src/utils/fileListColumns.js

@@ -0,0 +1,17 @@
+import FileDeleteButton from 'components/FileDeleteButton';
+
+export const createDeleteFileColumn = (getOnDelete, options = {}) => ({
+    field: 'delete',
+    headerName: '',
+    width: options.width ?? 48,
+    sortable: false,
+    filterable: false,
+    disableColumnMenu: true,
+    renderCell: (params) => (
+        <FileDeleteButton
+            onDelete={getOnDelete(params.id, params.row)}
+            icon={options.icon}
+            color={options.color}
+        />
+    ),
+});