Finished update modal for tracker

src/components/UI/ModalAdd/modalAdd.scss

@@ -14,14 +14,13 @@
   &__content {
     position: relative;
     width: 424px;
-    height: 248px;
     background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
     border-radius: 40px;
 
-    padding: 15px;
+    padding: 60px 60px 30px 60px;
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: flex-start;
     justify-content: center;
   }
 
@@ -41,8 +40,26 @@
       font-weight: 500;
       font-size: 22px;
       line-height: 26px;
-      color: #263238;
+      color: #263238 !important;
-      margin-bottom: 22px;
+      margin-bottom: 22px !important;
+    }
+
+    &__decs {
+      font-weight: 300;
+      font-size: 12px;
+      line-height: 14px;
+      margin: -13px 0 16px 0;
+    }
+
+    &__textarea {
+      resize: none;
+      width: 302px;
+      height: 83px;
+      background: #ffffff;
+      border-radius: 8px;
+      border: none;
+      font-size: 15px;
+      line-height: 18px;
     }
   }
 
@@ -56,7 +73,7 @@
   }
 
   .button-add {
-    margin: 30px 0 0 0;
+    margin: 20px 40% 0 0;
     width: 130px;
     height: 37px;
     background: #52b709;

src/components/UI/ModalTiket/ModalTiket.js

@@ -15,6 +15,7 @@ import send from "../../../images/send.svg";
 import plus from "../../../images/plus.svg";
 
 import "./ModalTiket.scss";
+import ModalAdd from "../ModalAdd/ModalAdd";
 
 export const ModalTiket = ({ active, setActive }) => {
   const [tiket] = useState({
@@ -24,7 +25,6 @@ export const ModalTiket = ({ active, setActive }) => {
     descriptions:
       "На многих страницах сайта отсутствуют или некорректно заполнены метатеги Description. Это может негативно повлиять на представление сайта в результатах поиска. Необходимо исправить все страницы где есть ошибки или отсутствует Title и  Description.",
   });
-
   const [workers] = useState([
     {
       name: "Дмитрий Рогов",
@@ -35,6 +35,7 @@ export const ModalTiket = ({ active, setActive }) => {
       avatar: avatarMock1,
     },
   ]);
+  const [addSubtask, setAddSubtask] = useState(false);
 
   return (
     <div
@@ -61,7 +62,7 @@ export const ModalTiket = ({ active, setActive }) => {
             </div>
             <div className="content__communication">
               <p className="tasks">
-                <button>
+                <button onClick={() => setAddSubtask(true)}>
                   <img src={plus}></img>
                   Добавить под задачу
                 </button>
@@ -135,6 +136,20 @@ export const ModalTiket = ({ active, setActive }) => {
           </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>
   );
 };

src/components/UI/ModalTiket/ModalTiket.scss

@@ -304,3 +304,12 @@
     }
   }
 }
+
+.subtask {
+  h4 {
+    width: 90%;
+    p {
+      color: #1458dd;
+    }
+  }
+}

src/pages/Tracker/Tracker.js

@@ -662,6 +662,28 @@ export const Tracker = () => {
                   </button>
                 </ModalAdd>
 
+                <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__add">
                   <span onClick={() => setModalCreateColl(true)}>+</span>
                   <p>добавить задачу в проект</p>
@@ -670,7 +692,9 @@ export const Tracker = () => {
                   <img src={avatarTest} alt="avatar" />
                   <img src={avatarTest} alt="avatar" />
                   <span className="countPersons">+9</span>
-                  <span className="addPerson">+</span>
+                  <span className="addPerson" onClick={setModalAddWorker}>
+                    +
+                  </span>
                   <p>добавить участника в проект</p>
                 </div>
                 <div className="tasks__head__select">