Fixed modal and added new img

src/components/UI/ModalCreate/ModalCreate.js

@@ -40,10 +40,11 @@ export const ModalCreate = ({ active, setActive, title }) => {
               onChange={(e) => setInputValue(e.target.value)}
             ></input>
           </div>
+          <button className="create-project" onClick={createName}>
+            Создать
+          </button>
         </div>
-        <button className="create-project" onClick={createName}>
-          Создать
-        </button>
+        <span className="exit" onClick={() => setActive(false)}></span>
       </div>
     </div>
   );

src/components/UI/ModalCreate/ModalCreate.scss

@@ -12,30 +12,36 @@
   transform: scale(0);
 
   &__content {
+    position: relative;
+    width: 424px;
+    height: 248px;
+    background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
+    border-radius: 40px;
+
     padding: 15px;
-    background: #ffffff;
-    border: 1px solid #dde2e4;
-    border-radius: 8px;
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
 
     .title-project {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       flex-direction: column;
 
       .input-container {
-        width: 220px;
-        height: 25px;
-        border-radius: 44px;
-        border: 1px solid #d1d1d1;
+        width: 287px;
+        height: 35px;
+        background: #ffffff;
+        border-radius: 8px;
       }
 
       h4 {
-        color: #111112;
-        margin-bottom: 10px;
-        font-size: 14px !important;
+        font-weight: 500;
+        font-size: 22px;
+        line-height: 26px;
+        color: #263238;
+        margin-bottom: 22px;
       }
     }
 
@@ -49,9 +55,9 @@
     }
 
     .create-project {
-      margin: 15px 0 0 0;
-      width: 188px;
-      height: 40px;
+      margin: 30px 0 0 0;
+      width: 130px;
+      height: 37px;
       background: #52b709;
       border-radius: 44px;
       border: none;
@@ -63,6 +69,29 @@
       align-items: center;
       justify-content: center;
     }
+
+    .exit {
+      cursor: pointer;
+      position: absolute;
+      top: 35px;
+      right: 40px;
+
+      &:before,
+      &:after {
+        content: "";
+        position: absolute;
+        width: 16px;
+        height: 2px;
+        background: #263238;
+      }
+
+      &:before {
+        transform: rotate(45deg);
+      }
+      &:after {
+        transform: rotate(-45deg);
+      }
+    }
   }
 }
 

src/components/UI/ModalRegistration/ModalRegistration.js

