From 6699648178011cdaf0e266c8e9e5a399e63f359a Mon Sep 17 00:00:00 2001
From: "jason.lam" <jason.lam@2fi-solutions.com.hk>
Date: Fri, 26 Jan 2024 17:30:25 +0800
Subject: [PATCH] update title display for small layout

---
 src/pages/DemandNote/Search_Public/index.js               | 2 +-
 src/pages/Message/Search/index.js                         | 2 +-
 src/pages/Organization/DetailPage/index.js                | 6 ++++--
 src/pages/Payment/Search_Public/index.js                  | 2 +-
 src/pages/Proof/Payment/Pay.js                            | 4 ++--
 src/pages/Proof/Payment/Pay_Creditor.js                   | 6 +++---
 src/pages/Proof/Reply_GLD/index.js                        | 4 +++-
 src/pages/Proof/Reply_Public/index.js                     | 4 ++--
 src/pages/Proof/Search_Public/index.js                    | 6 +++---
 src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js | 2 +-
 src/pages/PublicNotice/Details_Public/index.js            | 2 +-
 src/pages/PublicNotice/ListPanel/index.js                 | 4 ++--
 src/pages/User/DetailsPage_Individual/index.js            | 6 ++++--
 src/pages/User/DetailsPage_Organization/index.js          | 6 ++++--
 src/pages/User/GLDUserProfile/index.js                    | 4 +++-
 src/pages/User/ManagePage_OrgPublic/index.js              | 2 +-
 src/pages/dashboard/GLD/index.js                          | 4 +++-
 17 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/src/pages/DemandNote/Search_Public/index.js b/src/pages/DemandNote/Search_Public/index.js
