Merge branch 'master' of https://git.2fi-solutions.com/alex/PNSPS-frontend-MaterialUI

src/layout/MainLayout/Header/index.js

@@ -227,7 +227,7 @@ function Header(props) {
                   <Link className="manageUser" to={'/org'}>
                     <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
                       {/* <FormattedMessage id="companyOrUserRecord" /> */}
-                      Organization Profile
+                      <FormattedMessage id="organizationProfile" />
                     </Typography>
                   </Link>
                 </li>

src/pages/DemandNote/Create/SearchForm.js

@@ -186,7 +186,17 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
                 </Grid>
             </form>
             <div>
-                <Dialog open={isFailPopUp} onClose={() => setIsFailPopUp(false)}  >
+                <Dialog
+                    open={isFailPopUp}
+                    onClose={() => setIsFailPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Action Fail</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>{failText}</Typography>
@@ -197,7 +207,17 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
                 </Dialog>
             </div>
             <div>
-                <Dialog open={isSuccessPopUp} onClose={() => setIsSuccessPopUp(false)}  >
+                <Dialog
+                    open={isSuccessPopUp}
+                    onClose={() => setIsSuccessPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Create Result</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Grid container alignItems={"center"}>

src/pages/DemandNote/Search/DataGrid.js

@@ -353,7 +353,17 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch })
                 />
             </Box>
             <div>
-                <Dialog open={isErrorPopUp} onClose={() => setIsErrorPopUp(false)}  >
+                <Dialog
+                    open={isErrorPopUp}
+                    onClose={() => setIsErrorPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Action Fail</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>Number of DN record must less than 100.<br />Please edit search form.</Typography>
@@ -364,7 +374,17 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch })
                 </Dialog>
             </div>
             <div>
-                <Dialog open={selectonWarning} onClose={() => setSelectonWarning(false)}  >
+                <Dialog
+                    open={selectonWarning}
+                    onClose={() => setSelectonWarning(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>Please Select DN.</Typography>
@@ -375,7 +395,17 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch })
                 </Dialog>
             </div>
             <div>
-                <Dialog open={isConfirmPopUp} onClose={() => setConfirmPopUp(false)}  >
+                <Dialog
+                    open={isConfirmPopUp}
+                    onClose={() => setConfirmPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>Are you sure to mark DN paid?</Typography>
@@ -387,7 +417,17 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch })
                 </Dialog>
             </div>
             <div>
-                <Dialog open={isSendPopUp} onClose={() => setSendPopUp(false)}  >
+                <Dialog
+                    open={isSendPopUp}
+                    onClose={() => setSendPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>Are you sure to send DN?</Typography>
@@ -399,7 +439,17 @@ export default function SearchDemandNote({ recordList, reloadFun, applySearch })
                 </Dialog>
             </div>
             <div>
-                <Dialog open={wait} onClose={() => setWait(false)}  >
+                <Dialog
+                    open={wait}
+                    onClose={() => setWait(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>Calculating, please wait ...</Typography>
                     </DialogContent>

src/pages/DemandNote/Search/SearchForm.js

@@ -92,7 +92,7 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                 <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1 }} width="98%">
                     {/*row 1*/}
                     <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1, ml:3,mb:2.5}}>
-                        <Typography variant="h5" >
+                        <Typography variant="pnspsFormHeader" >
                             Search Form
                         </Typography>
                     </Grid>

src/pages/DemandNote/Search_Public/SearchForm.js

@@ -83,8 +83,8 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
                     <Grid item xs={12}>
                         <CardContent sx={{ px: 2.5, pt: 3 }}>
                             <Grid item justifyContent="space-between" alignItems="center" >
-                                <Typography variant="h4">
-                                    <FormattedMessage id="search"/>
+                                <Typography variant="pnspsFormHeader">
+                                    <FormattedMessage id="searchForm"/>
                                 </Typography>
                             </Grid>
                         </CardContent>
@@ -215,6 +215,7 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
                         <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                             <Grid item sx={{mr: 3, mb: 3}}>
                                 <Button
+                                    color="cancel"
                                     variant="contained"
                                     onClick={resetForm}
                                 >

src/pages/DemandNote/Search_Public/index.js

@@ -98,7 +98,7 @@ const UserSearchPage_Individual = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4">
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                                 <FormattedMessage id="paymentInfoRecord" />
                             </Typography>
                         </Stack>

src/pages/EmailTemplate/Detail_GLD/EmailTemplateDetails.js

@@ -4,8 +4,7 @@ import {
     Grid,
     Typography,
     FormLabel,
-    OutlinedInput,
-    Button,
+    Button, TextField,
     // TextField,
     // Autocomplete,
 } from '@mui/material';
