From c155462ab4d40491d5e56b94b8a78a0a1b665828 Mon Sep 17 00:00:00 2001
From: MaxOvs19 <gshk3669@gmail.com>
Date: Mon, 2 Oct 2023 18:10:40 +0300
Subject: [PATCH] Fixed project cart

---
 src/assets/icons/addProjectImg.svg            | 10 +++
 src/components/ProjectTiket/ProjectTiket.jsx  |  9 ++-
 src/components/ProjectTiket/projectTiket.scss | 34 +++++++---
 src/pages/Tracker/Tracker.js                  | 25 ++++----
 src/pages/Tracker/tracker.scss                | 64 +++++++------------
 5 files changed, 81 insertions(+), 61 deletions(-)
 create mode 100644 src/assets/icons/addProjectImg.svg

diff --git a/src/assets/icons/addProjectImg.svg b/src/assets/icons/addProjectImg.svg
new file mode 100644
index 00000000..140d57b8
--- /dev/null
+++ b/src/assets/icons/addProjectImg.svg
@@ -0,0 +1,10 @@
+<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1689_1894)">
+<path d="M38.91 7.09012C34.6905 2.87054 28.9675 0.5 23.0001 0.5C17.0327 0.5 11.3097 2.87054 7.09012 7.09012C2.87054 11.3097 0.5 17.0327 0.5 23.0001C0.5 28.9675 2.87054 34.6905 7.09012 38.91C11.3097 43.1296 17.0327 45.5002 23.0001 45.5002C28.9675 45.5002 34.6905 43.1296 38.91 38.91C43.1296 34.6905 45.5002 28.9675 45.5002 23.0001C45.5002 17.0327 43.1296 11.3097 38.91 7.09012ZM23.0001 42.336C12.3382 42.336 3.66414 33.662 3.66414 23.0001C3.66414 12.3382 12.3382 3.66414 23.0001 3.66414C33.6619 3.66414 42.336 12.3382 42.336 23.0001C42.336 33.662 33.6619 42.336 23.0001 42.336ZM33.9425 23.0001C33.9425 23.4197 33.7758 23.8221 33.4791 24.1187C33.1824 24.4154 32.78 24.5821 32.3604 24.5821H24.5821V32.3604C24.5821 32.78 24.4154 33.1824 24.1187 33.4791C23.8221 33.7758 23.4197 33.9425 23.0001 33.9425C22.5805 33.9425 22.1781 33.7758 21.8814 33.4791C21.5847 33.1824 21.4181 32.78 21.4181 32.3604V24.5821H13.6397C13.2202 24.5821 12.8178 24.4154 12.5211 24.1187C12.2244 23.8221 12.0577 23.4197 12.0577 23.0001C12.0577 22.5805 12.2244 22.1781 12.5211 21.8814C12.8178 21.5847 13.2202 21.4181 13.6397 21.4181H21.4181V13.6397C21.4181 13.2202 21.5847 12.8178 21.8814 12.5211C22.1781 12.2244 22.5805 12.0577 23.0001 12.0577C23.4197 12.0577 23.8221 12.2244 24.1187 12.5211C24.4154 12.8178 24.5821 13.2202 24.5821 13.6397V21.4181H32.3604C32.78 21.4181 33.1824 21.5847 33.4791 21.8814C33.7758 22.1781 33.9425 22.5805 33.9425 23.0001Z" fill="#8BCC60"/>
+</g>
+<defs>
+<clipPath id="clip0_1689_1894">
+<rect width="45" height="45" fill="white" transform="translate(0.5 0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/ProjectTiket/ProjectTiket.jsx b/src/components/ProjectTiket/ProjectTiket.jsx
index 7b2f4f59..87c2fc58 100644
--- a/src/components/ProjectTiket/ProjectTiket.jsx
+++ b/src/components/ProjectTiket/ProjectTiket.jsx
@@ -16,6 +16,7 @@ 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 "./projectTiket.scss";
 
@@ -74,7 +75,9 @@ export const ProjectTiket = ({ project, index }) => {
 
   return (
     <div className="project" key={index}>
-      <Link to={`/tracker/project/${project.id}`}>{project.name}</Link>
+      <Link to={`/tracker/project/${project.id}`} className="project__link">
+        {project.name}
+      </Link>
       <div className="project__info">
         <p>Открытые задачи</p>
         <span className="count">
@@ -84,10 +87,14 @@ export const ProjectTiket = ({ project, index }) => {
             0
           )}
         </span>
+        <img src={avatarProject} alt="#" className="project__avatar" />
         <span className="menu-settings" onClick={() => setModalSelect(true)}>
           ...
         </span>
       </div>
+      <Link to={`#`} className="project__statistics">
+        Просмотреть статистику
+      </Link>
 
       <TrackerModal
         active={modalAdd}
diff --git a/src/components/ProjectTiket/projectTiket.scss b/src/components/ProjectTiket/projectTiket.scss
index 5a253d18..bcb4e3d9 100644
--- a/src/components/ProjectTiket/projectTiket.scss
+++ b/src/components/ProjectTiket/projectTiket.scss
@@ -1,6 +1,7 @@
 .project {
   position: relative;
-  width: 48%;
+  width: 322px;
+
   background: #f1f1f1;
   border-radius: 12px;
   padding: 17px 26px 16px;
@@ -21,12 +22,12 @@
     width: 100%;
   }
 
-  a {
+  &__link {
     font-weight: 700;
     font-size: 18px;
     line-height: 32px;
     color: #111112;
-    margin-bottom: 10px;
+    margin-bottom: 22px;
     overflow: hidden;
     white-space: nowrap;
     display: flex;
@@ -42,19 +43,21 @@
     display: flex;
     align-items: center;
     position: relative;
+    margin-bottom: 27px;
 
     p {
       color: #6f6f6f;
-      font-weight: 500;
-      font-size: 12px;
-      line-height: 24px;
       margin-bottom: 0;
+      font-size: 12px;
+      font-weight: 500;
+      line-height: 17px;
+      width: 60px;
     }
 
     .count {
       margin-left: 8px;
-      width: 21px;
-      height: 24px;
+      width: 26px;
+      height: 26px;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -84,4 +87,19 @@
       top: -35%;
     }
   }
+
+  &__avatar {
+    width: 25px;
+    height: 25px;
+    margin-left: 56px;
+  }
+
+  &__statistics {
+    color: #678eda;
+    margin-top: 27px;
+    text-decoration: underline;
+    font-size: 12px;
+    font-weight: 300;
+    line-height: 17px;
+  }
 }
diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js
index 955c1e7d..84b95e3a 100644
--- a/src/pages/Tracker/Tracker.js
+++ b/src/pages/Tracker/Tracker.js
@@ -23,6 +23,7 @@ import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadc
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 import ProjectTiket from "@components/ProjectTiket/ProjectTiket";
 
+import addProjectImg from "assets/icons/addProjectImg.svg";
 import search from "assets/icons/serchIcon.png";
 import project from "assets/icons/trackerProject.svg";
 import tasks from "assets/icons/trackerTasks.svg";
@@ -205,17 +206,17 @@ export const Tracker = () => {
                         setModalCreateProject(true);
                       }}
                     >
