Jime

uniEmpleos/src/components/Header/Header.jsx

@@ -2,9 +2,8 @@ import React, { useState } from "react"
 import { useStoreon } from "storeon/react"
 import PropTypes from "prop-types"
 import { FaBars, FaTimes } from "react-icons/fa"
-import {AiOutlineLogout} from "react-icons/ai"
+import { LuLogOut } from "react-icons/lu"
 import Logo from "../Logo/Logo"
-import Button from "../Button/Button"
 import "./header.css"
 import { navigate } from "../../store"
 
@@ -48,7 +47,7 @@ export const Header = () => {
               <a href="/postulaciones">Postulaciones</a>
             </div>
             <div className="buttonLogoutMobile" onClick={handleClick}>
-              <AiOutlineLogout size={30} style={{ color: "#000" }} />
+              <LuLogOut size={30} style={{ color: "#000" }} />
             </div>
           </div>
         )
@@ -62,7 +61,7 @@ export const Header = () => {
               <a href="/chat">Chat</a>
             </div>
             <div className="buttonLogoutMobile" onClick={handleClick}>
-              <AiOutlineLogout size={30} style={{ color: "#000" }} />
+              <LuLogOut size={30} style={{ color: "#000" }} />
             </div>
           </div>
         )
@@ -75,7 +74,7 @@ export const Header = () => {
               <a href="/profile">Perfil</a>
             </div>
             <div className="buttonLogoutMobile" onClick={handleClick}>
-              <AiOutlineLogout size={30} style={{ color: "#000" }} />
+              <LuLogOut size={30} style={{ color: "#000" }} />
             </div>
           </div>
         )

uniEmpleos/src/components/Header/header.css

@@ -80,7 +80,6 @@ button.buttonlogo:focus{
 }
 
 .container {
-  max-width: 1100px;
   margin: 0 auto;
   padding: 0 15px;
   display: flex;

uniEmpleos/src/components/InfoStudent/InfoStudent.module.css

@@ -25,16 +25,17 @@
   justify-content: center;
   align-items: center;
   flex-direction: row;
-  background-color: #a08ae5;
+  color: #333333;
+  background-color: #8c6fd454;
   gap: 20px;
   border-radius: 10px;
   padding: 0;
 }
 
 .button:hover {
   cursor: pointer;
+  border: 2px solid #8c6fd4;
   background-color: #8c6fd4;
-  border: none;
   transition: background-color 0.3s, color 0.3s;
 }
 
@@ -66,17 +67,20 @@
   flex-direction: column;
   overflow: auto;
   scroll-behavior: smooth;
+  justify-content: center;
 }
 
 .name {
   font-size: 18px;
   font-weight: 700;
-  color: #fff;
+  color: #333333;
   margin-bottom: 10px;
+  text-align: left;
 }
 
 .university {
   font-size: 16px;
   font-weight: 400;
-  color: #fff;
+  color: #333333;
+  text-align: left;
 }

uniEmpleos/src/components/InfoTab/InfoTab.jsx

