Merge pull request #245 from markalbrand56/front_searchbar

Front searchbar

uniEmpleos/src/components/InfoTab/InfoTab.jsx

@@ -20,7 +20,7 @@ const InfoTab = ({
   console.log(horariofin)
 
   const parseTime = (isoString) => {
-    return isoString.split("T")[1].split("Z")[0]
+    return isoString.split("T")[1].split("Z")[0].slice(0, -3)
   }
 
   return (
@@ -35,9 +35,9 @@ const InfoTab = ({
         {salary && <p>{`Salario: ${salary}`}</p>}
         {jornada && <p>{`Jornada: ${jornada}`}</p>}
         {horarioinicio && horariofin && (
-          <p>{`Horario: ${`${parseTime(horarioinicio)} - ${parseTime(
+          <p>{`Horario: ${`${parseTime(horarioinicio)}AM - ${parseTime(
             horariofin
-          )}`}`}</p>
+          )}PM`}`}</p>
         )}
       </div>
       <div className={styles.button}>

uniEmpleos/src/components/ofertaInfo/OfertaInfo.jsx

@@ -6,7 +6,7 @@ const OfertaInfo = ({ img, label }) => {
   return (
     <div className={style.generalContainer}>
       <div className={style.svgContainer}>
-        <img src={img} alt={label} />
+        <img src={img} alt={label} className={style.svg} />
       </div>
       <div className={style.textContainer}>{label}</div>
     </div>

uniEmpleos/src/components/ofertaInfo/OfertaInfo.module.css

@@ -11,7 +11,13 @@
   width: 30px;
 }
 
+
+.svg{
+  height: 100%;
+}
+
 .textContainer {
   color: #000;
   padding: 5px;
+  text-align: left;
 }

uniEmpleos/src/pages/OfferDetails/OfferDetails.jsx

@@ -266,13 +266,15 @@ const OfferDetails = ({ id }) => {
           {horarioInicioDisplay && horarioFinDisplay && (
             <div className={styles.inputContainer}>
               <span>Horario</span>
+              <span className={styles.horario}>Inicio</span>
               <input
                 name="horarioinicio"
                 type="time"
                 onChange={handleHorarioInputChange}
                 value={horarioInicioDisplay}
                 className={styles.inputHorario}
               />
+              <span className={styles.horario}>Fin</span>
               <input
                 name="horariofin"
                 type="time"

uniEmpleos/src/pages/PostulationsEmpresa/PostulationsEmpresa.jsx

@@ -108,6 +108,7 @@ const PostulationsEmpresa = () => {
               title={postulation.puesto}
               area={postulation.nombre_carreras}
               salary={`Q.${postulation.salario}.00`}
+              jornada={postulation.jornada}
               company={postulation.nombre_empresa}
               labelbutton="Ver más"
               onClick={() => {

uniEmpleos/src/pages/postulacion/Postulacion.jsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from "react"
 import { useStoreon } from "storeon/react"
+import { useQuill } from "react-quilljs"
 import style from "./Postulacion.module.css"
 import { Header } from "../../components/Header/Header"
 import OfertaInfo from "../../components/ofertaInfo/OfertaInfo"
 import Button from "../../components/Button/Button"
 import { navigate } from "../../store"
 import useApi from "../../Hooks/useApi"
-import { useQuill } from "react-quilljs"
 import Popup from "../../components/Popup/Popup"
 
 const Postulacion = ({ id }) => {
@@ -69,6 +69,10 @@ const Postulacion = ({ id }) => {
     navigate("/profile")
   }
 
+  const parseTime = (isoString) => {
+    return isoString.split("T")[1].split("Z")[0].slice(0, -3)
+  }
+
   return (
     <div className={style.container}>
       <Popup
@@ -101,9 +105,19 @@ const Postulacion = ({ id }) => {
               img="/images/salario.svg"
               label={api.data.offer.salario.toString()}
             />
+            <OfertaInfo
+              img="/images/jornada.svg"
+              label={api.data.offer.jornada}
+            />
+            <OfertaInfo
+              img="/images/horario.svg"
+              label={`${parseTime(api.data.offer.hora_inicio)}AM - ${parseTime(
+                api.data.offer.hora_fin
+              )}PM`}
+            />
           </div>
           <div className={style.label}>
-            Detalles
+            <span className={style.detailsText}>Detalles</span>
             <div ref={quillRef} className={style.Editor} />
           </div>
           <div className={style.buttonContainer}>

uniEmpleos/src/pages/postulacion/Postulacion.module.css

@@ -1,9 +1,9 @@
 .container{
   background-color: #fff;
   width: 100%;
-  height: 100%;
   display: flex;
   flex-direction: column;
+
 }
 
 .postulacionContainer {
@@ -12,17 +12,23 @@
   justify-content: flex-start;
   align-items: center;
   gap: 25px;
-  height: calc(100% - 25px);
-  background-color: #f5f5f5;
+  background-color: #fff;
   color: #000;
   padding: 25px;
+
+}
+span.detailsText, .titleContainer {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #000;
+  font-family: "Poppins", sans-serif;
 }
 
 .titleContainer{
   width: 75%;
   background-color: transparent;
   border-radius: 10px;
-  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
+  box-shadow: #a08ae5 0px 19px 38px, #a08ae5 0px 15px 12px;
   padding: 15px;
 }
 
@@ -61,3 +67,16 @@
   width: 30px;
   height: 30px;
 }
+
+@media screen and (max-width: 768px) {
+
+  .buttonContainer {
+    width: 90%;
+    margin: 10px;
+  }
+
+  .Editor {
+    width: 100%;
+    text-align: justify;
+  }
+}