redesign cards

src/components/Common/ModalLayout/modalLayout.scss

@@ -29,7 +29,7 @@
       &__info {
         font-size: 15px;
         font-weight: 300;
-        margin: 12px 0 20px;
+        margin-top: 8px;
       }
 
       @media (max-width: 805px) {
@@ -52,13 +52,14 @@
         flex-direction: column;
         justify-content: space-between;
         align-items: center;
+        row-gap: 5px;
       }
 
       .invite-person-block {
         display: flex;
         flex-direction: column;
         align-items: center;
-        row-gap: 10px;
+        row-gap: 5px;
         &__input {
           margin: 0;
           min-width: 240px;
@@ -86,11 +87,10 @@
 
         span {
           text-align: center;
-          margin: 5px 0;
+          margin-top: 15px;
         }
 
         .invite-person-block {
-          row-gap: 5px;
           &__btn {
             margin: 5px auto;
           }

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

@@ -406,11 +406,11 @@ export const TrackerModal = ({
           <div className="select__person">
             <div className="title-project select-person">
               <h4>Добавьте участника</h4>
-              <p className="select-person__info">
-                Выберите пользователя в списке или добавьте по e-mail
-              </p>
               <div className="invite__blocks">
                 <div className="add-person-block">
+                  <p className="select-person__info">
+                    Выберите пользователя в списке
+                  </p>
                   <div
                     className={
                       selectWorkersOpen
@@ -461,8 +461,8 @@ export const TrackerModal = ({
                     Добавить
                   </BaseButton>
                 </div>
-                <span>или</span>
                 <div className="invite-person-block">
+                  <span>или добавьте по e-mail</span>
                   <div className="input-container invite-person-block__input">
                     <input
                       className="name-project"

src/components/ProjectTicket/ProjectTicket.jsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 
 import { deleteProject, modalToggle } from "@redux/projectsTrackerSlice";
 
-import { copyProjectLink } from "@utils/helper";
+import { copyProjectLink, urlForLocal } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
@@ -18,7 +18,6 @@ import archiveSet from "assets/icons/archive.svg";
 import del from "assets/icons/delete.svg";
 import edit from "assets/icons/edit.svg";
 import link from "assets/icons/link.svg";
-import avatarProject from "assets/images/avatarMok.png";
 
 import "./projectTicket.scss";
 
@@ -27,8 +26,8 @@ export const ProjectTicket = ({ project, index }) => {
   const [modalAdd, setModalAdd] = useState(false);
   const [modalDelete, setModalDelete] = useState(false);
   const [acceptModalOpen, setAcceptModalOpen] = useState(false);
-  const [path, setPath] = useState("");
   const dispatch = useDispatch();
+  const navigate = useNavigate();
   const { showNotification } = useNotification();
 
   useEffect(() => {
@@ -84,18 +83,30 @@ export const ProjectTicket = ({ project, index }) => {
         <div className="project__link">{project.name}</div>
 
         <div className="project__info">
-          <p>Открытые задачи</p>
+          {/* <p>Открытые задачи</p>
           <span className="count">
             {project.columns.reduce(
               (accumulator, currentValue) =>
                 accumulator + currentValue.tasks.length,
               0
             )}
-          </span>
+          </span> */}
-          <img src={avatarProject} alt="#" className="project__avatar" />
+          <img
+            src={urlForLocal(project.owner_info.avatar)}
+            alt="avatar"
+            className="project__avatar"
+          />
+          <span>{project.owner_info.fio}</span>
         </div>
       </Link>
 
+      {/* <Link
+        to={`/profile/statistics/${project.id}`}
+        className="project__statistics"
+      >
+        Посмотреть статистику
+      </Link> */}
+
       <span
         className="menu-settings"
         onClick={() => {
@@ -105,13 +116,6 @@ export const ProjectTicket = ({ project, index }) => {
         ...
       </span>
 
-      <Link
-        to={`/profile/statistics/${project.id}`}
-        className="project__statistics"
-      >
-        Посмотреть статистику
-      </Link>
-
       <TrackerModal
         active={modalAdd}
         setActive={setModalAdd}
@@ -131,9 +135,9 @@ export const ProjectTicket = ({ project, index }) => {
             <img src={edit}></img>
             <p>редактировать</p>
           </div>
-          <div>
+          <div onClick={copyProjectLink(project.id)}>
             <img src={link}></img>
-            <p onClick={copyProjectLink(project.id)}>скопировать ссылку</p>
+            <p>скопировать ссылку</p>
           </div>
           <div
             onClick={() => {
@@ -144,7 +148,14 @@ export const ProjectTicket = ({ project, index }) => {
             <img src={archiveSet}></img>
             <p>в архив</p>
           </div>
-
+          <div
+            onClick={() => {
+              navigate(`/profile/statistics/${project.id}`);
+            }}
+          >
+            <img src={archiveSet}></img>
+            <p>статистика</p>
+          </div>
           <div
             onClick={() => {
               setModalDelete(true);

src/components/ProjectTicket/projectTicket.scss

@@ -40,7 +40,6 @@
     display: flex;
     align-items: center;
     position: relative;
-    margin-bottom: 30px;
 
     p {
       color: #6f6f6f;
@@ -50,6 +49,11 @@
       line-height: 17px;
     }
 
+    span {
+      color: blue;
+      font-size: 15px;
+    }
+
     .count {
       margin-left: 8px;
       width: 26px;
@@ -78,16 +82,16 @@
 
   .menu-settings {
     position: absolute;
-    font-size: 21px;
+    font-size: 30px;
     color: #6f6f6f;
     right: 15px;
-    top: 0px;
+    top: -10px;
   }
 
   &__avatar {
     width: 25px;
     height: 25px;
-    margin-left: 56px;
+    margin-right: 10px;
   }
 
   &__open-tracker {

src/pages/ProjectTracker/ProjectTracker.js

@@ -878,6 +878,7 @@ export const ProjectTracker = () => {
                               "YYYY-MM-DD HH:mm:ss"
                             );
                             const titleColor =
+                              task.dead_line &&
                               dateDeadline < new Date(currentDate)
                                 ? "red"
                                 : "#1a1919";

src/pages/Tracker/tracker.scss

@@ -171,7 +171,7 @@
 
         .create-project-btn {
           width: 300px;
-          height: 113px;
+          height: 83px;
           border-radius: 12px;
           background: #ecf8e5;
           color: #000000;
@@ -224,7 +224,6 @@
             align-items: center;
             column-gap: 5px;
             img {
-              margin-left: -22px;
               height: 22px;
             }
           }
@@ -564,6 +563,10 @@
                 display: flex;
                 flex-direction: column;
 
+                @media (max-width: 900px) {
+                  left: 0px;
+                }
+
                 .close {
                   cursor: pointer;
                   width: 20px;

src/pages/ViewReport/ViewReport.jsx

@@ -155,7 +155,7 @@ export const ViewReport = () => {
                       : "view-report__bar__delete disable"
                   }
                 >
-                  Удалить отчет
+                  Удалить
                 </button>
               )}
             </div>
@@ -201,7 +201,7 @@ export const ViewReport = () => {
                 <thead>
                   <tr>
                     <th>
-                      <p>Какие задачи выполнены?</p>
+                      <p>Выполненные задачи</p>
                     </th>
                     <th>
                       <p>Время</p>
@@ -242,7 +242,7 @@ export const ViewReport = () => {
             </div>
             {Boolean(difficulties.length) && (
               <div className="view-report__item">
-                <h3>Какие сложности возникли?</h3>
+                <h3>Возникшие сложности</h3>
                 {difficulties.map((item, index) => {
                   return <p key={index}>{item}</p>;
                 })}

src/pages/ViewReport/viewReport.scss

@@ -60,7 +60,7 @@
     border-radius: 12px;
     padding: 20px 33px;
     align-items: center;
-    column-gap: 60px;
+    column-gap: 20px;
     height: 72px;
     justify-content: space-between;
 
@@ -88,9 +88,14 @@
     }
 
     &__delete {
-      background: white;
+      color: #000000;
-      border-radius: 12px;
+      font-size: 15px;
-      border: 1px dashed #8bcc60;
+      font-weight: 500;
+      line-height: 32px;
+      padding: 8px 24px;
+      background: whitesmoke;
+      border-radius: 44px;
+      border: none;
     }
 
     .disable {
@@ -343,9 +348,8 @@
           width: 100%;
 
           @media (max-width: 900px) {
-            max-width: 28px;
+            max-width: 40px;
-            height: 28px;
+            height: 40px;
-            font-size: 15px;
           }
         }