Merge remote-tracking branch 'origin/trecker-modal-tiсket' into tracker

# Conflicts:
#	src/pages/Tracker/Tracker.js
#	src/pages/Tracker/tracker.scss

src/components/UI/ModalProject/ModalProject.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+import "./ModalProject.scss";
+
+export const ModalProject = ({ active, setActive }) => {
+  return (
+    <div className={active ? "modal-project active" : "modal-project"}>
+      <div
+        className="modal-project__content"
+        onClick={(e) => e.stopPropagation()}
+      ></div>
+    </div>
+  );
+};
+
+export default ModalProject;

src/components/UI/ModalProject/ModalProject.scss

@@ -0,0 +1,25 @@
+.modal-project {
+  z-index: 9;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.11);
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: scale(0);
+}
+
+.modal-project.active {
+  transform: scale(1);
+}
+
+.modal-project__content {
+  background: #ffffff;
+  border: 1px solid #dde2e4;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: row;
+}

src/components/UI/ModalTiket/ModalTiket.js

@@ -0,0 +1,111 @@
+import React, { useState } from "react";
+import "./ModalTiket.scss";
+
+import creatorMock from "../../../images/avatarMoсkCreator.png";
+import avatarMock1 from "../../../images/avatarMoсk1.png";
+import avatarMock2 from "../../../images/avatarMoсk2.png";
+import category from "../../../images/category.png";
+import comments from "../../../images/comments.png";
+import watch from "../../../images/watch.png";
+import files from "../../../images/files.png";
+import task from "../../../images/tasksMock.png";
+import arrow from "../../../images/arrowStart.png";
+
+export const ModalTiket = ({ active, setActive }) => {
+  const [tiket] = useState({
+    name: "Разработка трекера",
+    code: "PR - 2245",
+    creator: "Василий Тарасов",
+    descriptions:
+      "На многих страницах сайта отсутствуют или некорректно заполнены метатеги Description. Это может негативно повлиять на представление сайта в результатах поиска.Необходимо исправить все страницы где есть ошибки или отсутствует Title и  Description.",
+  });
+
+  const [workers] = useState([
+    {
+      name: "Дмитрий Рогов",
+      avatar: avatarMock2,
+    },
+    {
+      name: "Марина Серова",
+      avatar: avatarMock1,
+    },
+  ]);
+
+  return (
+    <div
+      className={active ? "modal-tiket active" : "modal-tiket"}
+      onClick={() => setActive(false)}
+    >
+      <div
+        className="modal-tiket__content"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="author">
+          <a href="#">
+            <img src={creatorMock}></img>
+          </a>
+          <a href="#">
+            <img src={creatorMock}></img>
+          </a>
+        </div>
+        <div className="content">
+          <h3 className="title-project">
+            <img src={category} className="title-project__category"></img>
+            Проект: {tiket.name}
+          </h3>
+          <div className="content__task">
+            <h5>{tiket.code}</h5>
+            <div className="content__description">
+              <p>{tiket.descriptions}</p>
+              <img src={task} className="image-task"></img>
+              <p>{tiket.descriptions}</p>
+            </div>
+            <div className="content__communication">
+              <p className="comment">
+                <img src={comments}></img>
+                <span>{0}</span>
+                Коментариев
+              </p>
+              <p className="file">
+                <img src={files}></img>
+                <span>{0}</span>
+                Файлов
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className="workers">
+          <span>{tiket.code}</span>
+          <p className="workers__creator">Создатель : {tiket.creator}</p>
+          <div>
+            {workers.map((worker) => {
+              return (
+                <div className="worker">
+                  <img src={worker.avatar}></img>
+                  <p>{worker.name}</p>
+                </div>
+              );
+            })}
+          </div>
+
+          <div className="add-worker">
+            <button>+</button>
+            <span>Добавить участников</span>
+          </div>
+
+          <div className="time">
+            <img src={watch}></img>
+            <span>Длительность : </span>
+            <p>{"8:30:22"}</p>
+          </div>
+
+          <button className="start">
+            Начать делать <img src={arrow}></img>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ModalTiket;

src/components/UI/ModalTiket/ModalTiket.scss

@@ -0,0 +1,187 @@
+.modal-tiket {
+  z-index: 9;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.11);
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: scale(0);
+}
+
+.modal-tiket.active {
+  transform: scale(1);
+}
+
+.modal-tiket__content {
+  background: #ffffff;
+  border: 1px solid #dde2e4;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: row;
+
+  .author {
+    padding: 25px 0 0 0;
+    border-radius: 8px 0 0 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 76px;
+    background: #fbfbfb;
+
+    a {
+      margin-bottom: 16px;
+    }
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    width: 600px;
+    margin: 26px 0 0 21px;
+
+    .title-project {
+      font-family: "LabGrotesque", sans-serif;
+      display: flex;
+      align-items: center;
+      font-weight: 700;
+      font-size: 16px;
+
+      &__category {
+        margin-right: 17px;
+      }
+    }
+
+    &__task {
+      margin-top: 22px;
+      padding: 18px;
+
+      h5 {
+        font-family: "Inter", sans-serif;
+        font-weight: 500;
+        font-style: normal;
+        font-size: 16px;
+        line-height: 24px;
+
+        color: #1a1919;
+      }
+    }
+
+    &__description {
+      p {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 140%;
+        color: #252c32;
+        text-align: justify;
+      }
+
+      .image-task {
+        margin: 0 0 20px 0;
+      }
+    }
+
+    &__communication {
+      display: flex;
+      flex-direction: row;
+      margin: 29px 0 0 -5px;
+
+      .comment {
+        width: 100px;
+        justify-content: space-evenly;
+      }
+
+      .comment,
+      .file {
+        display: flex;
+        align-items: center;
+      }
+
+      .file {
+        justify-content: space-between;
+        margin-left: 20px;
+        width: 70px;
+      }
+    }
+  }
+
+  .workers {
+    border-left: 1px solid #f1f1f1;
+    width: 300px;
+    padding: 40px;
+
+    span {
+      font-family: "Inter", sans-serif;
+      font-weight: 500;
+      font-size: 11px;
+      color: #807777;
+    }
+
+    .add-worker {
+      display: flex;
+      align-items: center;
+
+      span {
+        color: #000000;
+        font-size: 12px;
+        line-height: 32px;
+        margin-left: 17px;
+        font-style: normal;
+        font-weight: 400;
+      }
+
+      button {
+        background: #8bcc60;
+        width: 33px;
+        height: 33px;
+      }
+    }
+
+    .start {
+      margin-top: 25px;
+      background: #1458dd;
+      border-radius: 44px;
+
+      img {
+        margin-left: 10px;
+      }
+    }
+
+    .time {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 12px;
+      margin-top: 20px;
+      width: 160px;
+
+      p {
+        color: #000000;
+        margin: 0;
+      }
+    }
+
+    &__creator {
+      font-size: 14px;
+      line-height: 32px;
+      font-weight: 500;
+      color: #2d4a17;
+    }
+
+    .worker {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-bottom: 15px;
+
+      p {
+        margin: 0 0 0 11px;
+        font-size: 12px;
+        color: #807777;
+      }
+    }
+  }
+}

src/pages/Tracker/tracker.scss

@@ -3,6 +3,7 @@
   height: 100%;
   min-height: 100vh;
   font-family: "LabGrotesque", sans-serif;
+  position: relative;
 
   .container {
     max-width: 1160px;

tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5", // компилируем ts код в js код версии ES5
-    "module": "esnext",
-    // для поддержки динамического импорта модулей
-    "allowSyntheticDefaultImports": true,
-    "jsx": "react"
-  }
-}