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>
-          <img src={avatarProject} alt="#" className="project__avatar" />
+          </span> */}
+          <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 {