@@ -33,7 +33,7 @@ const InfoTab = ({
       <div className={styles.button}>
         <Button label={labelbutton} onClick={onClick} />
         {verPostulantes && (
-          <Button label="Ver postulantes" onClick={verPostulantes} />
+          <Button label="Ver postulantes" onClick={verPostulantes}backgroundColor={"#a08ae5"}/>
         )}
       </div>
     </div>

uniEmpleos/src/components/InfoTab/InfoTab.module.css

@@ -2,7 +2,8 @@
     display: flex;
     flex-direction: column;
     border-radius: 10px;
-    background-color: #fff;
+    background-color: #333333;
+    color: #fff;
     margin-bottom: 20px;
     border: 1px solid #d6d6d6;
     padding: 20px;
@@ -27,21 +28,31 @@
 }
 
 .container p, h3{
-    color: #000;
+    color: #f5f5f5;
     font-size: 16px;
+    text-transform: capitalize;
 }
 
 .containerinfomain h3{
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 10px;
     border-radius: 10px;
-    background: #f8f8ef;
     padding: 10px;
 }
 
 .button {
     display: flex;
     flex-direction: row;
     gap: 10px;
+}
+
+@media screen and (max-width: 768px){
+    .container{
+        width: 100%;
+    }
+    .containerinfosecond{
+        flex-direction: column;
+        gap: 20px;
+    }
 }

uniEmpleos/src/pages/OfferDetails/OfferDetails.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react"
+import Select from "react-select"
 import { useStoreon } from "storeon/react"
 import Joi from "joi"
 import { useQuill } from "react-quilljs"
@@ -29,7 +30,7 @@ const OfferDetails = ({ id }) => {
   const [salario, setSalario] = useState("")
   const [puesto, setPuesto] = useState("")
   const [detalles, setDetalles] = useState("")
-  const [carrera, setCarrera] = useState([])
+  const [carrera, setCarrera] = useState("")
   const [carreras, setCarreras] = useState([])
   const { quill, quillRef } = useQuill()
   const [warning, setWarning] = useState(false)
@@ -63,13 +64,16 @@ const OfferDetails = ({ id }) => {
           setSalario(dataa[i].salario)
           setRequisitos(dataa[i].requisitos)
           setDetalles(dataa[i].descripcion)
-          if (dataa[i].id_carreras !== null) {
-            setCarrera(dataa[i].id_carreras.map((num) => num.toString()))
+          if (
+            dataa[i].id_carreras !== null &&
+            dataa[i].id_carreras.length > 0
+          ) {
+            setCarrera(dataa[i].id_carreras[0].toString()) // usar el primer elemento del array
           } else {
-            setCarrera(["1"])
+            setCarrera("1") // o cualquier valor predeterminado que desees
           }
         } else {
-          console.log("not changing", id)
+          console.log(carrera)
         }
       }
     }
@@ -92,7 +96,7 @@ const OfferDetails = ({ id }) => {
         descripcion: details,
         requisitos,
         salario: parseFloat(salario),
-        id_carreras: carrera,
+        id_carreras: [carrera],
       })
       if (apiResponse.status === 200) {
         navigate("/postulacionempresa")
@@ -118,10 +122,7 @@ const OfferDetails = ({ id }) => {
   }
 
   const handleCarrera = (e) => {
-    const selectedOptions = Array.from(e.target.selectedOptions).map(
-      (option) => option.value
-    )
-    setCarrera(selectedOptions)
+    setCarrera(e.value.toString())
   }
 
   const handleInputsValue = (e) => {
@@ -214,9 +215,29 @@ const OfferDetails = ({ id }) => {
           </div>
           <div className={styles.inputContainer}>
             <span>Carrera</span>
-            <DropDown
-              opciones={carreras}
-              value={carrera}
+            <Select
+              styles={{
+                control: (baseStyles, state) => ({
+                  ...baseStyles,
+                  borderColor: state.isFocused ? "#a08ae5" : "grey",
+                  color: "black",
+                }),
+                option: (baseStyles) => ({
+                  ...baseStyles,
+                  color: "black",
+                }),
+              }}
+              name="carrera"
+              theme={(theme) => ({
+                ...theme,
+                colors: {
+                  ...theme.colors,
+                  primary25: "#94bd0f",
+                  primary: "#a08ae5",
+                },
+              })}
+              options={carreras}
+              value={carreras.find((option) => option.value === carrera)}
               onChange={handleCarrera}
             />
           </div>

uniEmpleos/src/pages/PostulantesPage/PostulantesPage.jsx

@@ -44,6 +44,7 @@ const PostulantesPage = ({ id }) => {
         style={typeError}
         close={() => setWarning(false)}
       />
+      <h1>Postulantes</h1>
       <div className={style.infoStudentContainer}>
         {response.data ? (
           response.data.map((postulante) => (

uniEmpleos/src/pages/PostulantesPage/PostulantesPage.module.css

@@ -5,13 +5,21 @@
     height: 100%;
 }
 
+.mainContainer h1{
+    font-weight: 700;
+    margin-bottom: 20px;
+    color: #333333;
+    text-align: left;
+    padding: 20px;
+}
+
 .infoStudentContainer {
     display: flex;
-    flex-direction: row;
-    width: 100%;
     flex-wrap: wrap;
-    justify-content: center;
-    align-content: flex-start
+    justify-content: start;
+    gap: 30px;
+    margin-top: 20px;
+    padding: 10px;
 }
 
 .sinPostulantes {

uniEmpleos/src/pages/PostulationsEmpresa/PostulationsEmpresa.module.css

@@ -1,7 +1,14 @@
 .containerinfoprincipal{
     display: flex;
     flex-wrap: wrap;
-    justify-content: center;
-    gap: 20px;
+    justify-content: start;
+    gap: 30px;
     margin-top: 20px;
+    padding: 10px;
+}
+
+@media screen and (max-width: 768px){
+    .containerinfoprincipal{
+        justify-content: center;
+    }
 }

uniEmpleos/src/pages/nuevaOferta/NewOffer.jsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from "react"
+import Select from "react-select"
 import { useStoreon } from "storeon/react"
+import { useQuill } from "react-quilljs"
 import style from "./NewOffer.module.css"
 import { Header } from "../../components/Header/Header"
 import Button from "../../components/Button/Button"
@@ -8,7 +10,6 @@ import TextArea from "../../components/textAreaAutosize/TextAreaAuto"
 import DropDown from "../../components/dropDown/DropDown"
 import { navigate } from "../../store"
 import useApi from "../../Hooks/useApi"
-import { useQuill } from "react-quilljs"
 import "react-quill/dist/quill.snow.css"
 import Popup from "../../components/Popup/Popup"
 
@@ -58,7 +59,7 @@ const Postulacion = () => {
   }
 
   const handleCarrera = (e) => {
-    setCarrera(e.target.value)
+    setCarrera(e.value)
   }
 
   const handleInputsValue = (e) => {
@@ -132,12 +133,34 @@ const Postulacion = () => {
           </div>
           <div className={style.inputContainer}>
             <span>Carrera</span>
-            <DropDown
-              opciones={carreras}
-              value={carrera}
+            <Select
+              styles={{
+                control: (baseStyles, state) => ({
+                  ...baseStyles,
+                  borderColor: state.isFocused ? "#a08ae5" : "grey",
+                  color: "black",
+                }),
+                option: (baseStyles) => ({
+                  ...baseStyles,
+                  color: "black",
+                }),
+              }}
+              name="carrera"
+              theme={(theme) => ({
+                ...theme,
+                colors: {
+                  ...theme.colors,
+                  primary25: "#94bd0f",
+                  primary: "#a08ae5",
+                },
+              })}
+              defaultValue={carrera}
+              options={carreras}
+              value={carreras.find((option) => option.label === carrera)}
               onChange={handleCarrera}
             />
           </div>
+
           <div className={style.inputContainer}>
             <span>Requisitos</span>
             <TextArea