update logout button

src/layout/MainLayout/Header/index.js

@@ -39,7 +39,7 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import Logo from 'components/Logo';
 import AdminLogo from 'components/AdminLogo';
 import MobileLogo from 'components/MobileLogo';
-import Profile from './HeaderContent/Profile';
+//import Profile from './HeaderContent/Profile';
 import "assets/style/navbarStyles.css";
 import { 
   isUserLoggedIn, 
@@ -137,9 +137,9 @@ function Header(props) {
         <li>
           <Link className="emailTemplate" to='/emailTemplate'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Email Template</Typography></Link>
         </li>
-        {/* <li>
+        <li>
           <Link className="logout" onClick={handleLogout}><Typography variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Logout</Typography></Link>
-        </li> */}
+        </li>
       </div>
       :
       <div id="individualUserContent">
@@ -243,9 +243,11 @@ function Header(props) {
             </>
           }
         </li>
-        {/* <li>
-          <Link className="logout" onClick={handleLogout}><Typography variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>登出</Typography></Link>
-        </li> */}
+        <li>
+          <Link className="logout" onClick={handleLogout}><Typography variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
+            <FormattedMessage id="logout" />
+          </Typography></Link>
+        </li>
       </div>
   );
 
@@ -388,7 +390,7 @@ function Header(props) {
                         :
                         <LocaleSelector />
                     }
-                    <Profile />
+                    {/*<Profile />*/}
                   </Grid>
                 </Grid>
               </Stack>
@@ -469,7 +471,7 @@ function Header(props) {
                 </ul>
                 <LocaleSelector />
 
-                {/* <Profile /> */}
+                 {/*<Profile />*/}
               </Stack>
             </Box>
           </Toolbar>

src/pages/User/ManagePage_OrgPublic/index.js

@@ -2,7 +2,7 @@
 import { FiDataGrid } from "components/FiDataGrid";
 
 import {
-    Typography, Button, Grid, Stack
+    Typography, Button, Grid, Stack, useMediaQuery
 } from '@mui/material';
 
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
@@ -13,6 +13,7 @@ import * as HttpUtils from "utils/HttpUtils";
 import * as UrlUtils from "utils/ApiPathConst";
 import * as DateUtils from "utils/DateUtils";
 import {FormattedMessage, useIntl} from "react-intl";
+import {useTheme} from "@emotion/react";
 
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
@@ -31,6 +32,8 @@ const BackgroundHead = {
 const ManageOrgUserPage = () => {
     const [rows, setRows] = React.useState([]);
     const intl = useIntl();
+    const theme = useTheme();
+    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
 
     const _sx = {
         padding: "4 2 4 2",
@@ -120,21 +123,24 @@ const ManageOrgUserPage = () => {
             id: 'username',
             field: 'username',
             headerName: getHeader(intl.formatMessage({id: 'loginName'})),
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
 
         },
         {
             id: 'contactPerson',
             field: 'contactPerson',
             headerName: getHeader(intl.formatMessage({id: 'userName'})),
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
 
         },
         {
             id: 'contactTel',
             field: 'contactTel',
             headerName: getHeader(intl.formatMessage({id: 'userContactNumber'})),
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
                 let contactTel = JSON.parse(params.value)
                 return contactTel?.countryCode + " " + contactTel?.phoneNumber;
@@ -144,13 +150,15 @@ const ManageOrgUserPage = () => {
             id: 'emailBus',
             field: 'emailBus',
             headerName: getHeader(intl.formatMessage({id: 'userContactEmail'})),
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
         },
         {
             id: 'lastLogin',
             field: 'lastLogin',
             headerName: getHeader(intl.formatMessage({id: 'lastLoginDate'})),
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
                 return DateUtils.datetimeStr(params.value);
             }
@@ -159,7 +167,8 @@ const ManageOrgUserPage = () => {
             id: 'lastApply',
             field: 'lastApply',
             headerName: getHeader(intl.formatMessage({id: 'lastSubmissionDate'})),
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             valueGetter: () => {
                 return "--";
             }
@@ -168,7 +177,8 @@ const ManageOrgUserPage = () => {
             field: 'actions',
             type: 'actions',
             headerName: getHeader(intl.formatMessage({id: 'status'})),
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             cellClassName: 'actions',
             getActions: (params) => {
                 return [getStatus(params)]
@@ -179,7 +189,8 @@ const ManageOrgUserPage = () => {
             field: 'primaryUser',
             type: 'bool',
             headerName: getHeader(intl.formatMessage({id: 'primary'})),
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
                 console.log(params);
                 return (