applicant details page

src/assets/styles/components/_candidatePage.scss

@@ -227,10 +227,32 @@
   margin-left: 18px;
 }
 
+.comment-send-btn-responsive {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background: #ffffff;
+  border: 1px solid #226cb0;
+  border-radius: 9px;
+  border: 1px solid #226cb0;
+  margin-left: 18px;
+  width: 54px;
+  height: 54px;
+}
+
 .comment-send-btn:hover {
   cursor: pointer;
 }
 
+.comment-send-btn-responsive:hover {
+  cursor: pointer;
+}
+
+.comment-send-btn-responsive img {
+  margin: 0;
+}
+
 .comment-send-btn p {
   width: 62px;
   height: 15px;
@@ -252,6 +274,11 @@
   height: 12px;
 }
 
+.comment-send-btn-responsive img {
+  width: 12px;
+  height: 12px;
+}
+
 .candidate-users {
   background-color: #f4f4f4;
 }
@@ -374,11 +401,11 @@
 
 .comment-input {
   @extend .tagStyle;
-  width: 368px;
+  min-width: 368px;
+  max-width: 368px;
 }
 
-
-.comment-input ::placeholder {
+.comment-input::placeholder {
   height: 20px;
   font-family: "Source Sans Pro";
   font-style: italic;
@@ -387,11 +414,9 @@
   line-height: 20px;
   color: #9d9d9d;
   flex: none;
-  order: 0;
-  flex-grow: 0;
 }
 
-.comment-input-list{
+.comment-input-list {
   @extend .tagStyle;
 }
 
@@ -399,61 +424,76 @@
   max-width: 400px;
 }
 
+.comment-container-header {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 32px;
+  letter-spacing: 0.02em;
+  color: #272727;
+}
+
+.proba {
+  display: flex;
+  align-items: center;
+  margin-top: 18px;
+}
+
 @media only screen and (max-width: 930px) {
   .comment-container {
-    width:500px;
+    width: 500px;
   }
-  .comment-input{
+  .comment-input {
     width: 250px;
   }
 
-  .comment-message-con{
+  .comment-message-con {
     max-width: 300px;
   }
 }
 
 @media only screen and (max-width: 820px) {
   .comment-container {
-    width:400px;
-  };
+    width: 400px;
+  }
 
-  .comment-input{
+  .comment-input {
     width: 170px;
   }
-  .comment-message-con{
+  .comment-message-con {
     max-width: 200px;
   }
-  .comment-send-btn{
+  .comment-send-btn {
     width: 90;
     padding: 10px 20px;
-  };
-  .send-comment-sub-container{
+  }
+  .send-comment-sub-container {
     height: 45px;
-    margin-bottom: 20px
-  };
-  .comment-input ::placeholder{
+    margin-bottom: 20px;
+  }
+  .comment-input ::placeholder {
     font-size: 14px;
     line-height: 18px;
-    padding-top:2px;
+    padding-top: 2px;
   }
 }
 
 @media only screen and (max-width: 700px) {
   .comment-container {
-    width:380px;
+    width: 380px;
   }
-  .comment-message-con{
+  .comment-message-con {
     max-width: 180px;
   }
-  .comment-send-btn{
+  .comment-send-btn {
     width: 110;
     padding: 10px 20px;
-  };
-  
+  }
 }
 
-@media only screen and (max-width:680px) {
-  .content-candidate-container{
+@media only screen and (max-width: 680px) {
+  .content-candidate-container {
     flex-direction: column;
   }
   .comment-container {
@@ -461,16 +501,15 @@
   }
 }
 
-@media only screen and (max-width:540px) {
-  
-  .candidate-header{
+@media only screen and (max-width: 540px) {
+  .candidate-header {
     height: 30px;
     font-family: Source Sans Pro;
     font-size: 30px;
     line-height: 30px;
   }
 
-  .candidate-lower-header{
+  .candidate-lower-header {
     font-size: 18px;
     line-height: 26px;
   }
@@ -487,39 +526,111 @@
   }
 }
 
-@media only screen and (max-width:480px) {
+@media only screen and (max-width: 480px) {
   .comment-container {
-    width:297px;
+    width: 297px;
   }
 
-  .comment-input{
+  .comment-input {
     width: 100px;
   }
 
-  .comment-input ::placeholder{
+  .comment-input::placeholder {
     font-size: 12px;
     line-height: 15px;
-    padding-top:-2px;
+    padding-top: -2px;
   }
 
-  .comment-message-con{
+  .comment-message-con {
     max-width: 130px;
   }
-  .comment-send-btn{
+  .comment-send-btn {
     padding: 5px 5px;
-  };
-  .comment-container{
+  }
+  .comment-container {
     padding: 20px;
   }
 
-  .candidate-header{
+  .candidate-header {
     height: 20x;
     font-size: 20px;
     line-height: 20px;
   }
 
-  .candidate-lower-header{
+  .candidate-lower-header {
     font-size: 17px;
-    line-height:17px;
+    line-height: 17px;
+  }
+}
+
+@media only screen and (max-width: 361px) {
+  .comment-input {
+    @extend .tagStyle;
+    min-width: 195px;
+    max-width: 195px;
+    height: 54px;
+  }
+
+  .comment-send-btn {
+    width: fit-content;
+  }
+
+  .comment-input::placeholder {
+    font-size: 10px;
+    line-height: 12px;
+    padding: 14px;
+  }
+
+  .comment-container {
+    width: 300px;
+    padding-left: 18px;
+  }
+
+  .content-candidate-container {
+    justify-content: initial;
+  }
+
+  .proba {
+    flex-direction: column-reverse;
+    align-items: flex-start;
+  }
+  .slick-list {
+    padding-left: 0 !important;
+  }
+
+  .applicant-ads-back-button {
+    font-size: 14px;
+    line-height: 16px;
+    letter-spacing: 0em;
+  }
+
+  .applicant-cv-button {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 18px 72px;
+    gap: 10px;
+    background: #226cb0;
+    border-radius: 9px;
+    width: 212px;
+    height: 51px;
+    font-family: "Source Sans Pro";
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 15px;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: #ffffff;
   }
-}
+
+  .applicant-cv-button {
+    padding: 18px 45px;
+    width: 158px;
+    height: 51px;
+  }
+
+  .active-ads-ads-arrows{
+    margin-left: -0.75rem;
+  }
+}

src/assets/styles/components/_candidatesPage.scss

@@ -127,10 +127,6 @@
   margin-top: 79px;
 }
 
-.left-move-candidateAd {
-  margin-left: 27px;
-}
-
 .filter-date-container {
   display: flex;
   flex-direction: column;
@@ -153,6 +149,10 @@
   margin-top: 5px;
 }
 
+.left-move-candidateAd {
+  margin-left: -0.75rem !important;
+}
+
 @media only screen and (max-width: 600px) {
   .ads-candidates-title {
     font-size: 18px;
@@ -165,4 +165,4 @@
   .ads-candidates-numberOfApplicants {
     font-size: 14px;
   }
-}
+}

src/pages/CandidatesPage/CandidateDetailsPage.js

@@ -31,10 +31,10 @@ const CandidateDetailsPage = ({ history }) => {
   let { id } = useParams();
   const messageContainer = useRef();
   const theme = useTheme();
-  const matches = useMediaQuery(theme.breakpoints.down("680"));
+  const matches = useMediaQuery(theme.breakpoints.down("361"));
   const adsSliderRef = useRef();
   const [showDelete, setDelete] = useState(false);
-  const [usersToNotify, setUsersToNotify] = useState([]); //emails of users whic we need to notify
+  const [usersToNotify, setUsersToNotify] = useState([]); //emails of users which are taged in comment
 
   useEffect(() => {
     dispatch(fetchCandidate({ id }));
@@ -61,10 +61,17 @@ const CandidateDetailsPage = ({ history }) => {
     return newArray;
   };
 
+  const isThereUserAlready = (email) => {
+    let indicator = usersToNotify.filter((k) => k === email);
+    return indicator.length > 0;
+  };
+
   const tranformDisplay = (id, display) => {
     let user = users.filter((u) => u.id === id);
     if (user[0] !== undefined) {
-      setUsersToNotify((current) => [...current, user[0].email]);
+      if (!isThereUserAlready(user[0].email)) {
+        setUsersToNotify((current) => [...current, user[0].email]);
+      }
     }
     return display + " ";
   };
@@ -89,6 +96,7 @@ const CandidateDetailsPage = ({ history }) => {
       })
     );
 
+    setUsersToNotify([]);
     setInputValue("");
   };
 
@@ -179,7 +187,7 @@ const CandidateDetailsPage = ({ history }) => {
   };
 
   const makeCommentForSending = (comment) => {
-    let k = comment.replaceAll("[", "<span style='color:blue'>");
+    let k = comment.replaceAll("[", "<span style='color:#226CB0'>");
     let t = k.replaceAll("]", "</span> ");
     let n = "<p>" + t + "</p>";
     return n;
@@ -326,21 +334,30 @@ const CandidateDetailsPage = ({ history }) => {
                 onKeyUp={handleOnKeyUp}
                 className="comment-input"
                 placeholder={"ex. Odlican kandidat"}
+                customSuggestionsContainer={(children) => (
+                  <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: 5,
+                      marginLeft: 3,
+                    }}
+                  >
+                    {children}
+                  </div>
+                )}
                 style={{
-                  input: !matches
-                    ? { padding: 18, borderRadius: 7 }
-                    : { padding: 9, borderRadius: 5 },
-                  control: !matches
-                    ? {
-                        padding: 18,
-                        color: "#fff",
-                        suggestions: { list: { backgroundColor: "#F4F4F4" } },
-                      }
-                    : {
-                        padding: 9,
-                        color: "#fff",
-                        suggestions: { list: { backgroundColor: "#F4F4F4" } },
-                      },
+                  input: {
+                    overflow: "auto",
+                    height: "100%",
+                    padding: 17,
+                  },
+                  highlighter: {
+                    boxSizing: "border-box",
+                    overflow: "hidden",
+                    padding: 17,
+                    height: 56,
+                  },
                 }}
               >
                 <Mention
@@ -351,28 +368,39 @@ const CandidateDetailsPage = ({ history }) => {
                     tranformDisplay(id, display)
                   }
                   markup="[__display__]"
-                  style={{ highlighter: { padding: 15, borderRadius: 7 } }}
+                  style={{ color: "#226CB0", overflow: "hidden" }}
                 />
               </MentionsInput>
-              <div className="comment-send-btn" onClick={sendComment}>
-                <img
-                  src={planeImage}
-                  alt="plane"
-                  className="candidates-image"
-                />
-                <p>Komentar</p>
-              </div>
+              {!matches ? (
+                <div className="comment-send-btn" onClick={sendComment}>
+                  <img
+                    src={planeImage}
+                    alt="plane"
+                    className="candidates-image"
+                  />
+                  <p>Komentar</p>
+                </div>
+              ) : (
+                <div
+                  className="comment-send-btn-responsive"
+                  onClick={sendComment}
+                >
+                  <img
+                    src={planeImage}
+                    alt="plane"
+                    className="candidates-image"
+                  />
+                </div>
+              )}
             </div>
           </div>
         </div>
       </div>
       <div className="applicant-ads-container">
         <p>Sve prijave</p>
-        <div
-          style={{ display: "flex", alignItems: "center", marginTop: "18px" }}
-        >
+        <div className="proba">
           <div>
-            {candidate.ads.length > 5 && (
+            {(matches ? candidate.ads.length > 1 : candidate.ads.length > 5) && (
               <div className="active-ads-ads-arrows">
                 <button onClick={activeAdsArrowLeftHandler}>
                   <img src={arrow_left} alt="arrow-left" />
@@ -389,7 +417,7 @@ const CandidateDetailsPage = ({ history }) => {
                 add={add}
                 key={index}
                 onclick={() => navigateToDetailsPage(add.id)}
-                className={index === 0 ? "" : "left-move-candidateAd"}
+                className={(matches === true || candidate.ads.length <= 5) && index === 0 ? "left-move-candidateAd" : "" }
               />
             ))}
             {candidate.ads.length <= 5 && getDummyAds(candidate.ads.length)}

src/pages/SchedulePage/SchedulePage.js

@@ -1,4 +1,4 @@
-import React, { useState,useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import DayComponent from "../../components/Schedules/DayComponent";
 import arrowRight from "../../assets/images/arrow_right.png";
 import arrowLeft from "../../assets/images/arrow_left2.png";
@@ -65,6 +65,12 @@ const SchedulePage = () => {
   };
 
   const goBackOneMonth = () => {
+    dispatch(
+      fetchSchedule({
+        month: currentMonth - 1 === -1 ? 12 : currentMonth,
+        year: currentMonth - 1 === -1 ? currentYear - 1 : currentYear,
+      })
+    );
     setNumberOfDaysInMonth(
       new Date(
         currentMonth - 1 === -1 ? currentYear - 1 : currentYear,
@@ -72,12 +78,6 @@ const SchedulePage = () => {
         0
       ).getDate()
     );
-    dispatch(
-      fetchSchedule({
-        month: currentMonth - 1 === -1 ? 12 : currentMonth,
-        year: currentMonth - 1 === -1 ? currentYear - 1 : currentYear,
-      })
-    );
     if (currentMonth - 1 === -1) {
       setCurrentMonth(11);
       setCurrentYear(currentYear - 1);
@@ -87,6 +87,13 @@ const SchedulePage = () => {
   };
 
   const goForwardOneMonth = () => {
+    console.log(currentMonth)
+    dispatch(
+      fetchSchedule({
+        month: currentMonth - 1 === -1 ? 12 : currentMonth + 2,
+        year: currentMonth - 1 === -1 ? currentYear - 1 : currentYear,
+      })
+    );
     setNumberOfDaysInMonth(
       new Date(
         currentMonth + 1 === 12 ? currentYear + 1 : currentYear,
@@ -94,12 +101,6 @@ const SchedulePage = () => {
         0
       ).getDate()
     );
-    dispatch(
-      fetchSchedule({
-        month: currentMonth - 1 === -1 ? 12 : currentMonth,
-        year: currentMonth - 1 === -1 ? currentYear - 1 : currentYear,
-      })
-    );
     if (currentMonth + 1 === 12) {
       setCurrentMonth(0);
       setCurrentYear(currentYear + 1);
@@ -107,7 +108,7 @@ const SchedulePage = () => {
       setCurrentMonth(currentMonth + 1);
     }
   };
-  
+
   return (
     <div className="schedule-page-container pl-144 pt-36px">
       <DayDetailsComponent