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;
+  }
 }