home fix style

src/App.css

   flex-direction: row;
 }
 .pwd_info{
-  padding:10px;
   border-right:1px solid #f1f1f1;
   display: grid;
-  justify-items: center;
+  justify-items:stretch;
   align-items: center;
 }
 .btn_pwd{
   color:white !important;
   background:var(--main) !important;
 }
+
+body > div.MuiDialog-root.MuiModal-root.css-zw3mfo-MuiModal-root-MuiDialog-root > div.MuiDialog-container.MuiDialog-scrollPaper.css-hz1bth-MuiDialog-container > div > div > div > div:nth-child(2) > form > div > div:nth-child(2){
+  margin-top:0;
+}
+
+body > div.MuiDialog-root.MuiModal-root.css-zw3mfo-MuiModal-root-MuiDialog-root > div.MuiDialog-container.MuiDialog-scrollPaper.css-hz1bth-MuiDialog-container > div > div > div > div:nth-child(2) > form > div > div.MuiTableContainer-root.css-rorn0c-MuiTableContainer-root{
+  margin-top :0;
+}
+.headert_pwdu{
+  background:var(--main);
+  color:white !important;
+}

src/Components/Home/Candidatos.js

     let divided = Divide(list);
     setUser(divided)
 
-    // setPassword({})
-    // setVisible(true)
-
   }, [passwords])
 
   return (

src/Components/Password/Operation.jsx

 
   return (
     <FormikProvider style={{ padding: 25 }} value={formik}>
-      <Typography style={{ padding: !home? 5: 0, marginBottom: !home? 15: 0 }}>
-        { home ? "": "Ingresa la informacion del candidato" }
+      <Typography style={{ padding: !home ? 5 : 0, marginBottom: !home ? 15 : 0 }}>
+        {home ? "" : "Ingresa la informacion del candidato"}
       </Typography>
       <Divider />
       <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
         <Stack spacing={3}>
 
-          <Stack style={{ paddingTop:!home? 15 :0, background:'' }} direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+          <Stack 
+            style={{ paddingTop: !home ? 15 : 0, paddingBottom: !home ? 15 : 0 }} 
+            direction={{ xs: 'column', sm: 'row' }} 
+            spacing={2}>
+
             <TextField
-              style={{ display: home ?'none': 'block',background:'' }}
+              style={{ display: home ? 'none' : 'block', background: '' }}
               label="Nombre"
               {...getFieldProps('nombres')}
               error={Boolean(touched.nombres && errors.nombres)}
             />
 
             <TextField
-              style={{ display: home ?'none': 'block' }}
+              style={{ display: home ? 'none' : 'block' }}
               label="Apellidos"
               {...getFieldProps('apellidos')}
               error={Boolean(touched.apellidos && errors.apellidos)}
             />
           </Stack>
 
-          <Stack style={{ marginTop:0}} direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+          <Stack direction={{ xs: 'column', sm: 'row' }} >
             <TextField
-              style={{ display: home ?'none': 'block' }}
+              style={{ display: home ? 'none' : 'block' }}
               fullWidth
               type="email"
               label="Correo Electronico"
 
 function ModalForm(props) {
 
-  let { pwdinfo, closeModal,home } = props
+  let { pwdinfo, closeModal, home } = props
   const auth = useSelector((state) => state.token)
   let [candidatos, setCandidatos] = React.useState([]);
   let [password, setPassword] = React.useState();
 
   React.useEffect(() => {
     let { pwd, plz } = pwdinfo;
-    console.log('PWDINOF',{pwd,plz})
-
     let rest = new Service(`/contrasenia/${home ? pwd : btoa(pwd)}/${plz}`)
 
     rest.getQuery(auth.token)
 
         let json_data = resp;
         let mapCandi = resp.data.candidatospwds.map(pwd => {
-          let { apellidos, nombre, mail,id } = pwd.candi
+          let { apellidos, nombre, mail, id } = pwd.candi
           return { nombres: nombre, apellidos, mail, id }
         })
 
       })
       .catch(error => console.log(error))
 
-  }, [auth.token, pwdinfo, reset,home])
+  }, [auth.token, pwdinfo, reset, home])
 
   const saveCandidato = async (body) => {
     let rest = new Service('/passwordcandidato/candidato')
 
   function onSubmit(fields) {
 
-    let candi_body = candidatos.map( c => {
-      return {...c, 
+    let candi_body = candidatos.map(c => {
+      return {
+        ...c,
         'nombrepuesto': 'test',
-        'nombreEmpresa' : 'dit', 
-        "idContrasenia" : password.id,
+        'nombreEmpresa': 'dit',
+        "idContrasenia": password.id,
         "sendmail": 1,
       }
     })
     }
 
     rest.putQuery(body_req, auth.token)
-      .then( async _result => {
-        queryClient.invalidateQueries('passwords')
+      .then(async _result => {
 
-        //TODO: insert into passwordcanidato/candidato 
+        queryClient.invalidateQueries('passwords')
         await saveCandidato(candi_body)
 
         setTimeout(() => {
 
   return (
     <Row>
-      <Col>
-        <form style={{ padding: !home? 20: 0, maxWidth: 950 }} onSubmit={handleSubmit(onSubmit)}>
+      <Col >
+        <form style={{ padding: !home ? 20 : 0, maxWidth: 950 }} onSubmit={handleSubmit(onSubmit)}>
           <Stack spacing={4}>
 
             <TextField
               {...register('pwd')}
               variant="filled"
-              disabled
               type="text"
               label="Contraseña Cifrada"
+              InputProps={{
+                readOnly: home
+              }}
             />
 
             <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
                 variant="filled"
                 value={password ? atob(password.pwd) : ""}
                 type="text"
-                disabled
+                InputProps={{
+                  readOnly: home
+                }}
               />
 
               {
-                !home ? 
+                !home ?
                   <FormControlLabel
                     label="Activo?"
                     control={
               </Controller>
             </LocalizationProvider>
 
-            { !home?
+            {!home ?
               <DialogActions style={{ paddingTop: 25, 'justifyContent': "flex-start" }}>
                 <Button onClick={() => closeModal(false)}>
                   Cerrar
                 <Button type="submit" style={{ color: 'white', background: 'var(--main)' }} >
                   Guardar
                 </Button>
-              </DialogActions> : 
+              </DialogActions> :
 
-              <DialogActions 
+              <DialogActions
                 style={{
                   justifyContent: "flex-start",
                 }} >
-                <Button onClick={() => { 
+                <Button onClick={() => {
                   console.log('close modal')
                   console.log(closeModal)
-                  closeModal(true) 
+                  closeModal(true)
                 }}>
                   Cerrar
                 </Button>
         </form>
         <Toaster position="bottom-right" />
       </Col>
-      <Col>
+      <Col >
         <Candidatos
           home={home}
           add={addCandidato}

src/Components/Password/Steps/MailTable.jsx

 
   return (
     <TableContainer 
-      style={{boxShadow:'none',margin:'0px !important'}}
-      component={Paper}>
+      style={{marginTop:'0px !important',marginBottom:'0px !important'}} 
+    >
       <Table aria-label="simple table">
         <TableHead>
           <TableRow>
-            <TableCell>Correo</TableCell>
-            <TableCell align="right">Nombres</TableCell>
-            <TableCell align="right">Apellidos</TableCell>
-            <TableCell align="right"></TableCell>
+            <TableCell className="headert_pwdu">Correo</TableCell>
+            <TableCell className="headert_pwdu" align="right">Nombres</TableCell>
+            <TableCell className="headert_pwdu" align="right">Apellidos</TableCell>
+            <TableCell className="headert_pwdu" align="right"></TableCell>
           </TableRow>
         </TableHead>
         <TableBody>