From 7ca123900249e894a1685eb7fb3d558ba04f8ed4 Mon Sep 17 00:00:00 2001
From: MaxOvs19 <gshk3669@gmail.com>
Date: Mon, 20 Mar 2023 13:05:27 +0300
Subject: [PATCH] Finish update modal error

---
 .../UI/ModalErrorLogin/ModalErrorLogin.js     | 21 ++++-
 .../UI/ModalErrorLogin/modalErrorLogin.scss   | 77 +++++++++++++++++++
 2 files changed, 96 insertions(+), 2 deletions(-)

diff --git a/src/components/UI/ModalErrorLogin/ModalErrorLogin.js b/src/components/UI/ModalErrorLogin/ModalErrorLogin.js
index 65a18cbd..37aa0780 100644
--- a/src/components/UI/ModalErrorLogin/ModalErrorLogin.js
+++ b/src/components/UI/ModalErrorLogin/ModalErrorLogin.js
@@ -2,8 +2,25 @@ import React from "react";
 
 import "./modalErrorLogin.scss";
 
-export const ModalErrorLogin = ({}) => {
-  return <div></div>;
+export const ModalErrorLogin = ({ active, setActive }) => {
+  return (
+    <div
+      className={active ? "modal-error active" : "modal-error"}
+      onClick={() => setActive(false)}
+    >
+      <div
+        className="modal-error__content"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <h2>Ошибка входа</h2>
+        <p>Введены некоректные данные для входа</p>
+        <button className="modal-error__content-button">
+          Попробовать еще раз
+        </button>
+        <span onClick={() => setActive(false)}></span>
+      </div>
+    </div>
+  );
 };
 
 export default ModalErrorLogin;
diff --git a/src/components/UI/ModalErrorLogin/modalErrorLogin.scss b/src/components/UI/ModalErrorLogin/modalErrorLogin.scss
index e69de29b..83bae3a1 100644
--- a/src/components/UI/ModalErrorLogin/modalErrorLogin.scss
+++ b/src/components/UI/ModalErrorLogin/modalErrorLogin.scss
@@ -0,0 +1,77 @@
+.modal-error {
+  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;
+    padding: 54px 76px;
+    background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
+    border-radius: 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    h2 {
+      font-size: 24px;
+      line-height: 29px;
+      color: #263238;
+      margin-bottom: 16px;
+    }
+
+    p {
+      font-size: 12px;
+      line-height: 14px;
+      width: 176px;
+      text-align: center;
+      font-weight: 300;
+      margin-bottom: 30px;
+    }
+
+    &-button {
+      color: white;
+      font-size: 14px;
+      line-height: 32px;
+      width: 198px;
+      height: 50px;
+      background: #52b709;
+      border-radius: 44px;
+      border: none;
+    }
+
+    span {
+      cursor: pointer;
+      position: absolute;
+      top: 30px;
+      right: 36px;
+
+      &:before,
+      &:after {
+        content: "";
+        position: absolute;
+        width: 16px;
+        height: 2px;
+        background: #263238;
+      }
+
+      &:before {
+        transform: rotate(45deg);
+      }
+      &:after {
+        transform: rotate(-45deg);
+      }
+    }
+  }
+}
+
+.modal-error.active {
+  transform: scale(1);
+}