From d0798b65311475a072a0fcde3ba3dc02149c64ff Mon Sep 17 00:00:00 2001
From: "cyril.tsui" <cyril.tsui@2fi-solutions.com.hk>
Date: Thu, 2 Nov 2023 10:21:07 +0800
Subject: [PATCH] Update ui (e.g. datagrid

---
 .../User/DetailPage/UserAuthorityCard.js      |  2 +-
 src/pages/User/DetailPage/index.js            | 12 ++--
 src/pages/User/SearchPage/UserSearchForm.js   | 25 +++++--
 src/pages/User/SearchPage/UserTable.js        |  1 +
 src/pages/User/SearchPage/index.js            | 66 +++++++++----------
 src/themes/overrides/DataGrid.js              | 34 +++++++++-
 6 files changed, 94 insertions(+), 46 deletions(-)

diff --git a/src/pages/User/DetailPage/UserAuthorityCard.js b/src/pages/User/DetailPage/UserAuthorityCard.js
index deef5ed..fd2dd27 100644
--- a/src/pages/User/DetailPage/UserAuthorityCard.js
+++ b/src/pages/User/DetailPage/UserAuthorityCard.js
@@ -50,7 +50,7 @@ const UserAuthorityCard = ({ isCollectData, updateUserAuthList, userData, isNewR
                 border={false}
                 content={false}
             >
-                <Typography variant="h5" sx={{ mt: 3, ml: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
+                <Typography variant="h6" sx={{ mt: 3, ml: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
                     User Authority
                 </Typography>
 
diff --git a/src/pages/User/DetailPage/index.js b/src/pages/User/DetailPage/index.js
index e8d8f76..46e570e 100644
--- a/src/pages/User/DetailPage/index.js
+++ b/src/pages/User/DetailPage/index.js
@@ -204,7 +204,7 @@ const UserMaintainPage = () => {
         !onReady ?
             <LoadingComponent />
             :
-            <Grid container sx={{ minHeight: '90vh' }}>
+            <Grid container sx={{ minHeight: '90vh', backgroundColor: 'backgroundColor.default' }}>
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
@@ -222,7 +222,7 @@ const UserMaintainPage = () => {
                 <Grid item xs={12} md={5} lg={5}>
                     <Grid container>
                         <Grid item xs={12} md={12} lg={12}>
-                            <Box xs={12} ml={4} mt={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                            <Box xs={12} ml={4} mt={3} sx={{ p: 1, borderRadius: '10px', backgroundColor: '#fff' }}>
                                 <UserInformationCard
                                     updateUserObject={updateUserObject}
                                     userData={userData}
@@ -233,7 +233,7 @@ const UserMaintainPage = () => {
                         </Grid>
 
                         <Grid item xs={12} md={12} lg={12} sx={{ mt: 3 }}>
-                            <Box xs={12} ml={4} mt={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                            <Box xs={12} ml={4} mt={2} sx={{ p: 1, borderRadius: '10px', backgroundColor: '#fff' }}>
                                 <UserGroupCard
                                     updateUserGroupList={updateUserGroupList}
                                     userData={userData}
@@ -246,7 +246,7 @@ const UserMaintainPage = () => {
                 </Grid>
                 {/*col 2*/}
                 <Grid item xs={12} md={7} lg={7}>
-                    <Box xs={12} ml={4} mt={3} mr={3} sx={{ p: 1, border: '3px groove grey', borderRadius: '10px' }}>
+                    <Box xs={12} ml={4} mt={3} mr={3} sx={{ p: 1, borderRadius: '10px', backgroundColor: '#fff' }}>
                         <UserAuthorityCard
                             updateUserAuthList={updateUserAuthList}
                             userData={userData}
@@ -270,7 +270,7 @@ const UserMaintainPage = () => {
                                 disabled={isNewRecord}
                                 onClick={handleDeleteClick}
                             >
-                                Delete User
+                                <Typography variant="h5">Delete User</Typography>
                             </Button>
                             <GeneralConfirmWindow
                                 isWindowOpen={isWindowOpen}
@@ -292,7 +292,7 @@ const UserMaintainPage = () => {
                                 }}
                                 onClick={submitData}
                             >
-                                Save
+                                <Typography variant="h5">Save</Typography>
                             </Button>
                         </Grid>
                     </Grid>
diff --git a/src/pages/User/SearchPage/UserSearchForm.js b/src/pages/User/SearchPage/UserSearchForm.js
index 7adf346..13b0e38 100644
--- a/src/pages/User/SearchPage/UserSearchForm.js
+++ b/src/pages/User/SearchPage/UserSearchForm.js
@@ -70,7 +70,7 @@ const UserSearchForm = ({ applySearch }) => {
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center">
-                        Search Form (GLD User)
+                        <Typography variant="h5">Search Form (GLD User)</Typography>
                     </Grid>
                 </CardContent>
 
@@ -82,6 +82,9 @@ const UserSearchForm = ({ applySearch }) => {
                             {...register("userName")}
                             id='userName'
                             label="Username"
+                            InputLabelProps={{
+                                shrink: true
+                            }}
                         />
                     </Grid>
 
@@ -91,6 +94,9 @@ const UserSearchForm = ({ applySearch }) => {
                             {...register("fullenName")}
                             id="fullenName"
                             label="Full Name"
+                            InputLabelProps={{
+                                shrink: true
+                            }}
                         />
                     </Grid>
 
@@ -100,6 +106,9 @@ const UserSearchForm = ({ applySearch }) => {
                             {...register("post")}
                             id="post"
                             label="Post"
+                            InputLabelProps={{
+                                shrink: true
+                            }}
                         />
                     </Grid>
 
@@ -109,6 +118,9 @@ const UserSearchForm = ({ applySearch }) => {
                             {...register("email")}
                             id="email"
                             label="Email"
+                            InputLabelProps={{
+                                shrink: true
+                            }}
                         />
                     </Grid>
 
@@ -118,6 +130,9 @@ const UserSearchForm = ({ applySearch }) => {
                             {...register("phone")}
                             id="phone"
                             label="Phone"
+                            InputLabelProps={{
+                                shrink: true
+                            }}
                         />
                     </Grid>
 
@@ -132,7 +147,7 @@ const UserSearchForm = ({ applySearch }) => {
                                     size="small"
                                 />
                             }
-                            label={<Typography variant="h6">Locked</Typography>}
+                            label={<Typography variant="h5">Locked</Typography>}
                         />
                     </Grid>
                 </Grid>
@@ -151,7 +166,7 @@ const UserSearchForm = ({ applySearch }) => {
                                 alignItems: 'end'
                             }}>
                             <AddCircleOutlineIcon />
-                            New User
+                            <Typography sx={{ ml: 1 }} variant="h5">New User</Typography>
                         </Button>
                     </Grid>
                     <Grid item xs={8} md={8} sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
@@ -165,7 +180,7 @@ const UserSearchForm = ({ applySearch }) => {
                                         textTransform: 'capitalize',
                                         alignItems: 'end'
                                     }}>
-                                    Clear
+                                    <Typography variant="h5">Clear</Typography>
                                 </Button>
                             </Grid>
 
@@ -178,7 +193,7 @@ const UserSearchForm = ({ applySearch }) => {
                                         textTransform: 'capitalize',
                                         alignItems: 'end'
                                     }}>
-                                    Search
+                                    <Typography variant="h5">Search</Typography>
                                 </Button>
                             </Grid>
                         </Grid>
diff --git a/src/pages/User/SearchPage/UserTable.js b/src/pages/User/SearchPage/UserTable.js
index 6d8c300..143b6f7 100644
--- a/src/pages/User/SearchPage/UserTable.js
+++ b/src/pages/User/SearchPage/UserTable.js
@@ -136,6 +136,7 @@ export default function UserTable({recordList,setChangeLocked}) {
                     },
                 }}
                 onRowDoubleClick={handleRowDoubleClick}
+                getRowHeight={() => 'auto'}
             />
         </div>
     );
diff --git a/src/pages/User/SearchPage/index.js b/src/pages/User/SearchPage/index.js
index 7ca6d14..09ab603 100644
--- a/src/pages/User/SearchPage/index.js
+++ b/src/pages/User/SearchPage/index.js
@@ -1,14 +1,14 @@
 // material-ui
 import {
-    Grid, 
+    Grid,
     Typography,
     Stack,
     // Button
 } from '@mui/material';
 import MainCard from "../../../components/MainCard";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import axios from "axios";
-import {GLD_USER_PATH} from "../../../utils/ApiPathConst";
+import { GLD_USER_PATH } from "../../../utils/ApiPathConst";
 import * as React from "react";
 
 import Loadable from 'components/Loadable';
@@ -22,7 +22,7 @@ const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
     height: '100%',
-    backgroundSize:'contain',
+    backgroundSize: 'contain',
     backgroundRepeat: 'no-repeat',
     backgroundColor: '#0C489E',
     backgroundPosition: 'right'
@@ -30,7 +30,7 @@ const BackgroundHead = {
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const UserSettingPage = () => {
-    const [record,setRecord] = useState([]);
+    const [record, setRecord] = useState([]);
     const [searchCriteria, setSearchCriteria] = useState({});
     const [onReady, setOnReady] = useState(false);
     const [changelocked, setChangeLocked] = React.useState(false);
@@ -49,9 +49,9 @@ const UserSettingPage = () => {
         getUserList();
     }, [searchCriteria]);
 
-    function getUserList(){
+    function getUserList() {
         axios.get(`${GLD_USER_PATH}`,
-            {params: searchCriteria}
+            { params: searchCriteria }
         )
             .then((response) => {
                 if (response.status === 200) {
@@ -70,35 +70,35 @@ const UserSettingPage = () => {
 
     return (
         !onReady ?
-            <LoadingComponent/>
+            <LoadingComponent />
             :
-        <Grid container sx={{minHeight: '90vh'}} 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">View GLD User</Typography>
-                    </Stack>
-                </div>
-            </Grid>
+            <Grid container sx={{ minHeight: '90vh', backgroundColor: "backgroundColor.default" }} 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">View GLD User</Typography>
+                        </Stack>
+                    </div>
+                </Grid>
 
-            {/*row 1*/}
-            <Grid item xs={12} md={12} lg={12}>
-                <SearchForm applySearch={applySearch}/>
-            </Grid>
-            {/*row 2*/}
-            <Grid item xs={12} md={12} lg={12}>
-                <MainCard elevation={0}
-                          border={false}
-                          content={false}
-                >
-                    <EventTable
-                        recordList={record}
-                        setChangeLocked={setChangeLocked}
-                    />
-                </MainCard>
-            </Grid>
+                {/*row 1*/}
+                <Grid item xs={12} md={12} lg={12}>
+                    <SearchForm applySearch={applySearch} />
+                </Grid>
+                {/*row 2*/}
+                <Grid item xs={12} md={12} lg={12}>
+                    <MainCard elevation={0}
+                        border={false}
+                        content={false}
+                    >
+                        <EventTable
+                            recordList={record}
+                            setChangeLocked={setChangeLocked}
+                        />
+                    </MainCard>
+                </Grid>
 
-        </Grid>
+            </Grid>
 
     );
 };
diff --git a/src/themes/overrides/DataGrid.js b/src/themes/overrides/DataGrid.js
index e8b7f9b..a400e26 100644
--- a/src/themes/overrides/DataGrid.js
+++ b/src/themes/overrides/DataGrid.js
@@ -4,10 +4,13 @@ export default function DataGrid() {
     const cellFontSize = "1.1rem"
     const cellFooterFontSize = "1.1rem"
     const cellHeaderFontSize = "1.1rem"
+    const selectedNumberFontSize = "1.2rem"
+    const actionIconSize = "2rem"
 
     const cellFontWeight = 600
     const cellFooterFontWeight = 600
     const cellHeaderFontWeight = 600
+    const selectedNumberFontWeight = 600
 
     return {
         MuiDataGrid: {
@@ -22,7 +25,36 @@ export default function DataGrid() {
                         fontSize: cellFooterFontSize,
                         fontWeight: cellFooterFontWeight
                     },
-                    '& .MuiDataGrid-columnHeader': {
+                    '& .MuiTablePagination-selectLabel': {
+                        fontSize: cellFooterFontSize,
+                        fontWeight: cellFooterFontWeight,
+                        marginTop: 15,
+                    },
+                    '& .MuiTablePagination-select': {
+                        fontSize: selectedNumberFontSize,
+                        fontWeight: selectedNumberFontWeight,
+                        marginTop: 8,
+                    },
+                    '& .MuiTablePagination-selectIcon': {
+                        marginTop: 1,
+                    },
+                    '& .MuiTablePagination-displayedRows': {
+                        fontSize: cellFooterFontSize,
+                        fontWeight: cellFooterFontWeight,
+                    },
+                    '& .MuiTablePagination-actions': {
+                        fontSize: cellFooterFontSize,
+                        fontWeight: cellFooterFontWeight,
+                        svg: {
+                            width: actionIconSize,
+                            height: actionIconSize,
+                        }
+                    },
+                    '& .MuiDataGrid-rowCount': {
+                        fontSize: cellFooterFontSize,
+                        fontWeight: cellFooterFontWeight
+                    },
+                    '& .MuiDataGrid-columnHeaderTitle': {
                         fontSize: cellHeaderFontSize,
                         fontWeight: cellHeaderFontWeight,
                     },