update payment layout

src/pages/Payment/index.js

@@ -29,6 +29,8 @@ import {
 // import FpsIcon from "assets/images/icons/fps.svg";
 
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+import {ThemeProvider} from "@emotion/react";
+import {PNSPS_BUTTON_THEME} from "../../themes/buttonConst";
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -424,10 +426,10 @@ const Index = () => {
             </Grid>
             <Grid item xs={12} md={12} width="100%">
                 <Stack direction="row" justifyContent="flex-end" alignItems="flex-start" spacing={2} mr={12} >
+                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                     <Button
                             component="span"
                             variant="contained"
-                            size="large"
                             // color="error"
                             onClick={() => paymentClick()}
                             sx={{ mt: 4 }}
@@ -436,12 +438,12 @@ const Index = () => {
                     <Button
                             component="span"
                             variant="contained"
-                            size="large"
                             // color="error"
                             onClick={() => { navigate("/publicNotice") }}
                             sx={{ mt: 4 }}
                         >取消
                     </Button>
+                    </ThemeProvider>
                 </Stack>
             </Grid>
             {/*row 2*/}

src/pages/Proof/Payment/Pay.js

@@ -141,9 +141,20 @@ const Index = () => {
                         </Grid>
                     </Grid>
                     <div>
-                        <Dialog open={isPopUp} onClose={() => setIsPopUp(false)}  >
-                            <DialogTitle></DialogTitle>
-                            <Typography variant="h3" style={{ padding: '16px' }}>確認付款</Typography>
+                        <Dialog
+                            open={isPopUp}
+                            onClose={() => setIsPopUp(false)}
+                            PaperProps={{
+                                sx: {
+                                    minWidth: '40vw',
+                                    maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '30vw' },
+                                    maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '50vh' }
+                                }
+                            }}
+                        >
+                            <DialogTitle>
+                                <Typography variant="h3" >確認付款</Typography>
+                            </DialogTitle>
                             <DialogContent style={{ display: 'flex', }}>
                                 <Stack direction="column" justifyContent="space-between">
                                     <Typography variant="h4">總額(HK$): {FormatUtils.currencyFormat(fee)}</Typography>

src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js

@@ -39,6 +39,7 @@ import EditNoteIcon from '@mui/icons-material/EditNote';
 import DownloadIcon from '@mui/icons-material/Download';
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
+import * as React from "react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const ApplicationDetailCard = (
     { applicationDetailData,
@@ -147,7 +148,7 @@ const ApplicationDetailCard = (
                                 currentApplicationDetailData.status == "confirmed" ?
                                     <Button
                                         variant="contained"
-                                        color="create "
+                                        color="create"
                                         onClick={() => { checkExprityDate(true) }}
                                         disabled={currentApplicationDetailData.status == "rejected"
                                             || currentApplicationDetailData.status == "cancelled"
@@ -564,9 +565,20 @@ const ApplicationDetailCard = (
                         </Grid>
                     </Grid>
                     <div>
-                        <Dialog open={isPopUp} onClose={() => setIsPopUp(false)}  >
-                            <DialogTitle></DialogTitle>
-                            <Typography variant="h3" style={{ padding: '16px' }}>確認付款</Typography>
+                        <Dialog
+                            open={isPopUp}
+                            onClose={() => setIsPopUp(false)}
+                            PaperProps={{
+                                sx: {
+                                    minWidth: '40vw',
+                                    maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '30vw' },
+                                    maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '50vh' }
+                                }
+                            }}
+                        >
+                            <DialogTitle>
+                                <Typography variant="h3" >確認付款</Typography>
+                            </DialogTitle>
                             <DialogContent style={{ display: 'flex', }}>
                                 <Stack direction="column" justifyContent="space-between">
                                     <Typography variant="h4">總額(HK$): {FormatUtils.currencyFormat(fee)}</Typography>