Merge remote-tracking branch 'origin/update-modal-app' into candidate-area

# Conflicts:
#	src/App.js

src/components/ProjectTiket/projectTiket.scss

@@ -25,6 +25,9 @@
     line-height: 32px;
     color: #111112;
     margin-bottom: 10px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
   &__info {

src/components/UI/ModalAdd/modalAdd.scss

@@ -15,7 +15,7 @@
     position: relative;
     width: 424px;
     background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
-    border-radius: 40px;
+    border-radius: 24px;
 
     padding: 60px 60px 30px 60px;
     display: flex;

src/components/UI/ModalCreate/ModalCreate.scss

@@ -1,5 +1,5 @@
 .modal-project {
-  z-index: 9;
+  z-index: 9999;
   height: 100%;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.11);

src/components/UI/ModalTicket/ModalTicket.js

@@ -13,11 +13,13 @@ import del from "../../../images/delete.svg";
 import edit from "../../../images/edit.svg";
 import send from "../../../images/send.svg";
 import plus from "../../../images/plus.svg";
+import fullScreen from "../../../images/inFullScreen.svg";
 
 import ModalAdd from "../ModalAdd/ModalAdd";
-import "./ModalTiket.scss";
+import "./ModalTicket.scss";
+import { Link } from "react-router-dom";
 
-export const ModalTiket = ({ active, setActive }) => {
+export const ModalTiсket = ({ active, setActive, index }) => {
   const [tiket] = useState({
     name: "Разработка трекера",
     code: "PR - 2245",
@@ -50,6 +52,9 @@ export const ModalTiket = ({ active, setActive }) => {
           <h3 className="title-project">
             <img src={category} className="title-project__category"></img>
             Проект: {tiket.name}
+            <Link to={`/tracker/${index}`} className="title-project__full">
+              <img src={fullScreen}></img>
+            </Link>
           </h3>
 
           <div className="content__task">
@@ -154,4 +159,4 @@ export const ModalTiket = ({ active, setActive }) => {
   );
 };
 
-export default ModalTiket;
+export default ModalTiсket;

src/components/UI/ModalTicket/ModalTicket.scss

@@ -41,6 +41,10 @@
       &__category {
         margin-right: 17px;
       }
+
+      &__full {
+        margin-left: 35%;
+      }
     }
 
     &__task {

src/components/UI/TicketFullScreen/TicketFullScreen.js

@@ -0,0 +1,256 @@
+import React, { useState } from "react";
+
+import { ProfileHeader } from "../../ProfileHeader/ProfileHeader";
+import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs";
+import { Footer } from "../../Footer/Footer";
+import { Link } from "react-router-dom";
+import ModalAdd from "../ModalAdd/ModalAdd";
+
+import avatarMock1 from "../../../images/avatarMoсk1.png";
+import avatarMock2 from "../../../images/avatarMoсk2.png";
+import project from "../../../images/trackerProject.svg";
+import watch from "../../../images/watch.png";
+import file from "../../../images/fileModal.svg";
+import task from "../../../images/tasksMock.png";
+import send from "../../../images/send.svg";
+import arrow2 from "../../../images/arrowStart.png";
+import plus from "../../../images/plus.svg";
+import tasks from "../../../images/trackerTasks.svg";
+import archive from "../../../images/archiveTracker.svg";
+import selectArrow from "../../../images/select.svg";
+import avatarTest from "../../../images/AvatarTest .png";
+import arrow from "../../../images/arrowCalendar.png";
+import link from "../../../images/link.svg";
+import archive2 from "../../../images/archive.svg";
+import del from "../../../images/delete.svg";
+import edit from "../../../images/edit.svg";
+
+import "./ticketFullScreen.scss";
+
+export const TicketFullScreen = ({}) => {
+  const [toggleTab, setToggleTab] = useState(1);
+  const [addSubtask, setAddSubtask] = useState(false);
+  const [modalAddWorker, setModalAddWorker] = useState(false);
+  const [valueTiket, setValueTiket] = useState("");
+
+  const [tiket] = useState({
+    name: "Разработка трекера",
+    code: "PR - 2245",
+    creator: "Василий Тарасов",
+    descriptions:
+      "На многих страницах сайта отсутствуют или некорректно заполнены метатеги Description. Это может негативно повлиять на представление сайта в результатах поиска. Необходимо исправить все страницы где есть ошибки или отсутствует Title и  Description.",
+  });
+  const [workers] = useState([
+    {
+      name: "Дмитрий Рогов",
+      avatar: avatarMock2,
+    },
+    {
+      name: "Марина Серова",
+      avatar: avatarMock1,
+    },
+  ]);
+
+  const toggleTabs = (index) => {
+    setToggleTab(index);
+  };
+
+  return (
+    <section className="ticket-full-screen">
+      <ProfileHeader />
+      <div className="container">
+        <div className="tracker__content">
+          <ProfileBreadcrumbs
+            links={[
+              { name: "Главная", link: "/profile" },
+              { name: "Трекер", link: "/profile/tracker" },
+            ]}
+          />
+          <h2 className="tracker__title">Управление проектами с трекером</h2>
+        </div>
+      </div>
+      <div className="tracker__tabs">
+        <div className="tracker__tabs__head">
+          <div
+            className={toggleTab === 1 ? "tab active-tab" : "tab"}
+            onClick={() => toggleTabs(1)}
+          >
+            <img src={project} alt="img" />
+            <p>Проекты </p>
+          </div>
+          <div
+            className={toggleTab === 2 ? "tab active-tab" : "tab"}
+            onClick={() => toggleTabs(2)}
+          >
+            <img src={tasks} alt="img" />
+            <Link to={`/profile/tracker`} className="link">
+              <p>Все мои задачи</p>
+            </Link>
+          </div>
+          <div
+            className={toggleTab === 3 ? "tab active-tab" : "tab"}
+            onClick={() => toggleTabs(3)}
+          >
+            <img src={archive} alt="img" />
+            <Link to={`/profile/tracker`} className="link">
+              <p>Архив</p>
+            </Link>
+          </div>
+        </div>
+        <div className="tracker__tabs__content content-tabs">
+          <div className="tasks__head">
+            <div className="tasks__head__wrapper">
+              <h4>Проект : Разработка трекера</h4>
+
+              <ModalAdd active={modalAddWorker} setActive={setModalAddWorker}>
+                <div className="title-project">
+                  <h4>Добавьте участника</h4>
+                  <p className="title-project__decs">Введите имя или e-mail</p>
+                  <div className="input-container">
+                    <input
+                      className="name-project"
+                      value={valueTiket}
+                      onChange={(e) => setValueTiket(e.target.value)}
+                    ></input>
+                  </div>
+                </div>
+                <button
+                  className="button-add"
+                  onClick={(e) => e.preventDefault()}
+                >
+                  Добавить
+                </button>
+              </ModalAdd>
+
+              <div className="tasks__head__persons">
+                <img src={avatarTest} alt="avatar" />
+                <img src={avatarTest} alt="avatar" />
+                <span className="countPersons">+9</span>
+                <span className="addPerson" onClick={setModalAddWorker}>
+                  +
+                </span>
+                <p>добавить участника в проект</p>
+              </div>
+              <div className="tasks__head__select">
+                <span>Учавствую</span>
+                <img src={selectArrow} alt="arrow" />
+              </div>
+              <div className="tasks__head__select">
+                <span>Мои</span>
+                <img src={selectArrow} alt="arrow" />
+              </div>
+              <Link to={`/profile/tracker`} className="link">
+                <div className="tasks__head__back">
+                  <p>Вернуться на проекты</p>
+                  <img src={arrow} alt="arrow" />
+                </div>
+              </Link>
+            </div>
+          </div>
+        </div>
+        <div className="modal-tiket__content ticket">
+          <div className="content ticket-whith">
+            <div className="content__task">
+              <span>Задача</span>
+              <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="tasks">
+                  <button onClick={() => setAddSubtask(true)}>
+                    <img src={plus}></img>
+                    Добавить под задачу
+                  </button>
+                </p>
+                <p className="file">
+                  <button>
+                    <img src={file}></img>
+                    Загрузить файл
+                  </button>
+                  <span>{0}</span>
+                  Файлов
+                </p>
+              </div>
+              <div className="content__input">
+                <input placeholder="Оставить комментарий"></input>
+                <img src={send}></img>
+              </div>
+            </div>
+          </div>
+          <div className="workers">
+            <div className="workers_box">
+              <p className="workers__creator">Создатель : {tiket.creator}</p>
+              <div>
+                {workers.map((worker, index) => {
+                  return (
+                    <div className="worker" key={index}>
+                      <img src={worker.avatar}></img>
+                      <p>{worker.name}</p>
+                    </div>
+                  );
+                })}
+              </div>
+
+              <div className="add-worker moreItems">
+                <button>+</button>
+                <span>Добавить участников</span>
+              </div>
+            </div>
+
+            <div className="workers_box-middle">
+              <div className="time">
+                <img src={watch}></img>
+                <span>Длительность : </span>
+                <p>{"8:30:22"}</p>
+              </div>
+
+              <button className="start">
+                Начать делать <img src={arrow2}></img>
+              </button>
+            </div>
+
+            <div className="workers_box-bottom">
+              <div>
+                <img src={edit}></img>
+                <p>редактировать</p>
+              </div>
+              <div>
+                <img src={link}></img>
+                <p>ссылка на проект</p>
+              </div>
+              <div>
+                <img src={archive2}></img>
+                <p>в архив</p>
+              </div>
+              <div>
+                <img src={del}></img>
+                <p>удалить</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <ModalAdd active={addSubtask} setActive={setAddSubtask}>
+          <div className="title-project subtask">
+            <h4>
+              Вы добавляете подзадачу <p>в колонку задачи {"Готово"}</p>
+            </h4>
+            <p className="title-project__decs">Введите текст</p>
+            <div>
+              <textarea className="title-project__textarea"></textarea>
+            </div>
+          </div>
+          <button className="button-add" onClick={(e) => e.preventDefault()}>
+            Добавить
+          </button>
+        </ModalAdd>
+      </div>
+      <Footer />
+    </section>
+  );
+};
+
+export default TicketFullScreen;

src/components/UI/TicketFullScreen/ticketFullScreen.scss

@@ -0,0 +1,28 @@
+.ticket-full-screen {
+  background: #f5f5f5;
+}
+
+.ticket {
+  border: none;
+  justify-content: center;
+
+  &-whith {
+    width: 850px !important;
+  }
+}
+
+// .modal-tiket__content .content {
+//   width: 70%;
+// }
+
+.content-tabs {
+  padding-bottom: 0;
+}
+
+.link {
+  color: #252c32;
+  &:hover {
+    color: #252c32;
+    text-decoration: none;
+  }
+}