applicant details page

src/AppRoutes.js

@@ -35,7 +35,7 @@ import UsersPage from "./pages/UsersPage/UsersPage";
 import CandidatesPage from './pages/CandidatesPage/CandidatesPage'
 import AdDetailsPage from "./pages/AdsPage/AdDetailsPage";
 import UserDetails from "./pages/UsersPage/UserDetails";
-import CandidateDetailsPage from "./pages/CandidateDetailsPage/CandidateDetailsPage";
+import CandidateDetailsPage from "./pages/CandidatesPage/CandidateDetailsPage";
 import SelectionProcessPage from "./pages/SelectionProcessPage/SelectionProcessPage";
 import SelectionProcessOfApplicantPage from "./pages/SelectionProcessPage/SelectionProcessOfApplicantPage";
 

src/assets/styles/components/_candidate-card.scss

@@ -14,6 +14,18 @@
   height: 238px;
 }
 
+@media only screen and (max-width: 480px) {
+  .candidate-card-container{
+    width: 300px;
+  }
+}
+
+@media only screen and (max-width: 430px) {
+  .candidate-card-container{
+    width: 240px;
+  }
+}
+
 .candidate-card-container:active {
 animation-timing-function: ease-in-out;
 animation-duration: 300ms;

src/assets/styles/components/_candidatePage copy.scss

@@ -1,489 +0,0 @@
-.main-candidate-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.top-candidate-container {
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-}
-
-.candidate-header {
-  height: 36px;
-  font-family: Source Sans Pro;
-  font-size: 36px;
-  font-weight: 600;
-  line-height: 36px;
-  letter-spacing: 0.02em;
-  text-align: left;
-  color: #272727;
-}
-
-.separation-line {
-  margin-left: 5px;
-  margin-right: 5px;
-  font-size: 20px;
-  align-self: flex-end;
-}
-
-.candidate-lower-header {
-  font-family: Source Sans Pro;
-  font-size: 24px;
-  font-weight: 600;
-  line-height: 32px;
-  letter-spacing: 0.02em;
-  text-align: left;
-  color: #226cb0;
-  align-self: flex-end;
-}
-.candidate-option-container {
-  display: flex;
-  height: 38px;
-}
-
-.content-candidate-container {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 14px;
-}
-
-.technologies-candidate-container {
-  display: flex;
-  margin-top: 18px;
-}
-
-.technology-candidate-card {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 9px;
-  gap: 10px;
-  background: #ffffff;
-  border: 1px solid #e4e4e4;
-  border-radius: 9px;
-}
-
-.technology-candidate-card:not(:last-child) {
-  margin-right: 18px;
-}
-
-.comment-container {
-  width: 612px;
-  height: 404px;
-  background: #ffffff;
-  border: 1px solid #e4e4e4;
-  border-radius: 12px;
-  margin-top: 16px;
-}
-
-.candidate-informations-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.candidate-informations-sub-container {
-  margin-top: 36px;
-}
-
-.informations-candidate-header {
-  font-family: "Source Sans Pro";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 16px;
-  line-height: 20px;
-  color: #272727;
-}
-
-.candidate-property-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.candidate-property {
-  margin-top: 18px;
-  font-family: Source Sans Pro;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 20px;
-  letter-spacing: 0em;
-}
-
-.candidate-property-value {
-  @extend .candidate-property;
-  color: #1e92d0;
-}
-
-.candidate-informations-sub-container {
-  display: flex;
-}
-
-.comment-container {
-  display: flex;
-  flex-direction: column;
-  padding-left: 36px;
-  padding-right: 36px;
-  padding-top: 36px;
-}
-
-.comment-sub-container {
-  display: flex;
-  align-items: center;
-}
-
-.comment-sub-container:not(:first-child) {
-  margin-top: 36px;
-}
-
-.comment-sender {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  box-sizing: border-box;
-  border: 1px solid;
-  border-color: #226cb0;
-}
-
-.comment-sender p {
-  color: #226cb0;
-}
-
-.comment-message {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-end;
-  padding: 9px;
-  gap: 9px;
-  height: 62px;
-  background: #f4f4f4;
-  border-radius: 12px;
-  margin-left: 18px;
-}
-
-.comment-message-content {
-  align-self: flex-start;
-  height: 20px;
-  font-family: "Source Sans Pro";
-  font-style: normal;
-  font-size: 16px;
-  line-height: 20px;
-}
-
-.comment-message-date {
-  align-self: flex-end;
-  height: 15px;
-  font-family: "Source Sans Pro";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 15px;
-  color: #272727;
-}
-
-.comment-separation-line {
-  width: 100%;
-  height: 0px;
-  border: 1px solid #e4e4e4;
-  background: #e4e4e4;
-}
-
-.send-comment-container {
-  margin-top: 18px;
-}
-
-.send-comment-container p {
-  font-family: "Source Sans Pro";
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 20px;
-  color: #9d9d9d;
-}
-
-.send-comment-sub-container {
-  display: flex;
-  margin-top: 9px;
-  height: 56px;
-  margin-bottom: 36px;
-}
-
-.comment-send-btn {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 18px 36px;
-  gap: 10px;
-  background: #ffffff;
-  border: 1px solid #226cb0;
-  border-radius: 9px;
-  border: 1px solid #226cb0;
-  width: 156px;
-  margin-left: 18px;
-}
-
-.comment-send-btn:hover {
-  cursor: pointer;
-}
-
-.comment-send-btn p {
-  width: 62px;
-  height: 15px;
-  font-family: "Source Sans Pro";
-  font-style: normal;
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 15px;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: #226cb0;
-  flex: none;
-  order: 1;
-  flex-grow: 0;
-}
-
-.comment-send-btn img {
-  width: 12px;
-  height: 12px;
-}
-
-.candidate-users {
-  background-color: #f4f4f4;
-}
-
-.candidate-user {
-  color: #226cb0;
-}
-
-.applicant-ads-container {
-  margin-top: 36px;
-}
-
-.applicant-ads-container > p {
-  font-family: "Source Sans Pro";
-  font-weight: 600;
-  font-size: 24px;
-  line-height: 32px;
-  letter-spacing: 0.02em;
-  color: #272727;
-}
-
-.applicant-ads-sub-container {
-  margin-top: 18px;
-  display: flex;
-  margin-left: -20px;
-}
-
-.applicant-add {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 36px;
-  gap: 18px;
-  background: #ffffff;
-  border: 1px solid #e4e4e4;
-  border-radius: 12px;
-  width: 247px;
-  height: 238px;
-  cursor: pointer;
-}
-
-.applicant-add-date {
-  font-family: Source Sans Pro;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 15px;
-  letter-spacing: 0em;
-}
-
-.applicant-add-title {
-  font-family: "Source Sans Pro";
-  font-weight: 600;
-  font-size: 16px;
-  line-height: 20px;
-  color: #226cb0;
-}
-
-.applicant-add-site {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  background: #ffffff;
-  padding: 6px;
-  border: 1px solid #e4e4e4;
-  border-radius: 8px;
-  font-size: 16px;
-  font-family: "Source Sans Pro";
-  font-weight: 400;
-  color: #272727;
-}
-
-.applicant-ads-buttons-container {
-  display: flex;
-  align-self: flex-end;
-  align-items: center;
-  margin-bottom: 54px;
-  margin-top: 18px;
-}
-
-.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-ads-back-button {
-  margin-right: 36px;
-  font-family: "Source Sans Pro";
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 20px;
-  text-decoration-line: underline;
-  color: #226cb0;
-}
-
-.tagStyle {
-  color: #226cb0;
-  font-family: Source Sans Pro;
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 20px;
-  letter-spacing: 0em;
-}
-
-.comment-input {
-  @extend .tagStyle;
-  width: 368px;
-}
-
-
-.comment-input ::placeholder {
-  width: 139px;
-  height: 20px;
-  font-family: "Source Sans Pro";
-  font-style: italic;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 20px;
-  color: #9d9d9d;
-  flex: none;
-  order: 0;
-  flex-grow: 0;
-}
-
-.comment-input-list{
-  @extend .tagStyle;
-}
-
-@media only screen and (max-width: 930px) {
-  .comment-container {
-    width:500px;
-  }
-}
-
-@media only screen and (max-width: 820px) {
-  .comment-container {
-    width:400px;
-  };
-  .comment-send-btn{
-    width: 130;
-    padding: 12px 28px;
-  };
-  .send-comment-sub-container{
-    height: 45px;
-    margin-bottom: 20px
-  };
-  .comment-input ::placeholder{
-    font-size: 14px;
-    line-height: 18px;
-    padding-top:2px;
-  }
-}
-
-@media only screen and (max-width: 700px) {
-  .comment-container {
-    width:380px;
-  }
-  .comment-send-btn{
-    width: 110;
-    padding: 10px 20px;
-  };
-  
-}
-
-@media only screen and (max-width:680px) {
-  .content-candidate-container{
-    flex-direction: column;
-  }
-  .comment-container {
-    margin-top: 30px;
-  }
-}
-
-@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{
-    font-size: 18px;
-    line-height: 26px;
-  }
-
-  .applicant-cv-button {
-    padding: 10px 52px;
-    gap: 7px;
-    border-radius: 7px;
-    width: 180px;
-    height: 40px;
-    font-size: 10px;
-    line-height: 12px;
-    text-align: center;
-  }
-}
-
-@media only screen and (max-width:480px) {
-  .comment-container {
-    width:297px;
-  }
-  .comment-send-btn{
-    padding: 5px 5px;
-  };
-  .comment-container{
-    padding: 20px;
-  }
-
-  .candidate-header{
-    height: 20x;
-    font-size: 20px;
-    line-height: 20px;
-  }
-
-  .candidate-lower-header{
-    font-size: 17px;
-    line-height:17px;
-  }
-}

