update UI

src/pages/User/DetailPage/UserInformationCard.js

@@ -115,7 +115,7 @@ const UserInformationCard = ({ isCollectData, updateUserObject, userData, isNewR
                         <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
-                                    sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
+                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                     <FormLabel required>Username:</FormLabel>
                                 </Grid>
 
@@ -141,7 +141,7 @@ const UserInformationCard = ({ isCollectData, updateUserObject, userData, isNewR
                                 <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3 }}>
                                     <Grid container alignItems={"center"}>
                                         <Grid item xs={4} s={4} md={4} lg={4}
-                                            sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
+                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                             <FormLabel required>Password:</FormLabel>
                                         </Grid>
 
@@ -182,7 +182,7 @@ const UserInformationCard = ({ isCollectData, updateUserObject, userData, isNewR
                         <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3 }}>
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
-                                    sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
+                                    sx={{  display: 'flex', alignItems: 'center' }}>
                                     <FormLabel required >Full Name:</FormLabel>
                                 </Grid>
 
@@ -215,7 +215,7 @@ const UserInformationCard = ({ isCollectData, updateUserObject, userData, isNewR
                         <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3 }}>
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
-                                    sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
+                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                     <FormLabel>Post:</FormLabel>
                                 </Grid>
 
@@ -239,7 +239,7 @@ const UserInformationCard = ({ isCollectData, updateUserObject, userData, isNewR
                         <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3 }}>
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
-                                    sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
+                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                     <FormLabel required>Email:</FormLabel>
                                 </Grid>
 
@@ -283,10 +283,10 @@ const UserInformationCard = ({ isCollectData, updateUserObject, userData, isNewR
                             </Grid>
                         </Grid> */}
 
-                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3 }}>
+                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3 }}>
                             <Grid container>
                                 <Grid item xs={4} s={4} md={4} lg={4}
-                                    sx={{ ml: 3, mr: 3, mb: 3, display: 'flex', alignItems: 'center' }}>
+                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                     <FormLabel required>Locked:</FormLabel>
                                 </Grid>
 

src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js

@@ -77,10 +77,11 @@ const UserGroupSearchForm = ({ applySearch }) => {
                     <Grid container direction="row"
                         justifyContent="space-between"
                         alignItems="center"
+                        spacing={3}
                         sx={{ mb: 3 }}
                     >
                         <ThemeProvider theme={PNSPS_BUTTON_THEME}>
-                        <Grid item xs={3} md={3} sx={{ ml: 3}}>
+                        <Grid item xs={3} md={3} >
                             <Button
                                 variant="contained"
                                 onClick={handleNewGroupClick}
@@ -90,8 +91,8 @@ const UserGroupSearchForm = ({ applySearch }) => {
                             </Button>
                         </Grid>
                         <Grid item xs={8} md={8}>
-                            <Grid container maxWidth justifyContent="flex-end">
-                                <Grid item sx={{mr:3}}>
+                            <Grid container maxWidth justifyContent="flex-end" spacing={3}>
+                                <Grid item >
                                     <Button
                                         variant="contained"
                                         color="cancel"