Added modal in project

src/components/UI/ModalProject/ModalProject.js

@@ -4,11 +4,22 @@ import "./ModalProject.scss";
 
 export const ModalProject = ({ active, setActive }) => {
   return (
-    <div className={active ? "modal-project active" : "modal-project"}>
+    <div
+      className={active ? "modal-project active" : "modal-project"}
+      onClick={() => setActive(false)}
+    >
       <div
         className="modal-project__content"
         onClick={(e) => e.stopPropagation()}
-      ></div>
+      >
+        <div className="title-project">
+          <h4>Укажите название проекта: </h4>
+          <div className="input-container">
+            <input className="name-project"></input>
+          </div>
+        </div>
+        <button className="create-project">Создать</button>
+      </div>
     </div>
   );
 };

src/components/UI/ModalProject/ModalProject.scss

@@ -17,9 +17,41 @@
 }
 
 .modal-project__content {
+  padding: 15px;
   background: #ffffff;
   border: 1px solid #dde2e4;
   border-radius: 8px;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  align-items: center;
+
+  .title-project {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    .input-container {
+      width: 220px;
+      height: 25px;
+      border-radius: 44px;
+      border: 1px solid #d1d1d1;
+    }
+
+    h4 {
+      margin-bottom: 10px;
+    }
+  }
+
+  .name-project {
+    margin-left: 10px;
+    border: none;
+    outline: none;
+    height: 100%;
+    width: 90%;
+    font-size: 14px;
+  }
+
+  .create-project {
+    margin: 15px 0 0 0;
+  }
 }

src/pages/Tracker/Tracker.js

@@ -3,6 +3,9 @@ import React, { useState } from "react";
 import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
 import { Footer } from "../../components/Footer/Footer";
 
+import ModalTiket from "../../components/UI/ModalTiket/ModalTiket";
+import ModalProject from "../../components/UI/ModalProject/ModalProject";
+
 import project from "../../images/trackerProject.svg";
 import tasks from "../../images/trackerTasks.svg";
 import archive from "../../images/archiveTracker.svg";
@@ -12,7 +15,6 @@ import commentsBoard from "../../images/commentsBoard.svg";
 import filesBoard from "../../images/filesBoard.svg";
 
 import "./tracker.scss";
-import ModalTiket from "../../components/UI/ModalTiket/ModalTiket";
 
 export const Tracker = () => {
   const [toggleTab, setToggleTab] = useState(1);
@@ -118,6 +120,7 @@ export const Tracker = () => {
   ]);
 
   const [modalActiveTicket, setModalActiveTicket] = useState(false);
+  const [modalActiveProject, setModalActiveProject] = useState(false);
 
   const toggleTabs = (index) => {
     setToggleTab(index);
@@ -172,8 +175,11 @@ export const Tracker = () => {
                     </div>
                   );
                 })}
-
+                <ModalProject
-                <button>
+                  active={modalActiveProject}
+                  setActive={setModalActiveProject}
+                />
+                <button onClick={() => setModalActiveProject(true)}>
                   <span>+</span>Создать проект
                 </button>
               </div>