From e670e2a9a770c2d6499a5ecbf78016a1a2bbf2fa Mon Sep 17 00:00:00 2001
From: MaxOvs19 <gshk3669@gmail.com>
Date: Mon, 23 Oct 2023 17:26:47 +0300
Subject: [PATCH] Fixed archive

---
 src/pages/Tracker/Tracker.jsx  | 109 ++++++++++++++++++---------------
 src/pages/Tracker/tracker.scss |  70 +++++++++++++++------
 2 files changed, 108 insertions(+), 71 deletions(-)

diff --git a/src/pages/Tracker/Tracker.jsx b/src/pages/Tracker/Tracker.jsx
index fb615197..3020d102 100644
--- a/src/pages/Tracker/Tracker.jsx
+++ b/src/pages/Tracker/Tracker.jsx
@@ -436,58 +436,65 @@ export const Tracker = () => {
                 </div>
               </div>
 
-              <div className="archive__title-table">
-                <p>Задача</p>
-                <p>Потраченное время</p>
-                <p>Дата окончания</p>
-              </div>
+              {loader && <Loader style="green" />}
+              <table className="archive__table">
+                <thead>
+                  <tr>
+                    <th>Задача</th>
+                    <th>Потраченное время</th>
+                    <th>Дата окончания</th>
+                  </tr>
+                </thead>
 
-              <div className="archive__tasksWrapper">
-                {loader && <Loader style="green" />}
-                {!loader && (
-                  <>
-                    {Boolean(filterCompleteTasks.length) ? (
-                      filterCompleteTasks.map((task, index) => {
-                        return (
-                          <div className="archive__completeTask" key={index}>
-                            <div className="archive__completeTask__description">
-                              <p className="completeTask__title">
-                                {task.title}
-                              </p>
-                              <p
-                                className="date"
-                                dangerouslySetInnerHTML={{
-                                  __html: task.description,
-                                }}
-                              />
-                            </div>
-                            <div className="archive__completeTask__time">
-                              <p>
-                                {task.timers.map((item) => {
-                                  let time = new Date(item.deltaSeconds * 1000)
-                                    .toISOString()
-                                    .slice(11, 19);
-                                  return `${time}`;
-                                })}
-                              </p>
-                            </div>
-                            <div className="archive__completeTask__info">
-                              <div className="archive__completeTask__info__project">
-                                {/*<span>Проект</span>*/}
-                                <p>{getCorrectDate(task.updated_at)}</p>
-                              </div>
-                            </div>
-                          </div>
-                        );
-                      })
-                    ) : (
-                      <div className="archive__noItem">
-                        <p>В данном месяце у вас не было задач</p>
-                      </div>
-                    )}
-                  </>
-                )}
-              </div>
+                <tbody>
+                  {!loader && (
+                    <>
+                      {Boolean(filterCompleteTasks.length) ? (
+                        filterCompleteTasks.map((task, index) => {
+                          return (
+                            <tr>
+                              <td className="archive__completeTask__description">
+                                <p className="completeTask__title">
+                                  {task.title}
+                                </p>
+                                <p
+                                  className="date"
+                                  dangerouslySetInnerHTML={{
+                                    __html: task.description,
+                                  }}
+                                />
+                              </td>
+                              <td className="archive__completeTask__time">
+                                <p>
+                                  {task.timers.length == 0
+                                    ? "-"
+                                    : task.timers.map((item) => {
+                                        let time = new Date(
+                                          item.deltaSeconds * 1000
+                                        )
+                                          .toISOString()
+                                          .slice(11, 19);
+                                        return `${time}`;
+                                      })}
+                                </p>
+                              </td>
+                              <td className="archive__completeTask__info">
+                                <div>
+                                  <p>{getCorrectDate(task.updated_at)}</p>
+                                </div>
+                              </td>
+                            </tr>
+                          );
+                        })
+                      ) : (
+                        <div className="archive__noItem">
+                          <p>В данном месяце у вас не было задач</p>
+                        </div>
+                      )}
+                    </>
+                  )}
+                </tbody>
+              </table>
             </div>
             <div className="archive__projects">
               <div className="archive__projects-title">
diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss
index 0dab2fa3..e55484fe 100644
--- a/src/pages/Tracker/tracker.scss
+++ b/src/pages/Tracker/tracker.scss
@@ -1672,21 +1672,58 @@
             @media (max-width: 450px) {
               flex-wrap: wrap;
             }
+          }
 
-            &-table {
-              margin: 29px 0 0 0;
-              height: 67px;
-              display: flex;
-              align-items: center;
-              justify-content: space-between;
+          &__table {
+            margin: 29px 0 0 0;
+            height: 67px;
+            width: 100%;
+            font-size: 14px;
+            font-weight: 400;
+
+            thead {
               background: #f1f1f1;
               color: #5b6871;
-              font-size: 14px;
-              font-weight: 400;
               border-radius: 12px;
-              padding-left: 15px;
-              padding-right: 15px;
-              margin-right: -6px;
+              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;
+                }
+              }
             }
           }
 
@@ -1727,17 +1764,10 @@
             justify-content: space-between;
             align-items: center;
             cursor: pointer;
-            transition: all 0.3s ease;
             background: #f1f1f1;
             border-radius: 12px;
             padding: 12px 15px 7px 16px;
 
-            &:hover {
-              transform: scale(0.99);
-              box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
-              transition: 0.4s;
-            }
-
             p {
               max-width: 420px;
               overflow: hidden;
@@ -1819,8 +1849,8 @@
             }
 
             &__description {
-              width: 70px;
-              max-width: 70px;
+              width: 270px;
+              max-width: 270px;
               font-size: 14px;
               font-weight: 500;