From 0e4a5f4435edcfadd3f96fbe1e4ac26a46037617 Mon Sep 17 00:00:00 2001
From: Sonika <kumari.sonika@seryfertsoft.com>
Date: Wed, 17 Jan 2024 16:20:30 +0530
Subject: [PATCH] dialog ui fix

---
 .../intranet_users/IntranetUsers.tsx          | 54 ++++++++++-------
 src/components/manage_users/ManageUsers.tsx   | 59 ++++++++++---------
 2 files changed, 63 insertions(+), 50 deletions(-)

diff --git a/src/components/intranet_users/IntranetUsers.tsx b/src/components/intranet_users/IntranetUsers.tsx
index 2fe7da1..a550c2b 100644
--- a/src/components/intranet_users/IntranetUsers.tsx
+++ b/src/components/intranet_users/IntranetUsers.tsx
@@ -71,12 +71,15 @@ const StyledTextField = (props:any) => (
             '&:hover fieldset': { borderColor: 'white', borderWidth: 2 },
           },
           ...props.sx,
+          width:'92vh'
         }}
       >
         {props.children}
       </Select>
     </div>
   );
+
+  
   interface Row {
     username: string;
     role: string;
@@ -259,43 +262,52 @@ export default function IntranetUsers(){
                   onPageChange={handleChangePage}
                   onRowsPerPageChange={handleChangeRowsPerPage}
                 />
-                <Dialog  open={open} onClose={handleClose}>
-                    <DialogTitle sx={{bgcolor:'rgb(24 24 23)', color:'white'}}>{selectedRow && selectedRow.id ? 'Edit Row' : 'Add New Row'}</DialogTitle>
-                    <DialogContent sx={{ bgcolor: 'rgb(24 24 23)' }} className="dialog-class">
-                        <StyledTextField
+
+
+              <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
+                <DialogTitle sx={{ bgcolor: 'rgb(24 24 23)', color: 'white', textAlign: 'center' }}>
+                    {selectedRow && selectedRow.id ? 'Edit Row' : 'Add New Row'}
+                </DialogTitle>
+                <DialogContent sx={{ bgcolor: 'rgb(24 24 23)', display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '20px' }} className="dialog-class">
+                    <StyledTextField
                         label="Name"
                         type="text"
                         name="username"
                         value={selectedRow && selectedRow.username}
                         onChange={handleChange}
-                        />
-                        <StyledTextField
+                        sx={{ width: '100%', marginBottom: '20px', }}
+                    />
+                    <StyledTextField
                         label="Role"
                         name="role"
                         value={selectedRow && selectedRow.role}
                         onChange={handleChange}
-                        />
-                        <StyledSelect
-                          label="Active"
-                          placeholder="Active"
-                          name="active"
-                          value={selectedRow && selectedRow.active}
-                          onChange={handleChange}
-                        >
-                          <MenuItem value='Active'>Active</MenuItem>
-                          <MenuItem value='Inactive'>Inactive</MenuItem>
-                        </StyledSelect>
+                        sx={{ width: '100%', marginBottom: '20px' }}
+                    />
+                    <StyledSelect
+                        fullWidth
+                        label="Active"
+                        placeholder="Active"
+                        name="active"
+                        value={selectedRow && selectedRow.active}
+                        onChange={handleChange}
+                    >
+                        <MenuItem value='Active'>Active</MenuItem>
+                        <MenuItem value='Inactive'>Inactive</MenuItem>
+                    </StyledSelect>
 
-                    </DialogContent >
-                    <DialogActions sx={{bgcolor:'rgb(24 24 23)'}} className="dialog-class-actions">
+                </DialogContent>
+                <DialogActions sx={{ bgcolor: 'rgb(24 24 23)', justifyContent: 'space-between', padding: '20px' }} className="dialog-class-actions">
                     <Button onClick={handleClose} color="primary">
                         Cancel
                     </Button>
                     <Button onClick={handleSave} color="primary">
                         Save
                     </Button>
-                    </DialogActions>
-                </Dialog>
+                </DialogActions>
+              </Dialog>
+
+
             </Paper>
         </Paper>
       </Box>
diff --git a/src/components/manage_users/ManageUsers.tsx b/src/components/manage_users/ManageUsers.tsx
index e269409..4452f61 100644
--- a/src/components/manage_users/ManageUsers.tsx
+++ b/src/components/manage_users/ManageUsers.tsx
@@ -69,6 +69,7 @@ const StyledTextField = (props:any) => (
             '&:hover fieldset': { borderColor: 'white', borderWidth: 2 },
           },
           ...props.sx,
+          width:'92vh'
         }}
       >
         {props.children}