@@ -15,6 +14,8 @@ import * as React from "react";
 import Loadable from 'components/Loadable';
 const MainCard = Loadable(React.lazy(() => import('components/MainCard')));
 import { useForm } from 'react-hook-form';
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const ApplicationDetailCard = ({
     formData,
@@ -35,59 +36,30 @@ const ApplicationDetailCard = ({
     //     initialValues: data,
     // });
 
-    const DisplayField = ({ name, width, value, rows = 1, disabled = false }) => {
-        return <OutlinedInput
+    const DisplayField = ({ name, rows, value, disabled = false }) => {
+        return <TextField
             fullWidth
-            multiline
             disabled={disabled}
-            size="small"
-            // onChange={formik.handleChange}
+            inputProps={{ style: {fontSize: '1.1rem'}}}
+            InputProps={{
+                style: {
+                    minHeight:'42.5px',
+                    maxHeight: '50vh',
+                    padding: '0 0 0 0',
+                    height: 'fit-content',
+                    boxSizing: "inherit"},
+            }}
+            sx={{ padding: '10.5px 14px 10.5px 12px'}}
             {...register(name,
                 {
                     value: value,
                 })}
-            id={name}
-            name={name}
-            variant="outlined"
+            multiline
+            minRows={rows}
             maxRows={6}
-            rows={rows}
-            sx={
-                {
-                    "& .Mui-disabled": {
-                        WebkitTextFillColor: "#000000",
-                        background: "#f8f8f8",
-                    },
-                    // "& .MuiInputBase-input.Mui-disabled": {
-                    //     WebkitTextFillColor: "#000000",
-                    //     background: "#f8f8f8",
-                    // },
-                    width: width ? width : '100%'
-                }
-            }
         />;
     }
-
     const { register, handleSubmit } = useForm()
-
-    
-
-    // const DisplaySelection = ({ name = "test", value = "", onChange }) => {
-    //     return <Autocomplete
-    //         {...register(name)}
-    //         disablePortal
-    //         id={name}
-    //         options={formData}
-    //         vale={value}
-    //         onChange={onChange}
-    //         renderInput={(params) => (
-    //             <TextField {...params}
-    //                 InputLabelProps={{
-    //                     shrink: true
-    //                 }}
-    //             />
-    //         )}
-    //     />
-    // }
     return (
         <MainCard
             id={"emailTemplateMainCard"}
@@ -141,6 +113,7 @@ const ApplicationDetailCard = ({
                                             <DisplayField
                                                 name="description"
                                                 value={formData?.description}
+                                                rows={2}
                                             />
                                         </FormControl>
                                     </Grid>
@@ -168,14 +141,14 @@ const ApplicationDetailCard = ({
 
                         <Grid container direction="row" justifyContent="space-between"
                             alignItems="center">
-                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
+                            <Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
                                 <Grid container alignItems={"center"}>
-                                    <Grid item xs={12} md={3} lg={3}
+                                    <Grid item xs={12} md={1.5} lg={1.5}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <FormLabel>Subject (Cht):</FormLabel>
                                     </Grid>
 
-                                    <Grid item xs={12} md={9} lg={9}>
+                                    <Grid item xs={12} md={10.5} lg={10.5}>
                                         <DisplayField
                                             name="subjectCht"
                                             value={formData?.subjectCht}
@@ -202,18 +175,18 @@ const ApplicationDetailCard = ({
                         </Grid>
                         <Grid container direction="row" justifyContent="space-between"
                             alignItems="center">
-                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
+                            <Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
                                 <Grid container alignItems={"center"}>
-                                    <Grid item xs={12} md={3} lg={3}
+                                    <Grid item xs={12} md={1.5} lg={1.5}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <FormLabel>Subject (Chs):</FormLabel>
                                     </Grid>
 
-                                    <Grid item xs={12} md={9} lg={9}>
+                                    <Grid item xs={12} md={10.5} lg={10.5}>
                                         <DisplayField
                                             name="subjectChs"
                                             value={formData?.subjectChs}
-                                            rows={2}
+                                            rows={1}
                                         />
                                     </Grid>
                                 </Grid>
@@ -236,18 +209,18 @@ const ApplicationDetailCard = ({
                         </Grid>
                         <Grid container direction="row" justifyContent="space-between"
                             alignItems="center">
-                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
+                            <Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
                                 <Grid container alignItems={"center"}>
-                                    <Grid item xs={12} md={3} lg={3}
+                                    <Grid item xs={12} md={1.5} lg={1.5}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <FormLabel>Subject (Eng):</FormLabel>
                                     </Grid>
 
-                                    <Grid item xs={12} md={9} lg={9}>
+                                    <Grid item xs={12} md={10.5} lg={10.5}>
                                         <DisplayField
                                             name="subjectEng"
                                             value={formData?.subjectEng}
-                                            rows={2}
+                                            rows={1}
                                         />
                                     </Grid>
                                 </Grid>
@@ -273,33 +246,25 @@ const ApplicationDetailCard = ({
                     {/*bottom button*/}
                     <Grid item s={12} md={12} lg={12} sx={{ mb: 3 }} alignItems={"end"} justifyContent="center">
                         <Grid container maxWidth justifyContent="flex-end">
+                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                             <Grid item sx={{ ml: 3, mr: 3 }}>
                                 <Button
-                                    size="large"
-                                    color="error"
+                                    color="delete"
                                     variant="contained"
                                     onClick={handleDelete}
-                                    sx={{
-                                        textTransform: 'capitalize',
-                                        alignItems: 'end'
-                                    }}
                                 >
-                                    <Typography variant="h5">Delete</Typography>
+                                    Delete
                                 </Button>
                             </Grid>
                             <Grid item sx={{ ml: 3, mr: 3 }}>
                                 <Button
-                                    size="large"
                                     variant="contained"
                                     type="submit"
-                                    sx={{
-                                        textTransform: 'capitalize',
-                                        alignItems: 'end'
-                                    }}
                                 >
-                                    <Typography variant="h5">Save</Typography>
+                                    Save
                                 </Button>
                             </Grid>
+                            </ThemeProvider>
                         </Grid>
                     </Grid>
                 </Grid>

src/pages/EmailTemplate/Search_GLD/index.js

@@ -25,6 +25,8 @@ const BackgroundHead = {
     backgroundPosition: 'right'
 }
 import { useNavigate } from "react-router";
+import {PNSPS_LONG_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -56,7 +58,7 @@ const Index = () => {
             <LoadingComponent />
             :
             (
-                <Grid container sx={{ minHeight: '110vh', backgroundColor: 'backgroundColor.default' }} direction="column" justifyContent="flex-start" alignItems="center" >
+                <Grid container sx={{ backgroundColor: 'backgroundColor.default' }} direction="column" justifyContent="flex-start" alignItems="center" >
                     <Grid item xs={12} width="100%">
                         <div style={BackgroundHead} width="100%">
                             <Stack direction="row" height='70px'>
@@ -78,18 +80,18 @@ const Index = () => {
                     <Grid container direction="row"
                         justifyContent="space-between"
                         alignItems="center">
-                        <Grid item xs={3} md={3} sx={{ ml: 3, mr: 1, mb: 3, mt: 3 }}>
+                        <Grid item xs={3} md={3} sx={{ mb:3, ml: 3, mr: 1 }}>
+                            <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                             <Button
-                                size="large"
                                 variant="contained"
                                 onClick={()=>{navigate('/emailTemplate/-1')}}
-                                sx={{
-                                    textTransform: 'capitalize',
-                                    alignItems: 'end'
-                                }}>
-                                <AddCircleOutlineIcon sx={{ mb: 0.5 }} />
-                                <Typography sx={{ ml: 1 }} variant="h5">New Email Template</Typography>
+                                startIcon={<AddCircleOutlineIcon/>}
+                            >
+
+                                New Email Template
+
                             </Button>
+                            </ThemeProvider>
                         </Grid>
                     </Grid>
                 </Grid >

src/pages/Message/Search/SearchForm.js

@@ -63,8 +63,8 @@ const SearchForm = ({ applySearch, searchCriteria }) => {
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center" >
-                        <Typography variant="h4">
-                            <FormattedMessage id="search"/>
+                        <Typography variant="pnspsFormHeader">
+                            <FormattedMessage id="searchForm"/>
                         </Typography>
                     </Grid>
                 </CardContent>
@@ -141,6 +141,7 @@ const SearchForm = ({ applySearch, searchCriteria }) => {
                     <Grid item sx={{mr: 3, mb: 3 }}>
                         <Button
                             variant="contained"
+                            color="cancel"
                             onClick={resetForm}
                             aria-label={intl.formatMessage({id: 'reset'})}
                         >

src/pages/Message/Search/index.js

@@ -69,7 +69,7 @@ const Index = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4">
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                                 <FormattedMessage id="paymentHistory"/>
                             </Typography>
                         </Stack>

src/pages/Organization/DetailPage/OrganizationCard.js

@@ -18,6 +18,8 @@ import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 import { notifySaveSuccess } from 'utils/CommonFunction';
 import { useIntl } from "react-intl";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -170,97 +172,78 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                             <>
                                 {createMode ?
                                     <>
+                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                         <Grid item sx={{ ml: 0, mr: 3 }}>
                                             <Button
-                                                size="large"
                                                 variant="contained"
                                                 type="submit"
-                                                sx={{
-                                                    textTransform: 'capitalize',
-                                                    alignItems: 'end'
-                                                }}
                                             >
-                                                <Typography variant="h5">Create</Typography>
+                                                Create
                                             </Button>
                                         </Grid>
+                                        </ThemeProvider>
                                     </> :
                                     <>
+                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                         <Grid item sx={{ ml: 0, mr: 3 }}>
                                             <Button
-                                                size="large"
                                                 variant="contained"
                                                 onClick={loadDataFun}
-                                                sx={{
-                                                    textTransform: 'capitalize',
-                                                    alignItems: 'end'
-                                                }}
+                                                color="cancel"
                                             >
-                                                <Typography variant="h5">Reset & Back</Typography>
+                                                    Reset & Back
                                             </Button>
                                         </Grid>
                                         <Grid item sx={{ ml: 3, mr: 3 }}>
                                             <Button
-                                                size="large"
                                                 variant="contained"
                                                 type="submit"
                                                 color="success"
-                                                sx={{
-                                                    textTransform: 'capitalize',
-                                                    alignItems: 'end'
-                                                }}
                                             >
-                                                <Typography variant="h5">Save</Typography>
+                                                Save
                                             </Button>
                                         </Grid>
+                                        </ThemeProvider>
                                     </>
                                 }
                             </>
                             :
                             <>
                                 <Grid item sx={{ ml: 0, mr: 3 }}>
+                                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                     <Button
-                                        size="large"
                                         variant="contained"
-                                        sx={{
-                                            textTransform: 'capitalize',
-                                            alignItems: 'end'
-                                        }}
                                         onClick={onEditClick}
                                     >
-                                        <Typography variant="h5">Edit</Typography>
+                                        Edit
                                     </Button>
+                                    </ThemeProvider>
                                 </Grid>
 
                                 {
                                     currentUserData.creditor ?
                                         <Grid item sx={{ ml: 3, mr: 3 }}>
+                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                             <Button
-                                                size="large"
                                                 variant="contained"
                                                 color="error"
                                                 onClick={() => setNonCreditorConfirmPopUp(true)}
-                                                sx={{
-                                                    textTransform: 'capitalize',
-                                                    alignItems: 'end'
-                                                }}
                                             >
-                                                <Typography variant="h5">Mark as Non-Creditor</Typography>
+                                                Mark as Non-Creditor
                                             </Button>
+                                            </ThemeProvider>
                                         </Grid>
                                         :
                                         <Grid item sx={{ ml: 3, mr: 3 }}>
+                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                             <Button
-                                                size="large"
                                                 variant="contained"
                                                 color="orange"
                                                 onClick={() => setCreditorConfirmPopUp(true)}
-                                                sx={{
-                                                    textTransform: 'capitalize',
-                                                    alignItems: 'end'
-                                                }}
                                             >
-                                                <Typography variant="h5">Mark as Creditor</Typography>
+                                                Mark as Creditor
                                             </Button>
+                                            </ThemeProvider>
                                         </Grid>
                                 }
                             </>
@@ -400,7 +383,17 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                 }
             </form>
             <div>
-                <Dialog open={creditorConfirmPopUp} onClose={() => setCreditorConfirmPopUp(false)}  >
+                <Dialog
+                    open={creditorConfirmPopUp}
+                    onClose={() => setCreditorConfirmPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>Are you sure mark as Creditor?</Typography>
@@ -412,7 +405,17 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                 </Dialog>
             </div>
             <div>
-                <Dialog open={nonCreditorConfirmPopUp} onClose={() => setNonCreditorConfirmPopUp(false)}  >
+                <Dialog
+                    open={nonCreditorConfirmPopUp}
+                    onClose={() => setNonCreditorConfirmPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>Are you sure mark as Non-Creditor?</Typography>

src/pages/Organization/DetailPage/OrganizationPubCard.js

@@ -19,7 +19,9 @@ const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingCo
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 import { notifySaveSuccess } from 'utils/CommonFunction';
-import {useIntl} from "react-intl";
+import {FormattedMessage, useIntl} from "react-intl";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -126,46 +128,38 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                 {createMode ?
                                     <>
                                         <Grid item sx={{ ml: 0, mr: 3 }}>
+                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                             <Button
-                                                size="large"
                                                 variant="contained"
                                                 type="submit"
-                                                sx={{
-                                                    textTransform: 'capitalize',
-                                                    alignItems: 'end'
-                                                }}
                                             >
-                                                <Typography variant="h5">Create</Typography>
+                                                <FormattedMessage id="create" />
                                             </Button>
+                                            </ThemeProvider>
                                         </Grid>
                                     </> :
                                     <>
                                         <Grid item sx={{ ml: 0, mr: 3 }}>
+                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                             <Button
-                                                size="large"
                                                 variant="contained"
+                                                color="cancel"
                                                 onClick={loadDataFun}
-                                                sx={{
-                                                    textTransform: 'capitalize',
-                                                    alignItems: 'end'
-                                                }}
                                             >
-                                                <Typography variant="h5">Reset & Back</Typography>
+                                                <FormattedMessage id="resetAndBack" />
                                             </Button>
+                                            </ThemeProvider>
                                         </Grid>
                                         <Grid item sx={{ ml: 3, mr: 3 }}>
+                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                             <Button
-                                                size="large"
                                                 variant="contained"
                                                 type="submit"
                                                 color="success"
-                                                sx={{
-                                                    textTransform: 'capitalize',
-                                                    alignItems: 'end'
-                                                }}
                                             >
-                                                <Typography variant="h5">Save</Typography>
+                                                <FormattedMessage id="save" />
                                             </Button>
+                                            </ThemeProvider>
                                         </Grid>
                                     </>
                                 }
@@ -173,17 +167,14 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                             :
                             <>
                                 <Grid item sx={{ ml: 0, mr: 3 }}>
+                                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                     <Button
-                                        size="large"
                                         variant="contained"
-                                        sx={{
-                                            textTransform: 'capitalize',
-                                            alignItems: 'end'
-                                        }}
                                         onClick={onEditClick}
                                     >
-                                        <Typography variant="h5">Edit</Typography>
+                                        <FormattedMessage id="edit" />
                                     </Button>
+                                    </ThemeProvider>
                                 </Grid>
                             </>
                         }
@@ -197,12 +188,12 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                     <Grid container spacing={1}>
                         <Grid item xs={12}>
                             <Typography variant="h4" sx={{ mb: 2, mr: 3, borderBottom: "1px solid black" }}>
-                                Organization Details
+                                <FormattedMessage id="organizationDetails" />
                             </Typography>
                         </Grid>
                         <Grid item lg={4} >
                             {FieldUtils.getTextField({
-                                label: FieldUtils.notNullFieldLabel("BR No.:"),
+                                label: intl.formatMessage({id: 'brNo'}) + ":",
                                 valueName: "brNo",
                                 disabled: true,
                                 form: formik
@@ -210,7 +201,7 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                         </Grid>
                         <Grid item lg={4} >
                             {FieldUtils.getTextField({
-                                    label: "Creditor Account" + ":",
+                                    label: intl.formatMessage({id: 'creditorAccount'}) + ":",
                                     valueName: "creditor",
                                     disabled: true,
                                     form: formik
@@ -231,7 +222,7 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
 
                         <Grid item lg={4} >
                             {FieldUtils.getTextField({
-                                label: FieldUtils.notNullFieldLabel("Name (Eng):"),
+                                label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'nameEng'}) + ":"),
                                 valueName: "enCompanyName",
                                 disabled: true,
                                 form: formik
@@ -240,7 +231,7 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
 
                         <Grid item lg={4} >
                             {FieldUtils.getTextField({
-                                label: "Name (Ch):",
+                                label: intl.formatMessage({id: 'nameChi'}) + ":",
                                 valueName: "chCompanyName",
                                 disabled: true,
                                 form: formik
@@ -249,7 +240,7 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
 
                         <Grid item lg={4} >
                             {FieldUtils.getDateField({
-                                label: FieldUtils.notNullFieldLabel("Expiry Date:"),
+                                label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'expiryDate'}) + ":"),
                                 valueName: "brExpiryDate",
                                 disabled: true,
                                 form: formik
@@ -258,7 +249,7 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
 
                         <Grid item lg={4} >
                             {FieldUtils.getTextField({
-                                label: FieldUtils.notNullFieldLabel("Contact Person:"),
+                                label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'contactPerson'}) + ":"),
                                 valueName: "contactPerson",
                                 disabled: (!editMode && !createMode),
                                 form: formik
@@ -267,7 +258,7 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
 
                         <Grid item lg={4} >
                             {FieldUtils.getPhoneField({
-                                label: FieldUtils.notNullFieldLabel("Contact Tel:"),
+                                label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'userContactNumber'}) + ":"),
                                 valueName: {
                                     code: "tel_countryCode",
                                     num: "phoneNumber"
@@ -279,7 +270,7 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
 
                         <Grid item lg={4} >
                             {FieldUtils.getPhoneField({
-                                label: "Fax No:",
+                                label: intl.formatMessage({id: 'contactFaxNumber'}) + ":",
                                 valueName: {
                                     code: "fax_countryCode",
                                     num: "faxNumber"
@@ -291,7 +282,7 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
 
                         <Grid item lg={4} >
                             {FieldUtils.getComboField({
-                                label: FieldUtils.notNullFieldLabel("Country:"),
+                                label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'country'}) + ":"),
                                 valueName: "country",
                                 disabled: (!editMode && !createMode),
                                 dataList: ComboData.country,
@@ -302,7 +293,7 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
 
                         <Grid item lg={4} >
                             {FieldUtils.getComboField({
-                                label: FieldUtils.notNullFieldLabel("District:"),
+                                label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'district'}) + ":"),
                                 valueName: "district",
                                 disabled: (!editMode && !createMode),
                                 dataList: ComboData.district,
@@ -314,7 +305,7 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
 
                         <Grid item lg={4} >
                             {FieldUtils.getAddressField({
-                                label: FieldUtils.notNullFieldLabel("Address:"),
+                                label: FieldUtils.notNullFieldLabel(intl.formatMessage({id: 'formAddress'}) + ":"),
                                 valueName: ["addressLine1", "addressLine2", "addressLine3"],
                                 disabled: (!editMode && !createMode),
                                 form: formik
@@ -327,7 +318,17 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                 }
             </form>
             <div>
-                <Dialog open={creditorConfirmPopUp} onClose={() => setCreditorConfirmPopUp(false)}  >
+                <Dialog
+                    open={creditorConfirmPopUp}
+                    onClose={() => setCreditorConfirmPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>Are you sure mark as Creditor?</Typography>
@@ -339,7 +340,17 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                 </Dialog>
             </div>
             <div>
-                <Dialog open={nonCreditorConfirmPopUp} onClose={() => setNonCreditorConfirmPopUp(false)}  >
+                <Dialog
+                    open={nonCreditorConfirmPopUp}
+                    onClose={() => setNonCreditorConfirmPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>Are you sure mark as Non-Creditor?</Typography>

src/pages/Organization/DetailPage/index.js

@@ -33,6 +33,7 @@ const BackgroundHead = {
     backgroundPosition: 'right'
 }
 import {
+    FormattedMessage,
     // FormattedMessage,
     useIntl
 } from "react-intl";
@@ -130,15 +131,19 @@ const OrganizationDetailPage = () => {
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                         {isGLDLoggedIn()?
-                            <Typography ml={15} color='#FFF' variant="h4">Maintain Organization</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
+                                Maintain Organization
+                            </Typography>
                         :
-                            <Typography ml={15} color='#FFF' variant="h4">Organization Profile</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
+                                <FormattedMessage id="organizationProfile" />
+                            </Typography>
                         }
                         </Stack>
                     </div>
                 </Grid>
                 <Grid item xs={12}>
-                    <Button title="Back" sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/org") }}>
+                    <Button aria-label={intl.formatMessage({id: 'back'})} title="Back" sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/org") }}>
                         <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
                     </Button>
                 </Grid>

src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js

@@ -256,7 +256,17 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
             </div>
 
             <div>
-                <Dialog open={isFailPopUp} onClose={() => setIsFailPopUp(false)}  >
+                <Dialog
+                    open={isFailPopUp}
+                    onClose={() => setIsFailPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Action Fail</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>{failText}</Typography>

src/pages/Organization/SearchPage/OrganizationSearchForm.js

@@ -1,6 +1,6 @@
 // material-ui
 import {
-    Button,
+    CButton,
     Grid, TextField,
     Typography,
     Autocomplete,
@@ -66,7 +66,7 @@ const OrganizationSearchForm = ({ applySearch }) => {
                 <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
                     {/*row 1*/}
                     <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
-                        <Typography variant="h5" >
+                        <Typography variant="pnspsFormHeader" >
                             Search Form
                         </Typography>
                     </Grid>

src/pages/Payment/MultiPaymentWindow.js

@@ -237,12 +237,12 @@ const MultiPaymentWindow = (props) => {
                         <Grid item xs={12} md={12}>
                             <Grid container >
                                 <Grid item>
-                                    <Typography sx={{fontSize: "20px", color: "#000000", textAlign: "left" }}>
+                                    <Typography variant="pnspsFormParagraphBold" sx={{ color: "#000000", textAlign: "left" }}>
                                       <FormattedMessage id="payTotal"/>(HK$):&nbsp;
                                     </Typography>
                                 </Grid>
                                 <Grid item>
-                                    <Typography sx={{fontSize: "20px", color: "#000000", textAlign: "left" }}>
+                                    <Typography variant="pnspsFormParagraphBold" sx={{color: "#000000", textAlign: "left" }}>
                                         {" HK$ " + FormatUtils.currencyFormat(props.totalAmount)}
                                     </Typography>
                                 </Grid>

src/pages/Payment/Search_GLD/SearchForm.js

@@ -49,7 +49,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                 <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
                     {/*row 1*/}
                     <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
-                        <Typography variant="h5" >
+                        <Typography variant="pnspsFormHeader" >
                             Search Form
                         </Typography>
                     </Grid>
@@ -154,6 +154,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                     <Grid item sx={{ ml: 3, mb: 3}}>
                         <Button
                             variant="contained"
+                            color="cancel"
                             onClick={resetForm}
                         >
                             Reset

src/pages/Payment/Search_Public/SearchForm.js

@@ -68,8 +68,8 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center" >
-                        <Typography variant="h4">
-                            <FormattedMessage id="search"/>
+                        <Typography variant="pnspsFormHeader">
+                            <FormattedMessage id="searchForm"/>
                         </Typography>
                     </Grid>
                 </CardContent>
@@ -182,6 +182,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                     <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                     <Grid item sx={{mr: 3, mb: 3 }}>
                         <Button
+                            color="cancel"
                             variant="contained"
                             onClick={resetForm}
                             aria-label={intl.formatMessage({id: 'reset'})}

src/pages/Payment/Search_Public/index.js

@@ -69,7 +69,7 @@ const Index = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4">
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                                 <FormattedMessage id="paymentHistory"/>
                             </Typography>
                         </Stack>

src/pages/Payment/index.js

@@ -433,7 +433,17 @@ const Index = () => {
             </Grid>
             {/*row 2*/}
             <div>
-                <Dialog open={expiryDateErr} onClose={() => setExpiryDateErr(false)}  >
+                <Dialog
+                    open={expiryDateErr}
+                    onClose={() => setExpiryDateErr(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle></DialogTitle>
                     <Typography variant="h2" style={{ padding: '16px' }}>行動失敗</Typography>
                     <DialogContent style={{ display: 'flex', }}>

src/pages/Proof/Create_FromApp/ProofForm.js

@@ -428,7 +428,17 @@ const FormPanel = ({ formData }) => {
 
             </form>
             <div>
-                <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >
+                <Dialog
+                    open={isWarningPopUp}
+                    onClose={() => setIsWarningPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography>
@@ -439,7 +449,17 @@ const FormPanel = ({ formData }) => {
                 </Dialog>
             </div>
             <div>
-                <Dialog open={wait} onClose={() => setWait(false)}  >
+                <Dialog
+                    open={wait}
+                    onClose={() => setWait(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>Calculating, please wait ...</Typography>
                     </DialogContent>

src/pages/Proof/Payment/Pay.js

@@ -85,9 +85,9 @@ const Index = () => {
             (
                 <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
                     <Grid item xs={12} width="100%">
-                        <div style={BackgroundHead} width="100%">
+                        <div style={BackgroundHead} width="100%" >
                             <Stack direction="row" height='70px'>
-                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }, pt:2}}>
                                     <FormattedMessage id="proofRecord"/>
                                 </Typography>
                             </Stack>

src/pages/Proof/Payment/Pay_Creditor.js

@@ -65,9 +65,9 @@ const Index = () => {
             (
                 <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
                     <Grid item xs={12} width="100%">
-                        <div style={BackgroundHead} width="100%">
-                            <Stack direction="row" height='70px'>
-                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>
+                        <div style={BackgroundHead} width="100%" >
+                            <Stack direction="row" height='70px' >
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }, pt:2}} >
                                     <FormattedMessage id="proofRecord"/>
                                 </Typography>
                             </Stack>

src/pages/Proof/Reply_GLD/ApplicationDetails.js

@@ -294,7 +294,10 @@ const ApplicationDetailCard = ({
                     </Grid>
                 </Grid>
                 <div>
-                    <Dialog open={cancelPopUp} onClose={() => setCancelPopUp(false)}  >
+                    <Dialog
+                        open={cancelPopUp}
+                        onClose={() => setCancelPopUp(false)}
+                    >
                         <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
                         <DialogContent style={{ display: 'flex', }}>
                             <Typography variant="h4" style={{ padding: '16px' }}>Are you sure you want to cancel this proof?</Typography>

src/pages/Proof/Reply_GLD/index.js

@@ -119,7 +119,9 @@ const Index = () => {
                     <Grid item xs={12} width="100%">
                         <div style={BackgroundHead} width="100%">
                             <Stack direction="row" height='70px'>
-                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>Proof Record</Typography>
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
+                                    Proof Record
+                                </Typography>
                             </Stack>
                         </div>
                     </Grid>

src/pages/Proof/Reply_Public/ApplicationDetails.js

@@ -79,7 +79,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel><Typography variant="h5">
+                                        <FormLabel><Typography variant="pnspsFormParagraph">
                                             <FormattedMessage id="applicationId"/>:
                                         </Typography></FormLabel>
                                     </Grid>
@@ -93,7 +93,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                                 <Grid container alignItems={"left"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel><Typography variant="h5">
+                                        <FormLabel><Typography variant="pnspsFormParagraph">
                                             <FormattedMessage id="applyStatus"/>:
                                         </Typography></FormLabel>
                                     </Grid>
@@ -112,7 +112,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel><Typography variant="h5">
+                                        <FormLabel><Typography variant="pnspsFormParagraph">
                                             <FormattedMessage id="applyPerson"/>:
                                         </Typography></FormLabel>
                                     </Grid>
@@ -132,7 +132,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel><Typography variant="h5">
+                                        <FormLabel><Typography variant="pnspsFormParagraph">
                                             <FormattedMessage id="gazetteCount"/>:
                                         </Typography></FormLabel>
                                     </Grid>
@@ -149,7 +149,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel><Typography variant="h5">
+                                        <FormLabel><Typography variant="pnspsFormParagraph">
                                             <FormattedMessage id="contactPerson"/>:
                                         </Typography></FormLabel>
                                     </Grid>
@@ -164,7 +164,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel><Typography variant="h5">
+                                        <FormLabel><Typography variant="pnspsFormParagraph">
                                             <FormattedMessage id="applicationPublishDate" />:
                                         </Typography></FormLabel>
                                     </Grid>
@@ -181,7 +181,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                                 <Grid container alignItems="left">
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel><Typography variant="h5">
+                                        <FormLabel><Typography variant="pnspsFormParagraph">
                                             <FormattedMessage id="myRemarks"/>:
                                         </Typography></FormLabel>
                                     </Grid>
@@ -205,7 +205,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                             <Grid item xs={12} sm={12} md={6} lg={6} sx={{mb: 1}}>
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} sm={12} md={12} lg={12} sx={{ alignItems: 'center',wordBreak: 'break-word' }}>
-                                        <Typography><Typography variant="h5">
+                                        <Typography><Typography variant="pnspsFormParagraph">
                                             <FormattedMessage id="pleaseCheckReminder" />：
                                         </Typography></Typography>
                                     </Grid>
@@ -248,7 +248,7 @@ const ApplicationDetailCard = ({ formData, }) => {
                                     </Grid>
                                     <Grid item xs={12} sm={3} md={3} lg={3}
                                         sx={{ mb: 1, display: 'flex', alignItems: 'center' }}>
-                                        <Typography variant="h5">
+                                        <Typography variant="pnspsFormParagraph">
                                             <FormattedMessage id="payFeeFor"/>:
                                         </Typography>
                                     </Grid>
@@ -259,9 +259,9 @@ const ApplicationDetailCard = ({ formData, }) => {
                                         {
                                             formik.values.groupType === "Private Bill"
                                                 ?
-                                                <Typography variant="h5">( {data.noOfPages} {intl.formatMessage({id: 'page'})} x $6,552 )</Typography>
+                                                <Typography variant="pnspsFormParagraph">( {data.noOfPages} {intl.formatMessage({id: 'page'})} x $6,552 )</Typography>
                                                 :
-                                                <Typography variant="h5">( {data.length} cm x {data.colCount === 2 ? "$364 二格位" : "$182 一格位"} )</Typography>
+                                                <Typography variant="pnspsFormParagraph">( {data.length} cm x {data.colCount === 2 ? "$364 二格位" : "$182 一格位"} )</Typography>
                                         }
                                     </Grid>
                                 </Grid>

src/pages/Proof/Reply_Public/ProofForm.js

@@ -322,7 +322,17 @@ const FormPanel = ({ formData }) => {
 
             </form>
             <div>
-                <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >
+                <Dialog
+                    open={isWarningPopUp}
+                    onClose={() => setIsWarningPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle>
                         <FormattedMessage id="attention"/>
                     </DialogTitle>

src/pages/Proof/Reply_Public/index.js

@@ -84,11 +84,11 @@ const Index = () => {
             <LoadingComponent />
             :
             (
-                <Grid container sx={{ width: '100%', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
+                <Grid container sx={{ width: '100%', backgroundColor: '#fff' }} direction="column"  justifyContent="flex-start" alignItems="center" >
                     <Grid item xs={12} width="100%">
                         <div style={BackgroundHead} width="100%">
                             <Stack direction="row" height='70px'>
-                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }, pt:2}}>
                                     <FormattedMessage id="proofRecord"/>
                                 </Typography>
                             </Stack>

src/pages/Proof/Search_GLD/SearchForm.js

@@ -96,7 +96,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
 
                     {/*row 1*/}
                     <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
-                        <Typography variant="h5" >
+                        <Typography variant="pnspsFormHeader" >
                             Search Form
                         </Typography>
                     </Grid>

src/pages/Proof/Search_Public/SearchForm.js

@@ -102,8 +102,8 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center">
-                        <Typography variant="h4">
-                            <FormattedMessage id="search"/>
+                        <Typography variant="pnspsFormHeader">
+                            <FormattedMessage id="searchForm"/>
                         </Typography>
                     </Grid>
                 </CardContent>
@@ -276,6 +276,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
                     <Grid item sx={{ mr: 3, mb: 3 }}>
                         <Button
                             variant="contained"
+                            color="cancel"
                             onClick={resetForm}
                             aria-label={intl.formatMessage({id: 'reset'})}
                         >

src/pages/Proof/Search_Public/index.js

@@ -82,9 +82,9 @@ const UserSearchPage_Individual = () => {
             :
             <Grid container sx={{minHeight: '85vh',backgroundColor:'#ffffff'}} direction="column">
                 <Grid item xs={12}>
-                    <div style={BackgroundHead}>
-                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4">
+                    <div style={BackgroundHead} >
+                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center" >
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                                 <FormattedMessage id="proofRecord"/>
                             </Typography>
                         </Stack>

src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js

@@ -132,7 +132,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
             <Grid item xs={12} md={12} width="100%" >
                 <div style={BackgroundHead}>
                     <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                        <Typography ml={15} color='#FFF' variant="h4">
+                        <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                             <FormattedMessage id="applyPublicNotice"/>
                         </Typography>
                     </Stack>
@@ -148,7 +148,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                 </Button>
             </Grid>
             {/* <Grid item xs={12}>
-                    <Typography variant="h5">申請公共啟事</Typography>
+                    <Typography variant="pnspsFormParagraphBold">申請公共啟事</Typography>
                 </Grid> */}
             <Grid item xs={12} md={12} width={{ md: "60%", xs: "90%" }}>
                 <Box xs={12} mt={1} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px' }}>
@@ -188,7 +188,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <Typography variant="h5">
+                                        <Typography variant="pnspsFormParagraphBold">
                                             <FormattedMessage id="targetVol" />:
                                         </Typography>
                                     </Grid>
@@ -214,7 +214,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                                 <Grid container direction="row" justifyContent="flex-start" alignItems="center">
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <Typography variant="h5">
+                                        <Typography variant="pnspsFormParagraphBold">
                                             <FormattedMessage id="draftFile"/> ({intl.formatMessage({id: 'fileSizeWarning'})}):
                                         </Typography>
                                     </Grid>
@@ -279,7 +279,17 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                 </Box>
             </Grid>
             <div>
-                <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >
+                <Dialog
+                    open={isWarningPopUp}
+                    onClose={() => setIsWarningPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle>
                         <FormattedMessage id="attention"/>
                     </DialogTitle>

src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js

@@ -537,7 +537,17 @@ const ApplicationDetailCard = (
                     </Grid>
                 </form>
                 <div>
-                    <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >
+                    <Dialog
+                        open={isWarningPopUp}
+                        onClose={() => setIsWarningPopUp(false)}
+                        PaperProps={{
+                            sx: {
+                                minWidth: '40vw',
+                                maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                                maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                            }
+                        }}
+                    >
                         <DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>
                         <DialogContent style={{ display: 'flex', }}>
                             <Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography>

src/pages/PublicNotice/Details_GLD/GazetteDetailCard.js

@@ -262,7 +262,16 @@ const GazetteDetailCard = (
                     </Grid>
                 </form>
                 <div>
-                <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >
+                <Dialog
+                    open={isWarningPopUp}
+                    onClose={() => setIsWarningPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}>
                     <DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography>

src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js

@@ -190,7 +190,7 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel><Typography variant="h5">
+                                            <FormLabel><Typography variant="pnspsFormParagraph">
                                                 <FormattedMessage id="applicationId"/>:
                                             </Typography></FormLabel>
                                         </Grid>
@@ -220,7 +220,7 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel><Typography variant="h5">
+                                            <FormLabel><Typography variant="pnspsFormParagraph">
                                                 <FormattedMessage id="applyStatus"/>:
                                             </Typography></FormLabel>
                                         </Grid>
@@ -236,11 +236,11 @@ const ApplicationDetailCard = (
                                                     <Grid container alignItems={"center"}>
                                                         <Stack direction="row" justifyContent="flex-start" alignItems="center">
                                                             <Grid item xs={12} md={7} lg={7}>
-                                                                <FormLabel><Typography variant="h5">原因:</Typography></FormLabel>
+                                                                <FormLabel><Typography variant="pnspsFormParagraph">原因:</Typography></FormLabel>
                                                             </Grid>
                                                             <Grid item xs={12} md={5} lg={5}>
                                                                 <FormControl variant="outlined" fullWidth disabled>
-                                                                    <Typography id='reason' variant="h5">
+                                                                    <Typography id='reason' variant="pnspsFormParagraph">
                                                                         {currentApplicationDetailData.reason}
                                                                     </Typography>
                                                                 </FormControl>
@@ -259,7 +259,7 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel><Typography variant="h5">
+                                            <FormLabel><Typography variant="pnspsFormParagraph">
                                                 <FormattedMessage id="applyPerson"/>:
                                             </Typography></FormLabel>
                                         </Grid>
@@ -306,7 +306,7 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel><Typography variant="h5">
+                                            <FormLabel><Typography variant="pnspsFormParagraph">
                                                 <FormattedMessage id="gazetteCount"/>:
                                             </Typography></FormLabel>
                                         </Grid>
@@ -340,7 +340,7 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel><Typography variant="h5">
+                                            <FormLabel><Typography variant="pnspsFormParagraph">
                                                 <FormattedMessage id="contactPerson"/>:
                                             </Typography></FormLabel>
                                         </Grid>
@@ -370,7 +370,7 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel><Typography variant="h5">
+                                            <FormLabel><Typography variant="pnspsFormParagraph">
                                                 <FormattedMessage id="publishDate"/>:
                                             </Typography></FormLabel>
                                         </Grid>
@@ -405,7 +405,7 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel><Typography variant="h5">
+                                            <FormLabel><Typography variant="pnspsFormParagraph">
                                                 <FormattedMessage id="userContactNumber"/>:
                                             </Typography></FormLabel>
                                         </Grid>
@@ -454,13 +454,13 @@ const ApplicationDetailCard = (
                                             <Grid container alignItems={"center"}>
                                                 <Grid item xs={12} md={3} lg={3}
                                                     sx={{ display: 'flex', alignItems: 'center' }}>
-                                                    <FormLabel><Typography variant="h5">
+                                                    <FormLabel><Typography variant="pnspsFormParagraph">
                                                         <FormattedMessage id="currencyPrice"/>(HK$):
                                                     </Typography></FormLabel>
                                                 </Grid>
 
                                                 <Grid item xs={12} md={9} lg={9}>
-                                                    <FormLabel><Typography variant="h5">{FormatUtils.currencyFormat(fee)}</Typography></FormLabel>
+                                                    <FormLabel><Typography variant="pnspsFormParagraph">{FormatUtils.currencyFormat(fee)}</Typography></FormLabel>
                                                 </Grid>
                                             </Grid>
                                         </Grid>
@@ -473,7 +473,7 @@ const ApplicationDetailCard = (
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel><Typography variant="h5">
+                                        <FormLabel><Typography variant="pnspsFormParagraph">
                                             <FormattedMessage id="userFaxNumber"/>:
                                         </Typography></FormLabel>
                                     </Grid>
@@ -524,35 +524,32 @@ const ApplicationDetailCard = (
                                             <Grid container direction="row">
                                                 <Grid item xs={12} sm={12} md={2.5} lg={1.6}
                                                     sx={{ display: 'flex', alignItems: 'center' }}>
-                                                    <FormLabel><Typography variant="h5">
+                                                    <FormLabel><Typography variant="pnspsFormParagraph">
                                                         <FormattedMessage id="draftFile"/>:
                                                     </Typography></FormLabel>
                                                 </Grid>
                                                 <Grid item xs={12} sm={12} md={9} lg={9} >
                                                     <Grid container direction="row" alignItems="center" justifyContent="flex-start">
-                                                        <Grid item xs={12} sm={12} md={9} lg={9} sx={{ wordBreak: 'break-word' , }}>
-                                                            <FormControl variant="outlined" fullWidth  >
-                                                                <Typography
-                                                                    fullWidth
-                                                                    id='fileName'
-                                                                    variant="h5"
-                                                                >
-                                                                    {fileDetail.filename}
-                                                                </Typography>
-                                                            </FormControl>
-                                                        </Grid>
-                                                        <Grid item xs={12} sm={12} md={3} lg={3} >
-                                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
-                                                            <Button
-                                                                variant="contained"
-                                                                onClick={onDownloadClick()}
-                                                                aria-label={intl.formatMessage({id: 'download'})}
-                                                                title={intl.formatMessage({id: 'download'})}
-                                                                color="save"
-                                                                startIcon={<DownloadIcon sx={{alignItems:"center"}}/>}
+                                                        <Grid item xs={12} sm={12} md={12} lg={12} sx={{ wordBreak: 'break-word' , }}>
+                                                            <Typography
+                                                                fullWidth
+                                                                id='fileName'
+                                                                variant="pnspsFormParagraph"
                                                             >
-                                                                <FormattedMessage id="download"/>
-                                                            </Button>
+                                                                {fileDetail.filename}
+                                                            </Typography>
+                                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                                                                <Button
+                                                                    sx={{ml:3}}
+                                                                    variant="contained"
+                                                                    onClick={onDownloadClick()}
+                                                                    aria-label={intl.formatMessage({id: 'download'})}
+                                                                    title={intl.formatMessage({id: 'download'})}
+                                                                    color="save"
+                                                                    startIcon={<DownloadIcon sx={{alignItems:"center"}}/>}
+                                                                >
+                                                                    <FormattedMessage id="download"/>
+                                                                </Button>
                                                             </ThemeProvider>
                                                         </Grid>
                                                     </Grid>
@@ -567,10 +564,10 @@ const ApplicationDetailCard = (
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={12} md={3} lg={3}
                                             sx={{ display: 'flex', alignItems: 'center' }}>
-                                            <FormLabel><Typography variant="h5">Care Of:</Typography></FormLabel>
+                                            <FormLabel><Typography variant="pnspsFormParagraph">Care Of:</Typography></FormLabel>
                                         </Grid>
                                         <Grid item xs={12} md={9} lg={9}>
-                                            <Typography variant="h5">{currentApplicationDetailData.careOf}</Typography>
+                                            <Typography variant="pnspsFormParagraph">{currentApplicationDetailData.careOf}</Typography>
                                         </Grid>
                                     </Grid>
                                 </Grid> : null
@@ -579,12 +576,12 @@ const ApplicationDetailCard = (
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <FormLabel><Typography variant="h5">
+                                        <FormLabel><Typography variant="pnspsFormParagraph">
                                             <FormattedMessage id="extraMark"/>:
                                         </Typography></FormLabel>
                                     </Grid>
                                     <Grid item xs={12} md={9} lg={9}>
-                                        <Typography variant="h5">{currentApplicationDetailData.remarks}</Typography>
+                                        <Typography variant="pnspsFormParagraph">{currentApplicationDetailData.remarks}</Typography>
                                     </Grid>
                                 </Grid>
                             </Grid>
@@ -619,21 +616,31 @@ const ApplicationDetailCard = (
                                     onClick={() => setIsPopUp(false)}
                                     aria-label={intl.formatMessage({id: 'close'})}
                                 >
-                                    <Typography variant="h5">
+                                    <Typography variant="pnspsFormParagraph">
                                     <FormattedMessage id="close"/>
                                 </Typography></Button>
                                 <Button
                                     onClick={() => doPayment()}
                                     aria-label={intl.formatMessage({id: 'confirm'})}
                                 >
-                                    <Typography variant="h5">
+                                    <Typography variant="pnspsFormParagraph">
                                     <FormattedMessage id="confirm"/>
                                 </Typography></Button>
                             </DialogActions>
                         </Dialog>
                     </div>
                     <div>
-                        <Dialog open={errorPopUp} onClose={() => setErrorPopUp(false)}  >
+                        <Dialog
+                            open={errorPopUp}
+                            onClose={() => setErrorPopUp(false)}
+                            PaperProps={{
+                                sx: {
+                                    minWidth: '40vw',
+                                    maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                                    maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                                }
+                            }}
+                        >
                             <DialogTitle></DialogTitle>
                             <Typography variant="h2" style={{ padding: '16px' }}>行動失敗</Typography>
                             <DialogContent style={{ display: 'flex', }}>
@@ -648,7 +655,7 @@ const ApplicationDetailCard = (
                                     onClick={() => setErrorPopUp(false)}
                                     aria-label={intl.formatMessage({id: 'close'})}
                                 >
-                                    <Typography variant="h5">
+                                    <Typography variant="pnspsFormParagraph">
                                         <FormattedMessage id="close"/>
                                     </Typography></Button>
                             </DialogActions>

src/pages/PublicNotice/Details_Public/StatusChangeDialog.js

@@ -21,15 +21,16 @@ import * as yup from 'yup';
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
 import {FormattedMessage} from "react-intl";
-
+import {useIntl} from "react-intl";
 
 const StatusChangeDialog = (props) => {
   const [status, setStatus] = useState("");
-  
+  const intl = useIntl();
+
   useEffect(() => {
     console.log(Object.keys(!props.selectedGazetteGroup).length)
     if(props.getStatus === "cancel"){
-      setStatus("取消")
+      setStatus(intl.formatMessage({id: 'cancel'}))
     }
   }, [props.getStatus]);
   
@@ -60,8 +61,8 @@ const StatusChangeDialog = (props) => {
         maxWidth={'xs'}
       >
         <DialogTitle >
-          <Typography variant="h4" color="error">
-            {status}公共啟事
+          <Typography variant="h4">
+            {status} {intl.formatMessage({id: 'publicNotice'})}
           </Typography>
         </DialogTitle>
         <FormikProvider value={formik}>
@@ -69,7 +70,8 @@ const StatusChangeDialog = (props) => {
               <DialogContent>
                 <DialogContentText>
                   <FormLabel sx={{fontSize: "18px", color:"#000000",textAlign:"center"}}>
-                    <Typography variant="h5">確定{status}公共啟事?</Typography>
+                    <Typography variant="h5">
+                      {intl.formatMessage({id: 'confirmTo'})}{status} {intl.formatMessage({id: 'publicNotice'})}?</Typography>
                   </FormLabel>
                 </DialogContentText>
               </DialogContent>
@@ -82,7 +84,7 @@ const StatusChangeDialog = (props) => {
                 variant="contained"
                 onClick={props.handleClose}
                 autoFocus
-                color="delete"
+                color="cancel"
             >
               <FormattedMessage id="cancel"/>
             </Button>

src/pages/PublicNotice/Details_Public/index.js

@@ -154,7 +154,7 @@ const DashboardDefault = () => {
       <Grid item xs={12}>
         <div style={BackgroundHead}>
           <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-            <Typography ml={15} color='#FFF' variant="h4">
+            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
               <FormattedMessage id="myPublicNotice"/>
             </Typography>
           </Stack>

src/pages/PublicNotice/ListPanel/BaseGrid.js

@@ -80,13 +80,13 @@ export default function BaseGrid({rows}) {
             renderCell: (params) => (
                 isORGLoggedIn()? 
                 <div>
-                  <Typography>Care Of: {params.row.careOf}</Typography>
+                  <Typography variant="pnspsNormalText">Care Of: {params.row.careOf}</Typography>
                   <Typography>
-                      <FormattedMessage id="myRemarks"/>: {params.row.remarks}
+                      <FormattedMessage variant="pnspsNormalText" id="myRemarks"/>: {params.row.remarks}
                   </Typography>
                 </div>:
                 <div>
-                    <Typography>{params.row.remarks}</Typography>
+                    <Typography variant="pnspsNormalText">{params.row.remarks}</Typography>
                 </div>
               )
         },

src/pages/PublicNotice/ListPanel/PendingPaymentTab.js

@@ -166,12 +166,12 @@ export default function SubmittedTab({ rows }) {
             renderCell: (params) => (
                 isORGLoggedIn() ?
                     <div>
-                        <Typography>Care Of: {params.row.careOf}</Typography>
-                        <Typography>
+                        <Typography variant="pnspsNormalText">Care Of: {params.row.careOf}</Typography>
+                        <Typography variant="pnspsNormalText">
                             <FormattedMessage id="myRemarks"/>: {params.row.remarks}</Typography>
                     </div> :
                     <div>
-                        <Typography>{params.row.remarks}</Typography>
+                        <Typography variant="pnspsNormalText">{params.row.remarks}</Typography>
                     </div>
             )
         },
@@ -365,7 +365,17 @@ export default function SubmittedTab({ rows }) {
             </div>
 
             <div>
-                <Dialog open={checkCareOf} onClose={() => setCheckCareOf(false)}  >
+                <Dialog
+                    open={checkCareOf}
+                    onClose={() => setCheckCareOf(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle></DialogTitle>
                     <Typography variant="h2" style={{ padding: '16px' }}>Warning</Typography>
                     <DialogContent style={{ display: 'flex', }}>
@@ -390,7 +400,17 @@ export default function SubmittedTab({ rows }) {
             </div>
 
             <div>
-                <Dialog open={expiryDateErr} onClose={() => setExpiryDateErr(false)}  >
+                <Dialog
+                    open={expiryDateErr}
+                    onClose={() => setExpiryDateErr(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle></DialogTitle>
                     <Typography variant="h2" style={{ padding: '16px' }}>行動失敗</Typography>
                     <DialogContent style={{ display: 'flex', }}>

src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js

@@ -65,7 +65,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                 {/*row 1*/}
                 <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:marginBottom}}>
                     <Typography variant="pnspsFormHeader" >
-                        <FormattedMessage id="search"/>
+                        <FormattedMessage id="searchForm"/>
                     </Typography>
                 </Grid>
                 {/*row 2*/}
@@ -217,6 +217,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                     <Grid item sx={{ ml: 3, mr: 3 }}>
                         <Button
                             variant="contained"
+                            color="cancel"
                             onClick={resetForm}
                             aria-label={intl.formatMessage({id: 'reset'})}
                         >

src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js

@@ -83,13 +83,13 @@ export default function SearchPublicNoticeTable({ recordList }) {
             renderCell: (params) => (
                 isORGLoggedIn()? 
                 <div>
-                  <Typography>Care Of: {params.row.careOf}</Typography>
-                  <Typography>
+                  <Typography variant="pnspsNormalText">Care Of: {params.row.careOf}</Typography>
+                  <Typography variant="pnspsNormalText">
                       <FormattedMessage id="myRemarks"/>: {params.row.remarks}
                   </Typography>
                 </div>:
                 <div>
-                     <Typography>{params.row.remarks}</Typography>
+                     <Typography variant="pnspsNormalText">{params.row.remarks}</Typography>
                 </div>
               )
         },

src/pages/PublicNotice/ListPanel/index.js

@@ -108,7 +108,7 @@ const PublicNotice = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4">
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                                 <FormattedMessage id="myPublicNotice"/>
                             </Typography>
                         </Stack>
@@ -129,7 +129,7 @@ const PublicNotice = () => {
 
                 {
                     JSON.parse(localStorage.getItem('userData')).creditor ? (
-                        <Grid item xs={12} sm={12} md={12} lg={12} sx={{ height:'100%', maxWidth: '1%',width: "-webkit-fill-available", backgroundColor: "#fff", mt: 3, mr: 3, ml: 3, mb: 3, ..._sx }}>
+                        <Grid item xs={12} sm={12} md={12} lg={12} sx={{ height:'100%', maxWidth: '100%',width: "-webkit-fill-available", backgroundColor: "#fff", mt: 3, mr: 3, ml: 3, mb: 3, ..._sx }}>
                             <TabContext value={selectedTab}>
                                 <Box sx={{ borderBottom: 1, borderColor: 'divider', overflowX: 'auto', overflowY:'auto' }}>
                                     <TabList onChange={handleChange} aria-label="lab API tabs example" sx={{ display: 'flex', flexDirection: 'row' }}>

src/pages/PublicNotice/Search_GLD/SearchForm.js

@@ -94,7 +94,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                 <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1, mb: marginBottom}} width="98%">
                     {/*row 1*/}
                     <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:marginBottom}}>
-                        <Typography variant="h5" >
+                        <Typography variant="pnspsFormHeader" >
                             Search Form
                         </Typography>
                     </Grid>

src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js

@@ -17,6 +17,8 @@ import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 import { notifyActiveSuccess, notifyLockSuccess, notifySaveSuccess, notifyVerifySuccess } from 'utils/CommonFunction';
 import {useIntl} from "react-intl";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -150,49 +152,39 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                         <Grid container maxWidth justifyContent="flex-start">
                             {editMode ?
                                 <>
+                                <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                     <Grid item sx={{ mr: 3 }}>
                                         <Button
-                                            size="large"
                                             variant="contained"
                                             onClick={loadDataFun}
-                                            sx={{
-                                                textTransform: 'capitalize',
-                                                alignItems: 'end'
-                                            }}
+                                            color="cancel"
                                         >
-                                            <Typography variant="h5">Reset & Back</Typography>
+                                            Reset & Back
                                         </Button>
                                     </Grid>
 
                                     <Grid item sx={{ ml: 3, mr: 3 }}>
                                         <Button
-                                            size="large"
                                             variant="contained"
                                             type="submit"
                                             color="success"
-                                            sx={{
-                                                textTransform: 'capitalize',
-                                                alignItems: 'end'
-                                            }}
                                         >
-                                            <Typography variant="h5">Save</Typography>
+                                            Save
                                         </Button>
                                     </Grid>
+                                </ThemeProvider>
                                 </>
                                 :
                                 <>
                                     <Grid item sx={{ mr: 3 }}>
+                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                         <Button
-                                            size="large"
                                             variant="contained"
-                                            sx={{
-                                                textTransform: 'capitalize',
-                                                alignItems: 'end'
-                                            }}
                                             onClick={onEditClick}
                                         >
-                                            <Typography variant="h5">Edit</Typography>
+                                            Edit
                                         </Button>
+                                        </ThemeProvider>
                                     </Grid>
                                 </>
                             }
@@ -321,16 +313,14 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                                     })}
                                                 </Grid>
                                                 <Grid item xs={2} sm={2} md={2} lg={2} sx={{ml:2 ,mb:2}}>
+                                                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                     <Button
                                                         variant="contained"
-                                                        sx={{
-                                                            textTransform: 'capitalize',
-                                                            alignItems: 'end',
-                                                        }}
                                                         onClick={onVerifiedClick}
                                                     >
-                                                        <Typography variant="h5">Verify</Typography>
+                                                        Verify
                                                     </Button>
+                                                    </ThemeProvider>
                                                 </Grid>
                                             </>
                                     }
@@ -454,31 +444,27 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                                 </Grid>
                                                 {locked ?
                                                     <Grid item xs={2} sm={2} md={2} lg={2}  sx={{ml:2}}>
+                                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                         <Button
                                                             variant="contained"
                                                             color="success"
-                                                            sx={{
-                                                                textTransform: 'capitalize',
-                                                                alignItems: 'end'
-                                                            }}
                                                             onClick={doUnlock}
                                                         >
-                                                            <Typography variant="h5">Active</Typography>
+                                                            Active
                                                         </Button>
+                                                        </ThemeProvider>
                                                     </Grid>
                                                     :
                                                     <Grid item xs={2} sm={2} md={2} lg={2} sx={{ml:2}}>
+                                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                         <Button
                                                             variant="contained"
                                                             color="error"
-                                                            sx={{
-                                                                textTransform: 'capitalize',
-                                                                alignItems: 'end'
-                                                            }}
                                                             onClick={doLock}
                                                         >
-                                                            <Typography variant="h5">Lock</Typography>
+                                                            Lock
                                                         </Button>
+                                                        </ThemeProvider>
                                                     </Grid>
                                                 }
                                             </>

src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js

@@ -118,6 +118,7 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
                                         <Button
                                             aria-label={intl.formatMessage({id: 'back'})}
                                             variant="contained"
+                                            color="cancel"
                                             onClick={loadDataFun}
                                         >
                                             <FormattedMessage id="resetAndBack" />
@@ -217,7 +218,7 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
                             <Grid xs={12} sm={12} md={12} lg={4}>
                                 <Grid container alignItems={"center"} sx={{mb:2}}>
                                     <Grid item xs={12} sm={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
-                                        <Typography variant="h5">
+                                        <Typography variant="pnspsFormParagraphBold">
                                             <FormattedMessage id="idNo" />:
                                         </Typography>
                                     </Grid>

src/pages/User/DetailsPage_Individual/index.js

@@ -125,9 +125,11 @@ const UserMaintainPage_Individual = () => {
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                         {isGLDLoggedIn()?
-                            <Typography ml={15} color='#FFF' variant="h4">Maintain Individual User</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
+                                Maintain Individual User
+                            </Typography>
                         :
-                            <Typography ml={15} color='#FFF' variant="h4">
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
                                 <FormattedMessage id="userProfile" />
                             </Typography>
                         }

src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js

@@ -18,6 +18,8 @@ import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 import { notifyActiveSuccess, notifyLockSuccess, notifySaveSuccess, notifyVerifySuccess } from 'utils/CommonFunction';
 import {useIntl} from "react-intl";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -196,50 +198,39 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                         <Grid container maxWidth justifyContent="flex-start">
                             {editMode ?
                                 <>
+                                <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                     <Grid item sx={{ ml: 3, mr: 3 }}>
                                         <Button
-                                            size="large"
                                             variant="contained"
                                             onClick={loadDataFun}
-                                            sx={{
-                                                textTransform: 'capitalize',
-                                                alignItems: 'end'
-                                            }}
+                                            color="cancel"
                                         >
-                                            <Typography variant="h5">Reset & Back</Typography>
+                                            Reset & Back
                                         </Button>
                                     </Grid>
                                     <Grid item sx={{ ml: 3, mr: 3 }}>
                                         <Button
-                                            size="large"
                                             variant="contained"
                                             type="submit"
                                             color="success"
-                                            sx={{
-                                                textTransform: 'capitalize',
-                                                alignItems: 'end'
-                                            }}
                                         >
-                                            <Typography variant="h5">Save</Typography>
+                                            Save
                                         </Button>
                                     </Grid>
-
+                                </ThemeProvider>
                                 </>
                                 :
                                 <>
 
                                     <Grid item sx={{ ml: 3, mr: 3 }}>
+                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                         <Button
-                                            size="large"
                                             variant="contained"
-                                            sx={{
-                                                textTransform: 'capitalize',
-                                                alignItems: 'end'
-                                            }}
                                             onClick={onEditClick}
                                         >
-                                            <Typography variant="h5">Edit</Typography>
+                                            Edit
                                         </Button>
+                                        </ThemeProvider>
                                     </Grid>
                                 </>
                             }
@@ -380,17 +371,14 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                                     })}
                                                 </Grid>
                                                 <Grid item xs={1} md={1} lg={1}>
+                                                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                     <Button
-                                                        size="large"
                                                         variant="contained"
-                                                        sx={{
-                                                            textTransform: 'capitalize',
-                                                            alignItems: 'end'
-                                                        }}
                                                         onClick={() => { onVerifiedClick() }}
                                                     >
-                                                        <Typography variant="h5">Verify</Typography>
+                                                        Verify
                                                     </Button>
+                                                    </ThemeProvider>
                                                 </Grid>
                                             </>
                                     }
@@ -436,33 +424,27 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
 
                                                 {formik.values.locked ?
                                                     <Grid item xs={1} md={1} lg={1} sx={{ ml: 1 }}>
+                                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                         <Button
-                                                            size="large"
                                                             variant="contained"
                                                             color="success"
-                                                            sx={{
-                                                                textTransform: 'capitalize',
-                                                                alignItems: 'end'
-                                                            }}
                                                             onClick={doUnlock}
                                                         >
-                                                            <Typography variant="h5">Active</Typography>
+                                                            Active
                                                         </Button>
+                                                        </ThemeProvider>
                                                     </Grid>
                                                     :
                                                     <Grid item xs={1} md={1} lg={1} sx={{ ml: 1 }}>
+                                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                         <Button
-                                                            size="large"
                                                             variant="contained"
                                                             color="error"
-                                                            sx={{
-                                                                textTransform: 'capitalize',
-                                                                alignItems: 'end',
-                                                            }}
                                                             onClick={doLock}
                                                         >
-                                                            <Typography variant="h5">Lock</Typography>
+                                                           Lock
                                                         </Button>
+                                                        </ThemeProvider>
                                                     </Grid>
                                                 }
                                             </>
@@ -478,11 +460,13 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                 <Grid container alignItems={"center"}>
                                     {currentUserData.orgId == null ?
                                         <Grid item lg={2} >
+                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                             <Button variant="contained"
                                                 onClick={createOrgClick}
                                             >
-                                                <Typography variant="h5">Create Organisation</Typography>
+                                               Create Organisation
                                             </Button>
+                                            </ThemeProvider>
                                         </Grid>
                                         : null
                                     }
@@ -577,25 +561,55 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                 </form>
             }
             <div>
-                <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >
+                <Dialog
+                    open={isWarningPopUp}
+                    onClose={() => setIsWarningPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => setIsWarningPopUp(false)}><Typography variant="h5">Close</Typography></Button>
+                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                        <Button onClick={() => setIsWarningPopUp(false)}>
+                            Close
+                        </Button>
+                        </ThemeProvider>
                     </DialogActions>
                 </Dialog>
             </div>
             <div>
-                <Dialog open={isConfirmPopUp} onClose={() => setIsConfirmPopUp(false)}  >
+                <Dialog
+                    open={isConfirmPopUp}
+                    onClose={() => setIsConfirmPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
                     <DialogContent style={{ display: 'flex', }}>
                         <Typography variant="h4" style={{ padding: '16px' }}>{confirmText}</Typography>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => { setIsConfirmPopUp(false) }}><Typography variant="h5">Close</Typography></Button>
-                        <Button onClick={() => { confirmAction?.function(); }}><Typography variant="h5">Confirm</Typography></Button>
+                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                        <Button onClick={() => { setIsConfirmPopUp(false) }}>
+                            Close
+                        </Button>
+                        <Button onClick={() => { confirmAction?.function(); }}>
+                            Confirm
+                        </Button>
+                        </ThemeProvider>
                     </DialogActions>
                 </Dialog>
             </div>

src/pages/User/DetailsPage_Organization/UserInformationCard_Organization_Pub.js

@@ -114,6 +114,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
                                         <Button
                                             variant="contained"
                                             onClick={loadDataFun}
+                                            color="cancel"
                                         >
                                             <FormattedMessage id="resetAndBack" />
 

src/pages/User/DetailsPage_Organization/index.js

@@ -186,9 +186,11 @@ const UserMaintainPage_Organization = () => {
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                             {isGLDLoggedIn()?
-                                <Typography ml={15} color='#FFF' variant="h4">Maintain Organisation User</Typography>
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
+                                    Maintain Organisation User
+                                </Typography>
                             :
-                                <Typography ml={15} color='#FFF' variant="h4">
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
                                     <FormattedMessage id="userProfile" />
                                 </Typography>
                             }

src/pages/User/GLDUserProfile/index.js

@@ -82,7 +82,9 @@ const UserMaintainPage = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4">User Profile</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
+                                User Profile
+                            </Typography>
                         </Stack>
                     </div>
                 </Grid>

src/pages/User/ManagePage_OrgPublic/index.js

@@ -222,7 +222,7 @@ const ManageOrgUserPage = () => {
             <Grid item xs={12}>
                 <div style={BackgroundHead}>
                     <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                        <Typography ml={15} color='#FFF' variant="h4">
+                        <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                             <FormattedMessage id="companyOrUserRecord" />
                         </Typography>
                     </Stack>
@@ -238,7 +238,17 @@ const ManageOrgUserPage = () => {
                 />
             </Grid>
             <div>
-                <Dialog open={isWarningPopUp} onClose={() => setIsWarningPopUp(false)}  >
+                <Dialog
+                    open={isWarningPopUp}
+                    onClose={() => setIsWarningPopUp(false)}
+                    PaperProps={{
+                        sx: {
+                            minWidth: '40vw',
+                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                        }
+                    }}
+                >
                     <DialogTitle>
                         <FormattedMessage id="confirm" />
                     </DialogTitle>

src/pages/User/SearchPage/UserSearchForm.js

@@ -81,7 +81,7 @@ const UserSearchForm = ({ applySearch }) => {
                 <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
                     {/*row 1*/}
                     <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
-                        <Typography variant="h5" >
+                        <Typography variant="pnspsFormHeader" >
                             Search Form (GLD User)
                         </Typography>
                     </Grid>

src/pages/User/SearchPage_Individual/UserSearchForm_Individual.js

@@ -52,7 +52,7 @@ const UserSearchForm_Individual = ({ applySearch }) => {
                 <Grid container sx={{ ml: 2, mt: 1}} width="98%">
                     {/*row 1*/}
                     <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
-                        <Typography variant="h5" >
+                        <Typography variant="pnspsFormHeader" >
                             Search Form
                         </Typography>
                     </Grid>

src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js

@@ -57,7 +57,7 @@ const UserSearchForm_Organization = ({applySearch}) => {
                 <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
                     {/*row 1*/}
                     <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
-                        <Typography variant="h5" >
+                        <Typography variant="pnspsFormHeader" >
                             Search Form
                         </Typography>
                     </Grid>

src/pages/_Test/Mail/index.js

@@ -92,7 +92,17 @@ const Mail = () => {
                 </form>
 
                 <div>
-                    <Dialog open={isResponsPopUp} onClose={() => setIsResponsPopUp(false)}  >
+                    <Dialog
+                        open={isResponsPopUp}
+                        onClose={() => setIsResponsPopUp(false)}
+                        PaperProps={{
+                            sx: {
+                                minWidth: '40vw',
+                                maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
+                                maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
+                            }
+                        }}
+                    >
                         <DialogTitle>Respons</DialogTitle>
                         <DialogContent style={{ display: 'flex', }}>
                             <Typography variant="h3" style={{ padding: '16px' }}>{responsText}</Typography>

src/pages/dashboard/GLD/index.js

@@ -25,7 +25,9 @@ const DashboardDefault = () => {
       <Grid item xs={12}>
         <div style={BackgroundHead}>
           <Stack direction="row"  height='70px' justifyContent="flex-start" alignItems="center">
-            <Typography ml={15} color='#FFF' variant="h4">Morning, {userData.fullenName}</Typography>
+            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
+              Morning, {userData.fullenName}
+            </Typography>
           </Stack>
         </div>
       </Grid>

src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js

@@ -41,7 +41,7 @@ const UserGroupSearchForm = ({ applySearch }) => {
                 <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
                     {/*row 1*/}
                     <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
-                        <Typography variant="h5" >
+                        <Typography variant="pnspsFormHeader" >
                             Search Form
                         </Typography>
                     </Grid>

src/themes/buttonConst.js

@@ -35,6 +35,10 @@ export const PNSPS_BUTTON_THEME = createTheme({
             main: '#F3AF2B',
             contrastText: '#FFFFFF',
         },
+        error:{
+            main: '#F3AF2B',
+            contrastText: '#FFFFFF',
+        },
         exportExcel:{
             main: '#6A8B9E',
             contrastText: '#FFFFFF',

src/themes/themeConst.js

@@ -77,6 +77,7 @@ export const PNSPS_THEME = createTheme({
                     },
                     '&.MuiButton-root':{
                         fontSize: '1.2rem',
+                        fontWeight: '600',
                         alignItems: 'center',
                     },
                 }
@@ -369,6 +370,13 @@ export const PNSPS_THEME = createTheme({
                 }
             }
         },
+        MuiFormLabel: {
+            styleOverrides: {
+                root:{
+                    color: "#000000"
+                }
+            }
+        },
         MuiTabPanel:{
             styleOverrides:{
                 root:{

src/themes/typography.js

@@ -23,9 +23,19 @@ const Typography = (fontFamily) => ({
     lineHeight: 1.5
   },
   pnspsFormParagraph: {
-    fontWeight: 400,
+    fontWeight: 500,
     fontSize: '1.1rem',
-    lineHeight: 0.8
+    lineHeight: 1
+  },
+  pnspsFormParagraphBold: {
+    fontWeight: 600,
+    fontSize: '1.1rem',
+    lineHeight: 1
+  },
+  pnspsNormalText: {
+    fontWeight: 600,
+    fontSize: '1.0rem',
+    lineHeight: 1.0
   },
   h1: {
     fontWeight: 600,

src/translations/en.json

@@ -43,6 +43,7 @@
 
   "mainPage": "Main Page",
   "myPublicNotice": "My Public Notice",
+  "publicNotice": "Public Notice",
   "publicNoticePayment": "Public Notice: Payment",
   "publicNoticePaymentFail": "Public Notice: Payment Failed",
   "publicNoticePaymentSuccess": "Public Notice: Payment Success",
@@ -265,6 +266,7 @@
   "contactPerson": "Contact Person",
   "requireContactPerson": "Please enter contact person",
   "search": "Search",
+  "searchForm": "Search Form",
   "cancel": "Cancel",
   "extraMark": "Remarks",
   "totalAmount": "Total Amount",
@@ -363,6 +365,16 @@
   "loading": "Loading...",
   "ok": "Ok",
 
+  "organizationProfile": "Organization Profile",
+  "organizationDetails": "Organization Details",
+  "brNo": "BR No.",
+  "creditorAccount": "Creditor account",
+  "nameEng": "Name (Eng)",
+  "nameChi": "Name (Ch)",
+  "expiryDate": "Expiry date",
+  "create": "Create",
+  "confirmTo": "Confirm to ",
+
   "Dashboard": "Dashboard",
   "event": "Event"
 }

src/translations/zh-CN.json

@@ -42,6 +42,7 @@
   "registerFail": "申请失败，请稍后尝试",
 
   "mainPage": "主页",
+  "publicNotice": "公共启事",
   "myPublicNotice": "我的公共启事",
   "publicNoticePayment": "公共启事：付款",
   "publicNoticePaymentFail": "公共启事：付款失败",
@@ -265,6 +266,7 @@
   "contactPerson": "联络人",
   "requireContactPerson": "请输入联络人",
   "search": "搜寻",
+  "searchForm": "搜寻表格",
   "cancel": "取消",
   "extraMark": "备注",
   "totalAmount": "总额",
@@ -363,6 +365,16 @@
   "loading": "加载中...",
   "ok": "好的",
 
+  "organizationProfile": "机构资料",
+  "organizationDetails": "机构详情",
+  "brNo": "商业登记证号码",
+  "creditorAccount": "债权人帐户",
+  "nameEng": "姓名(英文)",
+  "nameChi": "姓名(中文)",
+  "expiryDate": "过期日期",
+  "create": "创建",
+  "confirmTo": "确定",
+
   "Dashboard": "仪表板",
   "event": "活动"
 }

src/translations/zh-HK.json

@@ -42,6 +42,7 @@
   "registerFail": "申請失敗，請稍後嘗試",
 
   "mainPage": "主頁",
+  "publicNotice": "公共啟事",
   "myPublicNotice": "我的公共啟事",
   "publicNoticePayment": "公共啟事：付款",
   "publicNoticePaymentFail": "公共啟事：付款失敗",
@@ -265,6 +266,7 @@
   "contactPerson": "聯絡人",
   "requireContactPerson": "請輸入聯絡人",
   "search": "搜尋",
+  "searchForm": "搜尋表格",
   "cancel": "取消",
   "extraMark": "備註",
   "totalAmount": "總額",
@@ -363,6 +365,16 @@
   "loading": "加載中...",
   "ok": "好的",
 
+  "organizationProfile": "機構資料",
+  "organizationDetails": "機構詳情",
+  "brNo": "商業登記證號碼",
+  "creditorAccount": "債權人帳戶",
+  "nameEng": "姓名(英文)",
+  "nameChi": "姓名(中文)",
+  "expiryDate": "過期日期",
+  "create": "創建",
+  "confirmTo": "確定",
+
   "Dashboard": "儀表板",
   "event": "活動"
 }

src/utils/FieldUtils.js

@@ -13,7 +13,7 @@ export const notNullFieldLabel = (label) => {
 export const getDateField = ({ label, valueName, form, disabled }) => {
     return <Grid container alignItems={"center"}>
         <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
-            <Typography variant="h5">{label}</Typography>
+            <Typography variant="pnspsFormParagraphBold">{label}</Typography>
         </Grid>
         <Grid item xs={12} md={6} lg={6}>
             {initField({
@@ -30,7 +30,7 @@ export const getTextField = ({ label, valueName, form, disabled }) => {
     return <Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{mb:2}}>
         <Grid item xs={12} sm={12} md={3} lg={3}
             sx={{ display: 'flex', alignItems: 'center' }}>
-            <Typography variant="h5">{label}</Typography>
+            <Typography variant="pnspsFormParagraphBold">{label}</Typography>
         </Grid>
         <Grid item xs={12} sm={12} md={6} lg={6}>
             {initField({
@@ -47,7 +47,7 @@ export const getTextArea = ({ label, valueName, form, disabled, inputProps, ...p
     return <Grid container alignItems={"center"}>
         <Grid item xs={12} md={3} lg={3}
             sx={{ display: 'flex', alignItems: 'center' }}>
-            <Typography variant="h5">{label}</Typography>
+            <Typography variant="pnspsFormParagraphBold">{label}</Typography>
         </Grid>
         <Grid item xs={12} md={6} lg={6}>
             {initField({
@@ -74,7 +74,7 @@ export const getPhoneField = ({ label, valueName, form, disabled }) => {
     return <Grid container alignItems={"center"} sx={{mb:2}}>
         <Grid item xs={12} md={3} lg={3}
             sx={{ display: 'flex', alignItems: 'center' }}>
-            <Typography variant="h5">{label}</Typography>
+            <Typography variant="pnspsFormParagraphBold">{label}</Typography>
         </Grid>
         <Grid item xs={12} md={6} lg={6}>
             <Stack direction="row">
@@ -119,7 +119,7 @@ export const getAddressField = ({ label, valueName, form, disabled }) => {
     return <Grid container alignItems={"top"}>
         <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'top' }}>
             <Grid item lg={12} sx={{ alignItems: 'center' }}>
-                <Typography variant="h5">{label}</Typography>
+                <Typography variant="pnspsFormParagraphBold">{label}</Typography>
             </Grid>
         </Grid>
         <Grid item xs={12} md={6} lg={6}>
@@ -154,7 +154,7 @@ export const getAddressField = ({ label, valueName, form, disabled }) => {
 export const getComboField = ({ label, dataList, valueName, form, disabled, getOptionLabel, onInputChange, onChange, filterOptions, ...props }) => {
     return <Grid container alignItems={"center"} sx={{mb:2}}>
         <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
-        <Typography variant="h5">{label}</Typography>
+        <Typography variant="pnspsFormParagraphBold">{label}</Typography>
         </Grid>
         <Grid item xs={12} md={6} lg={6}>
             <Combo