update public application page

src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js

@@ -1,7 +1,6 @@
 // material-ui
 import {
     Button,
-    CardContent,
     Grid, TextField,
     Autocomplete,
     Typography
@@ -14,6 +13,8 @@ import * as DateUtils from "utils/DateUtils";
 import {
     isORGLoggedIn,
   } from "utils/Utils";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -27,6 +28,8 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
     const [selectedLabelsString, setSelectedLabelsString] = React.useState('');
 
     const { reset, register, handleSubmit } = useForm()
+    const marginBottom = 2.5;
+
     const onSubmit = (data) => {
         data.status = selectedLabelsString
         let typeArray = [];
@@ -59,12 +62,11 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
 
             <form onSubmit={handleSubmit(onSubmit)}>
                 {/*row 1*/}
-                <CardContent sx={{ px: 2.5, pt: 3 }}>
-                    <Grid item justifyContent="space-between" alignItems="center">
-                        <Typography variant="h4">搜尋</Typography>
-                    </Grid>
-                </CardContent>
-
+                <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:marginBottom}}>
+                    <Typography variant="pnspsFormTitle" >
+                        搜尋
+                    </Typography>
+                </Grid>
                 {/*row 2*/}
                 <Grid container alignItems={"center"}>
                     <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
@@ -148,6 +150,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             multiple
                             {...register("status")}
                             id="status"
