update title display for small layout

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>

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>

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>
                         }

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>

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>

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>

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>

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>

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>

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>

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>

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' }}>

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>
                         }

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>
                             }

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>

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>

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>