From 900d78229234e688259cb7541d682b2b6cb79c1d Mon Sep 17 00:00:00 2001
From: "cyril.tsui" <cyril.tsui@2fi-solutions.com.hk>
Date: Fri, 3 Nov 2023 12:56:28 +0800
Subject: [PATCH] Update UI

---
 src/pages/Payment/Search_Public/DataGrid.js   | 18 +++++-
 src/pages/Payment/Search_Public/SearchForm.js | 36 ++++++++---
 src/pages/User/ManagePage_OrgPublic/index.js  | 63 +++++++++++--------
 3 files changed, 82 insertions(+), 35 deletions(-)

diff --git a/src/pages/Payment/Search_Public/DataGrid.js b/src/pages/Payment/Search_Public/DataGrid.js
index 5e81d49..76c84ad 100644
--- a/src/pages/Payment/Search_Public/DataGrid.js
+++ b/src/pages/Payment/Search_Public/DataGrid.js
@@ -13,6 +13,22 @@ export default function SearchPublicNoticeTable({ recordList }) {
     const [rows, setRows] = React.useState(recordList);
     const navigate = useNavigate()
 
+    const _sx = {
+        padding: "4 2 4 2",
+        boxShadow: 1,
+        border: 1,
+        borderColor: '#DDD',
+        '& .MuiDataGrid-cell': {
+            borderTop: 1,
+            borderBottom: 1,
+            borderColor: "#EEE"
+        },
+        '& .MuiDataGrid-footerContainer': {
+            border: 1,
+            borderColor: "#EEE"
+        }
+    }
+
     React.useEffect(() => {
         setRows(recordList);
     }, [recordList]);
@@ -21,7 +37,6 @@ export default function SearchPublicNoticeTable({ recordList }) {
         navigate('/proof/reply/' + params.row.id);
     };
 
-
     const columns = [
         {
             field: 'actions',
@@ -79,6 +94,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
         <div style={{ height: 400, width: '100%' }}>
 
             <FiDataGrid
+                sx={_sx}
                 rowHeight={80}
                 rows={rows}
                 columns={columns}
diff --git a/src/pages/Payment/Search_Public/SearchForm.js b/src/pages/Payment/Search_Public/SearchForm.js
index 2f2af85..7b3d553 100644
--- a/src/pages/Payment/Search_Public/SearchForm.js
+++ b/src/pages/Payment/Search_Public/SearchForm.js
@@ -2,7 +2,8 @@
 import {
     Button,
     CardContent,
-    Grid, TextField
+    Grid, TextField,
+    Typography
 } from '@mui/material';
 import MainCard from "components/MainCard";
 import { useForm } from "react-hook-form";
@@ -11,11 +12,26 @@ import * as DateUtils from "utils/DateUtils";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => {
+const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
 
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
 
+    const _sx = {
+        padding: "4 2 4 2",
+        boxShadow: 1,
+        border: 1,
+        borderColor: '#DDD',
+        '& .MuiDataGrid-cell': {
+            borderTop: 1,
+            borderBottom: 1,
+            borderColor: "#EEE"
+        },
+        '& .MuiDataGrid-footerContainer': {
+            border: 1,
+            borderColor: "#EEE"
+        }
+    }
 
     const { reset, register, handleSubmit } = useForm()
 
@@ -40,19 +56,21 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => {
     return (
         <MainCard xs={12} md={12} lg={12}
             border={false}
-            content={false}>
+            content={false}
+            sx={_sx}
+            >
 
             <form onSubmit={handleSubmit(onSubmit)}>
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
-                    <Grid item justifyContent="space-between" alignItems="center">
-                    搜尋
+                    <Grid item justifyContent="space-between" alignItems="center" >
+                        <Typography variant="h4">搜尋</Typography>
                     </Grid>
                 </CardContent>
 
                 {/*row 2*/}
                 <Grid container alignItems={"center"}>
-         
+
                     <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
@@ -101,7 +119,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => {
                             defaultValue={searchCriteria.dateTo}
                         />
                     </Grid>
-                
+
                 </Grid>
 
 
@@ -117,7 +135,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => {
                                 textTransform: 'capitalize',
                                 alignItems: 'end'
                             }}>
-                            重置
+                            <Typography variant="h5">重置</Typography>
                         </Button>
                     </Grid>
 
@@ -130,7 +148,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => {
                                 textTransform: 'capitalize',
                                 alignItems: 'end'
                             }}>
-                            提交
+                            <Typography variant="h5">提交</Typography>
                         </Button>
                     </Grid>
                 </Grid>
diff --git a/src/pages/User/ManagePage_OrgPublic/index.js b/src/pages/User/ManagePage_OrgPublic/index.js
index 6367222..d2517a0 100644
--- a/src/pages/User/ManagePage_OrgPublic/index.js
+++ b/src/pages/User/ManagePage_OrgPublic/index.js
@@ -1,5 +1,5 @@
 // material-ui
-import {FiDataGrid} from "components/FiDataGrid";
+import { FiDataGrid } from "components/FiDataGrid";
 
 import {
     Typography, Button, Grid, Stack
@@ -8,8 +8,6 @@ import {
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import Checkbox from '@mui/material/Checkbox';
 
-import MainCard from "components/MainCard";
-
 import * as React from "react";
 import * as HttpUtils from "utils/HttpUtils";
 import * as UrlUtils from "utils/ApiPathConst";
@@ -32,6 +30,22 @@ const BackgroundHead = {
 const ManageOrgUserPage = () => {
     const [rows, setRows] = React.useState([]);
 
+    const _sx = {
+        padding: "4 2 4 2",
+        boxShadow: 1,
+        border: 1,
+        borderColor: '#DDD',
+        '& .MuiDataGrid-cell': {
+            borderTop: 1,
+            borderBottom: 1,
+            borderColor: "#EEE"
+        },
+        '& .MuiDataGrid-footerContainer': {
+            border: 1,
+            borderColor: "#EEE"
+        }
+    }
+
     React.useEffect(() => {
         loadData();
     }, []);
@@ -175,29 +189,28 @@ const ManageOrgUserPage = () => {
     ];
 
     return (
-        <MainCard elevation={0} border={false} content={false} >
-            <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 lg={12} sx={{padding:2}}>
-                    <FiDataGrid
-                        rows={rows}
-                        columns={columns}
-                        initialState={{
-                            pagination: {
-                                paginationModel: { page: 0, pageSize: 10 },
-                            },
-                        }}
-                    />
-                </Grid>
+        <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 lg={12} sx={{ padding: 2 }}>
+                <FiDataGrid
+                    sx={_sx}
+                    rows={rows}
+                    columns={columns}
+                    initialState={{
+                        pagination: {
+                            paginationModel: { page: 0, pageSize: 10 },
+                        },
+                    }}
+                />
             </Grid>
-        </MainCard>
+        </Grid>
     );
 };