src/assets/styles/components/_candidatePage.scss

@@ -159,10 +159,11 @@
   align-items: flex-end;
   padding: 9px;
   gap: 9px;
-  height: 62px;
+  height: fit-content;
   background: #f4f4f4;
   border-radius: 12px;
   margin-left: 18px;
+  max-width: 400px;
 }
 
 .comment-message-content {
@@ -290,6 +291,7 @@
   width: 247px;
   height: 238px;
   margin-left: 20px;
+  cursor: pointer;
 }
 
 .applicant-add-date {
@@ -377,7 +379,6 @@
 
 
 .comment-input ::placeholder {
-  width: 139px;
   height: 20px;
   font-family: "Source Sans Pro";
   font-style: italic;
@@ -394,19 +395,37 @@
   @extend .tagStyle;
 }
 
+.comment-message-con {
+  max-width: 400px;
+}
+
 @media only screen and (max-width: 930px) {
   .comment-container {
     width:500px;
   }
+  .comment-input{
+    width: 250px;
+  }
+
+  .comment-message-con{
+    max-width: 300px;
+  }
 }
 
 @media only screen and (max-width: 820px) {
   .comment-container {
     width:400px;
   };
+
+  .comment-input{
+    width: 170px;
+  }
+  .comment-message-con{
+    max-width: 200px;
+  }
   .comment-send-btn{
-    width: 130;
-    padding: 12px 28px;
+    width: 90;
+    padding: 10px 20px;
   };
   .send-comment-sub-container{
     height: 45px;
@@ -423,6 +442,9 @@
   .comment-container {
     width:380px;
   }
+  .comment-message-con{
+    max-width: 180px;
+  }
   .comment-send-btn{
     width: 110;
     padding: 10px 20px;
@@ -469,6 +491,20 @@
   .comment-container {
     width:297px;
   }
+
+  .comment-input{
+    width: 100px;
+  }
+
+  .comment-input ::placeholder{
+    font-size: 12px;
+    line-height: 15px;
+    padding-top:-2px;
+  }
+
+  .comment-message-con{
+    max-width: 130px;
+  }
   .comment-send-btn{
     padding: 5px 5px;
   };

src/assets/styles/components/_candidatesPage.scss

@@ -43,10 +43,6 @@
   margin-bottom: 36px;
 }
 
-.proba{
-  margin-top: 64px;
-}
-
 .candidates-options-container {
   display: flex;
 }
@@ -68,9 +64,6 @@
   flex-direction: column;
   min-height: 70vh;
   align-items: space-between;
-  @include media-below($bp-xl) {
-    overflow-x: auto !important;
-  }
 }
 
 .candidates-image {
@@ -89,13 +82,6 @@
   background-color: #226cb0;
 }
 
-@media only screen and (max-width: 376px) {
-  .main-candidates-container {
-    margin-left: 50px;
-    margin-right: 50px;
-  }
-}
-
 .ads-candidates-container {
   max-height: 837px;
   overflow-y: auto;
@@ -128,6 +114,11 @@
   margin-left: 5px;
 }
 
+.ads-candidates-image {
+  width: 49px;
+  height: 39px;
+}
+
 .top-cnd {
   margin-top: 39px;
 }
@@ -161,3 +152,17 @@
   color: #9d9d9d;
   margin-top: 5px;
 }
+
+@media only screen and (max-width: 600px) {
+  .ads-candidates-title {
+    font-size: 18px;
+    margin-left: 10px;
+  }
+  .ads-candidates-image {
+    width: 40px;
+    height: 30px;
+  }
+  .ads-candidates-numberOfApplicants {
+    font-size: 14px;
+  }
+}

src/components/Candidates/CandidateCard.js

@@ -3,8 +3,7 @@ import PropTypes from "prop-types";
 import { formatDate } from "../../util/helpers/dateHelpers";
 import { CANDIDATES_PAGE } from "../../constants/pages";
 
-const CandidateCard = ({ candidate, className,history }) => {
-
+const CandidateCard = ({ candidate, className, history }) => {
   const navigateToDetailsPage = () => {
     history.push({
       pathname: CANDIDATES_PAGE + "/" + candidate.applicantId,
@@ -12,13 +11,13 @@ const CandidateCard = ({ candidate, className,history }) => {
         from: history.location.pathname,
       },
     });
-  }
+  };
 
   return candidate == null ? (
     <p></p>
   ) : (
     <div
-    onClick={navigateToDetailsPage}
+      onClick={navigateToDetailsPage}
       className={`candidate-card-container ${
         className !== undefined ? className : ""
       }`}
@@ -56,7 +55,13 @@ const CandidateCard = ({ candidate, className,history }) => {
 CandidateCard.propTypes = {
   candidate: PropTypes.object,
   className: PropTypes.any,
-  history:PropTypes.any
+  history: PropTypes.shape({
+    replace: PropTypes.func,
+    push: PropTypes.func,
+    location: PropTypes.shape({
+      pathname: PropTypes.string,
+    }),
+  }),
 };
 
 export default CandidateCard;

src/main.scss

@@ -30,6 +30,7 @@
 @import './assets/styles/overwrite';
 @import './assets/styles/utility';
 
+
 .flex-center{
     @include flex-center;
 }

src/pages/CandidatesPage/AdsCandidatesPage.js

@@ -7,8 +7,9 @@ import useDynamicRefs from "use-dynamic-refs";
 import { fetchAdsCandidates } from "../../store/actions/candidates/candidatesActions";
 import { useDispatch, useSelector } from "react-redux";
 import CandidateCard from "../../components/Candidates/CandidateCard";
+import PropTypes from "prop-types";
 
-const AdsCandidatesPage = () => {
+const AdsCandidatesPage = ({history}) => {
   const dispatch = useDispatch();
   const { adsCandidates } = useSelector((s) => s.candidates);
   const [getRef, setRef] = useDynamicRefs();
@@ -90,7 +91,7 @@ const AdsCandidatesPage = () => {
       {adsCandidates.map((adCandidates, index) => (
         <div className="ads-candidates" key={index}>
           <div className="ads-candidates-top-container">
-            <img src={adImage} style={{ width: "49px", height: "39px" }} />
+            <img src={adImage} className="ads-candidates-image" />
             <p className="ads-candidates-title">{adCandidates.title}</p>
             <p className="ads-candidates-numberOfApplicants">
               | {adCandidates.nubmerOfApplicants} prijavljenih
@@ -133,4 +134,14 @@ const AdsCandidatesPage = () => {
   );
 };
 
+AdsCandidatesPage.propTypes = {
+  history: PropTypes.shape({
+    replace: PropTypes.func,
+    push: PropTypes.func,
+    location: PropTypes.shape({
+      pathname: PropTypes.string,
+    }),
+  }),
+};
+
 export default AdsCandidatesPage;

src/pages/CandidateDetailsPage/CandidateDetailsPage.js → src/pages/CandidatesPage/CandidateDetailsPage.js

@@ -27,13 +27,14 @@ const CandidateDetailsPage = ({ history }) => {
   const { users } = useSelector((s) => s.users);
   const { user } = useSelector((s) => s.user);
   const { candidate } = useSelector((s) => s.candidate);
-  const [value, setValue] = useState("");
+  const [inputValue, setInputValue] = useState("");
   let { id } = useParams();
   const messageContainer = useRef();
   const theme = useTheme();
   const matches = useMediaQuery(theme.breakpoints.down("680"));
   const adsSliderRef = useRef();
   const [showDelete, setDelete] = useState(false);
+  const [usersToNotify, setUsersToNotify] = useState([]); //emails of users whic we need to notify
 
   useEffect(() => {
     dispatch(fetchCandidate({ id }));
@@ -47,33 +48,38 @@ const CandidateDetailsPage = ({ history }) => {
       : "";
   }, [messageContainer.current, candidate.comments]);
 
-  const handleChange = (event) => {
-    setValue(event.target.value);
+  const handleChangeValueToRepresent = (event) => {
+    setInputValue(event.target.value);
   };
 
   const getArray = () => {
-    let newArray = users.map(function (value) {
-      return { id: value.id, display: value.firstName + value.lastName };
+    let excludeCurrentlyLogedUser = users.filter((u) => u.id !== user.id);
+    let newArray = excludeCurrentlyLogedUser.map(function (value) {
+      return { id: value.id, display: value.firstName + " " + value.lastName };
     });
 
     return newArray;
   };
 
   const tranformDisplay = (id, display) => {
-    console.log(id);
-    return "@" + display + " ";
+    let user = users.filter((u) => u.id === id);
+    if (user[0] !== undefined) {
+      setUsersToNotify((current) => [...current, user[0].email]);
+    }
+    return display + " ";
   };
 
-  const sendComment = () => {
-    // can't send an empty message
-    if (value.trim().length === 0) {
+  const createComment = () => {
+    // can't send message if input is empty
+    if (inputValue.trim().length === 0) {
       return;
     }
     dispatch(
       createCandidateComment({
-        content: value,
+        content: inputValue,
         userId: user.id,
         applicantId: parseInt(id),
+        usersToNotify: usersToNotify,
         user: {
           id: user.id,
           firstName: user.firstName,
@@ -83,12 +89,11 @@ const CandidateDetailsPage = ({ history }) => {
       })
     );
 
-    // var regex = /\[(.*?)\]/;
-    // var matched = regex.exec(value);
-    // user = matched[1];
-    // let email = "dzenis1945@outlook.com";
-    // let poruka = "dsadas";
-    setValue("");
+    setInputValue("");
+  };
+
+  const sendComment = () => {
+    createComment();
   };
 
   var settings = {
@@ -173,6 +178,21 @@ const CandidateDetailsPage = ({ history }) => {
     );
   };
 
+  const makeCommentForSending = (comment) => {
+    let k = comment.replaceAll("[", "<span style='color:blue'>");
+    let t = k.replaceAll("]", "</span> ");
+    let n = "<p>" + t + "</p>";
+    return n;
+  };
+
+  const handleOnKeyUp = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+
+      createComment();
+    }
+  };
+
   return (candidate && Object.keys(candidate).length === 0) ||
     user === undefined ? (
     <p>Loading...</p>
@@ -283,7 +303,12 @@ const CandidateDetailsPage = ({ history }) => {
                   </p>
                 </div>
                 <div className="comment-message">
-                  <p className="comment-message-content">{comment.content}</p>
+                  <div
+                    className="comment-message-con"
+                    dangerouslySetInnerHTML={{
+                      __html: makeCommentForSending(comment.content),
+                    }}
+                  />
                   <p className="comment-message-date">
                     {formatDateTime(comment.dateOfSending)}
                   </p>
@@ -296,8 +321,9 @@ const CandidateDetailsPage = ({ history }) => {
             <p>Komentar</p>
             <div className="send-comment-sub-container">
               <MentionsInput
-                value={value}
-                onChange={handleChange}
+                value={inputValue}
+                onChange={handleChangeValueToRepresent}
+                onKeyUp={handleOnKeyUp}
                 className="comment-input"
                 placeholder={"ex. Odlican kandidat"}
                 style={{
@@ -324,8 +350,8 @@ const CandidateDetailsPage = ({ history }) => {
                   displayTransform={(id, display) =>
                     tranformDisplay(id, display)
                   }
-                  markup="@[__display__]"
-                  style={{ highlighter: { padding: 18, borderRadius: 7 } }}
+                  markup="[__display__]"
+                  style={{ highlighter: { padding: 15, borderRadius: 7 } }}
                 />
               </MentionsInput>
               <div className="comment-send-btn" onClick={sendComment}>

src/pages/CandidatesPage/CandidatesPage.js

@@ -2,7 +2,6 @@ import IconButton from "../../components/IconButton/IconButton";
 import React, { useEffect, useState } from "react";
 import tableImage from "../../assets/images/table.png";
 import filterImage from "../../assets/images/filters.png";
-import planeImage from "../../assets/images/planeVector.png";
 import { useMediaQuery } from "@mui/material";
 import { useTheme } from "@mui/system";
 import PropTypes from "prop-types";
@@ -13,9 +12,6 @@ import TableViewPage from "./TableViewPage";
 import { setTechnologiesReq } from "../../store/actions/technologies/technologiesActions";
 import { selectTechnologies } from "../../store/selectors/technologiesSelectors";
 import { useDispatch, useSelector } from "react-redux";
-import InviteDialog from "../../components/MUI/InviteDialog";
-import addUser from "../../assets/images/addUser.png";
-import x from "../../assets/images/x.png";
 
 const CandidatesPage = ({ history }) => {
   const dispatch = useDispatch();
@@ -25,7 +21,6 @@ const CandidatesPage = ({ history }) => {
   const [toggleFiltersDrawer, setToggleFiltersDrawer] = useState(false);
   const [page, setPage] = React.useState(1);
   const technologies = useSelector(selectTechnologies);
-  const [showInvite, setShowInvite] = useState(false);
 
   useEffect(() => {
     dispatch(setTechnologiesReq());
@@ -39,47 +34,8 @@ const CandidatesPage = ({ history }) => {
     setToggleFiltersDrawer((oldState) => !oldState);
   };
 
-  const inviteCandidate = () => {
-    setShowInvite(true)
-  };
-
   return (
     <div className="main-candidates-container pl-144 pt-36px">
-      <InviteDialog
-        open={showInvite}
-        onClose={() => {
-          setShowInvite(false);
-        }}
-        title={
-          <div
-            className="flex-center"
-            style={{ justifyContent: "space-between" }}
-          >
-            <div className="flex-center" style={{ justifyContent: "start" }}>
-              <img
-                style={{
-                  position: "relative",
-                  top: -0.25,
-                  paddingRight: "10px",
-                }}
-                src={addUser}
-              />
-              <h5>Invite korisnika</h5>
-              <div className="vr"></div>
-              <p className="dialog-subtitle">Registration link</p>
-            </div>
-            <IconButton onClick={() => setShowInvite(false)}>
-              <img
-                style={{
-                  position: "relative",
-                  top: -0.25,
-                }}
-                src={x}
-              />
-            </IconButton>
-          </div>
-        }
-      />
       <CandidateFilters
         open={toggleFiltersDrawer}
         handleClose={handleToggleFiltersDrawer}
@@ -94,7 +50,7 @@ const CandidatesPage = ({ history }) => {
         {!matches ? (
           <p className="candidates-header">Kandidati</p>
         ) : (
-          <p className="candidates-header" style={{ fontSize: "12px" }}>
+          <p className="candidates-header" style={{ fontSize: "22px" }}>
             Kandidati
           </p>
         )}
@@ -126,7 +82,10 @@ const CandidatesPage = ({ history }) => {
               </IconButton>
             )
           ) : (
-            <IconButton className="c-btn--primary-outlined c-btn candidate-btn-mobile">
+            <IconButton
+              className="c-btn--primary-outlined c-btn candidate-btn-mobile"
+              onClick={changeView}
+            >
               <img
                 className="candidate-image-mobile"
                 src={tableImage}
@@ -163,18 +122,8 @@ const CandidatesPage = ({ history }) => {
       {isTableView ? (
         <TableViewPage history={history} page={page} setPage={setPage} />
       ) : (
-        <AdsCandidatesPage/>
+        <AdsCandidatesPage history={history}/>
       )}
-      <IconButton
-        className={
-          "c-btn  candidate-btn invite-btn invite-btn-color " +
-          (isTableView === false ? "proba" : "")
-        }
-        onClick={inviteCandidate}
-      >
-        <img src={planeImage} alt="table" className="candidates-image" />
-        Invite
-      </IconButton>
     </div>
   );
 };

src/pages/CandidatesPage/TableViewPage.js

@@ -53,49 +53,53 @@ const TableViewPage = ({ history, setPage, page }) => {
   };
 
   return (
-    <div className="candidates-table">
-      <table
-        className="usersTable"
-        style={{ width: "1117px", height: "100px" }}
-      >
-        <thead>
-          <tr className="headingRow">
-            <th>Ime i prezime</th>
-            <th>Iskustvo</th>
-            <th>Datum prijave</th>
-            <th>Pozicija</th>
-            <th>CV link</th>
-          </tr>
-        </thead>
-        <tbody>
-          {candidates.map((candidate, index) => (
-            <tr
-              key={index}
-              className="secondaryRow cadidate-row"
-              style={{
-                width: "800px",
-                height: "40px",
-                borderRadius: "12px",
-                cursor: "pointer",
-              }}
-              onClick={() => navigate(candidate.applicantId)}
-            >
-              <td>
-                {candidate.firstName} {candidate.lastName}
-              </td>
-              <td>{candidate.experience}</td>
-              <td>{formatDate(candidate.dateOfApplication)}</td>
-              <td>{candidate.position}</td>
-              <td>
-                <a href={candidate.CV} className="cvLink">
-                  {candidate.firstName}
-                  {candidate.lastName}.pdf
-                </a>
-              </td>
+    <div
+      className="candidates-table"
+    >
+      <div style={{overflowX:'auto'}}>
+        <table
+          className="usersTable"
+          style={{}}
+        >
+          <thead>
+            <tr className="headingRow">
+              <th>Ime i prezime</th>
+              <th>Iskustvo</th>
+              <th>Datum prijave</th>
+              <th>Pozicija</th>
+              <th>CV link</th>
             </tr>
-          ))}
-        </tbody>
-      </table>
+          </thead>
+          <tbody>
+            {candidates.map((candidate, index) => (
+              <tr
+                key={index}
+                className="secondaryRow cadidate-row"
+                style={{
+                  width: "800px",
+                  height: "40px",
+                  borderRadius: "12px",
+                  cursor: "pointer",
+                }}
+                onClick={() => navigate(candidate.applicantId)}
+              >
+                <td>
+                  {candidate.firstName} {candidate.lastName}
+                </td>
+                <td>{candidate.experience}</td>
+                <td>{formatDate(candidate.dateOfApplication)}</td>
+                <td>{candidate.position}</td>
+                <td>
+                  <a href={candidate.CV} className="cvLink">
+                    {candidate.firstName}
+                    {candidate.lastName}.pdf
+                  </a>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
       <Pagination
         count={
           parseInt(pagination) <= PAGE_SIZE_CANDIDATES