@@ -263,48 +264,48 @@ export default function ManageUsers(){
                   onPageChange={handleChangePage}
                   onRowsPerPageChange={handleChangeRowsPerPage}
                 />
-                <Dialog  open={open} onClose={handleClose}>
-                    <DialogTitle sx={{bgcolor:'rgb(24 24 23)', color:'white'}}>{selectedRow && selectedRow.id ? 'Edit Row' : 'Add New Row'}</DialogTitle>
-                    <DialogContent sx={{ bgcolor: 'rgb(24 24 23)' }} className="dialog-class">
-                        <StyledTextField
+                <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
+                <DialogTitle sx={{ bgcolor: 'rgb(24 24 23)', color: 'white', textAlign: 'center' }}>
+                    {selectedRow && selectedRow.id ? 'Edit Row' : 'Add New Row'}
+                </DialogTitle>
+                <DialogContent sx={{ bgcolor: 'rgb(24 24 23)', display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '20px' }} className="dialog-class">
+                    <StyledTextField
                         label="Name"
                         type="text"
                         name="username"
                         value={selectedRow && selectedRow.username}
                         onChange={handleChange}
-                        />
-                        <StyledTextField
-                        label="Email"
-                        name="email_id"
-                        value={selectedRow && selectedRow.email_id}
+                        sx={{ width: '100%', marginBottom: '20px', }}
+                    />
+                    <StyledTextField
+                        label="Role"
+                        name="role"
+                        value={selectedRow && selectedRow.role}
                         onChange={handleChange}
-                        />
-                        <StyledTextField
-                        label="Last Login"
-                        name="last_login"
-                        value={selectedRow && selectedRow.last_login}
+                        sx={{ width: '100%', marginBottom: '20px' }}
+                    />
+                    <StyledSelect
+                        fullWidth
+                        label="Active"
+                        placeholder="Active"
+                        name="active"
+                        value={selectedRow && selectedRow.active}
                         onChange={handleChange}
-                        />
-                        <StyledSelect
-                          label="Active"
-                          placeholder="Active"
-                          name="active"
-                          value={selectedRow && selectedRow.active}
-                          onChange={handleChange}
-                        >
-                          <MenuItem value='Active'>Active</MenuItem>
-                          <MenuItem value='Inactive'>Inactive</MenuItem>
-                        </StyledSelect>
-                    </DialogContent>
-                    <DialogActions sx={{bgcolor:'rgb(24 24 23)'}} className="dialog-class-actions">
+                    >
+                        <MenuItem value='Active'>Active</MenuItem>
+                        <MenuItem value='Inactive'>Inactive</MenuItem>
+                    </StyledSelect>
+
+                </DialogContent>
+                <DialogActions sx={{ bgcolor: 'rgb(24 24 23)', justifyContent: 'space-between', padding: '20px' }} className="dialog-class-actions">
                     <Button onClick={handleClose} color="primary">
                         Cancel
                     </Button>
                     <Button onClick={handleSave} color="primary">
                         Save
                     </Button>
-                    </DialogActions>
-                </Dialog>
+                </DialogActions>
+              </Dialog>
             </Paper>
         </Paper>
       </Box>