Merge pull request #128 from apuc/fix-tracker-and-statistics

Fix tracker and statistics

src/App.js

@@ -43,6 +43,7 @@ import { RegistrationForCandidate } from "./pages/RegistrationForCandidate/Regis
 import { ProfileCandidate } from "./pages/ProfileCandidate/ProfileCandidate";
 import { PassingTests } from "./pages/quiz/PassingTests";
 import Blog from "./pages/Blog/Blog";
+import Statistics from "@pages/Statistics/Statistics";
 import { ProjectTracker } from "./pages/ProjectTracker/ProjectTracker";
 import { FrequentlyAskedQuestions } from "./pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions";
 import { FrequentlyAskedQuestion } from "./pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion";
@@ -53,6 +54,7 @@ import "./assets/global.scss";
 import "./assets/fonts/stylesheet.css";
 import "bootstrap/dist/css/bootstrap.min.css";
 
+
 const App = () => {
   const notification = useSelector(getNotification)
   return (
@@ -118,6 +120,7 @@ const App = () => {
             <Route exact path="summary" element={<Summary />} />
             <Route exact path="view/:id" element={<ViewReport />} />
             <Route exact path="tracker" element={<Tracker />} />
+            <Route exact path="statistics/:id" element={<Statistics/>}/>
             <Route exact path="payouts" element={<Payouts />} />
             <Route exact path="settings" element={<PartnerSettings />} />
             <Route exact path="requests" element={<PartnerRequests />} />

src/assets/icons/addProjectImg.svg

@@ -0,0 +1,10 @@
+<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1689_1894)">
+<path d="M38.91 7.09012C34.6905 2.87054 28.9675 0.5 23.0001 0.5C17.0327 0.5 11.3097 2.87054 7.09012 7.09012C2.87054 11.3097 0.5 17.0327 0.5 23.0001C0.5 28.9675 2.87054 34.6905 7.09012 38.91C11.3097 43.1296 17.0327 45.5002 23.0001 45.5002C28.9675 45.5002 34.6905 43.1296 38.91 38.91C43.1296 34.6905 45.5002 28.9675 45.5002 23.0001C45.5002 17.0327 43.1296 11.3097 38.91 7.09012ZM23.0001 42.336C12.3382 42.336 3.66414 33.662 3.66414 23.0001C3.66414 12.3382 12.3382 3.66414 23.0001 3.66414C33.6619 3.66414 42.336 12.3382 42.336 23.0001C42.336 33.662 33.6619 42.336 23.0001 42.336ZM33.9425 23.0001C33.9425 23.4197 33.7758 23.8221 33.4791 24.1187C33.1824 24.4154 32.78 24.5821 32.3604 24.5821H24.5821V32.3604C24.5821 32.78 24.4154 33.1824 24.1187 33.4791C23.8221 33.7758 23.4197 33.9425 23.0001 33.9425C22.5805 33.9425 22.1781 33.7758 21.8814 33.4791C21.5847 33.1824 21.4181 32.78 21.4181 32.3604V24.5821H13.6397C13.2202 24.5821 12.8178 24.4154 12.5211 24.1187C12.2244 23.8221 12.0577 23.4197 12.0577 23.0001C12.0577 22.5805 12.2244 22.1781 12.5211 21.8814C12.8178 21.5847 13.2202 21.4181 13.6397 21.4181H21.4181V13.6397C21.4181 13.2202 21.5847 12.8178 21.8814 12.5211C22.1781 12.2244 22.5805 12.0577 23.0001 12.0577C23.4197 12.0577 23.8221 12.2244 24.1187 12.5211C24.4154 12.8178 24.5821 13.2202 24.5821 13.6397V21.4181H32.3604C32.78 21.4181 33.1824 21.5847 33.4791 21.8814C33.7758 22.1781 33.9425 22.5805 33.9425 23.0001Z" fill="#8BCC60"/>
+</g>
+<defs>
+<clipPath id="clip0_1689_1894">
+<rect width="45" height="45" fill="white" transform="translate(0.5 0.5)"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icons/emailStatistics.svg

@@ -0,0 +1,3 @@
+<svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.2083 9.77461V4.95867C18.2083 3.90162 17.3487 3.04199 16.2916 3.04199H1.91664C0.85958 3.04199 0 3.90157 0 4.95867V14.542C0 15.599 0.85958 16.4587 1.91668 16.4587H12.6627C13.2905 18.6676 15.3216 20.292 17.7292 20.292C18.6557 20.292 19.5668 20.0482 20.3651 19.5864C20.5939 19.4539 20.6725 19.161 20.5396 18.9317C20.4072 18.7024 20.1138 18.6233 19.8849 18.7572C19.2326 19.1344 18.4872 19.3337 17.7291 19.3337C15.3511 19.3337 13.4166 17.3992 13.4166 15.0212C13.4166 12.6431 15.3511 10.7087 17.7291 10.7087C20.1072 10.7087 22.0416 12.6431 22.0416 15.0212V15.5004C22.0416 16.0286 21.6116 16.4587 21.0833 16.4587C20.555 16.4587 20.125 16.0286 20.125 15.5004V13.5837C20.125 13.3188 19.9107 13.1045 19.6458 13.1045C19.5169 13.1045 19.4011 13.1566 19.3151 13.2393C18.8916 12.8619 18.3397 12.6253 17.7291 12.6253C16.4082 12.6253 15.3333 13.7002 15.3333 15.0211C15.3333 16.3421 16.4082 17.417 17.7292 17.417C18.4433 17.417 19.0782 17.0967 19.5175 16.5993C19.8646 17.0924 20.4357 17.417 21.0834 17.417C22.1404 17.417 23 16.5574 23 15.5003V15.0211C23 12.2765 20.8906 10.0178 18.2083 9.77461ZM1.91668 4.00031H16.2917C16.3116 4.00031 16.3283 4.01051 16.348 4.01172L9.49819 9.63428C9.2544 9.78778 8.90109 9.75593 8.74247 9.65863L1.86093 4.01163C1.88038 4.01046 1.89692 4.00031 1.91668 4.00031ZM17.25 9.77461C14.5677 10.0178 12.4583 12.2765 12.4583 15.0212C12.4583 15.1829 12.4682 15.3423 12.4826 15.5004H1.91668C1.3884 15.5004 0.958363 15.0703 0.958363 14.542V4.95867C0.958363 4.82296 0.988326 4.6948 1.03945 4.57774L8.17677 10.4307C8.45564 10.6128 8.77621 10.7087 9.10423 10.7087C9.41962 10.7087 9.72797 10.6198 9.99938 10.4514C10.0265 10.4369 10.0523 10.4196 10.0766 10.3994L17.1689 4.57765C17.22 4.6948 17.25 4.82296 17.25 4.95872V9.77461H17.25ZM17.7292 16.4587C16.9365 16.4587 16.2917 15.8139 16.2917 15.0212C16.2917 14.2285 16.9365 13.5837 17.7292 13.5837C18.5219 13.5837 19.1667 14.2285 19.1667 15.0212C19.1667 15.8139 18.5219 16.4587 17.7292 16.4587Z" fill="black"/>
+</svg>

src/components/ProjectTiket/ProjectTiket.jsx

@@ -4,6 +4,8 @@ import { Link } from "react-router-dom";
 
 import { deleteProject, modalToggle } from "@redux/projectsTrackerSlice";
 
+import { copyProjectLink } from "@utils/helper";
+
 import { apiRequest } from "@api/request";
 
 import { useNotification } from "@hooks/useNotification";
@@ -16,6 +18,7 @@ import archiveSet from "assets/icons/archive.svg";
 import del from "assets/icons/delete.svg";
 import edit from "assets/icons/edit.svg";
 import link from "assets/icons/link.svg";
+import avatarProject from "assets/images/avatarMok.png";
 
 import "./projectTiket.scss";
 
@@ -62,19 +65,15 @@ export const ProjectTiket = ({ project, index }) => {
     });
   }
 
