change public notice style

src/layout/MainLayout/index.js

@@ -55,10 +55,10 @@ const MainLayout = () => {
   }, [drawerOpen]);
 
   return (
-    <Box sx={{ display: 'flex', width: '100%', flexDirection: "column", paddingTop: { xs: "5px", sm: "43px" }}}>
+    <Box sx={{backgroundColor:'#ffffff', display: 'flex', width: '100%', flexDirection: "column", paddingTop: { xs: "5px", sm: "43px" }}}>
       <Header/>
       {/* <Drawer open={open} handleDrawerToggle={handleDrawerToggle} /> */}
-      <Box style={{ width: '100%', flexGrow: 1 } } sx={{ paddingTop: "43px" }}>
+      <Box style={{ width: '100%', flexGrow: 1 } } sx={{ paddingTop: "50px" }}>
         {/* <Toolbar /> */}
         {/* <Breadcrumbs navigation={navigation} title /> */}
         <Outlet />

src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js

@@ -4,6 +4,7 @@ import {
     Typography, 
     Button,
     RadioGroup,
+    Stack
 } from '@mui/material';
 import { useFormik } from 'formik';
 import * as yup from 'yup';
@@ -11,6 +12,7 @@ import * as React from "react";
 import * as HttpUtils from "utils/HttpUtils";
 import * as UrlUtils from "utils/ApiPathConst";
 import * as FieldUtils from "utils/FieldUtils";
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 
 
 import {useNavigate} from "react-router-dom";
@@ -22,6 +24,12 @@ const PublicNoticeApplyForm = ({loadedData, selections}) => {
     const [attachment, setAttachment]  = React.useState({});
     const navigate=useNavigate();
 
+    const BackgroundHead = {
+        backgroundImage: `url(${titleBackgroundImg})`,
+        width: '100%',
+        height: '100%',
+        backgroundSize:'cover'
+      }
     // React.useEffect(()=>{
     //     setFormData(loadedData);
     // },[]);
@@ -72,13 +80,20 @@ const PublicNoticeApplyForm = ({loadedData, selections}) => {
 
 
     return (
-            <Grid container style={{ padding: 24}} rowSpacing={16} columnSpacing={2.75}>
-                <Grid item xs={12}>
-                    <Typography variant="h5">申請公共啟事</Typography>
+            <Grid container>
+                <Grid item xs={12} mb={3}>
+                    <div style={BackgroundHead}>
+                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                            <Typography ml={15} color='#FFF' variant="h4">申請公共啟事</Typography>
+                        </Stack>
+                    </div>
                 </Grid>
-                <form style={{ width: "100%"}} onSubmit={formik.handleSubmit}  >
+                {/* <Grid item xs={12}>
+                    <Typography variant="h5">申請公共啟事</Typography>
+                </Grid> */}
+                <form style={{ width: "100%"}} onSubmit={formik.handleSubmit}>
 
-                <Grid container spacing={1}>
+                <Grid container spacing={1} sx={{minHeight: '80vh'}}>
                 <Grid item lg={4}></Grid>
                 {FieldUtils.getTextField({
                         label:"聯絡人:",

src/pages/PublicNotice/ListPanel/index.js

@@ -4,7 +4,8 @@ import {
     Typography,
     Tab,
     Box,
-    Button
+    Button,
+    Stack
 } from '@mui/material';
 
 import { TabPanel, TabContext, TabList } from '@mui/lab';
@@ -20,6 +21,7 @@ const BaseGrid = Loadable(lazy(() => import('./BaseGrid')));
 const PendingPaymentTab = Loadable(lazy(() => import('./PendingPaymentTab')));
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 const SearchTab = Loadable(lazy(() => import('./SearchPublicNoticeTab')));
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -33,6 +35,12 @@ const PublicNotice = () => {
     const [selectedTab, setSelectedTab] = useState("1");
     const navigate = useNavigate();
 
+    const BackgroundHead = {
+        backgroundImage: `url(${titleBackgroundImg})`,
+        width: '100%',
+        height: '100%',
+        backgroundSize:'cover'
+      }
 
     useEffect(() => {
         loadData();
@@ -71,15 +79,23 @@ const PublicNotice = () => {
         isLoading ?
             <LoadingComponent />
             :
-            <Grid container rowSpacing={4.5} columnSpacing={2.75}>
-                <Grid item xs={12} sx={{ mb: -2.25 }}>
-                    <Typography variant="h5">我的公共啟事</Typography>
+            <Grid container >
+                <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>
+                    </Stack>
+                    </div>
                 </Grid>
-                <Grid item xs={12} sx={{ mb: -2.25 }}>
-                    <Button variant="contained" onClick={() => { onBtnClick() }}>申請公共啟事</Button>
+                <Grid item xs={12} mt={1} >
+                    <Stack direction="row" justifyContent="flex-end" alignItems="center">
+                        <Box sx={{mr:{md:"47px"}}}>
+                            <Button variant="contained" onClick={() => { onBtnClick() }}>申請公共啟事</Button>
+                        </Box>
+                    </Stack>
                 </Grid>
                 {/*col 2*/}
-                <Grid item xs={12}>
+                <Grid item xs={12} sx={{minHeight: '75vh'}}>
                     <TabContext value={selectedTab}>
                         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                             <TabList onChange={handleChange} aria-label="lab API tabs example">