Merge pull request #56 from WildCodeSchool-2023-09/HotFixAllCSS

rajout du css telephone + certain petit correctif
WildCodeSchool-2023-09 · Feb 8, 2024 · f20366e · f20366e
2 parents 19d526f + a9b513e
commit f20366e
Show file tree

Hide file tree

Showing 16 changed files with 178 additions and 22 deletions.
diff --git a/backend/src/validators/validateAccount.js b/backend/src/validators/validateAccount.js
@@ -7,7 +7,7 @@ const schema = Joi.object({
   status: Joi.string().allow(""),
   phone_number: Joi.number()
     .max(10 ** 10 - 1)
-    .allow(""),
+    .allow(null),
   city: Joi.string().allow(""),
   employment_type: Joi.string().allow(""),
   experience: Joi.string().allow(""),

diff --git a/frontend/index.html b/frontend/index.html
@@ -6,6 +6,7 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Jost&family=Krona+One&display=swap"
     />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/externatic.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Externatic</title>
   </head>

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -17,6 +17,7 @@
     "react-router-dom": "^6.14.2",
     "react-select": "^5.8.0",
     "react-slick": "^0.29.0",
+    "react-toastify": "^10.0.4",
     "slick-carousel": "^1.8.1",
     "vite": "^4.4.7"
   },

diff --git a/frontend/src/components/Carousel.css b/frontend/src/components/Carousel.css
@@ -76,8 +76,8 @@
   margin-top: 30px;
 }
 
-@media only screen and (max-width: 820px) {
+@media only screen and (max-width: 390px) {
   .slick-list {
-    margin-left: 180px;
+    margin-left: 10px;
   }
 }
diff --git a/frontend/src/components/CarouselCompanies.css b/frontend/src/components/CarouselCompanies.css
@@ -44,3 +44,13 @@
     margin-left: 220px;
   }
 }
+
+@media only screen and (max-width: 390px) {
+  .slick-list {
+    margin-left: 10px;
+  }
+
+  .img-caroussel {
+    margin-left: 110px;
+  }
+}
diff --git a/frontend/src/components/CarouselCompanies.jsx b/frontend/src/components/CarouselCompanies.jsx
@@ -16,11 +16,21 @@ function CarouselCompanies() {
     window.addEventListener("resize", updateDimension);
   }, []);
 