+                            size="small"
                             // filterOptions={(options)=>options}
                             options={
                                 localStorage.getItem('userData').creditor ?
@@ -203,32 +206,25 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
 
                 {/*last row*/}
                 <Grid container maxWidth justifyContent="flex-end">
-
-                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                    <Grid item sx={{ ml: 3, mr: 3 }}>
                         <Button
-                            size="large"
                             variant="contained"
                             onClick={resetForm}
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">重置</Typography>
+                        >
+                            <Typography variant="pnspsButtonText">重置</Typography>
                         </Button>
                     </Grid>
 
-                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                    <Grid item sx={{ ml: 3, mr: 3}}>
                         <Button
-                            size="large"
                             variant="contained"
                             type="submit"
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">搜尋</Typography>
+                        >
+                            <Typography variant="pnspsButtonText">搜尋</Typography>
                         </Button>
                     </Grid>
+                    </ThemeProvider>
                 </Grid>
             </form>
         </MainCard>

src/pages/PublicNotice/ListPanel/SearchPublicNoticeTab.js

@@ -45,9 +45,9 @@ const UserSearchPage_Individual = () => {
     }
 
     return (
-        <Grid container rowSpacing={4.5} columnSpacing={2.75}>
+        <Grid container>
             {/*row 1*/}
-            <Grid item xs={12} md={12} lg={12}>
+            <Grid item xs={12} md={12} lg={12} sx={{mb:-4}}>
                 <SearchForm 
                 applySearch={applySearch}
                 searchCriteria={searchCriteria}

src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import {
     Button,
-    Typography
+    Typography, useMediaQuery
 } from '@mui/material';
 import * as DateUtils from "utils/DateUtils";
 import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
@@ -11,11 +11,14 @@ import {FiDataGrid} from "components/FiDataGrid";
 import {
     isORGLoggedIn,
   } from "utils/Utils";
+import {useTheme} from "@emotion/react";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ recordList }) {
     const [rows, setRows] = React.useState([]);
     const navigate = useNavigate()
+    const theme = useTheme();
+    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
 
     const handleDetailClick = (params) => () => {
         navigate('/publicNotice/'+ params.id);
@@ -30,13 +33,15 @@ export default function SearchPublicNoticeTable({ recordList }) {
             id: 'appNo',
             field: 'appNo',
             headerName: '申請編號',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
         },
         {
             id: 'created',
             field: 'created',
             headerName: '提交日期',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
                 return DateUtils.datetimeStr(params?.value);
             }
@@ -71,7 +76,8 @@ export default function SearchPublicNoticeTable({ recordList }) {
             id: 'remarks',
             field: 'remarks',
             headerName:  isORGLoggedIn()?"Care Of / 我的備註":"我的備註",
-            flex: 3,
+            width: isMdOrLg ? 'auto' : 400,
+            flex: isMdOrLg ? 3 : undefined,
             renderCell: (params) => (
                 isORGLoggedIn()? 
                 <div>

src/pages/PublicNotice/ListPanel/index.js

@@ -23,6 +23,8 @@ const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingCo
 const SearchTab = Loadable(lazy(() => import('./SearchPublicNoticeTab')));
 
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+import {PNSPS_LONG_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -48,6 +50,9 @@ const PublicNotice = () => {
         '& .MuiDataGrid-footerContainer': {
             border: 1,
             borderColor: "#EEE"
+        },
+        '& .MuiTabPanel-root': {
+            padding: '0px',
         }
     }
 
@@ -105,21 +110,23 @@ const PublicNotice = () => {
                         </Stack>
                     </div>
                 </Grid>
-                <Grid item xs={12} mt={1} sx={{ mt: 3 }} >
+                <Grid item xs={12} mt={1} sx={{ mt: 3}} >
                     <Stack direction="row" justifyContent="flex-end" alignItems="center">
+                        <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                         <Box sx={{ mr: { md: "47px" } }}>
-                            <Button variant="contained" onClick={() => { onBtnClick() }}><Typography variant="h5">申請公共啟事</Typography></Button>
+                            <Button variant="contained" onClick={() => { onBtnClick() }}><Typography variant="pnspsButtonText">申請公共啟事</Typography></Button>
                         </Box>
+                        </ThemeProvider>
                     </Stack>
                 </Grid>
                 {/*col 2*/}
 
                 {
                     JSON.parse(localStorage.getItem('userData')).creditor ? (
-                        <Grid item xs={12} sx={{ minHeight: '75vh', maxWidth: '95%', backgroundColor: "#fff", mt: 3, mr: 3, ml: 3, mb: 3, ..._sx }}>
+                        <Grid item xs={12} sx={{ minHeight: '75vh', maxWidth: '1%', backgroundColor: "#fff", mt: 3, mr: 3, ml: 3, mb: 3, ..._sx }}>
                             <TabContext value={selectedTab}>
-                                <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-                                    <TabList onChange={handleChange} aria-label="lab API tabs example">
+                                <Box sx={{ borderBottom: 1, borderColor: 'divider', overflowX: 'auto' }}>
+                                    <TabList onChange={handleChange} aria-label="lab API tabs example" sx={{ display: 'flex', flexDirection: 'row' }}>
                                         <Tab label={"處理中 (" + submittedList?.length + ")"} value="1" />
                                         <Tab label={"待發布 (" + pendingPublishList?.length + ")"} value="3" />
                                         <Tab label={"待付款 (" + pendingPaymentList?.length + ")"} value="4" />
@@ -153,7 +160,7 @@ const PublicNotice = () => {
                             </TabContext>
                         </Grid>
                     ) : (
-                        <Grid item xs={12} sx={{ minHeight: '75vh', backgroundColor: "#fff", mt: 3, mr: 3, ml: 3, mb: 3, ..._sx }}>
+                        <Grid item xs={12} sx={{ minHeight: '75vh', maxWidth: '95%',backgroundColor: "#fff", mt: 3, mr: 3, ml: 3, mb: 3, ..._sx }}>
                             <TabContext value={selectedTab}>
                                 <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                                     <TabList onChange={handleChange} aria-label="lab API tabs example">

src/pages/PublicNotice/Search_GLD/SearchForm.js

@@ -304,10 +304,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                             <Button
                                 variant="contained"
                                 onClick={resetForm}
-                                sx={{
-                                    textTransform: 'capitalize',
-                                    alignItems: 'end'
-                                }}>
+                            >
                                 Clear
                             </Button>
                         </Grid>
@@ -316,10 +313,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                             <Button
                                 variant="contained"
                                 type="submit"
-                                sx={{
-                                    textTransform: 'capitalize',
-                                    alignItems: 'end'
-                                }}>
+                            >
                                 Submit
                             </Button>
                         </Grid>

src/themes/buttonConst.js

@@ -53,7 +53,8 @@ export const PNSPS_BUTTON_THEME = createTheme({
         MuiButton: {
             styleOverrides: {
                 root: {
-                    fontSize: '1.0rem',
+                    fontSize: '1.2rem',
+                    fontWeight: '600',
                     height: '40px',
                     width: '40vw', // Default width for xs screen sizes
                     '@media (min-width: 600px)': { // sm breakpoint
@@ -126,17 +127,18 @@ export const PNSPS_LONG_BUTTON_THEME = createTheme({
         MuiButton: {
             styleOverrides: {
                 root: {
-                    fontSize: '1.0rem',
+                    fontSize: '1.2rem',
+                    fontWeight: '600',
                     height: '40px',
-                    width: '70vw', // Default width for xs screen sizes
+                    width: '60vw', // Default width for xs screen sizes
                     '@media (min-width: 600px)': { // sm breakpoint
-                        width: '30vw',
+                        width: '33vw',
                     },
                     '@media (min-width: 960px)': { // md breakpoint
                         width: '25vw',
                     },
                     '@media (min-width: 1280px)': { // lg breakpoint
-                        width: '19vw',
+                        width: '16vw',
                     },
                     textTransform: "none",
                     alignItems: 'center'

src/themes/themeConst.js

@@ -158,15 +158,16 @@ export const PNSPS_THEME = createTheme({
                         fontSize: '1.25rem'
                     },
                     sizeMedium: {
-                        width: theme.spacing(4.5),
-                        height: theme.spacing(4.5),
+                        width: theme.spacing(3.75),
+                        height: theme.spacing(3.75),
                         fontSize: '1rem'
                     },
                     sizeSmall: {
                         width: theme.spacing(3.75),
                         height: theme.spacing(3.75),
                         fontSize: '0.75rem'
-                    }
+                    },
+                    top: "auto"
                 },
             },
         },

src/themes/typography.js

@@ -8,7 +8,7 @@ const Typography = (fontFamily) => ({
   fontWeightMedium: 500,
   fontWeightBold: 600,
   pnspsFormTitle: {
-    fontWeight: 600,
+    fontWeight: 500,
     fontSize: '1.175rem',
     lineHeight: 1.4
   },
@@ -23,7 +23,7 @@ const Typography = (fontFamily) => ({
     lineHeight: 1.5
   },
   pnspsFormParagraph: {
-    fontWeight: 600,
+    fontWeight: 400,
     fontSize: '1.1rem',
     lineHeight: 0.8
   },