update public notice, button theme

src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js

@@ -37,6 +37,8 @@ import {
 import CloseIcon from '@mui/icons-material/Close';
 import EditNoteIcon from '@mui/icons-material/EditNote';
 import DownloadIcon from '@mui/icons-material/Download';
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const ApplicationDetailCard = (
     { applicationDetailData,
@@ -159,20 +161,18 @@ const ApplicationDetailCard = (
                                     </Button>
                                     : null
                             }
+                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                             <Button
-                                // size="large"
                                 variant="contained"
                                 onClick={cancelledClick()}
+                                color="edit"
                                 disabled={currentApplicationDetailData.status !== "submitted"}
                                 title={"取消"}
-                                sx={{
-                                    textTransform: 'capitalize',
-                                    alignItems: 'end',
-                                    backgroundColor: '#ffa733'
-                                }}>
-                                <CloseIcon sx={{ mb: 0.5 }} />
-                                <Typography ml={1} variant="h5"> 取消</Typography>
+                            >
+                                <CloseIcon sx={{mr:1}} />
+                                取消
                             </Button>
+                            </ThemeProvider>
                         </Stack>
                     </Grid>
                 </Grid>
@@ -520,15 +520,17 @@ const ApplicationDetailCard = (
                                                             </FormControl>
                                                         </Grid>
                                                         <Grid item xs={12} sm={12} md={3} lg={3} >
+                                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                             <Button
                                                                 variant="contained"
                                                                 onClick={onDownloadClick()}
                                                                 title="下載"
-                                                                sx={{justifyContent: 'flex-end'}}
-                                                                >
-                                                                <DownloadIcon sx={{ mb: 0.5 }} />
-                                                                <Typography sx={{ ml: 1 }} variant="h5">下載</Typography>
+                                                                color="save"
+                                                            >
+                                                                <DownloadIcon sx={{ mr:1 }} />
+                                                                下載
                                                             </Button>
+                                                            </ThemeProvider>
                                                         </Grid>
                                                     </Grid>
                                                 </Grid>

src/pages/PublicNotice/Details_Public/StatusChangeDialog.js

@@ -16,9 +16,10 @@ import {
   DialogTitle,
   FormLabel,
 } from '@mui/material';
-import { Grid } from "../../../../node_modules/@mui/material/index";
 import { useFormik,FormikProvider } from 'formik';
 import * as yup from 'yup';
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 
 
 const StatusChangeDialog = (props) => {
@@ -26,7 +27,7 @@ const StatusChangeDialog = (props) => {
   
   useEffect(() => {
     console.log(Object.keys(!props.selectedGazetteGroup).length)
-    if(props.getStatus == "cancel"){
+    if(props.getStatus === "cancel"){
       setStatus("取消")
     }
   }, [props.getStatus]);
@@ -58,42 +59,44 @@ const StatusChangeDialog = (props) => {
         maxWidth={'xs'}
       >
         <DialogTitle >
-          <Grid container>
-            <Grid item>
-              <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                <Typography variant="h4" color="error">
-                  {status}公共啟事
-                </Typography>
-              </Stack>
-            </Grid>
-          </Grid>
+          <Typography variant="h4" color="error">
+            {status}公共啟事
+          </Typography>
         </DialogTitle>
         <FormikProvider value={formik}>
             <form>
               <DialogContent>
                 <DialogContentText>
-                  <Grid container direction="row" justifyContent="center" alignItems="center">
-                      <Grid item xs={12} md={8} lg={8} sx={{mb: 5,}}>
-                        <FormLabel sx={{fontSize: "18px", color:"#000000",textAlign:"center"}}>
-                          <Typography variant="h5">確定{status}公共啟事?</Typography>
-                        </FormLabel>
-                      </Grid>
-                    </Grid>   
+                  <FormLabel sx={{fontSize: "18px", color:"#000000",textAlign:"center"}}>
+                    <Typography variant="h5">確定{status}公共啟事?</Typography>
+                  </FormLabel>
                 </DialogContentText>
               </DialogContent>
             </form>
         </FormikProvider>
-        <Stack direction="row" justifyContent="space-around">
+        <Stack direction="row" justifyContent="space-around" sx={{mb:2}}>
+          <ThemeProvider theme={PNSPS_BUTTON_THEME}>
           <DialogActions>
-            <Button variant="contained"  onClick={props.handleClose} autoFocus>
-            <Typography variant="h5">取消</Typography>
+            <Button
+                variant="contained"
+                onClick={props.handleClose}
+                autoFocus
+                color="delete"
+            >
+              取消
             </Button>
           </DialogActions>
           <DialogActions>
-            <Button variant="contained"  color="error" onClick={acceptedHandle()} autoFocus >
-            <Typography variant="h5">確定</Typography>
+            <Button
+                variant="contained"
+                color="save"
+                onClick={acceptedHandle()}
+                autoFocus
+            >
+              確定
             </Button>
           </DialogActions>
+          </ThemeProvider>
         </Stack>
       </Dialog>
   );

src/pages/PublicNotice/Details_Public/index.js

@@ -52,7 +52,6 @@ const DashboardDefault = () => {
   const title = appNo + ", " + gazetteIssue + ", " + issueNum
 
   const _sx = {
-    padding: "4 2 4 2",
     boxShadow: 1,
     border: 1,
     borderColor: '#DDD',
@@ -177,7 +176,7 @@ const DashboardDefault = () => {
             </Box>
           </Grid>
           <Grid item width="75%">
-            <Box xs={12} mt={3} sx={{  border: '0px groove grey', borderRadius: '10px', ..._sx }}>
+            <Box xs={12} mt={3} sx={{  border: '0px groove grey', borderRadius: '10px', ..._sx, mb:2 }}>
               <TabTableDetail
                 proofList={proofList}
                 paymentList={paymentList}

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

@@ -49,7 +49,7 @@ const PublicNotice = ({ proofList, paymentList }) => {
         !onReady ?
             <LoadingComponent />
             :
-            <Grid container sx={{ minHeight: '40vh', p:2}}>
+            <Grid container>
                 {/*col 2*/}
                 <Grid item xs={12}>
                     <TabContext value={selectedTab}>

src/themes/buttonConst.js

@@ -55,7 +55,7 @@ export const PNSPS_BUTTON_THEME = createTheme({
                 root: {
                     fontSize: '1.2rem',
                     fontWeight: '600',
-                    height: '40px',
+                    height: '45px',
                     width: '40vw', // Default width for xs screen sizes
                     '@media (min-width: 600px)': { // sm breakpoint
                         width: '20vw',
@@ -64,10 +64,12 @@ export const PNSPS_BUTTON_THEME = createTheme({
                         width: '15vw',
                     },
                     '@media (min-width: 1280px)': { // lg breakpoint
-                        width: '7vw',
+                        width: '9vw',
                     },
                     textTransform: "none",
-                    alignItems: 'center'
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
                 },
             },
         },
@@ -106,7 +108,7 @@ export const PNSPS_LONG_BUTTON_THEME = createTheme({
             contrastText: '#FFFFFF',
         },
         edit:{
-            main: '#F3AF2B',
+            main: '#ffa733',
             contrastText: '#FFFFFF',
         },
         exportExcel:{
@@ -129,7 +131,7 @@ export const PNSPS_LONG_BUTTON_THEME = createTheme({
                 root: {
                     fontSize: '1.2rem',
                     fontWeight: '600',
-                    height: '40px',
+                    height: '45px',
                     width: '60vw', // Default width for xs screen sizes
                     '@media (min-width: 600px)': { // sm breakpoint
                         width: '33vw',
@@ -141,7 +143,9 @@ export const PNSPS_LONG_BUTTON_THEME = createTheme({
                         width: '16vw',
                     },
                     textTransform: "none",
-                    alignItems: 'center'
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
                 },
             },
         },

src/themes/themeConst.js

@@ -366,6 +366,13 @@ export const PNSPS_THEME = createTheme({
                     overflow: 'visible'
                 }
             }
+        },
+        MuiTabPanel:{
+            styleOverrides:{
+                root:{
+                    padding: 0
+                }
+            }
         }
     },
 });