-  function copyProjectLink() {
-    navigator.clipboard.writeText(
-      `https://itguild.info/tracker/project/${project.id}`
-    );
-  }
-
   function closeAcceptModal() {
     setAcceptModalOpen(false);
   }
 
   return (
     <div className="project" key={index}>
-      <Link to={`/tracker/project/${project.id}`}>{project.name}</Link>
+      <Link to={`/tracker/project/${project.id}`} className="project__link">
+        {project.name}
+      </Link>
       <div className="project__info">
         <p>Открытые задачи</p>
         <span className="count">
@@ -84,10 +83,17 @@ export const ProjectTiket = ({ project, index }) => {
             0
           )}
         </span>
+        <img src={avatarProject} alt="#" className="project__avatar" />
         <span className="menu-settings" onClick={() => setModalSelect(true)}>
           ...
         </span>
       </div>
+      <Link
+        to={`/profile/statistics/${project.id}`}
+        className="project__statistics"
+      >
+        Просмотреть статистику
+      </Link>
 
       <TrackerModal
         active={modalAdd}
@@ -110,7 +116,7 @@ export const ProjectTiket = ({ project, index }) => {
           </div>
           <div>
             <img src={link}></img>
-            <p onClick={copyProjectLink}>ссылка на проект</p>
+            <p onClick={copyProjectLink(project.id)}>ссылка на проект</p>
           </div>
           <div
             onClick={() => {

src/components/ProjectTiket/projectTiket.scss

@@ -1,6 +1,7 @@
 .project {
   position: relative;
-  width: 48%;
+  width: 322px;
+
   background: #f1f1f1;
   border-radius: 12px;
   padding: 17px 26px 16px;
@@ -21,12 +22,12 @@
     width: 100%;
   }
 
-  a {
+  &__link {
     font-weight: 700;
     font-size: 18px;
     line-height: 32px;
     color: #111112;
-    margin-bottom: 10px;
+    margin-bottom: 22px;
     overflow: hidden;
     white-space: nowrap;
     display: flex;
@@ -42,19 +43,21 @@
     display: flex;
     align-items: center;
     position: relative;
+    margin-bottom: 27px;
 
     p {
       color: #6f6f6f;
-      font-weight: 500;
-      font-size: 12px;
-      line-height: 24px;
       margin-bottom: 0;
+      font-size: 12px;
+      font-weight: 500;
+      line-height: 17px;
+      width: 60px;
     }
 
     .count {
       margin-left: 8px;
-      width: 21px;
+      width: 26px;
-      height: 24px;
+      height: 26px;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -84,4 +87,19 @@
       top: -35%;
     }
   }
+
+  &__avatar {
+    width: 25px;
+    height: 25px;
+    margin-left: 56px;
+  }
+
+  &__statistics {
+    color: #678eda;
+    margin-top: 27px;
+    text-decoration: underline;
+    font-size: 12px;
+    font-weight: 300;
+    line-height: 17px;
+  }
 }

src/pages/Statistics/Statistics.jsx

@@ -0,0 +1,205 @@
+import React from "react";
+import { useDispatch } from "react-redux";
+import { Link } from "react-router-dom";
+
+import { setToggleTab } from "@redux/projectsTrackerSlice";
+
+import { copyProjectLink } from "@utils/helper";
+
+import { Navigation } from "@components/Navigation/Navigation";
+import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
+import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
+
+import arrow from "assets/icons/arrows/arrowCalendar.png";
+import emailImg from "assets/icons/emailStatistics.svg";
+import link from "assets/icons/link.svg";
+import project from "assets/icons/trackerProject.svg";
+import tasks from "assets/icons/trackerTasks.svg";
+import archive from "assets/images/archiveIcon.png";
+import mockAvatar from "assets/images/mock/AvatarTest .png";
+
+import "./statistics.scss";
+
+const Statistics = () => {
+  const dispatch = useDispatch();
+
+  const teams = [
+    {
+      avatar: mockAvatar,
+      name: "Дмитрий Рогов",
+      email: "dmitryi.zavadskyi@yandex.ru",
+      role: "Программист",
+      status: true,
+    },
+    {
+      avatar: mockAvatar,
+      name: "Марина Орехова",
+      email: "dmitryi.zavadskyi@yandex.ru",
+      role: "Менеджер",
+      status: true,
+    },
+    {
+      avatar: mockAvatar,
+      name: "Тамара Доценко",
+      email: "dmitryi.zavadskyi@yandex.ru51515188151",
+      role: "Тестировщик",
+      status: false,
+    },
+    {
+      avatar: mockAvatar,
+      name: "Кек Лолов",
+      email: "dm4124gmail.com",
+      role: "PM",
+      status: false,
+    },
+  ];
+
+  const toggleTabs = (index) => {
+    dispatch(setToggleTab(index));
+  };
+  return (
+    <div className="statistics">
+      <ProfileHeader />
+      <Navigation />
+      <div className="container">
+        <div className="tracker__content">
+          <ProfileBreadcrumbs
+            links={[
+              { name: "Главная", link: "/profile" },
+              { name: "Трекер", link: "/profile/tracker" },
+            ]}
+          />
+          <h2 className="tracker__title">Управление проектами с трекером</h2>
+        </div>
+      </div>
+      <div className="tracker__tabs">
+        <div className="tracker__tabs__head">
+          <Link
+            to="/profile/tracker"
+            className="tab active-tab projectsTab"
+            onClick={() => toggleTabs(1)}
+          >
+            <img src={project} alt="img" />
+            <p>Проекты </p>
+          </Link>
+          <Link
+            to="/profile/tracker"
+            className="tab tasksTab"
+            onClick={() => toggleTabs(2)}
+          >
+            <img src={tasks} alt="img" />
+            <p>Все мои задачи</p>
+          </Link>
+          <Link
+            to="/profile/tracker"
+            className="tab archiveTab"
+            onClick={() => toggleTabs(3)}
+          >
+            <img src={archive} alt="img" />
+            <p>Архив</p>
+          </Link>
+        </div>
+        <div className="tracker__tabs__content">
+          <div className="tracker__tabs__content__wrapper statistics-body">
+            <div className="statistics-header">
+              <div className="statistics-header__menu">
+                <h1>Статистика проекта</h1>
+                <img src={link} alt="#" />
+                <span className="return-text" onClick={copyProjectLink("62")}>
+                  ссылка на проект
+                </span>
+              </div>
+
+              <div className="statistics-header__return">
+                <img src={arrow} alt="#" />
+
+                <Link to={`/profile/tracker`} className="return-text">
+                  вернуться на все проекты
+                </Link>
+              </div>
+            </div>
+            <div className="statistics-info">
+              <div className="statistics-info__head">
+                <p>Проект: </p>
+                <h1>{"Разработка трекера"}</h1>
+              </div>
+              <div className="statistics-info__team">
+                <div className="project-info">
+                  <div className="project-info__creator">
+                    <span className="return-text">Создатель проекта:</span>
+                    <div>
+                      <p>{"Василий Тарасов"}</p>{" "}
+                      <img src={mockAvatar} alt="#" />
+                    </div>
+                  </div>
+                  <div className="project-info__tasks">
+                    <div className="task-quantity">
+                      <p>Открытые задачи</p>
+                      <span className="task-quantity_open">{4}</span>
+                    </div>
+                    <div className="task-quantity">
+                      <p>Задач в работе</p>
+                      <span className="task-quantity_work">{5}</span>
+                    </div>
+                    <div className="task-quantity">
+                      <p>Закрыто задач</p>
+                      <span className="task-quantity_closed">{434}</span>
+                    </div>
+                  </div>
+                </div>
+                <div className="list-team">
+                  <div className="list-team__title">
+                    <span className="return-text">Участники проекта:</span>
+                  </div>
+                  <div className="list-team__head">
+                    <p>Имя</p>
+                    <p>Почта</p>
+                    <p>Роль</p>
+                    <p>Статус</p>
+                  </div>
+                  <div className="list-team__body">
+                    {teams.map((item) => {
+                      return (
+                        <>
+                          <div className="list-team__item">
+                            <div className="person-name">
+                              <img src={item.avatar} alt="#" />
+                              <p>{item.name}</p>
+                            </div>
+                            <div className="person-email">
+                              <img src={emailImg} alt="#" />
+                              <p>{item.email}</p>
+                            </div>
+
+                            <p className="person-type">{item.role}</p>
+                            {/* <span className="status status-active"> */}
+
+                            <span
+                              className={
+                                item.status
+                                  ? "status status-active"
+                                  : "status status-none"
+                              }
+                            >
+                              {item.status ? "Активно" : "Не активно"}
+                            </span>
+                          </div>
+                        </>
+                      );
+                    })}
+                  </div>
+                </div>
+                <div className="add-person">
+                  <span className="add-person__button">+</span>
+                  <p>Добавить участников</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Statistics;

src/pages/Statistics/statistics.scss

@@ -0,0 +1,401 @@
+.statistics {
+  background: #f1f1f1;
+  height: 100%;
+  min-height: 100vh;
+  font-family: "LabGrotesque", sans-serif;
+  position: relative;
+
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    margin: 15px 0 0 0;
+
+    &__return {
+      img {
+        width: 19px;
+        height: 19px;
+        transform: rotate(-180deg);
+        margin-right: 22px;
+      }
+
+      a {
+        cursor: pointer;
+        transition: 0.4s;
+
+        &:hover {
+          text-decoration: underline !important;
+          transition: 0.4s;
+        }
+      }
+
+      @media (max-width: 850px) {
+        display: flex;
+        align-items: center;
+
+        img {
+          margin-right: 10px;
+        }
+      }
+
+      @media (max-width: 425px) {
+        display: none;
+      }
+    }
+
+    &__menu {
+      display: flex;
+      align-items: center;
+
+      h1 {
+        color: #678eda;
+        margin: 0 158px 0 0;
+        font-size: 23px;
+        font-weight: 700;
+        line-height: 17px;
+      }
+
+      span {
+        margin-left: 17px;
+        cursor: pointer;
+        transition: 0.4s;
+
+        &:hover {
+          text-decoration: underline;
+          transition: 0.4s;
+        }
+      }
+
+      @media (max-width: 850px) {
+        h1 {
+          margin: 0 15px 0 5px;
+        }
+
+        span {
+          margin-left: 10px;
+        }
+      }
+
+      @media (max-width: 425px) {
+        padding: 0 20px;
+
+        h1 {
+          margin: 0;
+          line-height: 22px;
+        }
+
+        span {
+          margin: 10px;
+        }
+      }
+    }
+  }
+
+  &-info {
+    margin-top: 35px;
+
+    &__head {
+      display: flex;
+      align-items: center;
+      height: 56px;
+      border-radius: 12px;
+      background: #f1f1f1;
+      padding-left: 31px;
+
+      p {
+        color: #5b6871;
+        font-size: 14px;
+      }
+
+      h1 {
+        color: #111112;
+        font-size: 22px;
+        margin: 0 0 0 21px;
+      }
+
+      @media (max-width: 425px) {
+        padding: 0 15px;
+      }
+    }
+
+    &__team {
+      .project-info {
+        display: flex;
+        justify-content: space-between;
+        padding: 30px;
+
+        &__creator {
+          display: flex;
+          flex-direction: column;
+
+          div {
+            display: flex;
+            align-items: center;
+
+            p {
+              color: #2d4a17;
+              font-size: 18px;
+              font-weight: 500;
+              line-height: 32px;
+              margin-right: 19px;
+            }
+          }
+        }
+
+        &__tasks {
+          display: flex;
+          gap: 37px;
+
+          .task-quantity {
+            display: flex;
+            align-items: center;
+
+            height: 53px;
+            gap: 8px;
+
+            p {
+              color: #6f6f6f;
+              width: 61px;
+              font-size: 12px;
+              font-weight: 500;
+              line-height: 17px;
+            }
+
+            span {
+              height: 53px;
+              display: flex;
+              align-items: center;
+              padding: 0 12px 0 12px;
+              border-radius: 4px;
+              color: #6f6f6f;
+              font-size: 33px;
+              font-weight: 500;
+            }
+
+            &_open {
+              background: #ddd;
+            }
+
+            &_work {
+              background: #e1fccf;
+            }
+
+            &_closed {
+              color: #fff !important;
+              background: #6e7c87;
+            }
+          }
+
+          @media (max-width: 850px) {
+            justify-content: space-around;
+          }
+
+          @media (max-width: 650px) {
+            margin-top: 10px;
+            padding: 0;
+            gap: 20px;
+          }
+
+          @media (max-width: 425px) {
+            margin-top: 25px;
+            flex-direction: column;
+            flex-wrap: wrap;
+            align-items: center;
+            gap: 15px;
+          }
+        }
+
+        @media (max-width: 850px) {
+          flex-direction: column;
+          padding: 15px;
+        }
+
+        @media (max-width: 425px) {
+          flex-direction: column;
+        }
+      }
+
+      .list-team {
+        padding: 0 30px;
+
+        &__title {
+          padding: 0 0 10px 0;
+          border-bottom: 2px solid #f1f1f1;
+          margin-bottom: 23px;
+
+          @media (max-width: 650px) {
+            border-bottom: 2px solid #b5b5b5a8;
+          }
+
+          @media (max-width: 425px) {
+            margin: 0;
+          }
+        }
+
+        &__head {
+          display: flex;
+          justify-content: space-between;
+          margin-right: 123px;
+
+          p {
+            color: #5b6871;
+            font-size: 12px;
+          }
+
+          @media (max-width: 850px) {
+            padding: 0px 80px 0 80px;
+            margin: 0;
+          }
+
+          @media (max-width: 650px) {
+            display: none;
+          }
+        }
+
+        &__item {
+          margin-right: 55px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          color: #000;
+          font-size: 15px;
+          padding: 23px 0;
+
+          .person {
+            &-name {
+              display: flex;
+              align-items: center;
+              width: 202px;
+              img {
+                margin-right: 10px;
+              }
+            }
+
+            &-email {
+              width: 235px;
+              align-items: center;
+              display: flex;
+
+              img {
+                margin-right: 20px;
+              }
+
+              p {
+                word-break: break-all;
+              }
+            }
+
+            &-type {
+              width: 168px;
+            }
+
+            @media (max-width: 850px) {
+              &-name {
+                width: 115px;
+              }
+
+              &-type {
+                width: 100px;
+              }
+            }
+
+            @media (max-width: 650px) {
+              &-name {
+                width: auto;
+              }
+
+              &-type {
+                width: auto;
+              }
+            }
+          }
+
+          .status {
+            border-radius: 34px;
+            font-size: 15px;
+            width: 152px;
+            height: 34px;
+            color: #fff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &-active {
+              background: #52b709;
+            }
+
+            &-none {
+              background: #6e7c87;
+            }
+
+            @media (max-width: 850px) {
+              width: 120px;
+            }
+          }
+
+          @media (max-width: 850px) {
+            margin: 0;
+            gap: 10px;
+          }
+
+          @media (max-width: 650px) {
+            margin: 0;
+            flex-direction: column;
+            justify-content: center;
+            gap: 10px;
+          }
+        }
+
+        &__body {
+          @media (max-width: 850px) {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+          }
+        }
+
+        @media (max-width: 650px) {
+          padding: 0px 15px;
+
+          &__body {
+            gap: 25px;
+          }
+        }
+      }
+
+      .add-person {
+        padding: 20px 30px 70px 30px;
+        display: flex;
+        align-items: center;
+        width: fit-content;
+
+        &__button {
+          cursor: pointer;
+          background: #8bcc60;
+          width: 33.5px;
+          height: 36px;
+          color: white;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 55px;
+        }
+
+        p {
+          margin-left: 24px;
+          color: #000;
+          font-size: 16px;
+          font-weight: 700;
+        }
+      }
+    }
+
+    @media (max-width: 850px) {
+      padding: 0 15px;
+    }
+  }
+
+  .return-text {
+    color: #5b6871;
+    font-size: 14px;
+  }
+}

src/pages/Tracker/Tracker.js

@@ -23,6 +23,7 @@ import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadc
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 import ProjectTiket from "@components/ProjectTiket/ProjectTiket";
 
+import addProjectImg from "assets/icons/addProjectImg.svg";
 import search from "assets/icons/serchIcon.png";
 import project from "assets/icons/trackerProject.svg";
 import tasks from "assets/icons/trackerTasks.svg";
@@ -205,17 +206,17 @@ export const Tracker = () => {
                         setModalCreateProject(true);
                       }}
                     >
-                      <span>+</span>Создать проект
+                      <img src={addProjectImg} alt="#"></img>
+                      <p className="createProjectBtn__text">
+                        Ставьте задачи, следите за прогрессом, ведите учёт
+                        рабочего времени
+                      </p>
                     </BaseButton>
                   </div>
-                  <p className="no-projects__info">
-                    Ставьте задачи, следите за прогрессом, ведите учёт рабочего
-                    времени
-                  </p>
                 </div>
               )}
             {Boolean(projects.length) && !loader && (
-              <div className="create-newProject">
+              <>
                 <BaseButton
                   styles="createProjectBtn"
                   onClick={() => {
@@ -223,13 +224,13 @@ export const Tracker = () => {
                     setModalCreateProject(true);
                   }}
                 >
-                  <span>+</span>Создать проект
+                  <img src={addProjectImg} alt="#"></img>
-                </BaseButton>
+                  <p className="createProjectBtn__text">
-                <p>
                     Ставьте задачи, следите за прогрессом, ведите учёт рабочего
                     времени
                   </p>
-              </div>
+                </BaseButton>
+              </>
             )}
           </div>
           <div

src/pages/Tracker/tracker.scss

@@ -173,51 +173,39 @@
               }
             }
           }
