Merge pull request #242 from markalbrand56/front_searchbar

Front searchbar
markalbrand56 · Nov 10, 2023 · 8c647ad · 8c647ad
2 parents fb048c4 + da3ed58
commit 8c647ad
Show file tree

Hide file tree

Showing 25 changed files with 477 additions and 95 deletions.
diff --git a/uniEmpleos/package.json b/uniEmpleos/package.json
@@ -19,6 +19,7 @@
     "@storeon/router": "^2.0.1",
     "@testing-library/jest-dom": "^5.17.0",
     "date-fns": "^2.30.0",
+    "date-fns-tz": "^2.0.0",
     "eslint": "^7.32.0 || ^8.2.0",
     "joi": "^17.9.2",
     "prop-types": "^15.8.1",

diff --git a/uniEmpleos/src/components/Button/Button.module.css b/uniEmpleos/src/components/Button/Button.module.css
@@ -9,7 +9,6 @@
   font-size: 14px;
   border: 2px solid #ccc;
   border-radius: 10px;
-  background-color: #fff;
   color: #000;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
   transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

diff --git a/uniEmpleos/src/components/HeaderHome/HeaderHome.module.css b/uniEmpleos/src/components/HeaderHome/HeaderHome.module.css
@@ -22,6 +22,11 @@ a.buttonlogin {
     color: #a08ae5 !important;
 }
 
