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