-
-          &__info {
-            margin-top: 27px;
-            font-weight: 400;
-            font-size: 14px;
-            line-height: 22px;
-          }
         }
 
         .createProjectBtn {
-          max-width: 188px;
+          max-width: 322px;
-          height: 50px;
+          width: 322px;
-          width: 100%;
+          height: 166px;
+          border-radius: 12px;
+          background: #ecf8e5;
+          color: #000000;
           font-weight: 400;
           font-size: 15px;
           display: flex;
           align-items: center;
           justify-content: center;
+          transition: 0.4s;
 
-          span {
+          &__text {
-            margin-right: 9px;
+            text-align: left;
-            font-weight: 700;
+            font-size: 14px;
-            font-size: 18px;
+            font-weight: 250;
+            width: 190px;
+            margin-left: 25px;
+          }
+
+          &:hover {
+            transition: 0.4s;
+            box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
           }
 
           @media (max-width: 650px) {
             height: 40px;
             font-size: 12px;
-          }
+            height: 166px;
-        }
-
-        .create-newProject {
-          display: flex;
-          align-items: center;
-
-          p {
-            margin-left: 32px;
-            font-weight: 400;
-            font-size: 14px;
-            line-height: 22px;
-            max-width: 214px;
-
-            @media (max-width: 450px) {
-              max-width: none;
-            }
           }
         }
       }