index a3bb149..2602a46 100644
--- a/src/pages/DemandNote/Search_Public/index.js
+++ b/src/pages/DemandNote/Search_Public/index.js
@@ -98,7 +98,7 @@ const UserSearchPage_Individual = () => {
                 <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 ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                                 <FormattedMessage id="paymentInfoRecord" />
                             </Typography>
                         </Stack>
diff --git a/src/pages/Message/Search/index.js b/src/pages/Message/Search/index.js
index 9706d5d..b96ae87 100644
--- a/src/pages/Message/Search/index.js
+++ b/src/pages/Message/Search/index.js
@@ -69,7 +69,7 @@ const Index = () => {
                 <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 ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                                 <FormattedMessage id="paymentHistory"/>
                             </Typography>
                         </Stack>
diff --git a/src/pages/Organization/DetailPage/index.js b/src/pages/Organization/DetailPage/index.js
index bfea72d..0442947 100644
--- a/src/pages/Organization/DetailPage/index.js
+++ b/src/pages/Organization/DetailPage/index.js
@@ -131,9 +131,11 @@ const OrganizationDetailPage = () => {
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                         {isGLDLoggedIn()?
-                            <Typography ml={15} color='#FFF' variant="h4">Maintain Organization</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
+                                Maintain Organization
+                            </Typography>
                         :
-                            <Typography ml={15} color='#FFF' variant="h4">
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                                 <FormattedMessage id="organizationProfile" />
                             </Typography>
                         }
diff --git a/src/pages/Payment/Search_Public/index.js b/src/pages/Payment/Search_Public/index.js
index 0930897..1b2e72d 100644
--- a/src/pages/Payment/Search_Public/index.js
+++ b/src/pages/Payment/Search_Public/index.js
@@ -69,7 +69,7 @@ const Index = () => {
                 <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 ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                                 <FormattedMessage id="paymentHistory"/>
                             </Typography>
                         </Stack>
diff --git a/src/pages/Proof/Payment/Pay.js b/src/pages/Proof/Payment/Pay.js
index 17e7893..9fad007 100644
--- a/src/pages/Proof/Payment/Pay.js
+++ b/src/pages/Proof/Payment/Pay.js
@@ -85,9 +85,9 @@ const Index = () => {
             (
                 <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
                     <Grid item xs={12} width="100%">
-                        <div style={BackgroundHead} width="100%">
+                        <div style={BackgroundHead} width="100%" >
                             <Stack direction="row" height='70px'>
-                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }, pt:2}}>
                                     <FormattedMessage id="proofRecord"/>
                                 </Typography>
                             </Stack>
diff --git a/src/pages/Proof/Payment/Pay_Creditor.js b/src/pages/Proof/Payment/Pay_Creditor.js
index 9d1631f..bea153b 100644
--- a/src/pages/Proof/Payment/Pay_Creditor.js
+++ b/src/pages/Proof/Payment/Pay_Creditor.js
@@ -65,9 +65,9 @@ const Index = () => {
             (
                 <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
                     <Grid item xs={12} width="100%">
-                        <div style={BackgroundHead} width="100%">
-                            <Stack direction="row" height='70px'>
-                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>
+                        <div style={BackgroundHead} width="100%" >
+                            <Stack direction="row" height='70px' >
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }, pt:2}} >
                                     <FormattedMessage id="proofRecord"/>
                                 </Typography>
                             </Stack>
diff --git a/src/pages/Proof/Reply_GLD/index.js b/src/pages/Proof/Reply_GLD/index.js
index 3aac47b..741f413 100644
--- a/src/pages/Proof/Reply_GLD/index.js
+++ b/src/pages/Proof/Reply_GLD/index.js
@@ -119,7 +119,9 @@ const Index = () => {
                     <Grid item xs={12} width="100%">
                         <div style={BackgroundHead} width="100%">
                             <Stack direction="row" height='70px'>
-                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>Proof Record</Typography>
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
+                                    Proof Record
+                                </Typography>
                             </Stack>
                         </div>
                     </Grid>
diff --git a/src/pages/Proof/Reply_Public/index.js b/src/pages/Proof/Reply_Public/index.js
index 80cc52c..bed3ac6 100644
--- a/src/pages/Proof/Reply_Public/index.js
+++ b/src/pages/Proof/Reply_Public/index.js
@@ -84,11 +84,11 @@ const Index = () => {
             <LoadingComponent />
             :
             (
-                <Grid container sx={{ width: '100%', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
+                <Grid container sx={{ width: '100%', backgroundColor: '#fff' }} direction="column"  justifyContent="flex-start" alignItems="center" >
                     <Grid item xs={12} width="100%">
                         <div style={BackgroundHead} width="100%">
                             <Stack direction="row" height='70px'>
-                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }, pt:2}}>
                                     <FormattedMessage id="proofRecord"/>
                                 </Typography>
                             </Stack>
diff --git a/src/pages/Proof/Search_Public/index.js b/src/pages/Proof/Search_Public/index.js
index 4aed5a9..b0de3f1 100644
--- a/src/pages/Proof/Search_Public/index.js
+++ b/src/pages/Proof/Search_Public/index.js
@@ -82,9 +82,9 @@ const UserSearchPage_Individual = () => {
             :
             <Grid container sx={{minHeight: '85vh',backgroundColor:'#ffffff'}} 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">
+                    <div style={BackgroundHead} >
+                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center" >
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                                 <FormattedMessage id="proofRecord"/>
                             </Typography>
                         </Stack>
diff --git a/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js b/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
index 88a9e35..d9d9da9 100644
--- a/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
+++ b/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
@@ -132,7 +132,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
             <Grid item xs={12} md={12} width="100%" >
                 <div style={BackgroundHead}>
                     <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                        <Typography ml={15} color='#FFF' variant="h4">
+                        <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                             <FormattedMessage id="applyPublicNotice"/>
                         </Typography>
                     </Stack>
diff --git a/src/pages/PublicNotice/Details_Public/index.js b/src/pages/PublicNotice/Details_Public/index.js
index 3139c29..7744770 100644
--- a/src/pages/PublicNotice/Details_Public/index.js
+++ b/src/pages/PublicNotice/Details_Public/index.js
@@ -154,7 +154,7 @@ const DashboardDefault = () => {
       <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 ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
               <FormattedMessage id="myPublicNotice"/>
             </Typography>
           </Stack>
diff --git a/src/pages/PublicNotice/ListPanel/index.js b/src/pages/PublicNotice/ListPanel/index.js
index 06a8a77..2d36982 100644
--- a/src/pages/PublicNotice/ListPanel/index.js
+++ b/src/pages/PublicNotice/ListPanel/index.js
@@ -108,7 +108,7 @@ const PublicNotice = () => {
                 <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 ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                                 <FormattedMessage id="myPublicNotice"/>
                             </Typography>
                         </Stack>
@@ -129,7 +129,7 @@ const PublicNotice = () => {
 
                 {
                     JSON.parse(localStorage.getItem('userData')).creditor ? (
-                        <Grid item xs={12} sm={12} md={12} lg={12} sx={{ height:'100%', maxWidth: '1%',width: "-webkit-fill-available", backgroundColor: "#fff", mt: 3, mr: 3, ml: 3, mb: 3, ..._sx }}>
+                        <Grid item xs={12} sm={12} md={12} lg={12} sx={{ height:'100%', maxWidth: '100%',width: "-webkit-fill-available", backgroundColor: "#fff", mt: 3, mr: 3, ml: 3, mb: 3, ..._sx }}>
                             <TabContext value={selectedTab}>
                                 <Box sx={{ borderBottom: 1, borderColor: 'divider', overflowX: 'auto', overflowY:'auto' }}>
                                     <TabList onChange={handleChange} aria-label="lab API tabs example" sx={{ display: 'flex', flexDirection: 'row' }}>
diff --git a/src/pages/User/DetailsPage_Individual/index.js b/src/pages/User/DetailsPage_Individual/index.js
index c780d1e..08ed36f 100644
--- a/src/pages/User/DetailsPage_Individual/index.js
+++ b/src/pages/User/DetailsPage_Individual/index.js
@@ -125,9 +125,11 @@ const UserMaintainPage_Individual = () => {
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                         {isGLDLoggedIn()?
-                            <Typography ml={15} color='#FFF' variant="h4">Maintain Individual User</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
+                                Maintain Individual User
+                            </Typography>
                         :
-                            <Typography ml={15} color='#FFF' variant="h4">
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
                                 <FormattedMessage id="userProfile" />
                             </Typography>
                         }
diff --git a/src/pages/User/DetailsPage_Organization/index.js b/src/pages/User/DetailsPage_Organization/index.js
index 91bc1a7..0831cb9 100644
--- a/src/pages/User/DetailsPage_Organization/index.js
+++ b/src/pages/User/DetailsPage_Organization/index.js
@@ -186,9 +186,11 @@ const UserMaintainPage_Organization = () => {
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                             {isGLDLoggedIn()?
-                                <Typography ml={15} color='#FFF' variant="h4">Maintain Organisation User</Typography>
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
+                                    Maintain Organisation User
+                                </Typography>
                             :
-                                <Typography ml={15} color='#FFF' variant="h4">
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
                                     <FormattedMessage id="userProfile" />
                                 </Typography>
                             }
diff --git a/src/pages/User/GLDUserProfile/index.js b/src/pages/User/GLDUserProfile/index.js
index e253354..f77df99 100644
--- a/src/pages/User/GLDUserProfile/index.js
+++ b/src/pages/User/GLDUserProfile/index.js
@@ -82,7 +82,9 @@ const UserMaintainPage = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4">User Profile</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
+                                User Profile
+                            </Typography>
                         </Stack>
                     </div>
                 </Grid>
diff --git a/src/pages/User/ManagePage_OrgPublic/index.js b/src/pages/User/ManagePage_OrgPublic/index.js
index 42fcf9e..cf7fa21 100644
--- a/src/pages/User/ManagePage_OrgPublic/index.js
+++ b/src/pages/User/ManagePage_OrgPublic/index.js
@@ -222,7 +222,7 @@ const ManageOrgUserPage = () => {
             <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 ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                             <FormattedMessage id="companyOrUserRecord" />
                         </Typography>
                     </Stack>
diff --git a/src/pages/dashboard/GLD/index.js b/src/pages/dashboard/GLD/index.js
index f720e4c..4d6443f 100644
--- a/src/pages/dashboard/GLD/index.js
+++ b/src/pages/dashboard/GLD/index.js
@@ -25,7 +25,9 @@ const DashboardDefault = () => {
       <Grid item xs={12}>
         <div style={BackgroundHead}>
           <Stack direction="row"  height='70px' justifyContent="flex-start" alignItems="center">
-            <Typography ml={15} color='#FFF' variant="h4">Morning, {userData.fullenName}</Typography>
+            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
+              Morning, {userData.fullenName}
+            </Typography>
           </Stack>
         </div>
       </Grid>