Pull of main

src/components/Modal/ModalSelect/modalSelect.scss

@@ -19,6 +19,10 @@
         img {
           margin-right: 12px;
         }
+
+        p:hover {
+          text-decoration: underline;
+        }
       }
     }
 

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

@@ -4,14 +4,13 @@ import { Link } from "react-router-dom";
 
 import { modalToggle, setProjectBoardFetch } from "@redux/projectsTrackerSlice";
 
-import { urlForLocal } from "@utils/helper";
+import { getCorrectRequestDate, urlForLocal } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
-import { getCorrectDate } from "@components/Calendar/calendarHelper";
 import BaseButton from "@components/Common/BaseButton/BaseButton";
-import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
+import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
-import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
+import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";
 
 import archive from "assets/icons/archive.svg";
 import arrow from "assets/icons/arrows/arrowStart.png";
@@ -26,7 +25,7 @@ import plus from "assets/icons/plus.svg";
 import send from "assets/icons/send.svg";
 import watch from "assets/icons/watch.svg";
 
-import "./ModalTicket.scss";
+import "./modalTicket.scss";
 
 export const ModalTiсket = ({
   active,
@@ -45,13 +44,19 @@ export const ModalTiсket = ({
     comment: "",
   });
   const [comments, setComments] = useState([]);
-  const [commentsEditOpen, setCommentsEditOpen] = useState({});
-  const [commentsEditText, setCommentsEditText] = useState({});
   const [dropListOpen, setDropListOpen] = useState(false);
   const [dropListMembersOpen, setDropListMembersOpen] = useState(false);
   const [executor, setExecutor] = useState(task.executor);
   const [members, setMembers] = useState(task.taskUsers);
   const [users, setUsers] = useState([]);
+  const [timerStart, setTimerStart] = useState(false);
+  const [timerInfo, setTimerInfo] = useState({});
+  const [currentTimerCount, setCurrentTimerCount] = useState({
+    hours: 0,
+    minute: 0,
+    seconds: 0,
+  });
+  const [timerId, setTimerId] = useState(null);
 
   function deleteTask() {
     apiRequest("/task/update-task", {
@@ -90,37 +95,78 @@ export const ModalTiсket = ({
     }).then((res) => {
       let newComment = res;
       newComment.created_at = new Date();
+      newComment.subComments = [];
       setInputsValue((prevValue) => ({ ...prevValue, comment: "" }));
       setComments((prevValue) => [...prevValue, newComment]);
-      setCommentsEditOpen((prevValue) => ({ ...prevValue, [res.id]: false }));
-      setCommentsEditText((prevValue) => ({
-        ...prevValue,
-        [res.id]: res.text,
-      }));
-    });
-  }
-  function deleteComment(commentId) {
-    apiRequest("/comment/update", {
-      method: "PUT",
-      data: {
-        comment_id: commentId,
-        status: 0,
-      },
-    }).then(() => {
-      setComments((prevValue) =>
-        prevValue.filter((item) => item.id !== commentId)
-      );
     });
   }
 
-  function editComment(commentId) {
+  function commentDelete(comment) {
-    apiRequest("/comment/update", {
+    setComments((prevValue) =>
+      prevValue.filter((item) => item.id !== comment.id)
+    );
+    if (comment.subComments.length) {
+      // promiseAll
+      comment.subComments.forEach((subComment) => {
+        apiRequest("/comment/update", {
+          method: "PUT",
+          data: {
+            comment_id: subComment.id,
+            status: 0,
+          },
+        }).then(() => {});
+      });
+    }
+  }
+
+  function addSubComment(commentId, subComment) {
+    const addSubComment = comments;
+    addSubComment.forEach((comment) => {
+      if (comment.id === commentId) {
+        comment.subComments.push(subComment);
+      }
+    });
+    setComments(addSubComment);
+  }
+
+  function subCommentDelete(subComment) {
+    const deleteSubComment = comments;
+    deleteSubComment.forEach((comment, index) => {
+      if (comment.id === subComment.parent_id) {
+        deleteSubComment[index].subComments = comment.subComments.filter(
+          (item) => item.id !== subComment.id
+        );
+      }
+    });
+    setComments([...deleteSubComment]);
+  }
+
+  function startTaskTimer() {
+    apiRequest("/timer/create", {
+      method: "POST",
+      data: {
+        entity_type: 2,
+        entity_id: task.id,
+        created_at: getCorrectRequestDate(new Date()),
+      },
+    }).then((res) => {
+      setTimerStart(true);
+      setTimerInfo(res);
+      startTimer();
+    });
+  }
+
+  function stopTaskTimer() {
+    apiRequest("/timer/update", {
       method: "PUT",
       data: {
-        comment_id: commentId,
+        timer_id: timerInfo.id,
-        text: commentsEditText[commentId],
+        stopped_at: getCorrectRequestDate(new Date()),
       },
-    }).then(() => {});
+    }).then(() => {
+      setTimerStart(false);
+      clearInterval(timerId);
+    });
   }
 
   function taskExecutor(person) {
@@ -177,20 +223,77 @@ export const ModalTiсket = ({
     apiRequest(
       `/comment/get-by-entity?entity_type=2&entity_id=${task.id}`
     ).then((res) => {
-      setComments(res);
+      const comments = res.reduce((acc, cur) => {
-      res.forEach((item) => {
+        if (!cur.parent_id) {
-        setCommentsEditOpen((prevValue) => ({
+          acc.push({ ...cur, subComments: [] });
-          ...prevValue,
+        } else {
-          [item.id]: false,
+          acc.forEach((item) => {
-        }));
+            if (item.id === cur.parent_id) item.subComments.push(cur);
-        setCommentsEditText((prevValue) => ({
+          });
-          ...prevValue,
+        }
-          [item.id]: item.text,
+        return acc;
-        }));
+      }, []);
-      });
+      setComments(comments);
     });
+    apiRequest(`/timer/get-by-entity?entity_type=2&entity_id=${task.id}`).then(
+      (res) => {
+        let timerSeconds = 0;
+        res.length &&
+          res.forEach((time) => {
+            timerSeconds += time.deltaSeconds;
+            setCurrentTimerCount({
+              hours: Math.floor(timerSeconds / 60 / 60),
+              minute: Math.floor((timerSeconds / 60) % 60),
+              seconds: timerSeconds % 60,
+            });
+            updateTimerHours = Math.floor(timerSeconds / 60 / 60);
+            updateTimerMinute = Math.floor((timerSeconds / 60) % 60);
+            updateTimerSec = timerSeconds % 60;
+            if (!time.stopped_at) {
+              setTimerStart(true);
+              startTimer();
+              setTimerInfo(time);
+            }
+          });
+      }
+    );
   }, []);
 
+  function startTimer() {
+    setTimerId(
+      setInterval(() => {
+        run();
+      }, 1000)
+    );
+  }
+
+  let updateTimerSec = currentTimerCount.seconds,
+    updateTimerMinute = currentTimerCount.minute,
+    updateTimerHours = currentTimerCount.hours;
+
+  function run() {
+    updateTimerSec++;
+    if (updateTimerSec > 60) {
+      updateTimerMinute++;
+      updateTimerSec = 0;
+    }
+    if (updateTimerMinute === 60) {
+      updateTimerMinute = 0;
+      updateTimerHours++;
+    }
+
+    return setCurrentTimerCount({
+      hours: updateTimerHours,
+      minute: updateTimerMinute,
+      seconds: updateTimerSec,
+    });
+  }
+
+  function correctTimerTime(time) {
+    if (time < 10) return `0${time}`;
+    if (time > 10) return time;
+  }
+
   useEffect(() => {
     let ids = members.map((user) => user.user_id);
     setUsers(
@@ -202,23 +305,26 @@ export const ModalTiсket = ({
   }, [members]);
 
   return (
-    <>
+    <div
-      <ModalLayout
+      className={active ? "modal-tiket active" : "modal-tiket"}
-        active={active}
+      onClick={() => setActive(false)}
-        setActive={setActive}
+    >
-        styles={"tracker-ticket"}
+      <div
+        className="modal-tiket__content"
+        onClick={(e) => e.stopPropagation()}
       >
         <div className="content">
-          <h3 className="title-project">
+          <Link to={`/tracker/task/${task.id}`} className="title-project__full">
+            <img src={fullScreen}></img>
+          </Link>
+
+          <div className="title-project">
             <img src={category} className="title-project__category"></img>
-            Проект: {projectName}
+            <h2>
-            <Link
+              Проект:
-              to={`/tracker/task/${task.id}`}
+              <h3>{projectName}</h3>
-              className="title-project__full"
+            </h2>
-            >
+          </div>
-              <img src={fullScreen}></img>
-            </Link>
-          </h3>
 
           <div className="content__task">
             <span>Задача</span>
@@ -237,7 +343,7 @@ export const ModalTiсket = ({
             )}
             <div className="content__description">
               {editOpen ? (
-                <input
+                <textarea
                   value={inputsValue.description}
                   onChange={(e) => {
                     setInputsValue((prevValue) => ({
@@ -258,14 +364,14 @@ export const ModalTiсket = ({
                     dispatch(modalToggle("addSubtask"));
                     setAddSubtask(true);
                   }}
-                  styles={"tasks__button"}
+                  styles={"button-green-add"}
                 >
                   <img src={plus}></img>
                   Добавить под задачу
                 </BaseButton>
               </p>
               <p className="file">
-                <BaseButton styles={"file__button"}>
+                <BaseButton styles={"button-add-file"}>
                   <img src={file}></img>
                   Загрузить файл
                 </BaseButton>
@@ -289,50 +395,14 @@ export const ModalTiсket = ({
             <div className="comments__list">
               {comments.map((comment) => {
                 return (
-                  <div className="comments__list__item" key={comment.id}>
+                  <TrackerTaskComment
-                    <div className="comments__list__item__info">
+                    key={comment.id}
-                      <span>{getCorrectDate(comment.created_at)}</span>
+                    taskId={task.id}
-                      <div
+                    comment={comment}
-                        className={
+                    commentDelete={commentDelete}
-                          commentsEditOpen[comment.id]
+                    addSubComment={addSubComment}
-                            ? "edit edit__open"
+                    subCommentDelete={subCommentDelete}
-                            : "edit"
+                  />
-                        }
-                      >
-                        <img
-                          src={edit}
-                          alt="edit"
-                          onClick={() => {
-                            if (commentsEditOpen[comment.id]) {
-                              editComment(comment.id);
-                            }
-                            setCommentsEditOpen((prevValue) => ({
-                              ...prevValue,
-                              [comment.id]: !prevValue[comment.id],
-                            }));
-                          }}
-                        />
-                      </div>
-                      <img
-                        src={del}
-                        alt="delete"
-                        onClick={() => deleteComment(comment.id)}
-                      />
-                    </div>
-                    {commentsEditOpen[comment.id] ? (
-                      <input
-                        value={commentsEditText[comment.id]}
-                        onChange={(e) => {
-                          setCommentsEditText((prevValue) => ({
-                            ...prevValue,
-                            [comment.id]: e.target.value,
-                          }));
-                        }}
-                      />
-                    ) : (
-                      <p>{commentsEditText[comment.id]}</p>
-                    )}
-                  </div>
                 );
               })}
             </div>
@@ -356,7 +426,12 @@ export const ModalTiсket = ({
               </div>
             ) : (
               <div className="add-worker moreItems ">
-                <button onClick={() => setDropListOpen(true)}>+</button>
+                <BaseButton
+                  onClick={() => setDropListOpen(true)}
+                  styles={"button-add-worker"}
+                >
+                  +
+                </BaseButton>
                 <span>Добавить исполнителя</span>
                 {dropListOpen && (
                   <div className="dropdownList">
@@ -404,7 +479,12 @@ export const ModalTiсket = ({
             )}
 
             <div className="add-worker moreItems">
-              <button onClick={() => setDropListMembersOpen(true)}>+</button>
+              <BaseButton
+                onClick={() => setDropListMembersOpen(true)}
+                styles={"button-add-worker"}
+              >
+                +
+              </BaseButton>
               <span>Добавить участников</span>
               {dropListMembersOpen && (
                 <div className="dropdownList">
@@ -438,12 +518,29 @@ export const ModalTiсket = ({
             <div className="time">
               <img src={watch}></img>
               <span>Длительность : </span>
-              <p>{"0:00:00"}</p>
+              <p>
+                {correctTimerTime(currentTimerCount.hours)}:
+                {correctTimerTime(currentTimerCount.minute)}:
+                {correctTimerTime(currentTimerCount.seconds)}
+              </p>
             </div>
 
-            <button className="start">
+            {timerStart ? (
-              Начать делать <img src={arrow}></img>
+              <button className="stop" onClick={() => stopTaskTimer()}>
-            </button>
+                Остановить
+              </button>
+            ) : (
+              <button
+                className={
+                  task.executor_id === Number(localStorage.getItem("id"))
+                    ? "start"
+                    : "start disable"
+                }
+                onClick={() => startTaskTimer()}
+              >
+                Начать делать <img src={arrow}></img>
+              </button>
+            )}
           </div>
 
           <div className="workers_box-bottom">
@@ -475,14 +572,14 @@ export const ModalTiсket = ({
             </div>
           </div>
         </div>
-      </ModalLayout>
+      </div>
 
       <TrackerModal
         active={addSubtask}
         setActive={setAddSubtask}
         defautlInput={task.column_id}
       ></TrackerModal>
-    </>
+    </div>
   );
 };
 

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

@@ -1,594 +0,0 @@
-.tracker-ticket {
-  background: #ffffff;
-  padding: 0;
-  border-radius: 8px;
-  align-items: initial;
-  display: flex;
-  flex-direction: row;
-
-  .content {
-    display: flex;
-    flex-direction: column;
-    width: 600px;
-    margin: 26px 0 0 21px;
-
-    .title-project {
-      color: #1458dd;
-      font-family: "LabGrotesque", sans-serif;
-      display: flex;
-      align-items: center;
-      font-weight: 700;
-      font-size: 22px;
-      line-height: 32px;
-
-      &__category {
-        margin-right: 17px;
-      }
-
-      &__full {
-        margin-left: 35%;
-      }
-    }
-
-    &__task {
-      margin-top: -5px;
-      padding: 18px;
-      display: flex;
-      flex-direction: column;
-
-      input {
-        font-style: normal;
-        font-size: 16px;
-        line-height: 24px;
-        max-width: 340px;
-        outline: none;
-      }
-
-      button {
-        img {
-          margin-right: 5px;
-        }
-      }
-
-      h5 {
-        font-family: "Inter", sans-serif;
-        font-weight: 500;
-        font-style: normal;
-        font-size: 16px;
-        line-height: 24px;
-        color: #1a1919;
-        margin-bottom: 0;
-      }
-
-      .comments__list {
-        display: flex;
-        flex-direction: column;
-        max-height: 420px;
-        overflow: auto;
-
-        &::-webkit-scrollbar {
-          width: 4px;
-          border-radius: 10px;
-        }
-
-        &::-webkit-scrollbar-thumb {
-          background: #cbd9f9;
-          border-radius: 10px;
-        }
-
-        &::-webkit-scrollbar-track {
-          background: #c5c0c6;
-          border-radius: 10px;
-        }
-
-        &__item {
-          padding: 10px 20px;
-          display: flex;
-          flex-direction: column;
-          max-width: 438px;
-          border-radius: 44px;
-          font-size: 14px;
-          width: 100%;
-          position: relative;
-
-          &__subComment {
-            &:before {
-              content: '';
-              background: #E4E4E6;
-              height: 1px;
-              width: 7px;
-              position: absolute;
-              top: 36%;
-              left: 2.5%;
-            }
-          }
-
-          &__main {
-            &:after {
-              content: '';
-              position: absolute;
-              background-image: url("../../../images/mainTaskCommentImg.png");
-              width: 10px;
-              height: 8px;
-              top: 50px;
-              left: 25px;
-            }
-
-            &:before {
-              content: '';
-              position: absolute;
-              background: #E4E4E6;
-              width: 1px;
-              height: calc(100% - 120px);
-              left: 29px;
-              top: 65px;
-            }
-          }
-
-          &__fio {
-            display: flex;
-            align-items: center;
-
-            p {
-              font-size: 12px;
-              color: #000000;
-              line-height: 32px;
-              max-width: 150px;
-              overflow: hidden;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-              margin-left: 10px;
-            }
-
-            img {
-              width: 24px;
-              height: 24px;
-            }
-          }
-
-          &__date {
-            display: flex;
-            align-items: center;
-            column-gap: 5px;
-
-            img {
-              cursor: pointer;
-              width: 15px;
-            }
-
-            span {
-              font-size: 12px;
-            }
-          }
-
-          &__text {
-            margin-left: 34px;
-          }
-
-          &__info {
-            display: flex;
-            justify-content: space-between;
-
-            .edit {
-              width: 25px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              border-radius: 5px;
-            }
-
-            .edit__open {
-              background: green;
-            }
-          }
-
-          &__answer {
-            margin-left: 34px;
-            text-decoration-line: underline;
-            font-weight: 400;
-            font-size: 10px;
-            line-height: 32px;
-            cursor: pointer;
-
-            &__new {
-              margin-left: 34px;
-              font-size: 14px;
-              border-radius: 5px;
-              border: 1px solid gainsboro;
-              padding: 3px 5px;
-              display: flex;
-              align-items: center;
-              margin-top: 5px;
-
-              img {
-                width: 20px;
-                height: 20px;
-                cursor: pointer;
-              }
-
-              input {
-                width: 90%;
-                border: none;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    &__description {
-      display: flex;
-      flex-direction: column;
-      margin-top: 10px;
-
-      p {
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 140%;
-        color: #252c32;
-        text-align: justify;
-      }
-
-      .image-task {
-        margin: 10px 0 20px 0;
-        max-width: 330px;
-      }
-    }
-
-    &__communication {
-      display: flex;
-      flex-direction: row;
-      margin: 29px 0 0 -5px;
-
-      .tasks {
-        justify-content: space-evenly;
-
-        &__button {
-          width: 180px;
-          height: 40px;
-          font-size: 12px;
-        }
-      }
-
-      .tasks,
-      .file {
-        display: flex;
-        align-items: center;
-      }
-
-      .file {
-        justify-content: space-between;
-        margin-left: 20px;
-
-        &__button {
-          background: white;
-          width: 166px;
-          height: 40px;
-          border: 0.5px solid #1458dd;
-          font-weight: 400;
-          font-size: 12px;
-          color: #1458dd;
-
-          img {
-            margin-right: 9px;
-          }
-        }
-
-        span {
-          margin: 0 3px 0 11px;
-          font-weight: 500;
-          font-size: 12px;
-          line-height: 15px;
-          color: #6e7c87;
-        }
-      }
-    }
-
-    &__input {
-      margin: 20px 0 20px 0;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 438px;
-      height: 40px;
-      background: #f1f1f1;
-      border-radius: 44px;
-
-      input {
-        width: 80%;
-        background: inherit;
-        border: none;
-        outline: none;
-        padding-left: 30px;
-        font-weight: 400;
-        font-size: 12px;
-        line-height: 32px;
-        border-radius: 44px;
-      }
-
-      img {
-        cursor: pointer;
-        margin-right: 18px;
-      }
-    }
-  }
-
-  .members {
-    display: flex;
-    flex-direction: column;
-    font-size: 14px;
-
-    &__list {
-      display: flex;
-      flex-direction: column;
-      row-gap: 8px;
-    }
-  }
-
-  .workers {
-    position: relative;
-    border-left: 1px solid #f1f1f1;
-
-    .exit {
-      cursor: pointer;
-      position: absolute;
-      top: 35px;
-      right: 40px;
-
-      &:before,
-      &:after {
-        content: "";
-        position: absolute;
-        width: 16px;
-        height: 2px;
-        background: #263238;
-      }
-
-      &:before {
-        transform: rotate(45deg);
-      }
-      &:after {
-        transform: rotate(-45deg);
-      }
-    }
-
-    span {
-      font-family: "Inter", sans-serif;
-      font-weight: 500;
-      font-size: 11px;
-      color: #807777;
-    }
-
-    .nameProject {
-      max-width: 200px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    .add-worker {
-      display: flex;
-      align-items: center;
-      position: relative;
-
-      span {
-        color: #000000;
-        font-size: 12px;
-        line-height: 32px;
-        margin-left: 17px;
-        font-style: normal;
-        font-weight: 400;
-      }
-
-      button {
-        cursor: pointer;
-        background: #8bcc60;
-        border-radius: 44px;
-        width: 33px;
-        height: 33px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border: none;
-        color: white;
-        font-size: 17px;
-      }
-    }
-
-    .start {
-      font-size: 12px;
-      margin-top: 25px;
-      width: 151px;
-      height: 40px;
-      border: none;
-      color: white;
-      background: #1458dd;
-      border-radius: 44px;
-
-      img {
-        margin-left: 10px;
-      }
-    }
-
-    .disable {
-      opacity: 0.5;
-      pointer-events: none;
-    }
-
-    .stop {
-      font-size: 12px;
-      margin-top: 25px;
-      width: 151px;
-      height: 40px;
-      border: none;
-      color: white;
-      background: red;
-      border-radius: 44px;
-    }
-
-    .time {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-size: 12px;
-      margin-top: 20px;
-      width: 160px;
-
-      p {
-        color: #000000;
-        margin: 0;
-      }
-    }
-
-    &__creator {
-      font-size: 14px;
-      line-height: 32px;
-      font-weight: 500;
-      color: #2d4a17;
-      max-width: 200px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-
-      span {
-        margin-left: 5px;
-        font-size: 14px;
-        line-height: 32px;
-        font-weight: 500;
-        display: flex;
-      }
-    }
-
-    .worker {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-
-      p {
-        max-width: 170px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        font-size: 14px;
-      }
-
-      img {
-        max-width: 25px;
-        max-height: 25px;
-        margin-left: 5px;
-      }
-    }
-
-    .task__info {
-      display: flex;
-      flex-direction: column;
-      row-gap: 5px;
-
-      .delete {
-        cursor: pointer;
-      }
-
-      .executor {
-        display: flex;
-        font-size: 14px;
-        align-items: center;
-
-        p {
-          max-width: 170px;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-        }
-
-        img {
-          margin-left: 5px;
-          max-width: 25px;
-          max-height: 25px;
-        }
-      }
-
-      .dropdownList {
-        position: absolute;
-        background: white;
-        padding: 10px;
-        border-radius: 10px;
-        top: 0;
-        z-index: 10;
-        border: 1px solid gray;
-        width: 260px;
-        display: flex;
-        flex-direction: column;
-        row-gap: 8px;
-
-        .noUsers {
-          font-size: 14px;
-          text-align: center;
-        }
-
-        &__close {
-          cursor: pointer;
-          margin-left: auto;
-          width: 12px;
-          margin-right: 5px;
-        }
-
-        &__person {
-          display: flex;
-          justify-content: space-between;
-          cursor: pointer;
-
-          img {
-            max-width: 30px;
-            max-height: 30px;
-          }
-        }
-      }
-    }
-
-    &_box {
-      padding: 25px 85px 40px 40px;
-      border-bottom: 1px solid #f1f1f1;
-
-      &-middle {
-        padding: 0px 40px 25px 40px;
-        border-bottom: 1px solid #f1f1f1;
-      }
-
-      &-bottom {
-        padding: 40px 110px 75px 56px;
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 38px;
-
-        div {
-          display: flex;
-          cursor: pointer;
-          align-items: center;
-          padding-left: 10px;
-
-          p {
-            margin: 0 0 0 12px;
-          }
-        }
-
-        .edit {
-          background: #52b709;
-          border-radius: 50px;
-
-          p {
-            font-weight: 700;
-          }
-        }
-      }
-    }
-  }
-}
-
-.subtask {
-  h4 {
-    width: 90%;
-    p {
-      color: #1458dd;
-    }
-  }
-}

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

@@ -17,32 +17,54 @@
 
 .modal-tiket__content {
   background: #ffffff;
-  //border: 1px solid #dde2e4;
   border-radius: 8px;
   display: flex;
   flex-direction: row;
 
   .content {
+    position: relative;
     display: flex;
     flex-direction: column;
     width: 600px;
     margin: 26px 0 0 21px;
 
     .title-project {
-      color: #1458dd;
+      max-width: 85%;
-      font-family: "LabGrotesque", sans-serif;
       display: flex;
       align-items: center;
-      font-weight: 700;
+      flex-direction: row;
-      font-size: 22px;
-      line-height: 32px;
 
       &__category {
         margin-right: 17px;
       }
 
+      h2,
+      h3 {
+        font-weight: 700;
+        font-size: 22px;
+        line-height: 32px;
+        color: #1458dd;
+        margin: 0;
+        font-family: "LabGrotesque", sans-serif;
+      }
+
+      h2 {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        flex-direction: row;
+
+        h3 {
+          margin-left: 5px;
+          word-break: break-all;
+        }
+      }
+
       &__full {
-        margin-left: 35%;
+        position: absolute;
+        position: absolute;
+        right: 28px;
+        top: 0;
       }
     }
 
@@ -79,7 +101,7 @@
       .comments__list {
         display: flex;
         flex-direction: column;
-        max-height: 420px;
+        max-height: 300px;
         overflow: auto;
 
         &::-webkit-scrollbar {
@@ -109,8 +131,8 @@
 
           &__subComment {
             &:before {
-              content: '';
+              content: "";
-              background: #E4E4E6;
+              background: #e4e4e6;
               height: 1px;
               width: 7px;
               position: absolute;
@@ -121,9 +143,9 @@
 
           &__main {
             &:after {
-              content: '';
+              content: "";
               position: absolute;
-              background-image: url("../../../assets/images/mainTaskCommentImg.png");
+              background-image: url("assets/images/mainTaskCommentImg.png");
               width: 10px;
               height: 8px;
               top: 50px;
@@ -131,9 +153,9 @@
             }
 
             &:before {
-              content: '';
+              content: "";
               position: absolute;
-              background: #E4E4E6;
+              background: #e4e4e6;
               width: 1px;
               height: calc(100% - 120px);
               left: 29px;
@@ -236,6 +258,13 @@
       display: flex;
       flex-direction: column;
       margin-top: 10px;
+
+      textarea {
+        min-height: 120px;
+        max-height: 450px;
+        font-size: 14px;
+      }
+
       p {
         font-weight: 400;
         font-size: 14px;
@@ -258,16 +287,12 @@
       .tasks {
         justify-content: space-evenly;
 
-        button {
+        .button-green-add {
           width: 180px;
           height: 40px;
-          background: #52b709;
-          border-radius: 44px;
           font-weight: 400;
           font-size: 12px;
           line-height: 32px;
-          border: none;
-          color: #ffffff;
         }
       }
 
@@ -281,7 +306,7 @@
         justify-content: space-between;
         margin-left: 20px;
 
-        button {
+        .button-add-file {
           display: flex;
           align-items: center;
           justify-content: center;
@@ -336,6 +361,10 @@
         cursor: pointer;
         margin-right: 18px;
       }
+
+      &:focus-within {
+        border: 1px solid #0000004d;
+      }
     }
   }
 
@@ -396,6 +425,7 @@
       display: flex;
       align-items: center;
       position: relative;
+      margin-bottom: 5px;
 
       span {
         color: #000000;
@@ -406,17 +436,12 @@
         font-weight: 400;
       }
 
-      button {
+      .button-add-worker {
-        cursor: pointer;
-        background: #8bcc60;
-        border-radius: 44px;
         width: 33px;
         height: 33px;
         display: flex;
         justify-content: center;
         align-items: center;
-        border: none;
-        color: white;
         font-size: 17px;
       }
     }
@@ -605,6 +630,10 @@
             font-weight: 700;
           }
         }
+
+        p:hover {
+          text-decoration: underline;
+        }
       }
     }
   }

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

@@ -2,24 +2,6 @@ import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { Link, useNavigate, useParams } from "react-router-dom";
 
-import { Footer } from "@components/Common/Footer/Footer";
-import { Loader } from "@components/Common/Loader/Loader";
-
-import { apiRequest } from "../../../../api/request";
-import archive from "../../../../assets/icons/archive.svg";
-import archive2 from "../../../../assets/icons/archive.svg";
-import arrow from "../../../../assets/icons/arrows/arrowCalendar.png";
-import arrow2 from "../../../../assets/icons/arrows/arrowStart.png";
-import close from "../../../../assets/icons/close.png";
-import del from "../../../../assets/icons/delete.svg";
-import edit from "../../../../assets/icons/edit.svg";
-import file from "../../../../assets/icons/fileModal.svg";
-import link from "../../../../assets/icons/link.svg";
-import plus from "../../../../assets/icons/plus.svg";
-import send from "../../../../assets/icons/send.svg";
-import project from "../../../../assets/icons/trackerProject.svg";
-import tasks from "../../../../assets/icons/trackerTasks.svg";
-import watch from "../../../../assets/icons/watch.svg";
 import {
   deletePersonOnProject,
   getBoarderLoader,
@@ -27,13 +9,36 @@ import {
   modalToggle,
   setProjectBoardFetch,
   setToggleTab,
-} from "../../../../redux/projectsTrackerSlice";
+} from "@redux/projectsTrackerSlice";
-import { getCorrectRequestDate, urlForLocal } from "../../../../utils/helper";
+
-import TrackerModal from "../../../Modal/TrackerModal/TrackerModal";
+import { getCorrectRequestDate, urlForLocal } from "@utils/helper";
-import { Navigation } from "../../../Navigation/Navigation";
+
-import { ProfileBreadcrumbs } from "../../../ProfileBreadcrumbs/ProfileBreadcrumbs";
+import { apiRequest } from "@api/request";
-import { ProfileHeader } from "../../../ProfileHeader/ProfileHeader";
+
-import TrackerTaskComment from "../../../TrackerTaskComment/TrackerTaskComment";
+import BaseButton from "@components/Common/BaseButton/BaseButton";
+import { Footer } from "@components/Common/Footer/Footer";
+import { Loader } from "@components/Common/Loader/Loader";
+import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
+import { Navigation } from "@components/Navigation/Navigation";
+import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
+import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
+import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";
+
+import archive from "assets/icons/archive.svg";
+import archive2 from "assets/icons/archive.svg";
+import arrow from "assets/icons/arrows/arrowCalendar.png";
+import arrow2 from "assets/icons/arrows/arrowStart.png";
+import close from "assets/icons/close.png";
+import del from "assets/icons/delete.svg";
+import edit from "assets/icons/edit.svg";
+import file from "assets/icons/fileModal.svg";
+import link from "assets/icons/link.svg";
+import plus from "assets/icons/plus.svg";
+import send from "assets/icons/send.svg";
+import project from "assets/icons/trackerProject.svg";
+import tasks from "assets/icons/trackerTasks.svg";
+import watch from "assets/icons/watch.svg";
+
 import "./ticketFullScreen.scss";
 
 export const TicketFullScreen = () => {
@@ -262,8 +267,6 @@ export const TicketFullScreen = () => {
                   ></TrackerModal>
 
                   <div className="tasks__head__persons">
-                    {/*<img src={avatarTest} alt="avatar" />*/}
-                    {/*<img src={avatarTest} alt="avatar" />*/}
                     <span className="countPersons">
                       {projectBoard.projectUsers?.length}
                     </span>
@@ -368,25 +371,25 @@ export const TicketFullScreen = () => {
                     ) : (
                       <p>{inputsValue.description}</p>
                     )}
-                    {/*<img src={task} className="image-task"></img>*/}
                   </div>
                   <div className="content__communication">
                     <p className="tasks">
-                      <button
+                      <BaseButton
                         onClick={() => {
                           dispatch(modalToggle("addSubtask"));
                           setModalAddWorker(true);
                         }}
+                        styles={"button-green-add"}
                       >
-                        <img src={plus} alt="plus"></img>
+                        <img src={plus}></img>
                         Добавить под задачу
-                      </button>
+                      </BaseButton>
                     </p>
                     <p className="file">
-                      <button>
+                      <BaseButton styles={"button-add-file"}>
-                        <img src={file} alt="file"></img>
+                        <img src={file}></img>
                         Загрузить файл
-                      </button>
+                      </BaseButton>
                       <span>{0}</span>
                       Файлов
                     </p>
@@ -438,25 +441,28 @@ export const TicketFullScreen = () => {
                   </div>
 
                   <div className="add-worker moreItems">
-                    <button
+                    <BaseButton
                       onClick={() => {
                         dispatch(modalToggle("addWorker"));
                         setModalAddWorker(true);
                       }}
+                      styles={"button-add-worker"}
                     >
                       +
-                    </button>
+                    </BaseButton>
                     <span>Добавить исполнителя</span>
                   </div>
                   <div className="add-worker moreItems">
-                    <button
+                    <BaseButton
                       onClick={() => {
                         dispatch(modalToggle("addWorker"));
                         setModalAddWorker(true);
                       }}
+                      styles={"button-add-worker"}
                     >
                       +
-                    </button>
+                    </BaseButton>
+
                     <span>Добавить участников</span>
                   </div>
                 </div>

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

@@ -0,0 +1,409 @@
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+import {
+  addPersonToProject,
+  editColumnName,
+  editProjectName,
+  getColumnId,
+  getColumnName,
+  getColumnPriority,
+  getProjectBoard,
+  getValueModalType,
+  setColumnName,
+  setColumnPriority,
+  setProject,
+  setProjectBoardFetch,
+} from "@redux/projectsTrackerSlice";
+
+import { urlForLocal } from "@utils/helper";
+
+import { apiRequest } from "@api/request";
+
+import BaseButton from "@components/Common/BaseButton/BaseButton";
+import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
+
+import arrowDown from "assets/icons/arrows/selectArrow.png";
+
+import "./trackerModal.scss";
+
+export const TrackerModal = ({
+  active,
+  setActive,
+  selectedTab,
+  defautlInput,
+  titleProject,
+  projectId,
+  priorityTask,
+}) => {
+  const dispatch = useDispatch();
+  const projectBoard = useSelector(getProjectBoard);
+  const columnName = useSelector(getColumnName);
+  const columnId = useSelector(getColumnId);
+  const columnPriority = useSelector(getColumnPriority);
+
+  const modalType = useSelector(getValueModalType);
+  const [projectName, setProjectName] = useState(defautlInput);
+  const [valueColumn, setValueColumn] = useState("");
+  const [nameProject, setNameProject] = useState("");
+  const [valueTiket, setValueTiket] = useState("");
+  const [descriptionTicket, setDescriptionTicket] = useState("");
+  const [workers, setWorkers] = useState([]);
+  const [selectWorkersOpen, setSelectWorkersOpen] = useState(false);
+  const [selectedWorker, setSelectedWorker] = useState(null);
+
+  function createTab() {
+    if (!valueColumn) {
+      return;
+    }
+
+    apiRequest("/project-column/create-column", {
+      method: "POST",
+      data: {
+        project_id: projectBoard.id,
+        priority: projectBoard.columns.length
+          ? projectBoard.columns.at(-1).priority + 1
+          : 1,
+        title: valueColumn,
+      },
+    }).then(() => {
+      dispatch(setProjectBoardFetch(projectBoard.id));
+    });
+    setValueColumn("");
+    setActive(false);
+  }
+
+  function createTiket() {
+    if (!valueTiket || !descriptionTicket) {
+      return;
+    }
+
+    apiRequest("/task/create-task", {
+      method: "POST",
+      data: {
+        project_id: projectBoard.id,
+        title: valueTiket,
+        description: descriptionTicket,
+        status: 1,
+        user_id: localStorage.getItem("id"),
+        column_id: selectedTab,
+        priority: priorityTask,
+      },
+    }).then(() => {
+      dispatch(setProjectBoardFetch(projectBoard.id));
+    });
+
+    setActive(false);
+    setValueTiket("");
+    setDescriptionTicket("");
+  }
+
+  function editProject() {
+    apiRequest("/project/update", {
+      method: "PUT",
+      data: {
+        project_id: projectId,
+        name: projectName,
+      },
+    }).then(() => {
+      setActive(false);
+      dispatch(editProjectName({ id: projectId, name: projectName }));
+    });
+  }
+
+  function changeColumnParams() {
+    projectBoard.columns.forEach((column) => {
+      if (column.id === columnId && column.priority !== columnPriority) {
+        const priorityColumns = [
+          {
+            column_id: column.id,
+            priority: Number(columnPriority),
+          },
+        ];
+        for (let i = column.priority; i < columnPriority; i++) {
+          const currentColumn = {
+            column_id: projectBoard.columns[i].id,
+            priority: i,
+          };
+          priorityColumns.push(currentColumn);
+        }
+        for (let i = column.priority; i > columnPriority; i--) {
+          const currentColumn = {
+            column_id: projectBoard.columns[i - 2].id,
+            priority: i,
+          };
+          priorityColumns.push(currentColumn);
+        }
+        apiRequest("/project-column/set-priority", {
+          method: "POST",
+          data: {
+            project_id: projectBoard.id,
+            data: JSON.stringify(priorityColumns),
+          },
+        }).then(() => {
+          dispatch(setProjectBoardFetch(projectBoard.id));
+        });
+      }
+    });
+    changeColumnTitle();
+  }
+
+  function changeColumnTitle() {
+    apiRequest("/project-column/update-column", {
+      method: "PUT",
+      data: {
+        column_id: columnId,
+        title: columnName,
+      },
+    }).then(() => {
+      setActive(false);
+      dispatch(editColumnName({ id: columnId, title: columnName }));
+    });
+  }
+
+  function createProject() {
+    if (nameProject === "") {
+      return;
+    } else {
+      apiRequest("/project/create", {
+        method: "POST",
+        data: {
+          user_id: localStorage.getItem("id"),
+          name: nameProject,
+          status: 19,
+        },
+      }).then((res) => {
+        const result = { ...res, columns: [] };
+        dispatch(setProject(result));
+        setActive(false);
+        setNameProject("");
+      });
+    }
+  }
+
+  function addUserToProject() {
+    apiRequest("/project/add-user", {
+      method: "POST",
+      data: {
+        user_id: selectedWorker.user_id,
+        project_id: projectBoard.id,
+      },
+    }).then((el) => {
+      dispatch(addPersonToProject(el));
+      setActive(false);
+      setSelectedWorker("");
+      setSelectWorkersOpen(false);
+    });
+  }
+
+  useEffect(() => {
+    modalType === "addWorker"
+      ? apiRequest("/project/my-employee").then((el) => {
+          let persons = el.managerEmployees;
+          let ids = projectBoard.projectUsers.map((user) => user.user_id);
+          setWorkers(
+            persons.reduce((acc, cur) => {
+              if (!ids.includes(cur.user_id)) acc.push(cur);
+              return acc;
+            }, [])
+          );
+        })
+      : "";
+  }, [active]);
+
+  return (
+    <ModalLayout
+      active={active}
+      setActive={setActive}
+      // onClick={() => {
+      //   setSelectWorkersOpen(false);
+      // }}
+    >
+      {modalType === "addWorker" && (
+        <div>
+          <div className="title-project">
+            <h4>Добавьте участника</h4>
+            {/*<div className="input-container">*/}
+            {/*  <input*/}
+            {/*    className="name-project"*/}
+            {/*    value={emailWorker}*/}
+            {/*    onChange={(e) => setEmailWorker(e.target.value)}*/}
+            {/*  />*/}
+            {/*</div>*/}
+            <div
+              className={
+                selectWorkersOpen ? "select__worker open" : "select__worker"
+              }
+              onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}
+            >
+              <p>
+                {selectedWorker
+                  ? selectedWorker.employee.fio
+                  : "Выберите пользователя"}
+              </p>
+              <img className="arrow" src={arrowDown} alt="arrow" />
+              {Boolean(selectWorkersOpen) && (
+                <div className="select__worker__dropDown">
+                  {Boolean(workers.length) ? (
+                    workers.map((worker) => {
+                      if (worker === selectedWorker) {
+                        return;
+                      }
+                      return (
+                        <div
+                          className="worker"
+                          key={worker.id}
+                          onClick={() => {
+                            setSelectedWorker(worker);
+                          }}
+                        >
+                          <p>{worker.employee.fio}</p>
+                          <img
+                            src={urlForLocal(worker.employee.avatar)}
+                            alt="avatar"
+                          />
+                        </div>
+                      );
+                    })
+                  ) : (
+                    <div>Нет пользователей</div>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+          <BaseButton styles={"button-add"} onClick={addUserToProject}>
+            Добавить
+          </BaseButton>
+        </div>
+      )}
+      {modalType === "createTiketProject" && (
+        <div>
+          <div className="title-project">
+            <h4>Введите название и описание задачи</h4>
+            <div className="input-container">
+              <input
+                className="name-project"
+                value={valueTiket}
+                onChange={(e) => setValueTiket(e.target.value)}
+                placeholder="Название задачи"
+              />
+            </div>
+            <div className="input-container">
+              <input
+                className="name-project"
+                value={descriptionTicket}
+                onChange={(e) => setDescriptionTicket(e.target.value)}
+                placeholder="Описание задачи"
+              />
+            </div>
+          </div>
+          <BaseButton styles={"button-add"} onClick={createTiket}>
+            Создать
+          </BaseButton>
+        </div>
+      )}
+      {modalType === "editProject" && (
+        <div>
+          <div className="title-project">
+            <h4>Введите новое название</h4>
+            <div className="input-container">
+              <input
+                className="name-project"
+                value={projectName}
+                onChange={(e) => setProjectName(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <BaseButton styles={"button-add"} onClick={editProject}>
+            Сохранить
+          </BaseButton>
+        </div>
+      )}
+      {modalType === "createProject" && (
+        <div>
+          <div className="title-project">
+            <h4>{titleProject}</h4>
+            <div className="input-container">
+              <input
+                className="name-project"
+                value={nameProject}
+                onChange={(e) => setNameProject(e.target.value)}
+              />
+            </div>
+            <BaseButton styles={"button-add"} onClick={createProject}>
+              Создать
+            </BaseButton>
+          </div>
+        </div>
+      )}
+      {modalType === "addSubtask" && (
+        <div>
+          <div className="title-project subtask">
+            <h4>
+              Вы добавляете подзадачу{" "}
+              <p>в колонку(id) задачи "{defautlInput}"</p>
+            </h4>
+            <p className="title-project__decs">Введите текст</p>
+            <div>
+              <textarea className="title-project__textarea"></textarea>
+            </div>
+          </div>
+          <BaseButton styles={"button-add"} onClick={(e) => e.preventDefault()}>
+            Добавить
+          </BaseButton>
+        </div>
+      )}
+      {modalType === "createColumn" && (
+        <div>
+          <div className="title-project">
+            <h4>Введите название колонки</h4>
+            <div className="input-container">
+              <input
+                className="name-project"
+                value={valueColumn}
+                onChange={(e) => setValueColumn(e.target.value)}
+              />
+            </div>
+          </div>
+          <BaseButton styles={"button-add"} onClick={createTab}>
+            Создать
+          </BaseButton>
+        </div>
+      )}
+      {modalType === "editColumn" && (
+        <div>
+          <div className="title-project">
+            <h4>Введите новое название</h4>
+            <div className="input-container">
+              <input
+                className="name-project"
+                value={columnName}
+                onChange={(e) => dispatch(setColumnName(e.target.value))}
+              />
+            </div>
+            <h4>Приоритет колонки</h4>
+            <div className="input-container">
+              <input
+                className="name-project"
+                placeholder="Приоритет колонки"
+                type="number"
+                step="1"
+                value={columnPriority}
+                onChange={(e) => dispatch(setColumnPriority(e.target.value))}
+              />
+            </div>
+          </div>
+          <BaseButton styles={"button-add"} onClick={changeColumnParams}>
+            Сохранить
+          </BaseButton>
+        </div>
+      )}
+
+      <span className="exit" onClick={() => setActive(false)}></span>
+    </ModalLayout>
+  );
+};
+
+export default TrackerModal;

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

@@ -0,0 +1,171 @@
+//Удалить при переходе всех модалок в обертку modalLayout
+.modal-add {
+  z-index: 9;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.11);
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: scale(0);
+
+  &__content {
+    position: relative;
+    width: 424px;
+    background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
+    border-radius: 24px;
+
+    padding: 60px 60px 30px 60px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.title-project {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  margin: 0 0 15px 0;
+
+  .input-container {
+    width: 287px;
+    height: 35px;
+    background: #ffffff;
+    border-radius: 8px;
+    margin: 12px 0;
+
+    input::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+    }
+  }
+
+  h4 {
+    font-weight: 500;
+    font-size: 22px;
+    line-height: 26px;
+    color: #263238 !important;
+  }
+
+  &__decs {
+    font-weight: 300;
+    font-size: 12px;
+    line-height: 14px;
+    margin: 12px 0 16px 0;
+  }
+
+  &__textarea {
+    resize: none;
+    width: 302px;
+    height: 83px;
+    background: #ffffff;
+    border-radius: 8px;
+    border: none;
+    font-size: 15px;
+    line-height: 18px;
+  }
+
+  .select__worker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+    background: white;
+    border-radius: 5px;
+    cursor: pointer;
+    width: 100%;
+    position: relative;
+
+    p {
+      max-width: 150px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      font-size: 14px;
+    }
+
+    img {
+      transition: all 0.3s ease;
+      width: 16px;
+      height: 16px;
+    }
+
+    &__dropDown {
+      display: flex;
+      flex-direction: column;
+      position: absolute;
+      width: 100%;
+      padding: 5px;
+      top: 35px;
+      left: 0;
+      background: white;
+      border-radius: 5px;
+      row-gap: 5px;
+
+      .worker {
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+  }
+
+  .open {
+    .arrow {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+.name-project {
+  margin-left: 10px;
+  border: none;
+  outline: none;
+  height: 100%;
+  width: 90%;
+  font-size: 14px;
+}
+
+.button-add {
+  width: 130px;
+  height: 37px;
+
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 32px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+}
+
+.modal-add.active {
+  transform: scale(1);
+}
+
+.exit {
+  cursor: pointer;
+  position: absolute;
+  top: 35px;
+  right: 40px;
+
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    width: 16px;
+    height: 2px;
+    background: #263238;
+  }
+
+  &:before {
+    transform: rotate(45deg);
+  }
+  &:after {
+    transform: rotate(-45deg);
+  }
+}

src/components/Modal/TrackerModal/trackerModal.scss

@@ -1,171 +0,0 @@
-.modal-add {
-  z-index: 9;
-  height: 100%;
-  width: 100%;
-  background-color: rgba(0, 0, 0, 0.11);
-  position: fixed;
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transform: scale(0);
-
-  &__content {
-    position: relative;
-    width: 424px;
-    background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
-    border-radius: 24px;
-
-    padding: 60px 60px 30px 60px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .title-project {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-
-    .input-container {
-      width: 287px;
-      height: 35px;
-      background: #ffffff;
-      border-radius: 8px;
-      margin: 12px 0;
-
-      input::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-      }
-    }
-
-    h4 {
-      font-weight: 500;
-      font-size: 22px;
-      line-height: 26px;
-      color: #263238 !important;
-    }
-
-    &__decs {
-      font-weight: 300;
-      font-size: 12px;
-      line-height: 14px;
-      margin: 12px 0 16px 0;
-    }
-
-    &__textarea {
-      resize: none;
-      width: 302px;
-      height: 83px;
-      background: #ffffff;
-      border-radius: 8px;
-      border: none;
-      font-size: 15px;
-      line-height: 18px;
-    }
-
-    .select__worker {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 5px;
-      background: white;
-      border-radius: 5px;
-      cursor: pointer;
-      width: 100%;
-      position: relative;
-
-      p {
-        max-width: 150px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        font-size: 14px;
-      }
-
-      img {
-        transition: all 0.3s ease;
-        width: 16px;
-        height: 16px;
-      }
-
-      &__dropDown {
-        display: flex;
-        flex-direction: column;
-        position: absolute;
-        width: 100%;
-        padding: 5px;
-        top: 35px;
-        left: 0;
-        background: white;
-        border-radius: 5px;
-        row-gap: 5px;
-
-        .worker {
-          display: flex;
-          justify-content: space-between;
-        }
-      }
-    }
-
-    .open {
-      .arrow {
-        transform: rotate(180deg);
-      }
-    }
-  }
-
-  .name-project {
-    margin-left: 10px;
-    border: none;
-    outline: none;
-    height: 100%;
-    width: 90%;
-    font-size: 14px;
-  }
-
-  .button-add {
-    width: 130px;
-    height: 37px;
-    background: #52b709;
-    border-radius: 44px;
-    border: none;
-    font-weight: 400;
-    font-size: 15px;
-    line-height: 32px;
-    color: #ffffff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0 auto;
-  }
-}
-
-.modal-add.active {
-  transform: scale(1);
-}
-
-.exit {
-  cursor: pointer;
-  position: absolute;
-  top: 35px;
-  right: 40px;
-
-  &:before,
-  &:after {
-    content: "";
-    position: absolute;
-    width: 16px;
-    height: 2px;
-    background: #263238;
-  }
-
-  &:before {
-    transform: rotate(45deg);
-  }
-  &:after {
-    transform: rotate(-45deg);
-  }
-}

src/components/ProjectTiket/ProjectTiket.jsx

@@ -7,7 +7,7 @@ import { deleteProject, modalToggle } from "@redux/projectsTrackerSlice";
 import { apiRequest } from "@api/request";
 
 import { ModalSelect } from "@components/Modal/ModalSelect/ModalSelect";
-import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
+import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
 
 import archiveSet from "assets/icons/archive.svg";
 import del from "assets/icons/delete.svg";

src/components/ProjectTiket/projectTiket.scss

@@ -6,6 +6,12 @@
   padding: 17px 26px 16px;
   cursor: pointer;
   max-width: 440px;
+  transition: 0.4s;
+
+  &:hover {
+    transition: 0.4s;
+    box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
+  }
 
   @media (max-width: 1068px) {
     width: 47%;

src/components/TrackerTaskComment/TrackerTaskComment.jsx

@@ -1,12 +1,15 @@
 import React, { useState } from "react";
 
-import { apiRequest } from "../../api/request";
+import { urlForLocal } from "@utils/helper";
-import del from "../../assets/icons/delete.svg";
+
-import edit from "../../assets/icons/edit.svg";
+import { apiRequest } from "@api/request";
-import accept from "../../assets/images/accept.png";
+
-import { urlForLocal } from "../../utils/helper";
+import { getCorrectDate } from "@components/Calendar/calendarHelper";
-import { getCorrectDate } from "../Calendar/calendarHelper";
+import TrackerTaskSubComment from "@components/TrackerTaskComment/TrackerTaskComment";
-import TrackerTaskSubComment from "../TrackerTaskComment/TrackerTaskComment";
+
+import del from "assets/icons/delete.svg";
+import edit from "assets/icons/edit.svg";
+import accept from "assets/images/accept.png";
 
 export const TrackerTaskComment = ({
   taskId,

src/pages/ProjectTracker/ProjectTracker.js

@@ -2,25 +2,6 @@ import React, { useEffect, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { Link, useParams } from "react-router-dom";
 
-import { Footer } from "@components/Common/Footer/Footer";
-import { Loader } from "@components/Common/Loader/Loader";
-
-import { apiRequest } from "../../api/request";
-import archive from "../../assets/icons/archiveTracker.svg";
-import arrow from "../../assets/icons/arrows/arrowCalendar.png";
-import close from "../../assets/icons/close.png";
-import commentsBoard from "../../assets/icons/commentsBoard.svg";
-import del from "../../assets/icons/delete.svg";
-import edit from "../../assets/icons/edit.svg";
-import filesBoard from "../../assets/icons/filesBoard.svg";
-import project from "../../assets/icons/trackerProject.svg";
-import tasks from "../../assets/icons/trackerTasks.svg";
-import accept from "../../assets/images/accept.png";
-import TrackerModal from "../../components/Modal/TrackerModal/TrackerModal";
-import { Navigation } from "../../components/Navigation/Navigation";
-import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
-import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
-import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
 import {
   activeLoader,
   deletePersonOnProject,
@@ -36,8 +17,31 @@ import {
   setColumnPriority,
   setProjectBoardFetch,
   setToggleTab,
-} from "../../redux/projectsTrackerSlice";
+} from "@redux/projectsTrackerSlice";
-import { urlForLocal } from "../../utils/helper";
+
+import { urlForLocal } from "@utils/helper";
+
+import { apiRequest } from "@api/request";
+
+import BaseButton from "@components/Common/BaseButton/BaseButton";
+import { Footer } from "@components/Common/Footer/Footer";
+import { Loader } from "@components/Common/Loader/Loader";
+import ModalTicket from "@components/Modal/Tracker/ModalTicket/ModalTicket";
+import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
+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 arrow from "assets/icons/arrows/arrowCalendar.png";
+import close from "assets/icons/close.png";
+import commentsBoard from "assets/icons/commentsBoard.svg";
+import del from "assets/icons/delete.svg";
+import edit from "assets/icons/edit.svg";
+import filesBoard from "assets/icons/filesBoard.svg";
+import project from "assets/icons/trackerProject.svg";
+import tasks from "assets/icons/trackerTasks.svg";
+import accept from "assets/images/accept.png";
 
 export const ProjectTracker = () => {
   const dispatch = useDispatch();
@@ -295,14 +299,23 @@ export const ProjectTracker = () => {
                   <h4>Проект : {projectBoard.name}</h4>
 
                   <div className="tasks__head__add">
-                    <span
+                    <BaseButton
+                      onClick={() => {
+                        dispatch(modalToggle("createColumn"));
+                        setModalAdd(true);
+                      }}
+                      styles={"button-add-column"}
+                    >
+                      +
+                    </BaseButton>
+                    {/* <span
                       onClick={() => {
                         dispatch(modalToggle("createColumn"));
                         setModalAdd(true);
                       }}
                     >
                       +
-                    </span>
+                    </span> */}
                     <p>добавить колонку</p>
                   </div>
                   <div className="tasks__head__persons">

src/pages/Tracker/Tracker.js

@@ -14,9 +14,10 @@ import { urlForLocal } from "@utils/helper";
 import { apiRequest } from "@api/request";
 
 import { getCorrectDate } from "@components/Calendar/calendarHelper";
+import BaseButton from "@components/Common/BaseButton/BaseButton";
 import { Footer } from "@components/Common/Footer/Footer";
 import { Loader } from "@components/Common/Loader/Loader";
-import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
+import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
 import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
@@ -190,15 +191,16 @@ export const Tracker = () => {
                       <img src={noProjects} alt="noProjectImg" />
                       <p>Создайте свой первый проект</p>
                     </div>
-                    <button
+
-                      className="createProjectBtn"
+                    <BaseButton
+                      styles={"createProjectBtn"}
                       onClick={() => {
                         dispatch(modalToggle("createProject"));
                         setModalCreateProject(true);
                       }}
                     >
                       <span>+</span>Создать проект
-                    </button>
+                    </BaseButton>
                   </div>
                   <p className="no-projects__info">
                     Ставьте задачи, следите за прогрессом, ведите учёт рабочего
@@ -208,15 +210,15 @@ export const Tracker = () => {
               )}
             {Boolean(projects.length) && !loader && (
               <div className="create-newProject">
-                <button
+                <BaseButton
-                  className="createProjectBtn"
+                  styles="createProjectBtn"
                   onClick={() => {
                     dispatch(modalToggle("createProject"));
                     setModalCreateProject(true);
                   }}
                 >
                   <span>+</span>Создать проект
-                </button>
+                </BaseButton>
                 <p>
                   Ставьте задачи, следите за прогрессом, ведите учёт рабочего
                   времени

src/pages/Tracker/tracker.scss

@@ -142,8 +142,6 @@
                 margin-left: 17px;
               }
             }
-            button {
-            }
           }
 
           &__info {
@@ -155,16 +153,11 @@
         }
 
         .createProjectBtn {
-          background: #52b709;
-          border-radius: 44px;
           max-width: 188px;
           height: 50px;
           width: 100%;
-          border: none;
           font-weight: 400;
           font-size: 15px;
-          line-height: 32px;
-          color: #ffffff;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -228,17 +221,17 @@
             font-size: 22px;
             line-height: 32px;
             margin-bottom: 0;
+            max-width: 30%;
+            word-break: break-all;
           }
 
           &__add {
             display: flex;
-            span {
+            margin: 0 15px 0 10px;
+
+            .button-add-column {
               width: 33px;
               height: 33px;
-              background: #52b709;
-              border-radius: 44px;
-              color: whitesmoke;
-              cursor: pointer;
               font-size: 15px;
               display: flex;
               align-items: center;
@@ -315,7 +308,7 @@
               z-index: 2;
               display: flex;
               flex-direction: column;
-              background: linear-gradient(180deg, #FFFFFF 0%, #EBEBEB 100%);
+              background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
               border-radius: 40px;
               padding: 33px 24px 44px 34px;
               width: 425px;
@@ -323,15 +316,16 @@
 
               &__close {
                 cursor: pointer;
-                width: 8px;
+                position: absolute;
-                height: 8px;
+                right: 20px;
+                top: 15px;
                 margin-left: auto;
               }
 
               &__count {
                 display: flex;
                 align-items: end;
-                color: #1458DD;
+                color: #1458dd;
                 font-size: 22px;
                 margin-top: 10px;
                 span {
@@ -355,7 +349,7 @@
                 span {
                   width: auto;
                   height: auto;
-                  color: #1458DD;
+                  color: #1458dd;
                   font-weight: 600;
                   font-size: 18px;
                   line-height: 22px;
@@ -397,8 +391,8 @@
 
                 .delete {
                   cursor: pointer;
-                  width: 14px;
+                  width: 20px;
-                  height: 14px;
+                  height: 20px;
                 }
               }
 
@@ -407,7 +401,7 @@
                 cursor: pointer;
 
                 span {
-                  background: #8BCC60;
+                  background: #8bcc60;
                   left: 0;
                 }
 
@@ -424,6 +418,7 @@
           }
 
           &__checkBox {
+            margin: 0 15px 0 0;
             cursor: pointer;
             display: flex;
             align-items: center;
@@ -771,6 +766,10 @@
               max-width: 450px;
               width: 100%;
 
+              &:focus-within {
+                border: 1px solid #0000004d;
+              }
+
               @media (max-width: 690px) {
                 max-width: 350px;
               }
@@ -834,8 +833,15 @@
               border-radius: 12px;
               padding: 12px 42px 7px 32px;
               justify-content: space-between;
+              transition: 0.4s;
               cursor: pointer;
 
+              &:hover {
+                transform: scale(0.99);
+                box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
+                transition: 0.4s;
+              }
+
               &__info {
                 display: flex;
                 flex-direction: column;
@@ -968,9 +974,12 @@
             background: #f1f1f1;
             border-radius: 12px;
             padding: 12px 42px 7px 32px;
+            transition: 0.4s;
 
             &:hover {
-              background: var(--ds-background-neutral-subtle-hovered, #f4f5f7);
+              transform: scale(0.99);
+              box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
+              transition: 0.4s;
             }
 
             p {
@@ -1047,6 +1056,10 @@
               max-width: 300px;
               width: 100%;
 
+              &:focus-within {
+                border: 1px solid #0000004d;
+              }
+
               @media (max-width: 590px) {
                 max-width: 230px;
               }