@@ -243,7 +231,7 @@
           }
 
           @media (max-width: 650px) {
-            background-color: #DFF1FF;
+            background-color: #dff1ff;
           }
 
           &__wrapper {
@@ -699,7 +687,6 @@
               row-gap: 7px;
               width: 100%;
 
-
               .executorDropdown__person {
                 display: flex;
                 justify-content: space-between;
@@ -710,7 +697,6 @@
                   white-space: nowrap;
                   text-overflow: ellipsis;
 
-
                   @media (max-width: 915px) {
                     max-width: none;
                   }
@@ -974,7 +960,7 @@
               p {
                 font-weight: 500;
                 font-size: 14px;
-                color: #1458DD;
+                color: #1458dd;
               }
 
               span {
@@ -1618,10 +1604,9 @@
     }
 
     @media (max-width: 650px) {
-
       &__content {
         padding: 28px 0 0;
-        background-color: #DFF1FF;
+        background-color: #dff1ff;
 
         .project {
           background-color: white;
@@ -1630,15 +1615,15 @@
       }
 
       .projectsTab {
-        background-color: #DFF1FF;
+        background-color: #dff1ff;
       }
 
       .tasksTab {
-        background-color: #E8FFEB;
+        background-color: #e8ffeb;
       }
 
       .archiveTab {
-        background-color: #FFECEF;
+        background-color: #ffecef;
       }
     }
   }

src/utils/helper.js

@@ -79,3 +79,9 @@ export function caseOfNum(number, type) {
       : cases[number % 10 < 5 ? number % 10 : 5]
   ];
 }
+
+export function copyProjectLink(projectId) {
+  navigator.clipboard.writeText(
+    `https://itguild.info/tracker/project/${projectId}`
+  );
+}