tracker fixes

src/components/AuthBox/authBox.scss

@@ -133,13 +133,14 @@
       text-align: center;
       border: 2px solid #6aaf5c;
       margin-right: 1.5rem;
+      transition: 0.3s;
 
       &:hover {
-        background-image: none;
+        transform: scale(1.03);
-        background-color: #ffffff;
+        //background-image: none;
-        border: 2px solid #6aaf5c;
+        //background-color: #ffffff;
-        color: #6aaf5c !important;
+        //border: 2px solid #6aaf5c;
-        transition: 0.3s;
+        //color: #6aaf5c !important;
 
         .loader * {
           fill: #6aaf5c;

src/components/Common/Loader/loader.scss

@@ -6,9 +6,9 @@
   align-items: center;
   position: relative;
 
-  &:hover {
+  //&:hover {
-    path {
+  //  path {
-      fill: #6aaf5c;
+  //    fill: #6aaf5c;
-    }
+  //  }
-  }
+  //}
 }

src/components/Common/ModalLayout/modalLayout.scss

@@ -15,11 +15,60 @@
     position: relative;
     background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
     border-radius: 24px;
-    padding: 60px 60px 30px 60px;
+    padding: 20px 40px 30px 40px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
+
+    .selectPerson {
+      align-items: start;
+
+      &__info {
+        font-size: 15px;
+        font-weight: 300;
+        margin: 12px 0 20px;
+      }
+    }
+
+    .invite__blocks {
+      display: flex;
+      column-gap: 20px;
+
+      span {
+        margin-top: 8px;
+        font-size: 15px;
+        font-weight: 300;
+      }
+
+      .invitePersonBlock {
+        display: flex;
+        flex-direction: column;
+        row-gap: 20px;
+        &__input {
+          margin: 0;
+          min-width: 320px;
+          height: 42px;
+
+          input {
+            height: 42px;
+          }
+        }
+
+        &__btn {
+          margin: 0 auto 0 0;
+          max-width: 242px;
+          width: 100%;
+        }
+      }
+    }
+
+    .select__person {
+      display: flex;
+      flex-direction: column;
+      row-gap: 10px;
+      padding: 39px 10px 29px 10px;
+    }
   }
 }
 

src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx

@@ -363,9 +363,9 @@ export const ModalTiсket = ({
           </h3>
 
           <div className="content__task">
-            <span>Задача</span>
             {editOpen ? (
               <input
+                maxLength="100"
                 value={inputsValue.title}
                 onChange={(e) => {
                   setInputsValue((prevValue) => ({
@@ -463,8 +463,8 @@ export const ModalTiсket = ({
         </div>
         <div className="workers">
           <div className="workers_box task__info">
-            <span className="exit" onClick={() => setActive(false)}></span>
+            <span className="exit" onClick={() => setActive(false)}>
-            <span className="nameProject">{task.title}</span>
+            </span>
             <p className="workers__creator">Создатель : {task.user?.fio}</p>
 
             {executor ? (

src/components/Modal/Tracker/ModalTicket/modalTicket.scss

@@ -33,6 +33,9 @@
       display: flex;
       align-items: center;
       flex-direction: row;
+      color: #1458DD;
+      font-weight: 700;
+      font-size: 22px;
 
       &__category {
         margin-right: 17px;
@@ -104,9 +107,9 @@
 
       h5 {
         font-family: "Inter", sans-serif;
-        font-weight: 500;
+        font-weight: 600;
         font-style: normal;
-        font-size: 16px;
+        font-size: 19px;
         line-height: 24px;
         color: #1a1919;
         margin-bottom: 0;
@@ -280,7 +283,7 @@
     &__description {
       display: flex;
       flex-direction: column;
-      margin-top: 10px;
+      margin-top: 12px;
 
       textarea {
         min-height: 120px;
@@ -405,6 +408,7 @@
     display: flex;
     flex-direction: column;
     font-size: 14px;
+    margin-top: 8px;
 
     &__list {
       display: flex;
@@ -420,13 +424,17 @@
     .exit {
       cursor: pointer;
       position: absolute;
-      top: 35px;
+      top: 25px;
-      right: 40px;
+      right: 30px;
+      width: 13px;
+      height: 13px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
       &:before,
       &:after {
         content: "";
-        position: absolute;
         width: 16px;
         height: 2px;
         background: #263238;
@@ -459,6 +467,7 @@
       align-items: center;
       position: relative;
       margin-bottom: 5px;
+      margin-top: 12px;
 
       span {
         color: #000000;
@@ -552,6 +561,7 @@
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
+      margin-bottom: 8px;
 
       span {
         margin-left: 5px;
@@ -585,7 +595,6 @@
     .task__info {
       display: flex;
       flex-direction: column;
-      row-gap: 5px;
 
       .delete {
         cursor: pointer;
@@ -669,6 +678,10 @@
           align-items: center;
           padding-left: 10px;
 
+          img {
+            width: 11px;
+          }
+
           p {
             margin: 0 0 0 12px;
           }

src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx

@@ -24,8 +24,7 @@ import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadc
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";
 
-import archive from "assets/icons/archive.svg";
+import archive from "assets/images/archiveIcon.png";
-import archive2 from "assets/icons/archive.svg";
 import arrow from "assets/icons/arrows/arrowCalendar.png";
 import arrowStart from "assets/icons/arrows/arrowStart.png";
 import close from "assets/icons/close.png";
@@ -412,7 +411,7 @@ export const TicketFullScreen = () => {
           <>
             <div className="tracker__tabs__content content-tabs">
               <div className="tasks__head">
-                <div className="tasks__head__wrapper">
+                <div className="tasks__head__wrapper tasks__head__wrapper__fullScreen">
                   <h5>Проект : {projectInfo.name}</h5>
 
                   <TrackerModal
@@ -518,9 +517,9 @@ export const TicketFullScreen = () => {
             <div className="modal-tiket__content ticket">
               <div className="content ticket-whith">
                 <div className="content__task">
-                  <span>Задача</span>
                   {editOpen ? (
                     <input
+                      maxLength="100"
                       value={inputsValue.title}
                       onChange={(e) => {
                         setInputsValue((prevValue) => ({
@@ -810,7 +809,7 @@ export const TicketFullScreen = () => {
                     <p onClick={copyTicketLink}>ссылка на задачу</p>
                   </div>
                   <div>
-                    <img src={archive2} alt="arch"></img>
+                    <img src={archive} alt="arch"></img>
                     <p>в архив</p>
                   </div>
                   <div onClick={deleteTask}>

src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx

@@ -53,7 +53,7 @@ export const TrackerModal = ({
   const [valueColumn, setValueColumn] = useState("");
   const [nameProject, setNameProject] = useState("");
   const [valueTiket, setValueTiket] = useState("");
-  const [descriptionTicket, setDescriptionTicket] = useState("Описание задачи");
+  const [descriptionTicket, setDescriptionTicket] = useState("");
   const [workers, setWorkers] = useState([]);
   const [selectWorkersOpen, setSelectWorkersOpen] = useState(false);
   const [selectedWorker, setSelectedWorker] = useState(null);
@@ -271,62 +271,78 @@ export const TrackerModal = ({
       // }}
     >
       {modalType === "addWorker" && (
-        <div>
+        <>
-          <div className="title-project">
+          <div className='select__person'>
-            <h4>Добавьте участника</h4>
+            <div className="title-project selectPerson">
-            {/*<div className="input-container">*/}
+              <h4>Добавьте участника</h4>
-            {/*  <input*/}
+              {/*<div className="input-container">*/}
-            {/*    className="name-project"*/}
+              {/*  <input*/}
-            {/*    value={emailWorker}*/}
+              {/*    className="name-project"*/}
-            {/*    onChange={(e) => setEmailWorker(e.target.value)}*/}
+              {/*    value={emailWorker}*/}
-            {/*  />*/}
+              {/*    onChange={(e) => setEmailWorker(e.target.value)}*/}
-            {/*</div>*/}
+              {/*  />*/}
-            <div
+              {/*</div>*/}
-              className={
+              <p className='selectPerson__info'>Выберите пользователя в проекте или добавьте по e- mail</p>
-                selectWorkersOpen ? "select__worker open" : "select__worker"
+              <div className='invite__blocks'>
-              }
+                <div className='addPersonBlock'>
-              onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}
+                  <div
-            >
+                    className={
-              <p>
+                      selectWorkersOpen ? "select__worker open" : "select__worker"
-                {selectedWorker
+                    }
-                  ? selectedWorker.employee.fio
+                    onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}
-                  : "Выберите пользователя"}
+                  >
-              </p>
+                    <p>
-              <img className="arrow" src={arrowDown} alt="arrow" />
+                      {selectedWorker
-              {Boolean(selectWorkersOpen) && (
+                        ? selectedWorker.employee.fio
-                <div className="select__worker__dropDown">
+                        : "Выберите пользователя"}
-                  {Boolean(workers.length) ? (
+                    </p>
-                    workers.map((worker) => {
+                    <img className="arrow" src={arrowDown} alt="arrow" />
-                      if (worker === selectedWorker) {
+                    {Boolean(selectWorkersOpen) && (
-                        return;
+                      <div className="select__worker__dropDown">
-                      }
+                        {Boolean(workers.length) ? (
-                      return (
+                          workers.map((worker) => {
-                        <div
+                            if (worker === selectedWorker) {
-                          className="worker"
+                              return;
-                          key={worker.id}
+                            }
-                          onClick={() => {
+                            return (
-                            setSelectedWorker(worker);
+                              <div
-                          }}
+                                className="worker"
-                        >
+                                key={worker.id}
-                          <p>{worker.employee.fio}</p>
+                                onClick={() => {
-                          <img
+                                  setSelectedWorker(worker);
-                            src={urlForLocal(worker.employee.avatar)}
+                                }}
-                            alt="avatar"
+                              >
-                          />
+                                <p>{worker.employee.fio}</p>
-                        </div>
+                                <img
-                      );
+                                  src={urlForLocal(worker.employee.avatar)}
-                    })
+                                  alt="avatar"
-                  ) : (
+                                />
-                    <div>Нет пользователей</div>
+                              </div>
-                  )}
+                            );
+                          })
+                        ) : (
+                          <div>Нет пользователей</div>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                  <BaseButton styles={"button-add addPersonBtn"} onClick={addUserToProject}>
+                    Добавить
+                  </BaseButton>
                 </div>
-              )}
+                <span>или</span>
+                <div className='invitePersonBlock'>
+                  <div className='input-container invitePersonBlock__input'>
+                    <input className="name-project" placeholder='email' type="email" />
+                  </div>
+                  <BaseButton styles={"button-add invitePersonBlock__btn"}>
+                    Отправить приглашение
+                  </BaseButton>
+                </div>
+              </div>
             </div>
           </div>
-          <BaseButton styles={"button-add"} onClick={addUserToProject}>
+        </>
-            Добавить
-          </BaseButton>
-        </div>
       )}
       {modalType === "createTiketProject" && (
         <>
@@ -334,6 +350,7 @@ export const TrackerModal = ({
             <h4>Введите название и описание задачи</h4>
             <div className="input-container">
               <input
+                maxLength="100"
                 className="name-project"
                 value={valueTiket}
                 onChange={(e) => setValueTiket(e.target.value)}
@@ -355,6 +372,7 @@ export const TrackerModal = ({
                   "blockQuote",
                 ],
                 removePlugins: ["BlockQuote"],
+                placeholder: "Описание задачи"
               }}
               onChange={(event, editor) => {
                 const data = editor.getData();
@@ -443,6 +461,7 @@ export const TrackerModal = ({
             <h4>{titleProject}</h4>
             <div className="input-container">
               <input
+                maxLength="30"
                 className="name-project"
                 value={nameProject}
                 onChange={(e) => setNameProject(e.target.value)}
@@ -477,6 +496,7 @@ export const TrackerModal = ({
             <h4>Введите название колонки</h4>
             <div className="input-container">
               <input
+                maxLength="100"
                 className="name-project"
                 value={valueColumn}
                 onChange={(e) => setValueColumn(e.target.value)}

src/components/Modal/Tracker/TrackerModal/trackerModal.scss

@@ -30,7 +30,6 @@
   display: flex;
   align-items: center;
   flex-direction: column;
-  margin: 0 0 15px 0;
   row-gap: 5px;
 
   .select-priority {
@@ -79,7 +78,7 @@
   }
 
   .input-container {
-    width: 320px;
+    width: 100%;
     height: 35px;
     background: #ffffff;
     border-radius: 8px;
@@ -91,7 +90,7 @@
   }
 
   .ck-editor {
-    max-width: 320px;
+    width: 100%;
   }
 
   .ck-editor__editable.ck-rounded-corners {
@@ -104,6 +103,10 @@
     border-radius: 8px 8px 0 0 !important;
   }
 
+  .ck-placeholder {
+    display: block !important;
+  }
+
   .ck-content {
     border: none !important;
     border-radius: 0 0 8px 8px !important;
@@ -111,7 +114,7 @@
   }
 
   .select__executor {
-    width: 320px;
+    width: 100%;
     background: white;
     border-radius: 8px;
     margin: 5px 0;
@@ -215,6 +218,7 @@
     cursor: pointer;
     position: relative;
     min-width: 320px;
+    height: 42px;
     width: 100%;
 
     p {
@@ -237,7 +241,7 @@
       position: absolute;
       width: 100%;
       padding: 9.5px 12px;
-      top: 35px;
+      top: 48px;
       left: 0;
       background: white;
       border-radius: 5px;
@@ -286,6 +290,11 @@
   margin: 0 auto;
 }
 
+.addPersonBtn {
+  margin: 0 auto 0 0;
+  margin-top: 20px;
+}
+
 .modal-add.active {
   transform: scale(1);
 }
@@ -293,8 +302,13 @@
 .exit {
   cursor: pointer;
   position: absolute;
-  top: 35px;
+  top: 15px;
-  right: 40px;
+  right: 20px;
+  width: 13px;
+  height: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   &:before,
   &:after {

src/components/Modal/TrackerModal/trackerModal.scss

@@ -153,11 +153,15 @@
   position: absolute;
   top: 35px;
   right: 40px;
+  width: 13px;
+  height: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   &:before,
   &:after {
     content: "";
-    position: absolute;
     width: 16px;
     height: 2px;
     background: #263238;

src/pages/ProjectTracker/ProjectTracker.js

@@ -34,7 +34,7 @@ import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 
-import archive from "assets/icons/archiveTracker.svg";
+import archive from "assets/images/archiveIcon.png";
 import arrow from "assets/icons/arrows/arrowCalendar.png";
 import arrowDown from "assets/icons/arrows/selectArrow.png";
 import close from "assets/icons/close.png";
@@ -390,7 +390,7 @@ export const ProjectTracker = () => {
                         />
                         <div className="persons__list__count">
                           <span>{projectBoard.projectUsers?.length}</span>
-                          участник
+                          {caseOfNum(projectBoard.projectUsers?.length, "persons")}
                         </div>
                         <div className="persons__list__info">
                           <span>В проекте - </span>
@@ -480,7 +480,7 @@ export const ProjectTracker = () => {
                         setSelectedExecutorOpen(!selectExecutorOpen)
                       }
                     >
-                      <p>Выберите исполнитель</p>
+                      <p>Выберите исполнителя</p>
                       <img
                         className={selectExecutorOpen ? "open" : ""}
                         src={arrowDown}

src/pages/Tracker/Tracker.js

@@ -23,7 +23,7 @@ import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadc
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 import ProjectTiket from "@components/ProjectTiket/ProjectTiket";
 
-import archive from "assets/icons/archiveTracker.svg";
+import archive from "assets/images/archiveIcon.png";
 import search from "assets/icons/serchIcon.png";
 import project from "assets/icons/trackerProject.svg";
 import tasks from "assets/icons/trackerTasks.svg";

src/pages/Tracker/tracker.scss

@@ -55,6 +55,11 @@
       align-items: center;
       color: black;
 
+      img {
+        width: 16px;
+        height: 16px;
+      }
+
       @media (max-width: 490px) {
         padding: 8px 20px 8px 14px;
       }
@@ -214,6 +219,10 @@
             justify-content: space-between;
             padding: 0 10px;
             align-items: center;
+
+            &__fullScreen {
+              max-width: 1160px;
+            }
           }
 
           h5 {
@@ -616,6 +625,8 @@
           margin: 0 auto;
           overflow: auto;
           max-width: 100%;
+          transform: scaleY(-1);
+          align-items: end;
 
           &::-webkit-scrollbar {
             height: 8px;
@@ -650,6 +661,7 @@
           transition: all 0.3s ease;
           //max-height: 500px;
           //overflow-y: auto;
+          transform: scaleY(-1);
 
           &::-webkit-scrollbar {
             width: 3px;
@@ -692,9 +704,8 @@
             transition: 0.4s;
 
             &:hover {
-              transform: scale(0.99);
+              transform: scale(1.025);
-              box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
+              transition: 0.3s;
-              transition: 0.4s;
             }
 
             &__hide {
@@ -712,6 +723,12 @@
                 font-size: 16px;
                 line-height: 24px;
                 margin-bottom: 0;
+                max-height: 100px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 5;
+                -webkit-box-orient: vertical;
               }
 
               span {
@@ -852,11 +869,13 @@
           &__noItems {
             font-weight: 500;
             font-size: 25px;
+            transform: scaleY(-1);
           }
 
           &__noTasks {
             display: flex;
             flex-direction: column;
+            transform: scaleY(-1);
 
             &Info {
               display: flex;
@@ -1057,6 +1076,7 @@
               &__info {
                 display: flex;
                 flex-direction: column;
+                max-width: 730px;
 
                 h5 {
                   font-weight: 700;
@@ -1068,7 +1088,7 @@
                 p {
                   font-size: 16px;
                   line-height: 32px;
-                  max-width: 400px;
+                  max-width: 710px;
                   overflow: hidden;
                   white-space: nowrap;
                   text-overflow: ellipsis;

src/utils/helper.js

@@ -64,7 +64,8 @@ export function getCorrectRequestDate(date) {
 
 export function caseOfNum(number, type) {
   const comments = ["коментарий", "комментария", " коментариев"];
-  const files = ["файлов", "файла", "файлов"];
+  const files = ["файл", "файла", "файлов"];
+  const persons = ["участник", "участника", "участников"]
   const cases = [2, 0, 1, 1, 1, 2];
   if (type === "comments") {
     return comments[
@@ -80,4 +81,12 @@ export function caseOfNum(number, type) {
         : cases[number % 10 < 5 ? number % 10 : 5]
     ];
   }
+
+  if (type === "persons") {
+    return persons[
+        number % 100 > 4 && number % 100 < 20
+            ? 2
+            : cases[number % 10 < 5 ? number % 10 : 5]
+        ];
+  }
 }