+a.buttonlogin:hover {
+  background-color: #a08ae5;
+  color: #fff !important;
+}
+
 .navelements{
     margin-left: auto;
     margin-right: 20px;
@@ -33,7 +38,7 @@ a.buttonlogin {
 
 .actionlinks {
     display: flex;
-    gap: 40px;
+    gap: 20px;
     align-items: center;
 }
 

diff --git a/uniEmpleos/src/components/InfoTab/InfoTab.jsx b/uniEmpleos/src/components/InfoTab/InfoTab.jsx
@@ -1,5 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
+import { format } from "date-fns-tz"
 import styles from "./InfoTab.module.css"
 import Button from "../Button/Button"
 
@@ -11,29 +12,48 @@ const InfoTab = ({
   labelbutton,
   onClick,
   verPostulantes,
+  horarioinicio,
+  horariofin,
+  jornada,
 }) => {
+  console.log(horarioinicio)
+  console.log(horariofin)
+
+  const parseTime = (isoString) => {
+    return isoString.split("T")[1].split("Z")[0]
+  }
+
   return (
     <div className={styles.container}>
       {title && (
         <div className={styles.containerinfomain}>
           <h3>{title}</h3>
         </div>
       )}
-      {company && (
-        <div className={styles.containerinfosecond}>
-          <p>{company}</p>
-          {area && <p>{area}</p>}
-        </div>
-      )}
-      {salary && (
-        <div className={styles.containerinfothird}>
-          <p>{salary}</p>
-        </div>
-      )}
+      <div className={styles.containerinfosecond}>
+        {company && <p>{`Empresa: ${company}`}</p>}
+        {salary && <p>{`Salario: ${salary}`}</p>}
+        {jornada && <p>{`Jornada: ${jornada}`}</p>}
+        {horarioinicio && horariofin && (
+          <p>{`Horario: ${`${parseTime(horarioinicio)} - ${parseTime(
+            horariofin
+          )}`}`}</p>
+        )}
+      </div>
       <div className={styles.button}>
-        <Button label={labelbutton} onClick={onClick} />
+        <Button
+          label={labelbutton}
+          onClick={onClick}
+          backgroundColor="#94bd0f"
+          noborder
+        />
         {verPostulantes && (
-          <Button label="Ver postulantes" onClick={verPostulantes} backgroundColor={"#a08ae5"}/>
+          <Button
+            label="Ver postulantes"
+            onClick={verPostulantes}
+            backgroundColor="#ccc"
+            noborder
+          />
         )}
       </div>
     </div>

diff --git a/uniEmpleos/src/components/InfoTab/InfoTab.module.css b/uniEmpleos/src/components/InfoTab/InfoTab.module.css
@@ -9,6 +9,11 @@
     padding: 20px;
     box-sizing: border-box;
     width: calc(100%/3 - 20px);
+
+}
+
+.container:hover{
+    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
 }
 
 .containerinfomain{
@@ -17,20 +22,19 @@
     justify-content: center;
     align-content: center;
     text-align: center;
+    border-radius: 10px;
+    background-color: #f5f5f5;
 }
 
 .containerinfosecond{
-    display: flex;
-    justify-content: space-evenly;
-    align-content: center;
-    text-align: center;
-    gap: 40px;
+    padding: 10px;
 }
 
-.container p, h3{
-    color: #f5f5f5;
+.container p{
+    color: #fff;
     font-size: 16px;
     text-transform: capitalize;
+    text-align: left;
 }
 
 .containerinfomain h3{
@@ -39,6 +43,7 @@
     margin-bottom: 10px;
     border-radius: 10px;
     padding: 10px;
+    color: #000;
 }
 
 .button {

diff --git a/uniEmpleos/src/components/Infocontainer/Infocontainer.module.css b/uniEmpleos/src/components/Infocontainer/Infocontainer.module.css
@@ -6,6 +6,7 @@
     border-radius: 10px;
     padding: 20px;
     align-content: center;
+    box-shadow: 0 2px 1px rgba(0,0,0,0.09), 0 4px 2px rgba(0,0,0,0.09), 0 8px 4px rgba(0,0,0,0.09), 0 16px 8px rgba(0,0,0,0.09), 0 32px 16px rgba(0,0,0,0.09);
 }
 
 @media (max-width: 767px) {

diff --git a/uniEmpleos/src/components/Message/Message.jsx b/uniEmpleos/src/components/Message/Message.jsx
@@ -4,40 +4,44 @@ import style from "./Message.module.css"
 import { format } from "date-fns"
 
 const Message = ({ pfp, name, time, message, file, side }) => {
-
   const formatTime = format(new Date(time), "dd/MM/yyyy hh:mm a")
 
- return (
-  <div
-    className={side === "right" ? style.messageContainer : style.messageContainerLeft}
-    style={{ alignItems: side === "right" ? "flex-end" : "flex-start" }}
-  >
-    <div className={style.header}>
-      <div className={style.pfp}>
-        <img src={pfp} alt={name} />
-      </div>
-      <div
-        className={style.chatInfo}
-        style={{ alignItems: side === "right" ? "flex-end" : "flex-start" }}
-      >
-        <div className={style.name}>{name}</div>
-        <div className={style.time}>{formatTime}</div>
-      </div>
-    </div>
-    <div className={style.content}>
-      {message.length > 0 ? (
+  return (
+    <div
+      className={
+        side === "right" ? style.messageContainer : style.messageContainerLeft
+      }
+      style={{ alignItems: side === "right" ? "flex-end" : "flex-start" }}
+    >
+      <div className={style.header}>
+        <div className={style.pfp}>
+          <img src={pfp} alt={name} />
+        </div>
         <div
-          className={style.message}
-          style={{ backgroundColor: side === "right" ? "#9c8bdf" : "#9cbc3d" }}
+          className={style.chatInfo}
+          style={{ alignItems: side === "right" ? "flex-end" : "flex-start" }}
         >
-          {message}
+          <div className={style.name}>{name}</div>
+          <div className={style.time}>{formatTime}</div>
         </div>
-      ) : (
-        <img src={file} className={style.file} alt={name} />
-      )}
+      </div>
+      <div className={style.content}>
+        {message.length > 0 ? (
+          <div
+            className={style.message}
+            style={{
+              backgroundColor: side === "right" ? "#9c8bdf" : "#9cbc3d",
+            }}
+          >
+            {message}
+          </div>
+        ) : (
+          <img src={file} className={style.file} alt={name} />
+        )}
+      </div>
     </div>
-  </div>
-)}
+  )
+}
 
 Message.propTypes = {
   pfp: PropTypes.string.isRequired,

diff --git a/uniEmpleos/src/pages/AdminShowPostulationDetails/AdminShowPostulationDetails.jsx b/uniEmpleos/src/pages/AdminShowPostulationDetails/AdminShowPostulationDetails.jsx
@@ -133,7 +133,7 @@ const AdminShowPostulationDetails = ({ id }) => {
           <div className={style.buttonContainer}>
             <Button
               label="Regresar"
-              backgroundColor="transparet"
+              backgroundColor="#94bd0f"
               onClick={() => {
                 handleReturn(data.company.correo)
               }}

diff --git a/...pleos/src/pages/AdminShowPostulationDetailsStudent/AdminShowPostulationDetailsStudent.jsx b/...pleos/src/pages/AdminShowPostulationDetailsStudent/AdminShowPostulationDetailsStudent.jsx
@@ -137,7 +137,7 @@ const AdminShowPostulationDetailsStudent = ({ param }) => {
           <div className={style.buttonContainer}>
             <Button
               label="Regresar"
-              backgroundColor="transparet"
+              backgroundColor="#94bd0f"
               onClick={() => {
                 handleReturn(data.company.correo)
               }}

diff --git a/uniEmpleos/src/pages/Home/Home.jsx b/uniEmpleos/src/pages/Home/Home.jsx
@@ -1,9 +1,11 @@
 import React from "react"
+import { Player } from "@lottiefiles/react-lottie-player"
 import styles from "./Home.module.css"
 import Infocontainer from "../../components/Infocontainer/Infocontainer"
 import Button from "../../components/Button/Button"
 import { navigate } from "../../store"
 import HeaderHome from "../../components/HeaderHome/HeaderHome"
+import students from "./students.json"
 
 const Home = () => {
   const handleNav = (path) => {
@@ -12,12 +14,30 @@ const Home = () => {
 
   return (
     <div className={styles.homeContainer}>
+      <div className={styles.topcontent}>
+        <HeaderHome />
+      </div>
       <div className={styles.homeContent}>
-        <div className={styles.topcontent}>
-          <HeaderHome />
-        </div>
         <div className={styles.image}>
-          <img src="/images/Uniempleos.png" alt="Uniempleos" />
+          <div className={styles.title}>
+            <h1>Uni</h1>
+          </div>
+          <div className={styles.lottie}>
+            <Player autoplay loop src={students}
+              style={{ height: "500px", width: "500px" }}
+            />
+          </div>
+          <div className={styles.titlephone}>
+            <h1>UniEmpleos</h1>
+          </div>
+          <div className={styles.lottiephone}>
+            <Player autoplay loop src={students}
+              style={{ height: "400px", width: "400px" }}
+            />
+          </div>
+          <div className={styles.title}>
+            <h1>Empleos</h1>
+          </div>
         </div>
         <div className={styles.info}>
           <Infocontainer