From df9e1d5a238f4c8b9f1d3342f972ad935f14f11d Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Tue, 28 Mar 2023 20:42:18 +0300 Subject: [PATCH] Added modal registr --- src/components/AuthBox/AuthBox.js | 5 +- .../UI/ModalRegistration/ModalRegistration.js | 79 ++++++++ .../ModalRegistration/modalRegistration.scss | 174 ++++++++++++++++++ src/images/TgLogo.svg | 9 + src/images/anyMoment.svg | 29 +++ src/images/doc.svg | 10 + 6 files changed, 305 insertions(+), 1 deletion(-) create mode 100644 src/components/UI/ModalRegistration/ModalRegistration.js create mode 100644 src/components/UI/ModalRegistration/modalRegistration.scss create mode 100644 src/images/TgLogo.svg create mode 100644 src/images/anyMoment.svg create mode 100644 src/images/doc.svg diff --git a/src/components/AuthBox/AuthBox.js b/src/components/AuthBox/AuthBox.js index e614b6c0..6954fb7e 100644 --- a/src/components/AuthBox/AuthBox.js +++ b/src/components/AuthBox/AuthBox.js @@ -14,6 +14,7 @@ import ModalErrorLogin from "../../components/UI/ModalErrorLogin/ModalErrorLogin import { apiRequest } from "../../api/request"; import ellipse from "../../images/ellipse.png"; +import ModalRegistration from "../UI/ModalRegistration/ModalRegistration"; import "./authBox.scss"; @@ -27,6 +28,7 @@ export const AuthBox = ({ title }) => { const [error, setError] = useState(null); const [modalError, setModalError] = useState(false); + const [modalReg, setModalReg] = useState(false); useEffect(() => { if (!localStorage.getItem("auth_token")) { @@ -112,11 +114,12 @@ export const AuthBox = ({ title }) => { {isLoading ? : "Войти"} - {/* TODO: при клике отправлять на форму/модалку/страницу регистрации */} + +
+ У вас уже есть аккаунт?

Войти

+
+ + +
+

Отказ от специалиста в любой момент

+
+ +

+ Поменяйте, откажитесь или возьмите еще специалиста в любой момент + работы. +

+
+

100% постоплата

+
+ +

+ Договор не подразумевает какую‑либо оплату до того, как вы + арендовали специалиста +

+
+

Есть вопросы?

+
+ +

Напишите нам в Телеграм. Мы с удовольствием ответим!

+
+
+ setActive(false)}> + + + ); +}; + +export default ModalRegistration; diff --git a/src/components/UI/ModalRegistration/modalRegistration.scss b/src/components/UI/ModalRegistration/modalRegistration.scss new file mode 100644 index 00000000..0dc24776 --- /dev/null +++ b/src/components/UI/ModalRegistration/modalRegistration.scss @@ -0,0 +1,174 @@ +.modal-registration { + 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; + background: white; + display: flex; + flex-direction: row; + + justify-content: space-between; + border: 1px solid #dde2e4; + border-radius: 8px; + width: 1088px; + height: 529px; + + .body-reg { + &__left { + padding: 60px 0 30px 77px; + + h2 { + font-weight: 500; + font-size: 35px; + line-height: 32px; + display: flex; + justify-content: space-between; + width: 405px; + margin: 0 auto; + } + + h2 > p { + font-size: 35px; + color: #52b709; + } + + &-desc { + text-align: center; + width: 500px; + font-weight: 500; + font-size: 16px; + line-height: 28px; + margin: 20px auto 0 auto; + } + + .input-body { + margin-top: 44px; + display: flex; + flex-direction: row; + + &__box { + margin-right: 25px; + display: flex; + flex-direction: column; + + h5 { + font-weight: 400; + font-size: 15px; + line-height: 18px; + } + + input { + width: 294px; + height: 35px; + background: #eff2f7; + border-radius: 8px; + border: none; + margin-bottom: 35px; + padding-left: 20px; + } + } + } + + .button-box { + display: flex; + flex-direction: row; + margin-top: 10px; + + button { + width: 174px; + height: 46px; + background: #52b709; + border-radius: 44px; + border: none; + font-size: 18px; + line-height: 32px; + color: white; + margin-right: 55px; + } + + h5 { + display: flex; + align-items: flex-end; + font-size: 16px; + line-height: 28px; + + p { + color: #406128; + text-decoration: underline; + margin: 0 0 0 5px; + } + } + } + } + + &__right { + border-left: 1px solid #f1f1f1; + padding: 80px 32px 46px 25px; + display: flex; + flex-direction: column; + justify-content: space-between; + + h4 { + font-weight: 900; + font-size: 14px; + line-height: 24px; + color: #52b709; + margin-right: 100px; + width: 180px; + } + + &-text { + display: flex; + flex-direction: row; + + p { + font-weight: 400; + font-size: 12px; + line-height: 22px; + width: 205px; + } + + img { + margin: 0 18px 20px 0; + } + } + } + } + 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-registration.active { + transform: scale(1); +} diff --git a/src/images/TgLogo.svg b/src/images/TgLogo.svg new file mode 100644 index 00000000..f74d1806 --- /dev/null +++ b/src/images/TgLogo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/anyMoment.svg b/src/images/anyMoment.svg new file mode 100644 index 00000000..7bc43ae8 --- /dev/null +++ b/src/images/anyMoment.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/doc.svg b/src/images/doc.svg new file mode 100644 index 00000000..df3d1d08 --- /dev/null +++ b/src/images/doc.svg @@ -0,0 +1,10 @@ + + + + + + + + + +