new tracker

src/index.css

@@ -26,6 +26,10 @@ h1 {
   position: relative !important;
 }
 
+p {
+  margin-bottom: 0;
+}
+
 @media (max-width: 568px) {
   .col-xs-12 {
     width: 100% !important;

src/pages/Tracker/Tracker.js

@@ -17,13 +17,14 @@ import avatarTest from "../../images/AvatarTest .png";
 import selectArrow from "../../images/select.svg";
 import commentsBoard from "../../images/commentsBoard.svg";
 import filesBoard from "../../images/filesBoard.svg";
-import search from "../../images/search.svg";
+import search from "../../images/serchIcon.png";
+import noProjects from "../../images/noProjects.png"
+import arrow from '../../images/arrowCalendar.png'
 
 import "./tracker.scss";
 
 export const Tracker = () => {
   const [toggleTab, setToggleTab] = useState(1);
-
   const [tabTaskMok, setTabTaskMok] = useState([
     {
       name: "Открытые",
@@ -132,102 +133,224 @@ export const Tracker = () => {
     },
   ]);
 
+  const [allTasks] = useState([
+    {
+      name: "PR - 2245",
+      description: "Сверстать часть таблицы. Сверстать часть таблицы",
+      dateComplete: "7 марта 2023 г",
+      avatarDo: avatarTest,
+      project: "Будущее России"
+    },
+    {
+      name: "PR - 2245",
+      description: "Сверстать часть таблицы. Сверстать часть таблицы",
+      dateComplete: "7 марта 2023 г",
+      avatarDo: avatarTest,
+      project: "Будущее России"
+    },
+    {
+      name: "PR - 2245",
+      description: "Сверстать часть таблицы. Сверстать часть таблицы",
+      dateComplete: "7 марта 2023 г",
+      avatarDo: avatarTest,
+      project: "Будущее России"
+    },
+    {
+      name: "PR - 2245",
+      description: "Сверстать часть таблицы. Сверстать часть таблицы",
+      dateComplete: "7 марта 2023 г",
+      avatarDo: avatarTest,
+      project: "Будущее России"
+    },
+    {
+      name: "PR - 2245",
+      description: "Сверстать часть таблицы. Сверстать часть таблицы",
+      dateComplete: "7 марта 2023 г",
+      avatarDo: avatarTest,
+      project: "Будущее России"
+    },
+    {
+      name: "PR - 2245",
+      description: "Сверстать часть таблицы. Сверстать часть таблицы",
+      dateComplete: "7 марта 2023 г",
+      avatarDo: avatarTest,
+      project: "Будущее России"
+    },
+    {
+      name: "PR - 2245",
+      description: "Сверстать часть таблицы. Сверстать часть таблицы",
+      dateComplete: "7 марта 2023 г",
+      avatarDo: avatarTest,
+      project: "Будущее России"
+    },
+    {
+      name: "PR - 2245",
+      description: "Сверстать часть таблицы. Сверстать часть таблицы",
+      dateComplete: "7 марта 2023 г",
+      avatarDo: avatarTest,
+      project: "Будущее России"
+    },
+    {
+      name: "PR - 2245",
+      description: "Сверстать часть таблицы. Сверстать часть таблицы",
+      dateComplete: "7 марта 2023 г",
+      avatarDo: avatarTest,
+      project: "Будущее России"
+    },
+  ])
+
+  const [archiveProjects] = useState([
+      {
+        name: "Будущее России",
+        date: "7 марта 2023 г"
+      },
+      {
+        name: "Будущее России",
+        date: "7 марта 2023 г"
+      },
+      {
+        name: "Будущее России",
+        date: "7 марта 2023 г"
+      },
+      {
+        name: "Будущее России",
+        date: "7 марта 2023 г"
+      },
+      {
+        name: "Будущее России",
+        date: "7 марта 2023 г"
+      },
+      {
+        name: "Будущее России",
+        date: "7 марта 2023 г"
+      },
+      {
+        name: "Будущее России",
+        date: "7 марта 2023 г"
+      },
+      {
+        name: "Будущее России",
+        date: "7 марта 2023 г"
+      },
+      {
+        name: "Будущее России",
+        date: "7 марта 2023 г"
+      },
+    ]
+  )
+
   const [completeTasks] = useState([
     {
       name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
       name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
       name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
       name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
       name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
       name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
       name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
       name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
       name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
-      name: "PK - 2245",
+      name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
-      name: "PE - 2245",
+      name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
-      name: "PA - 2245",
+      name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
-      name: "PB - 2245",
+      name: "PR - 2245",
-      description: "Верстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
-      avatarDo: avatarTest,
-    },
-    {
-      name: "PC - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
-      name: "PD - 2245",
+      name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
     },
     {
-      name: "PA - 2245",
+      name: "PR - 2245",
       description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: "07/мар/23",
+      dateComplete: "7 марта 2023 г",
       avatarDo: avatarTest,
+      project: "Будущее России"
+    },
+    {
+      name: "PR - 2245",
+      description: "Сверстать часть таблицы. Сверстать часть таблицы",
+      dateComplete: "7 марта 2023 г",
+      avatarDo: avatarTest,
+      project: "Будущее России"
     },
   ]);
 
@@ -242,6 +365,8 @@ export const Tracker = () => {
   const [valueColl, setValueColl] = useState("");
   //
 
+  const [projectTasksOpen, setProjectTasksOpen] = useState(false)
+
   const [selectedTab, setSelectedTab] = useState({
     name: "",
     indexTab: 0,
@@ -259,6 +384,9 @@ export const Tracker = () => {
   const projects = useSelector(getProjects);
 
   const toggleTabs = (index) => {
+    if (projectTasksOpen) {
+      setProjectTasksOpen(false)
+    }
     setToggleTab(index);
   };
 
@@ -403,7 +531,9 @@ export const Tracker = () => {
             {name: 'Трекер', link: '/profile/tracker'}
           ]}
           />
-          <h2 className="tracker__title">Трекер</h2>
+          <h2 className="tracker__title">Управление проектами с трекером</h2>
+        </div>
+      </div>
       <div className="tracker__tabs">
         <div className="tracker__tabs__head">
           <div
@@ -418,7 +548,7 @@ export const Tracker = () => {
               onClick={() => toggleTabs(2)}
           >
             <img src={tasks} alt="img" />
-                <p>Задачи</p>
+            <p>Все мои задачи</p>
           </div>
           <div
               className={toggleTab === 3 ? "tab active-tab" : "tab"}
@@ -432,13 +562,19 @@ export const Tracker = () => {
           <div
               className={
                 toggleTab === 1
-                    ? "tracker__tabs__content__projects active__content"
+                    ? "tracker__tabs__content__projects active__content tracker__tabs__content__wrapper"
-                    : "tracker__tabs__content__projects"
+                    : "tracker__tabs__content__projects tracker__tabs__content__wrapper"
               }
           >
-                {projects.map((project, index) => {
+            <ModalCreate
+                active={modalCreateProject}
+                setActive={setModalCreateProject}
+                title={"Укажите название проекта:"}
+            />
+            {Boolean(projects.length) && !projectTasksOpen &&
+              projects.map((project, index) => {
                 return (
-                    <div className="project" key={index}>
+                    <div className="project" key={index} onClick={() => setProjectTasksOpen(true)}>
                       <h3>{project.name}</h3>
                       <div className="project__info">
                         <p>Открытые задачи</p>
@@ -448,23 +584,38 @@ export const Tracker = () => {
                     </div>
                 );
               })}
-                <ModalCreate
+              {!Boolean(projects.length) && !projectTasksOpen &&
-                  active={modalCreateProject}
+                <div className="no-projects">
-                  setActive={setModalCreateProject}
+                  <div className="no-projects__createNew">
-                  title={"Укажите название проекта:"}
+                    <div>
-                />
+                      <img src={noProjects} alt="noProjectImg" />
-                <button onClick={() => setModalCreateProject(true)}>
+                      <p>Создайте свой первый проект</p>
+                    </div>
+                    <button className="createProjectBtn" onClick={() => setModalCreateProject(true)}>
                       <span>+</span>Создать проект
                     </button>
                   </div>
+                  <p className="no-projects__info">Ставьте задачи, следите за прогрессом, ведите учёт рабочего времени</p>
+                </div>
+              }
+            {Boolean(projects.length) && !projectTasksOpen &&
+              <div className="create-newProject">
+                <button className="createProjectBtn" onClick={() => setModalCreateProject(true)}>
+                  <span>+</span>Создать проект
+                </button>
+                <p>Ставьте задачи, следите за прогрессом, ведите учёт рабочего времени</p>
+              </div>
+            }
+          </div>
           <div
               className={
-                  toggleTab === 2
+                toggleTab === 1 && projectTasksOpen
                     ? "tracker__tabs__content__tasks tasks active__content"
                     : "tracker__tabs__content__projects"
               }
           >
             <div className="tasks__head">
+              <div className="tasks__head__wrapper">
                 <h4>Проект : Разработка трекера</h4>
                 <div
                     className={
@@ -491,18 +642,20 @@ export const Tracker = () => {
                     </button>
                   </div>
                 </div>
+                <div className="tasks__head__add">
                   <span
-                    className="tasks__head__add"
                       onClick={() => setModalCreateColl(true)}
                   >
                         +
                   </span>
+                  <p>добавить задачу в проект</p>
+                </div>
                 <div className="tasks__head__persons">
                   <img src={avatarTest} alt="avatar" />
                   <img src={avatarTest} alt="avatar" />
-                    <img src={avatarTest} alt="avatar" />
+                  <span className="countPersons">+9</span>
-                    <img src={avatarTest} alt="avatar" />
+                  <span className="addPerson">+</span>
-                    <span>+9</span>
+                  <p>добавить участника в проект</p>
                 </div>
                 <div className="tasks__head__select">
                   <span>Учавствую</span>
@@ -512,6 +665,11 @@ export const Tracker = () => {
                   <span>Мои</span>
                   <img src={selectArrow} alt="arrow" />
                 </div>
+                <div className="tasks__head__back" onClick={() => setProjectTasksOpen(false)}>
+                  <p>Вернуться на проекты</p>
+                  <img src={arrow} alt="arrow"/>
+                </div>
+              </div>
             </div>
 
             <ModalTiket
@@ -641,24 +799,66 @@ export const Tracker = () => {
           </div>
           <div
               className={
-                  toggleTab === 3
+                toggleTab === 2
-                    ? "tracker__tabs__content__archive tasks active__content"
+                    ? "tracker__tabs__content__allTasks taskList tasks active__content"
                     : "tracker__tabs__content__projects"
               }
           >
-                <div className="archive__title">
+            <div className="taskList__head">
-                  <h3>Архив:</h3>
+              <h3>Список всех задач</h3>
-                  <p>{filterCompleteTasks.length} задач(а)</p>
+              <div className="taskList__head__search">
-                  <div className="archive__search">
+                <img src={search} alt="search" />
                 <input
                     type="text"
+                    placeholder="Найти задачу"
                     onChange={(event) => filterArchiveTasks(event)}
                 />
+              </div>
+            </div>
+            <div className="taskList__wrapper">
+              {allTasks.map((task, index) => {
+                  return(
+                      <div className="task" key={index}>
+                        <div className="task__info">
+                          <h5>{task.name}</h5>
+                          <p>{task.description}</p>
+                        </div>
+                        <div className="task__person">
+                          <img src={task.avatarDo} alt="avatar" />
+                          <div className="task__project">
+                            <p>{task.project}</p>
+                            <span>{task.dateComplete}</span>
+                          </div>
+                        </div>
+                      </div>
+                  )
+                })
+              }
+            </div>
+          </div>
+          <div
+              className={
+                toggleTab === 3
+                    ? "tracker__tabs__content__archive active__content"
+                    : "tracker__tabs__content__projects"
+              }
+          >
+            <div className="archive__tasks">
+              <div className="archive__title">
+                <h3>Архив задач:</h3>
+                <p>{filterCompleteTasks.length} задач(а)</p>
+                <div className="archive__tasks__search">
                   <img src={search} alt="search" />
+                  <input
+                      type="text"
+                      placeholder="Найти задачу"
+                      onChange={(event) => filterArchiveTasks(event)}
+                  />
                 </div>
               </div>
               <div className="archive__tasksWrapper">
-                  {filterCompleteTasks.map((task, index) => {
+                {Boolean(filterCompleteTasks.length) ?
+                  filterCompleteTasks.map((task, index) => {
                     return (
                         <div className="archive__completeTask" key={index}>
                           <div className="archive__completeTask__description">
@@ -667,12 +867,43 @@ export const Tracker = () => {
                           </div>
                           <div className="archive__completeTask__info">
                             <img src={task.avatarDo} alt="avatar" />
-                          <p>{task.name}</p>
+                            <div className="archive__completeTask__info__project">
+                              <span>Проект</span>
+                              <p>{task.project}</p>
+                            </div>
                           </div>
                         </div>
                     );
-                  })}
+                  })
+                  :
+                  <div className="archive__noItem">
+                    <p>В архиве задач нет</p>
                   </div>
+                }
+              </div>
+            </div>
+            <div className="archive__projects">
+              <div className="archive__title">
+                <h3>Архив проектов:</h3>
+                <p>{archiveProjects.length} проект(ов)</p>
+              </div>
+              <div className="archive__tasksWrapper">
+                {Boolean(archiveProjects) ?
+                  archiveProjects.map((project, index) => {
+                      return (
+                          <div className="archive__completeTask" key={index}>
+                            <div className="archive__completeTask__description">
+                              <p>{project.name}</p>
+                              <p className="date">{project.date}</p>
+                            </div>
+                          </div>
+                      )
+                    })
+                  :
+                  <div className="archive__noItem">
+                    <p>В архиве проектов нет</p>
+                  </div>
+                }
               </div>
             </div>
           </div>

src/pages/Tracker/tracker.scss

@@ -30,46 +30,81 @@
     font-weight: 700;
     font-size: 22px;
     line-height: 32px;
-    margin-bottom: 15px;
+    margin-bottom: 27px;
   }
 
   &__tabs {
     display: flex;
+    flex-direction: column;
 
     &__head {
-      width: 150px;
+      display: flex;
+      max-width: 1160px;
+      width: 100%;
+      background: #E1FCCF;
+      border-radius: 12px;
+      margin: 0 auto;
+      position: relative;
+      height: 60px;
     }
 
     .tab {
       display: flex;
       padding: 12px 40px 15px 19px;
       cursor: pointer;
+      align-items: center;
+
+      @media (max-width: 490px) {
+        padding: 8px 20px 8px 14px;
+      }
+
+      @media (max-width: 370px) {
+        padding: 5px 15px 5px 10px;
+      }
 
       p {
-        margin: 0 0 0 15px;
         font-weight: 400;
         font-size: 16px;
         line-height: 32px;
-        color: #000000;
+        margin: 0 0 0 14px;
+
+        @media (max-width: 490px) {
+          font-size: 13px;
+          white-space: nowrap;
+        }
       }
     }
 
     .active-tab {
       background: white;
-      border-radius: 15px 0 0 15px;
+      border-radius: 12px 12px 5px 5px;
+      position: relative;
+      height: 70px;
+      display: flex;
+      top: -10px;
+      align-items: center;
+
+      p {
+        font-weight: 600;
+      }
+
+      img {
+        filter: invert(0%) sepia(0%) saturate(2411%) hue-rotate(-25deg) brightness(118%) contrast(119%);
+      }
     }
 
     &__content {
-      width: calc(132% - 150px);
+      width: 100%;
+      background: #ffffff;
+      padding: 27px 0 29px;
 
-      @media (max-width: 1890px) {
+      &__wrapper {
-        width: calc(100% - 150px);
+        max-width: 1160px;
+        width: 100%;
+        margin: 0 auto;
       }
 
       &__projects {
-        background: #ffffff;
-        border-radius: 0 12px 12px 12px;
-        padding: 26px 24px 40px;
         flex-wrap: wrap;
         column-gap: 34px;
         row-gap: 30px;
@@ -90,6 +125,7 @@
           border-radius: 12px;
           padding: 17px 26px 16px;
           cursor: pointer;
+          max-width: 440px;
 
           @media (max-width: 1068px) {
             width: 47%;
@@ -168,7 +204,41 @@
           }
         }
 
+        .no-projects {
+          display: flex;
+          flex-direction: column;
+          padding: 20px;
+          width: 100%;
+
+          &__createNew {
+            display: flex;
+            div {
+              display: flex;
+              align-items: center;
+              margin-right: 35px;
+
+              p {
+                font-weight: 700;
+                font-size: 22px;
+                line-height: 32px;
+                color: #000000;
+                margin-left: 17px;
+              }
+            }
             button {
+
+            }
+          }
+
+          &__info {
+            margin-top: 27px;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 22px;
+          }
+        }
+
+        .createProjectBtn {
             background: #52b709;
             border-radius: 44px;
             max-width: 188px;
@@ -189,49 +259,64 @@
               font-size: 18px;
             }
         }
+
+        .create-newProject {
+          display: flex;
+          align-items: center;
+
+          @media (max-width: 450px) {
+            flex-direction: column;
+            row-gap: 15px;
+          }
+
+          p {
+            margin-left: 32px;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 22px;
+            max-width: 214px;
+
+            @media (max-width: 450px) {
+              max-width: none;
+              margin-left: 0;
+              text-align: center;
+            }
+          }
+        }
       }
 
       &__tasks {
         display: none;
         background: #ffffff;
         border-radius: 12px;
-        padding: 13px 23px 65px;
         flex-direction: column;
-        overflow-x: scroll;
-
-        &::-webkit-scrollbar {
-          width: 2px;
-          border-radius: 10px;
-          height: 8px;
-        }
-
-        &::-webkit-scrollbar-track {
-          background: #d9e1e9;
-        }
-
-        &::-webkit-scrollbar-thumb {
-          background: #d6d3d3;
-          border-radius: 40px;
-        }
       }
 
       .tasks {
         &__head {
-          display: flex;
           border-bottom: 1px solid #dde2e4;
-          padding: 0 25px 15px;
+          padding: 0 35px 15px;
+
+          &__wrapper {
+            display: flex;
+            max-width: 1160px;
+            margin: 0 auto;
+            justify-content: space-between;
+            padding: 0 10px;
             align-items: center;
-          width: 1525px;
+          }
 
           h4 {
-            color: #111112;
+            color: #1458DD;
             font-weight: 700;
-            font-size: 18px;
+            font-size: 22px;
             line-height: 32px;
             margin-bottom: 0;
           }
 
           &__add {
+            display: flex;
+            span {
               width: 33px;
               height: 33px;
               background: #52b709;
@@ -242,14 +327,22 @@
               display: flex;
               align-items: center;
               justify-content: center;
-            margin: 0 100px 0 55px;
+            }
+
+            p {
+              margin-left: 14px;
+              font-weight: 300;
+              font-size: 14px;
+              line-height: 17px;
+              max-width: 120px;
+            }
           }
 
           &__persons {
             position: relative;
             display: flex;
             cursor: pointer;
-            margin-right: 57px;
+            align-items: center;
 
             img {
               position: relative;
@@ -257,40 +350,51 @@
               height: 32px;
             }
 
-            img:nth-child(1) {
-              right: -32px;
-            }
-
             img:nth-child(2) {
-              right: -24px;
+              right: 12px;
-            }
-
-            img:nth-child(3) {
-              right: -16px;
-            }
-
-            img:nth-child(4) {
-              right: -8px;
             }
 
             span {
-              color: #252c32;
+              width: 32px;
+              height: 32px;
               font-weight: 500;
               font-size: 12px;
               line-height: 16px;
-              display: flex;
-              width: 32px;
-              height: 32px;
-              border: 1px solid #dde2e4;
               border-radius: 50px;
               align-items: center;
               justify-content: center;
+              position: relative;
+              display: flex;
+            }
+
+            .countPersons {
+              color: #252c32;
+              border: 1px solid #dde2e4;
+              background: white;
+              left: -25px;
+              z-index: 2;
+            }
+
+            .addPerson {
+              background: #00C5A8;
+              color: white;
+              font-size: 14px;
+              left: -35px;
+              z-index: 1;
+            }
+
+            p {
+              position: relative;
+              left: -25px;
+              font-weight: 300;
+              font-size: 14px;
+              line-height: 17px;
+              max-width: 125px;
             }
           }
 
           &__select {
             cursor: pointer;
-            margin-right: 40px;
 
             img {
               margin-left: 18px;
@@ -302,13 +406,47 @@
               line-height: 24px;
             }
           }
+
+          &__back {
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+
+            p {
+              font-weight: 400;
+              font-size: 14px;
+              line-height: 17px;
+            }
+
+            img {
+              margin-left: 10px;
+              width: 20px;
+            }
+          }
         }
 
         &__container {
-          padding: 30px 25px 0;
+          padding: 30px 25px 30px;
           display: flex;
           column-gap: 25px;
-          width: 1525px;
+          margin: 0 auto;
+          overflow: auto;
+          max-width: 100%;
+
+          &::-webkit-scrollbar {
+            height: 8px;
+            border-radius: 10px;
+          }
+
+          &::-webkit-scrollbar-thumb {
+            background: #cbd9f9;
+            border-radius: 20px;
+          }
+
+          &::-webkit-scrollbar-track {
+            background: #c5c0c6;
+            border-radius: 20px;
+          }
         }
 
         &__board {
@@ -479,54 +617,203 @@
         display: flex;
       }
 
-      &__archive {
+      &__allTasks {
-        background: white;
+        max-width: 1160px;
-        border-radius: 12px;
+        padding: 0 20px;
-        padding: 26px 24px 40px;
+        margin: 0 auto;
-        min-height: 774px;
         display: flex;
         flex-direction: column;
 
-        .archive {
+        .taskList {
-          &__title {
+          &__head {
-            padding-bottom: 8px;
-            border-bottom: 1px solid #dde2e4;
             display: flex;
+            justify-content: space-between;
+            width: 100%;
             align-items: center;
+            padding-bottom: 8px;
 
+            @media (max-width: 550px) {
+              flex-direction: column;
+              row-gap: 10px;
+              align-items: start;
+            }
             h3 {
-              color: #111112;
               font-weight: 700;
-              font-size: 16px;
+              font-size: 18px;
               line-height: 32px;
               margin-bottom: 0;
-            }
+              color: #1458DD;
 
-            p {
+              @media (max-width: 590px) {
-              margin: 0 0 0 10px;
+                font-size: 15px;
-              font-weight: 500;
-              font-size: 14px;
               }
             }
 
             &__search {
-            border: 2px solid;
-            border-color: var(--ds-border-input, #dfe1e6);
               margin-left: auto;
-            padding: 5px;
+              padding: 6px 12px;
+              display: flex;
+              align-items: center;
+              background: #FFFFFF;
+              border: 1px solid #DDE2E4;
+              box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+              border-radius: 6px;
+              max-width: 450px;
+              width: 100%;
+
+              @media (max-width: 690px) {
+                max-width: 350px;
+              }
+
+              @media (max-width: 550px) {
+                max-width: none;
+                margin-left: inherit;
+              }
+
+              img {
+                width: 14px;
+              }
+
+              input {
+                width: 100%;
+                padding-left: 10px;
+                outline: none;
+                border: none;
+                font-weight: 400;
+                font-size: 14px;
+                line-height: 24px;
+              }
+            }
+          }
+
+          &__wrapper {
+            margin-top: 10px;
+            display: flex;
+            flex-direction: column;
+            row-gap: 15px;
+            max-height: 400px;
+            overflow-y: auto;
+            margin-right: -16px;
+            padding-right: 10px;
+
+            &::-webkit-scrollbar {
+              width: 4px;
+              background: 0 0;
+              box-shadow: 0 0 14px rgba(0, 0, 0, 0.04);
+              border-radius: 20px;
+            }
+
+            &::-webkit-scrollbar {
+              width: 4px;
+              border-radius: 20px;
+            }
+
+            &::-webkit-scrollbar-thumb {
+              background: #cbd9f9;
+              border-radius: 20px;
+            }
+
+            &::-webkit-scrollbar-track {
+              background: #c5c0c6;
+              border-radius: 20px;
+            }
+
+            .task {
+              display: flex;
+              background: #F1F1F1;
+              border-radius: 12px;
+              padding: 12px 42px 7px 32px;
+              justify-content: space-between;
+              cursor: pointer;
+
+              &__info {
+                display: flex;
+                flex-direction: column;
+
+                h5 {
+                  font-weight: 700;
+                  font-size: 20px;
+                  line-height: 24px;
+                  margin-bottom: 0;
+                }
+
+                p {
+                  font-size: 16px;
+                  line-height: 32px;
+                  max-width: 400px;
+                  overflow: hidden;
+                  white-space: nowrap;
+                  text-overflow: ellipsis;
+                }
+              }
+
+              &__person {
                 display: flex;
                 align-items: center;
 
-            input {
+                img {
-              outline: none;
+                  width: 40px;
-              border: none;
+                }
+              }
+
+              &__project {
+                display: flex;
+                flex-direction: column;
+                margin-left: 20px;
+
+                p {
                   font-size: 16px;
                   font-weight: 500;
                 }
 
-            img {
+                span {
-              width: 20px;
+                  font-size: 14px;
-              height: 20px;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      &__archive {
+        max-width: 1160px;
+        padding: 0 20px;
+        margin: 0 auto;
+        display: flex;
+        column-gap: 28px;
+
+        @media (max-width: 880px) {
+          flex-direction: column;
+          row-gap: 20px;
+        }
+
+        .archive {
+          &__title {
+            padding-bottom: 8px;
+            display: flex;
+            align-items: center;
+            color: #1458DD;
+            min-height: 48px;
+
+            h3 {
+              font-weight: 700;
+              font-size: 18px;
+              line-height: 32px;
+              margin-bottom: 0;
+
+              @media (max-width: 590px) {
+                font-size: 15px;
+              }
+            }
+
+            p {
+              margin: 0 0 0 10px;
+              font-weight: 300;
+              font-size: 18px;
+
+              @media (max-width: 590px) {
+                font-size: 15px;
+              }
             }
           }
 
@@ -534,8 +821,8 @@
             margin-top: 10px;
             display: flex;
             flex-direction: column;
-            row-gap: 3px;
+            row-gap: 15px;
-            max-height: 649px;
+            max-height: 400px;
             overflow-y: auto;
             margin-right: -16px;
             padding-right: 10px;
@@ -566,17 +853,26 @@
           &__completeTask {
             display: flex;
             justify-content: space-between;
-            border: 1px solid var(--ds-border, #dfe1e6);
-            padding: 8px 10px;
             cursor: pointer;
             transition: all 0.3s ease;
+            background: #F1F1F1;
+            border-radius: 12px;
+            padding: 12px 42px 7px 32px;
 
             &:hover {
               background: var(--ds-background-neutral-subtle-hovered, #f4f5f7);
             }
 
             p {
+              max-width: 250px;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
               margin-bottom: 0;
+              color: #111112;
+              font-weight: 700;
+              font-size: 16px;
+              line-height: 32px;
             }
 
             &__description {
@@ -584,8 +880,10 @@
               font-weight: 500;
 
               .date {
-                font-weight: 400;
+                font-weight: 500;
-                font-size: 12px;
+                font-size: 10px;
+                line-height: 24px;
+                color: #6F6F6F;
               }
             }
 
@@ -594,16 +892,100 @@
               align-items: center;
 
               img {
-                width: 36px;
+                width: 32px;
-                height: 36px;
+                height: 32px;
               }
 
-              p {
+              &__project {
-                margin-left: 10px;
+                margin-left: 17px;
-                text-decoration: line-through;
+                span {
-                font-size: 11px;
+                  color: #807777;
                   font-weight: 500;
-              }
+                  font-size: 10px;
+                }
+                p {
+                  color: #1A1919;
+                  font-weight: 500;
+                  font-size: 14px;
+                  line-height: 24px;
+                  text-decoration: line-through;
+                }
+              }
+            }
+          }
+
+          &__tasks {
+            min-height: 400px;
+            max-height: 450px;
+            padding-right: 15px;
+            width: 65%;
+            overflow: hidden;
+
+            @media (max-width: 880px) {
+              width: 100%;
+            }
+
+            &__search {
+              margin-left: auto;
+              padding: 6px 12px;
+              display: flex;
+              align-items: center;
+              background: #FFFFFF;
+              border: 1px solid #DDE2E4;
+              box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+              border-radius: 6px;
+              max-width: 300px;
+              width: 100%;
+
+              @media (max-width: 590px) {
+                max-width: 230px;
+              }
+
+              @media (max-width: 500px) {
+                max-width: 150px;
+              }
+
+              input {
+                width: 100%;
+                padding-left: 10px;
+                outline: none;
+                border: none;
+                font-weight: 400;
+                font-size: 14px;
+                line-height: 24px;
+              }
+
+              img {
+                width: 14px;
+                height: 14px;
+              }
+            }
+          }
+
+          &__projects {
+            display: flex;
+            flex-direction: column;
+            width: 33%;
+            min-height: 400px;
+            max-height: 450px;
+            padding-right: 15px;
+
+            @media (max-width: 880px) {
+              width: 100%;
+            }
+          }
+
+          &__noItem {
+            background: #F1F1F1;
+            border-radius: 12px;
+            padding: 23px 0 19px;
+
+            p {
+              font-weight: 700;
+              font-size: 22px;
+              line-height: 32px;
+              color: #111112;
+              text-align: center;
             }
           }
         }