password resume style

src/App.css

   /* margin: 10px !important;  */
   /* border-left: 5px solid var(--main); */
 }
+.table_password th{
+  font-weight: bold;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: left;
+  background-color: var(--main);
+  color: white;
+}

src/Components/Password/Steps/candidato.jsx

 } from '@mui/material';
 
 import { AddCircle } from '@mui/icons-material/';
-
 import { MailTable } from './MailTable';
 
 
     nombres:
       Yup.string()
         .min(2, 'Demasiado corto!')
-        .max(50, 'Demasiado largo!')
-        .required("Ingresa un nombre válido"),
+        .max(50, 'Demasiado largo!'),
     apellidos:
       Yup.string()
-        .required("Ingresa un apellido válido")
         .min(2, 'Demasiado corto!').max(50, 'Demasiado Largo!'),
     mail:
       Yup.string()
         .email("Correo no valido")
-        .required("Ingrea un puesto válido"),
-    sendmail:
-      Yup.bool()
-        .required('Ingresa un nivel educativo válido'),
-    nombrepuesto:
-      Yup.string('Ingresa un valor válido')
-        .required('Ingresa un nombre válido'),
-    nombreEmpresa:
-      Yup.string('Ingresa un valor válido')
-        .required('Ingresa un nombre válido'),
   });
 
   let { handleNext, handleBack, password, setPassword } = props
       apellidos: "",
       sendmail: "",
       mail: "",
-      candidatos : password.candidatos ? password.candidatos : [],
       nombrepuesto: password.nombrepuesto ? password.nombrepuesto : password.puesto[0].nombrepuesto,
       nombreEmpresa: 'test'//password.nombreEmpresa ? password.nombreEmpresa : auth.getProfile().nombre,
       // nombreEmpresa: password.nombreEmpresa ? password.nombreEmpresa : auth.getProfile().nombre,
     },
-    onSubmit: (fields) => {
-      setPassword({ ...password, ...fields })
+    onSubmit: () => {
+      //setPassword({ ...password, ...fields })
       handleNext()
     },
     validationSchema: CandidatoSchema,
   });
 
-  const { errors, touched, handleSubmit, getFieldProps, values } = formik;
+  const { errors, touched, handleSubmit, getFieldProps, values, resetForm } = formik;
 
   const addToList = () => {
     let user = {
     let new_users = [...password.candidatos, user ]
 
     setPassword({...password, candidatos: new_users })
-
+    resetForm();
     console.log(values);
   }
 

src/Components/Password/Steps/resume.jsx

 
 import { useMutation, useQueryClient } from 'react-query';
 import { Service } from '../../../Utils/HTTP.js'
-import useAuth from '../../../Auth/useAuth.js'
-import { useSelector } from 'react-query';
+import { useSelector } from 'react-redux';
 
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 export function Resume(props) {
 
   let { handleBack, password: key, handleClose,handleReset } = props
+
   const fmt = React.useRef({ weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' })
   const [pwdID, setPwdID] = React.useState(null);
   const [loading, setLoading] = React.useState(false);
+
   const auth = useSelector((state) => state.token)
-  // const token = auth.getToken();
+  const profile = useSelector((state) => state.user.profile)
   const queryClient = useQueryClient();
 
   const savePassword = async (body) => {
     setLoading(true);
 
     let {
-      deadpwd, dateToActived, puesto, pwd,
-      nombres, apellidos, sendmail, nombrepuesto, nombreEmpresa,mail
+      deadpwd, dateToActived, puesto, 
+      pwd,nombreEmpresa,nombrepuesto, candidatos
     } = key;
-    console.log("KEY: ", key)
 
     let pwdBody = {
       id: -1,
 
         let candidatoBody = {
           id: -1,
-          nombres,
-          apellidos,
-          sendmail: sendmail ? 1 : 0,
-          mail,
+          //nombres,
+          //apellidos,
+          //sendmail: sendmail ? 1 : 0,
+          //mail,
           idContrasenia: password_id,
           nombrepuesto,
           nombreEmpresa
     })
   }
 
+  const getLi = (user) => {
+    return ( 
+      <li style={{ listStyleType: 'none'}}>
+        {user.nombres + " " + user.apellidos} - {user.mail}
+      </li> 
+    )
+   }
+
   return (
     <React.Fragment>
       <ThemeProvider theme={theme}>
         ) : null}
         <Table>
           <thead>
-            <tr>
-              <th>{key.pwd}</th>
-              <th>{btoa(key.pwd)}</th>
+            <tr className="table_password">
+              <th>{"Contraseña: "}</th>
+              <th>{ key.pwd } - {btoa(key.pwd)}</th>
             </tr>
           </thead>
           <tbody>
             <tr>
-              <td className="title_td">{"Candidato"}</td>
-              <td colSpan={2}>{key.nombres + " " + key.apellidos} - {key.mail}</td>
+              <td className="title_td">{"Candidatos:"}</td>
+              <td colSpan={2}>
+                <ul style={{ margin:0, padding:0}}>
+                  {key.candidatos.map(u => getLi(u))}
+                </ul>
+                </td>
             </tr>
             <tr>
-              <td className="title_td">{"Puesto"}</td>
+              <td className="title_td">{"Puesto:"}</td>
               <td colSpan={2}>{key.puesto.length > 0 ? key.puesto[0].nombrepuesto : ''}</td>
             </tr>
             <tr>
-              <td className="title_td">{"Empresa"}</td>
-              <td colSpan={2}>{key.nombreEmpresa}</td>
+              <td className="title_td">{"Empresa:"}</td>
+              <td colSpan={2}>{profile.nombre}</td>
             </tr>
             <tr>
-              <td className="title_td">{"Fecha Activación"}</td>
+              <td className="title_td">{"Fecha Activación:"}</td>
               <td colSpan={2}>{new Date(key.dateToActived).toLocaleDateString('es-GT', fmt.current)}</td>
             </tr>
             <tr>
-              <td className="title_td">{"Fecha de Vencimiento"}</td>
+              <td className="title_td">{"Fecha de Vencimiento:"}</td>
               <td colSpan={2}>{new Date(key.deadpwd).toLocaleDateString('es-GT', fmt.current)}</td>
             </tr>
           </tbody>