layout tracker

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

@@ -403,7 +403,6 @@ export const TrackerModal = ({
         } else {
           setActive(false);
           setEmailWorker("");
-          // const newParticipant = response.data;
           dispatch(addPersonToProject(response));
           showNotification({
             show: true,

src/components/ProjectTicket/ProjectTicket.jsx

@@ -101,8 +101,11 @@ export const ProjectTicket = ({ project, index }) => {
             alt="avatar"
             className="project__avatar"
           />
+          <div>
+            <p>Создатель проекта</p>
             <span>{project.owner_info.fio}</span>
           </div>
+        </div>
       </Link>
 
       {/* <Link
@@ -112,6 +115,11 @@ export const ProjectTicket = ({ project, index }) => {
         Посмотреть статистику
       </Link> */}
 
+      <span className="project-stats" onClick={() => {}}>
+        Просмотреть <br />
+        статистику проекта
+      </span>
+
       <span
         className="menu-settings"
         onClick={() => {

src/components/ProjectTicket/projectTicket.scss

@@ -2,7 +2,8 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  width: 300px;
+  width: 22%;
+  height: 170px;
   background: #f1f1f1;
   border-radius: 12px;
 
@@ -29,7 +30,7 @@
     text-overflow: ellipsis;
     font-size: 18px;
     color: #111112;
-    margin-bottom: 10px;
+    margin: 0 0 15px 0;
 
     &:hover {
       color: black;
@@ -44,14 +45,15 @@
     p {
       color: #6f6f6f;
       margin-bottom: 0;
-      font-size: 12px;
+      font-size: 9px;
-      font-weight: 500;
+      font-weight: 300;
       line-height: 17px;
     }
 
     span {
       color: blue;
       font-size: 15px;
+      font-weight: 400;
     }
 
     .count {
@@ -80,18 +82,29 @@
     }
   }
 
+  &-stats {
+    font-size: 12px;
+    font-weight: 300;
+    line-height: 17px;
+    text-decoration: underline;
+    color: #678eda;
+    position: absolute;
+    left: 18px;
+    bottom: 10px;
+  }
+
   .menu-settings {
     position: absolute;
     font-size: 30px;
     color: #6f6f6f;
     right: 15px;
-    top: -10px;
+    bottom: 10px;
   }
 
   &__avatar {
-    width: 25px;
+    width: 30px;
-    height: 25px;
+    height: 30px;
-    margin-right: 10px;
+    margin: 0 10px 0 0;
   }
 
   &__open-tracker {

src/pages/Tracker/Tracker.jsx

@@ -225,8 +225,16 @@ export const Tracker = () => {
                     setModalCreateProject(true);
                   }}
                 >
+                  <p className="create-project-btn__text">
+                    Добавить новый проект
+                  </p>
+                  <div className="create-project-btn__content">
                     <img src={addProjectImg} alt="#"></img>
-                  <p className="create-project-btn__text">Добавить проект</p>
+                    <p>
+                      Ставьте задачи, следите за прогрессом, ведите учёт
+                      рабочего времени
+                    </p>
+                  </div>
                 </BaseButton>
               </>
             )}

src/pages/Tracker/tracker.scss

@@ -162,21 +162,35 @@
         }
 
         .create-project-btn {
-          width: 300px;
+          width: 22%;
-          height: 83px;
+          height: 170px;
           border-radius: 12px;
           background: #ecf8e5;
           color: #000000;
           display: flex;
-          align-items: center;
+          flex-direction: column;
-          justify-content: center;
+          justify-content: flex-start;
           transition: 0.4s;
+          padding: 10px 10px;
 
           &__text {
-            text-align: left;
+            color: #1458dd;
-            font-weight: 400;
+            text-align: center;
+            font-weight: 700;
             font-size: 18px;
-            margin-left: 15px;
+            margin: 0 0 25px 0;
+          }
+
+          &__content {
+            display: flex;
+            align-items: center;
+            margin: 0 20px 0 20px;
+            font-size: 10px;
+            font-weight: 400;
+
+            img {
+              margin: 0 20px 0 0;
+            }
           }
 
           &:hover {