+  const ShowBreakPoint = {
+    821: 4,
+    820: 2,
+    390: 1,
+  };
+
+  const defaultShow = 4;
+
+  const ToShow = ShowBreakPoint[windowSize] || defaultShow;
+
   const settings = {
     infinite: true,
     speed: 500,
     slidesToScroll: 1,
-    slidesToShow: windowSize > 820 ? 4 : 2,
+    slidesToShow: ToShow,
     initialSlide: 0,
     autoplay: true,
     autoplaySpeed: 4000,
@@ -42,7 +52,7 @@ function CarouselCompanies() {
 
   return (
     <div className="carousel-container">
-      <h1 className="title-caroussel">Ils nous font confiance</h1>{" "}
+      <h1 className="title-caroussel">Ils nous font confiance</h1>
       <div className="img-card-carrousel">
         <Slider
           infinite={settings.infinite}
@@ -55,11 +65,11 @@ function CarouselCompanies() {
           autoplaySpeed={settings.autoplaySpeed}
         >
           {companies.map((compagny) => (
-            <div key={compagny.id}>
+            <div key={compagny.id} className="img-caroussel">
               <img src={compagny.image_url} alt={compagny.name} />
             </div>
           ))}
-        </Slider>{" "}
+        </Slider>
       </div>
     </div>
   );

diff --git a/frontend/src/components/JobCard.jsx b/frontend/src/components/JobCard.jsx
@@ -6,15 +6,11 @@ import connexion from "../services/connexion";
 
 import "./JobCard.css";
 import { useJobContext } from "../contexts/context";
-import { useAuthContext } from "../contexts/auth";
 
 function JobCard({ job, cardStyle, refresh, isUserPage }) {
   const { favorites, manageFavorites } = useJobContext();
-  const { connected } = useAuthContext();
   const { companyId } = useParams();
 
-  const access = connected.role_id === 2 || connected.role_id === 3;
-
   const dateDiffInDaysFromToday = (date) => {
     const targetDate = new Date(date);
     const today = new Date();
@@ -36,9 +32,9 @@ function JobCard({ job, cardStyle, refresh, isUserPage }) {
       <div className={`${cardStyle}-header`}>
         <Link
           to={
-            isUserPage && access
-              ? `/consultants/company/${companyId}/jobs/${job.job_id}`
-              : `/jobs/${job.id}`
+            isUserPage
+              ? `/jobs/${job.id}`
+              : `/consultants/company/${companyId}/jobs/${job.job_id}`
           }
         >
           <h3 className={`${cardStyle}-title`}>{job.title}</h3>

diff --git a/frontend/src/components/NavBar.css b/frontend/src/components/NavBar.css
@@ -69,3 +69,28 @@
     font-size: 15px;
   }
 }
+
+@media only screen and (max-width: 390px) {
+  .logo {
+    width: 60px;
+    height: 50px;
+  }
+
+  .link-page {
+    font-size: 20px;
+    transition: color 0.3s ease;
+    margin-left: 20px;
+    margin-right: 15px;
+  }
+
+  .navbar {
+    border-bottom: solid 5px;
+  }
+
+  .button-connect {
+    width: 75px;
+    height: 30px;
+    margin-top: 25px;
+    font-size: 12px;
+  }
+}
diff --git a/frontend/src/components/SearchBar.css b/frontend/src/components/SearchBar.css
@@ -60,3 +60,9 @@
 .button-job {
   height: 2rem;
 }
+
+@media only screen and (max-width: 390px) {
+  .search-input {
+    width: 15rem;
+  }
+}
diff --git a/frontend/src/components/headJobs.jsx b/frontend/src/components/headJobs.jsx
@@ -1,5 +1,7 @@
 import React, { useContext } from "react";
 import { useLoaderData } from "react-router-dom";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 import { AuthContext } from "../contexts/auth";
 import connexion from "../services/connexion";
@@ -18,8 +20,10 @@ function HeadJob() {
     const application = { job_id: job.id, user_id: connected.id };
     try {
       connexion.post("/application", application);
+      toast.success("Votre candidature a été soumise avec succès");
     } catch (err) {
       console.error(err);
+      toast.error("Une erreur s'est produite. Veuillez réessayer plus tard");
     }
   };
 
@@ -48,6 +52,7 @@ function HeadJob() {
           </ul>
         </div>
       </div>
+      <ToastContainer theme="dark" />
     </div>
   );
 }

diff --git a/frontend/src/pages/CandidatAccount.jsx b/frontend/src/pages/CandidatAccount.jsx
@@ -12,7 +12,7 @@ function CandidatAccount() {
     email: connected.email,
     lastname: connected.lastname || "",
     firstname: connected.firstname || "",
-    phone_number: connected.phone_number || "",
+    phone_number: connected.phone_number || null,
     city: connected.city || "",
     employment_type: connected.employment_type || "",
     experience: connected.experience || "",

diff --git a/frontend/src/pages/HomePage.css b/frontend/src/pages/HomePage.css
@@ -180,3 +180,62 @@
     font-size: 45px;
   }
 }
+
+@media only screen and (max-width: 390px) {
+  .small-image-1 {
+    left: 31%;
+    transform: translateX(-50%);
+  }
+
+  .img-home-small {
+    width: auto;
+    height: 80px;
+    margin-top: 40px;
+  }
+
+  .small-image-2 {
+    top: 140px;
+    left: 70%;
+    transform: translateX(-50%);
+  }
+
+  .small-image-3 {
+    top: 350px;
+    left: 32%;
+    transform: translateX(-50%);
+  }
+
+  .small-image-4 {
+    top: 570px;
+    left: 70%;
+    transform: translateX(-50%);
+  }
+
+  .subtitle-externatic-red {
+    font-size: 25px;
+  }
+
+  .externatic-red {
+    font-size: 45px;
+  }
+  .bar-arrow {
+    height: 750px;
+  }
+
+  .account-img {
+    height: 175px;
+  }
+
+  .post-img {
+    height: 110px;
+  }
+
+  .consul-img {
+    height: 105px;
+  }
+
+  .consul-container {
+    margin-top: 100px;
+    margin-left: 10px;
+  }
+}
diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx
@@ -58,10 +58,10 @@ function HomePage() {
       <h2 className="join-us">Comment ça marche ?</h2>
       <div className="tuto-accounty">
         <div className="tuto-account">
-          <img src={account} alt="account" />
-          <img src={post} alt="post" />
+          <img src={account} alt="account" className="account-img" />
+          <img src={post} alt="post" className="post-img" />
           <div className="consul-container">
-            <img src={consul} alt="consul" />
+            <img src={consul} alt="consul" className="consul-img" />
           </div>
         </div>
       </div>

diff --git a/frontend/src/pages/jobId.css b/frontend/src/pages/jobId.css
@@ -1,3 +1,9 @@
+:root {
+  --toastify-color-dark: #fc005b;
+  --toastify-color-success: #ffffff;
+  --toastify-color-error: #ffffff;
+}
+
 .resume {
   display: flex;
   justify-content: center;
@@ -31,4 +37,6 @@
   border-radius: 5px;
   font-weight: bold;
   cursor: pointer;
+  margin-bottom: 50px;
+  margin-top: 50px;
 }
diff --git a/frontend/src/pages/jobId.jsx b/frontend/src/pages/jobId.jsx
@@ -1,5 +1,7 @@
 import React, { useContext } from "react";
 import { useLoaderData } from "react-router-dom";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 import HeadJob from "../components/headJobs";
 import connexion from "../services/connexion";
@@ -20,8 +22,10 @@ function JobId() {
     const application = { job_id: job.id, user_id: connected.id };
     try {
       connexion.post("/application", application);
+      toast.success("Votre candidature a été soumise avec succès");
     } catch (err) {
       console.error(err);
+      toast.error("Une erreur s'est produite. Veuillez réessayer plus tard");
     }
   };
 
@@ -51,16 +55,13 @@ function JobId() {
           <p>{job.description_process}</p>
           <p>Date de prise de l'emploi:{formatDate(job.starting_date)}</p>
         </div>
-        <div className="consultant">
-          <h2>Votre consultant</h2>
-        </div>
-        <div>Veuillez vous connecter pour en savoir plus</div>
         {connected.role_id && (
           <button type="button" onClick={handleClick} className="btn-modal">
             Postuler a l'offre
           </button>
         )}
       </div>
+      <ToastContainer theme="dark" />
     </div>
   );
 }