-                      <span>+</span>Создать проект
+                      <img src={addProjectImg} alt="#"></img>
+                      <p className="createProjectBtn__text">
+                        Ставьте задачи, следите за прогрессом, ведите учёт
+                        рабочего времени
+                      </p>
                     </BaseButton>
                   </div>
-                  <p className="no-projects__info">
-                    Ставьте задачи, следите за прогрессом, ведите учёт рабочего
-                    времени
-                  </p>
                 </div>
               )}
             {Boolean(projects.length) && !loader && (
-              <div className="create-newProject">
+              <>
                 <BaseButton
                   styles="createProjectBtn"
                   onClick={() => {
@@ -223,13 +224,13 @@ export const Tracker = () => {
                     setModalCreateProject(true);
                   }}
                 >
-                  <span>+</span>Создать проект
+                  <img src={addProjectImg} alt="#"></img>
+                  <p className="createProjectBtn__text">
+                    Ставьте задачи, следите за прогрессом, ведите учёт рабочего
+                    времени
+                  </p>
                 </BaseButton>
-                <p>
-                  Ставьте задачи, следите за прогрессом, ведите учёт рабочего
-                  времени
-                </p>
-              </div>
+              </>
             )}
           </div>
           <div
diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss
index 5a8e1896..572f2b40 100644
--- a/src/pages/Tracker/tracker.scss
+++ b/src/pages/Tracker/tracker.scss
@@ -173,29 +173,33 @@
               }
             }
           }
-
-          &__info {
-            margin-top: 27px;
-            font-weight: 400;
-            font-size: 14px;
-            line-height: 22px;
-          }
         }
 
         .createProjectBtn {
-          max-width: 188px;
-          height: 50px;
-          width: 100%;
+          max-width: 322px;
+          width: 322px;
+          height: 166px;
+          border-radius: 12px;
+          background: #ecf8e5;
+          color: #000000;
           font-weight: 400;
           font-size: 15px;
           display: flex;
           align-items: center;
           justify-content: center;
+          transition: 0.4s;
 
-          span {
-            margin-right: 9px;
-            font-weight: 700;
-            font-size: 18px;
+          &__text {
+            text-align: left;
+            font-size: 14px;
+            font-weight: 250;
+            width: 190px;
+            margin-left: 25px;
+          }
+
+          &:hover {
+            transition: 0.4s;
+            box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
           }
 
           @media (max-width: 650px) {
@@ -203,23 +207,6 @@
             font-size: 12px;
           }
         }
-
-        .create-newProject {
-          display: flex;
-          align-items: center;
-
-          p {
-            margin-left: 32px;
-            font-weight: 400;
-            font-size: 14px;
-            line-height: 22px;
-            max-width: 214px;
-
-            @media (max-width: 450px) {
-              max-width: none;
-            }
-          }
-        }
       }
 
       &__tasks {
@@ -243,7 +230,7 @@
           }
 
           @media (max-width: 650px) {
-            background-color: #DFF1FF;
+            background-color: #dff1ff;
           }
 
           &__wrapper {
@@ -699,7 +686,6 @@
               row-gap: 7px;
               width: 100%;
 
-
               .executorDropdown__person {
                 display: flex;
                 justify-content: space-between;
@@ -710,7 +696,6 @@
                   white-space: nowrap;
                   text-overflow: ellipsis;
 
-
                   @media (max-width: 915px) {
                     max-width: none;
                   }
@@ -974,7 +959,7 @@
               p {
                 font-weight: 500;
                 font-size: 14px;
-                color: #1458DD;
+                color: #1458dd;
               }
 
               span {
@@ -1618,10 +1603,9 @@
     }
 
     @media (max-width: 650px) {
-
       &__content {
         padding: 28px 0 0;
-        background-color: #DFF1FF;
+        background-color: #dff1ff;
 
         .project {
           background-color: white;
@@ -1630,15 +1614,15 @@
       }
 
       .projectsTab {
-        background-color: #DFF1FF;
+        background-color: #dff1ff;
       }
 
       .tasksTab {
-        background-color: #E8FFEB;
+        background-color: #e8ffeb;
       }
 
       .archiveTab {
-        background-color: #FFECEF;
+        background-color: #ffecef;
       }
     }
   }