@@ -41,7 +41,7 @@ export const ModalRegistration = ({ active, setActive }) => {
             </div>
           </div>
           <div className="button-box">
-            <button>Отправить</button>
+            <button onClick={(e) => e.preventDefault()}>Отправить</button>
             <h5>
               У вас уже есть аккаунт? <p>Войти</p>
             </h5>

src/components/UI/ModalTiket/ModalTiket.js

@@ -1,15 +1,20 @@
 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/commentsBoard.svg";
 import watch from "../../../images/watch.png";
-import files from "../../../images/filesBoard.svg";
+import file from "../../../images/fileModal.svg";
 import task from "../../../images/tasksMock.png";
 import arrow from "../../../images/arrowStart.png";
+import link from "../../../images/link.svg";
+import archive from "../../../images/archive.svg";
+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 "./ModalTiket.scss";
 
 export const ModalTiket = ({ active, setActive }) => {
   const [tiket] = useState({
@@ -44,13 +49,10 @@ export const ModalTiket = ({ active, setActive }) => {
           <h3 className="title-project">
             <img src={category} className="title-project__category"></img>
             Проект: {tiket.name}
-            <div className="title-project__menu">
-              <p>Редактировать</p>
-              <p>Удалить</p>
-            </div>
           </h3>
 
           <div className="content__task">
+            <span>Задача</span>
             <h5>{tiket.code}</h5>
             <div className="content__description">
               <p>{tiket.descriptions}</p>
@@ -58,48 +60,79 @@ export const ModalTiket = ({ active, setActive }) => {
               <p>{tiket.descriptions}</p>
             </div>
             <div className="content__communication">
-              <p className="comment">
-                <img src={comments}></img>
-                <span>{0}</span>
-                Коментариев
+              <p className="tasks">
+                <button>
+                  <img src={plus}></img>
+                  Добавить под задачу
+                </button>
               </p>
               <p className="file">
-                <img src={files}></img>
+                <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">
-          <span className="exit" onClick={() => setActive(false)}></span>
-          <span>{tiket.code}</span>
-          <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 className="workers_box">
+            <span className="exit" onClick={() => setActive(false)}></span>
+            <span>{tiket.code}</span>
+            <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="add-worker moreItems">
-            <button>+</button>
-            <span>Добавить участников</span>
+          <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={arrow}></img>
+            </button>
           </div>
 
-          <div className="time">
-            <img src={watch}></img>
-            <span>Длительность : </span>
-            <p>{"8:30:22"}</p>
+          <div className="workers_box-bottom">
+            <div>
+              <img src={edit}></img>
+              <p>редактировать</p>
+            </div>
+            <div>
+              <img src={link}></img>
+              <p>ссылка на проект</p>
+            </div>
+            <div>
+              <img src={archive}></img>
+              <p>в архив</p>
+            </div>
+            <div>
+              <img src={del}></img>
+              <p>удалить</p>
+            </div>
           </div>
-
-          <button className="start">
-            Начать делать <img src={arrow}></img>
-          </button>
         </div>
       </div>
     </div>

src/components/UI/ModalTiket/ModalTiket.scss

@@ -30,46 +30,35 @@
     margin: 26px 0 0 21px;
 
     .title-project {
+      color: #1458dd;
       font-family: "LabGrotesque", sans-serif;
       display: flex;
       align-items: center;
       font-weight: 700;
-      font-size: 16px;
+      font-size: 22px;
+      line-height: 32px;
 
       &__category {
         margin-right: 17px;
       }
-
-      &__menu {
-        display: flex;
-        align-items: center;
-        margin-left: 110px;
-
-        p {
-          font-weight: 400;
-          font-size: 14px;
-          color: #252c32;
-          margin: 0 30px 0 0;
-
-          &:hover {
-            cursor: pointer;
-            text-decoration: underline;
-          }
-        }
-      }
     }
 
     &__task {
-      margin-top: 22px;
+      margin-top: -5px;
       padding: 18px;
 
+      button {
+        img {
+          margin-right: 5px;
+        }
+      }
+
       h5 {
         font-family: "Inter", sans-serif;
         font-weight: 500;
         font-style: normal;
         font-size: 16px;
         line-height: 24px;
-
         color: #1a1919;
       }
     }
@@ -93,12 +82,23 @@
       flex-direction: row;
       margin: 29px 0 0 -5px;
 
-      .comment {
-        width: 100px;
+      .tasks {
         justify-content: space-evenly;
+
+        button {
+          width: 180px;
+          height: 40px;
+          background: #52b709;
+          border-radius: 44px;
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 32px;
+          border: none;
+          color: #ffffff;
+        }
       }
 
-      .comment,
+      .tasks,
       .file {
         display: flex;
         align-items: center;
@@ -107,7 +107,61 @@
       .file {
         justify-content: space-between;
         margin-left: 20px;
-        width: 70px;
+
+        button {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: white;
+          width: 166px;
+          height: 40px;
+          border: 0.5px solid #1458dd;
+          border-radius: 44px;
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 32px;
+          color: #1458dd;
+
+          img {
+            margin-right: 9px;
+          }
+        }
+
+        span {
+          margin: 0 3px 0 11px;
+          font-weight: 500;
+          font-size: 12px;
+          line-height: 15px;
+          color: #6e7c87;
+        }
+      }
+    }
+
+    &__input {
+      margin: 20px 0 20px 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 438px;
+      height: 40px;
+      background: #f1f1f1;
+      border-radius: 44px;
+
+      input {
+        width: 80%;
+        background: inherit;
+        border: none;
+        outline: none;
+        padding-left: 30px;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 32px;
+        border-radius: 44px;
+      }
+
+      img {
+        cursor: pointer;
+        margin-right: 18px;
       }
     }
   }
@@ -115,14 +169,12 @@
   .workers {
     position: relative;
     border-left: 1px solid #f1f1f1;
-    width: 300px;
-    padding: 40px;
 
     .exit {
       cursor: pointer;
       position: absolute;
-      top: 22px;
-      right: 31px;
+      top: 35px;
+      right: 40px;
 
       &:before,
       &:after {
@@ -224,5 +276,31 @@
         color: #807777;
       }
     }
+
+    &_box {
+      padding: 25px 85px 40px 40px;
+      border-bottom: 1px solid #f1f1f1;
+
+      &-middle {
+        padding: 0px 40px 25px 40px;
+        border-bottom: 1px solid #f1f1f1;
+      }
+
+      &-bottom {
+        padding: 40px 0 75px 56px;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 38px;
+
+        div {
+          display: flex;
+          align-items: center;
+
+          p {
+            margin: 0 0 0 12px;
+          }
+        }
+      }
+    }
   }
 }