redesign cards

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 {