Added new ModalAdd

src/components/UI/ModalAdd/ModalAdd.js

@@ -0,0 +1,19 @@
+import React from "react";
+
+import "./modalAdd.scss";
+
+export const ModalAdd = ({ children, active, setActive }) => {
+  return (
+    <div
+      className={active ? "modal-add active" : "modal-add"}
+      onClick={() => setActive(false)}
+    >
+      <div className="modal-add__content" onClick={(e) => e.stopPropagation()}>
+        {children}
+        <span className="exit" onClick={() => setActive(false)}></span>
+      </div>
+    </div>
+  );
+};
+
+export default ModalAdd;

src/components/UI/ModalAdd/modalAdd.scss

@@ -0,0 +1,100 @@
+.modal-add {
+  z-index: 9;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.11);
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: scale(0);
+
+  &__content {
+    position: relative;
+    width: 424px;
+    height: 248px;
+    background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
+    border-radius: 40px;
+
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .title-project {
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+
+    .input-container {
+      width: 287px;
+      height: 35px;
+      background: #ffffff;
+      border-radius: 8px;
+    }
+
+    h4 {
+      font-weight: 500;
+      font-size: 22px;
+      line-height: 26px;
+      color: #263238;
+      margin-bottom: 22px;
+    }
+  }
+
+  .name-project {
+    margin-left: 10px;
+    border: none;
+    outline: none;
+    height: 100%;
+    width: 90%;
+    font-size: 14px;
+  }
+
+  .button-add {
+    margin: 30px 0 0 0;
+    width: 130px;
+    height: 37px;
+    background: #52b709;
+    border-radius: 44px;
+    border: none;
+    font-weight: 400;
+    font-size: 15px;
+    line-height: 32px;
+    color: #ffffff;
+    display: flex;
+    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);
+    }
+  }
+}
+
+.modal-add.active {
+  transform: scale(1);
+}

src/components/UI/ModalCreate/ModalCreate.js

@@ -4,7 +4,7 @@ import { setProject } from "../../../redux/projectsTrackerSlice";
 
 import "./ModalCreate.scss";
 
-export const ModalCreate = ({ active, setActive, title, desc }) => {
+export const ModalCreate = ({ active, setActive, title }) => {
   const [inputValue, setInputValue] = useState("");
   const dispatch = useDispatch();
 
@@ -33,7 +33,6 @@ export const ModalCreate = ({ active, setActive, title, desc }) => {
       >
         <div className="title-project">
           <h4>{title}</h4>
-          <p>{desc}</p>
           <div className="input-container">
             <input
               className="name-project"