Finished working in paginations

src/components/AllTaskTableTracker/AllTaskTableItem/AllTaskTableItem.jsx

@@ -2,9 +2,11 @@ import React from "react";
 
 import plus from "assets/icons/plus.svg";
 
+import "./allTaskTableItem.scss";
+
 const AllTaskTableItem = ({ task, projects }) => {
   function toggleDescTask(e) {
-    e.target.closest("img").classList.toggle("open-desc-item");
+    e.target?.classList.toggle("open-desc-item");
     e.target
       .closest("td")
       ?.querySelector(".taskList__table__name-project")
@@ -17,13 +19,13 @@ const AllTaskTableItem = ({ task, projects }) => {
         <div className="taskList__table__title-task">
           <p>{task.title}</p>
 
-          <div
+          <img
+            src={plus}
+            alt="#"
             onClick={(e) => {
               toggleDescTask(e);
             }}
-          >
-            <img src={plus} alt="#" />
-          </div>
+          />
         </div>
         <div className="taskList__table__name-project hide-desc">
           <h4>Проект:</h4>

src/components/AllTaskTableTracker/AllTaskTableItem/AllTaskTableItem.scss

@@ -0,0 +1,117 @@
+.open-desc-item {
+  transition: 0.4s !important;
+  transform: rotate(45deg) !important;
+}
+
+.taskList {
+  &__table {
+    margin-top: 20px;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 32px;
+
+    thead {
+      height: 65px;
+      background: #f1f1f1;
+      color: #5b6871;
+
+      th {
+        &:first-child {
+          padding-left: 10px;
+          border-top-left-radius: 12px;
+          border-bottom-left-radius: 12px;
+        }
+        &:last-child {
+          border-top-right-radius: 12px;
+          border-bottom-right-radius: 12px;
+        }
+      }
+    }
+
+    tbody {
+      color: #000;
+      tr {
+        background-color: white;
+
+        &:nth-child(2n) {
+          background-color: rgba(241, 241, 241, 0.23);
+        }
+      }
+
+      td {
+        height: 65px;
+        border-bottom: 1px solid rgba(241, 241, 241, 1);
+
+        &:first-child {
+          max-width: 275px;
+          padding-left: 10px;
+          color: #111112;
+          font-size: 17px;
+          font-weight: 700;
+        }
+      }
+
+      .task-status {
+        width: 130px;
+        border: 1px solid #52b709;
+        border-radius: 15px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #000;
+        font-size: 14px;
+        font-weight: 400;
+      }
+    }
+
+    &__title-task {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      transition: 0.4s;
+      max-width: 350px;
+
+      p {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+
+      img {
+        cursor: pointer;
+        width: 22px;
+        height: 22px;
+
+        transition: 0.4s;
+        transform: rotate(0deg);
+      }
+    }
+
+    &__name-project {
+      display: flex;
+      flex-direction: column;
+      transition: 0.4s;
+
+      h4 {
+        margin: 0;
+        color: #807777;
+        font-size: 10px;
+        font-weight: 500;
+        line-height: 24px;
+      }
+
+      p {
+        color: #000;
+        margin-top: -5px;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 32px;
+        max-width: 318px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+    }
+  }
+}