diff --git a/src/App.js b/src/App.js index 8c987891..f758f1a7 100644 --- a/src/App.js +++ b/src/App.js @@ -12,6 +12,7 @@ import AuthForPartners from "./pages/AuthForPartners/AuthForPartners"; import AuthForDevelopers from "./pages/AuthForDevelopers/AuthForDevelopers"; import { TrackerIntro } from "./pages/TrackerIntro/TrackerIntro" import { TrackerAuth } from "@pages/TrackerAuth/TrackerAuth"; +import { TrackerRegistration } from "@pages/TrackerRegistration/TrackerRegistration"; import Home from "./pages/Home/Home"; import Candidate from "./components/Candidate/Candidate"; import Calendar from "./components/Calendar/Calendar"; @@ -61,6 +62,7 @@ const App = () => { } /> } /> } /> + } /> } /> { +export const AuthBlock = ({ title, description, img, resetModal }) => { return (
@@ -31,7 +31,7 @@ export const AuthBlock = ({ title, description, img }) => { > Войти - Вспомнить пароль + resetModal(true)}>Вспомнить пароль
{img && authImg} diff --git a/src/components/AuthBlock/authBlock.scss b/src/components/AuthBlock/authBlock.scss index 6bf6ea1e..dff8e5c5 100644 --- a/src/components/AuthBlock/authBlock.scss +++ b/src/components/AuthBlock/authBlock.scss @@ -103,7 +103,7 @@ &__img { position: absolute; - right: 10px; + right: 48px; top: -90px; } } diff --git a/src/components/Modal/ModalReset/ModalReset.js b/src/components/Modal/ModalReset/ModalReset.js new file mode 100644 index 00000000..693d1922 --- /dev/null +++ b/src/components/Modal/ModalReset/ModalReset.js @@ -0,0 +1,24 @@ +import React from "react"; + +import close from "assets/icons/closeProjectPersons.svg"; + +import "./modalReset.scss"; + +export const ModalReset = ({ setModalReset }) => { + return ( +
+

Восстановление доступа

+
+ Укажите e-mail, для которого хотите восстановить пароль. + +
+ + setModalReset(false)} + src={close} + className="modalReset__close" + alt="close" + /> +
+ ); +}; diff --git a/src/components/Modal/ModalReset/modalReset.scss b/src/components/Modal/ModalReset/modalReset.scss new file mode 100644 index 00000000..c2c8deba --- /dev/null +++ b/src/components/Modal/ModalReset/modalReset.scss @@ -0,0 +1,59 @@ +.modalReset { + display: flex; + flex-direction: column; + border-radius: 20px; + background: linear-gradient(180deg, #FFF 0%, #EBEBEB 100%); + padding: 23px 110px 8px 36px; + row-gap: 29px; + position: relative; + + &__title { + font-size: 24px; + font-weight: 500; + color: #263238; + margin-bottom: 0; + } + + &__input { + display: flex; + flex-direction: column; + row-gap: 15px; + + span { + font-size: 15px; + color: #000; + } + + input { + padding: 8px 12px; + font-size: 15px; + border-radius: 8px; + background-color: #EFF2F7; + outline: none; + border: none; + max-width: 300px; + } + } + + &__submit { + border-radius: 44px; + background: #52B709; + padding: 9px 46px; + color: #FFF; + font-size: 16px; + font-weight: 500; + line-height: 32px; + border: none; + max-width: 200px; + outline: none; + } + + &__close { + position: absolute; + top: 28px; + right: 28px; + width: 15px; + height: 15px; + cursor: pointer; + } +} diff --git a/src/components/Modal/ModalTrackerRegistration/ModalTrackerRegistration.js b/src/components/Modal/ModalTrackerRegistration/ModalTrackerRegistration.js new file mode 100644 index 00000000..7d13df42 --- /dev/null +++ b/src/components/Modal/ModalTrackerRegistration/ModalTrackerRegistration.js @@ -0,0 +1,28 @@ +import React from "react"; + +import close from "assets/icons/closeProjectPersons.svg"; + +import "./modalTrackerRegistration.scss"; + +export const ModalTrackerRegistration = ({ setModalReset }) => { + return ( +
+

+ Спасибо за регистрацию. Теперь можете войти в кабинет +

+

+ Мы отправили ссылку +
+ для активации вашего аккаунта на почту +
nhw44308@mail.com +

+ + setModalReset(false)} + src={close} + className="modalReset__close" + alt="close" + /> +
+ ); +}; diff --git a/src/components/Modal/ModalTrackerRegistration/modalTrackerRegistration.scss b/src/components/Modal/ModalTrackerRegistration/modalTrackerRegistration.scss new file mode 100644 index 00000000..a86ebcb8 --- /dev/null +++ b/src/components/Modal/ModalTrackerRegistration/modalTrackerRegistration.scss @@ -0,0 +1,39 @@ +.modalConfirmTracker { + display: flex; + flex-direction: column; + align-items: center; + padding: 40px 40px 10px; + + &__title { + font-size: 24px; + font-weight: 500; + max-width: 360px; + margin-bottom: 24px; + text-align: center; + } + + &__info { + font-size: 15px; + font-weight: 300; + max-width: 320px; + text-align: center; + margin-bottom: 30px; + + span { + font-weight: 700; + line-height: 25px; + } + } + + &__btn { + border-radius: 44px; + background: #52B709; + outline: none; + border: none; + font-size: 16px; + font-weight: 500; + line-height: 32px; + color: #FFF; + padding: 9px 37px; + } +} diff --git a/src/pages/TrackerAuth/TrackerAuth.js b/src/pages/TrackerAuth/TrackerAuth.js index 1950ef78..89480041 100644 --- a/src/pages/TrackerAuth/TrackerAuth.js +++ b/src/pages/TrackerAuth/TrackerAuth.js @@ -1,8 +1,10 @@ -import React from "react"; +import React, { useState } from "react"; import AuthBlock from "@components/AuthBlock/AuthBlock"; import AuthHeader from "@components/Common/AuthHeader/AuthHeader"; import { Footer } from "@components/Common/Footer/Footer"; +import ModalLayout from "@components/Common/ModalLayout/ModalLayout"; +import { ModalReset } from "@components/Modal/ModalReset/ModalReset"; import SideBar from "@components/SideBar/SideBar"; import arrowInfo from "assets/icons/trackerIntroInfo.svg"; @@ -11,6 +13,7 @@ import trackerAuthImg from "assets/images/trackerAuthImg.png"; import "./trackerAuth.scss"; export const TrackerAuth = () => { + const [modalResetOpen, setModalReset] = useState(false); return (
@@ -27,8 +30,14 @@ export const TrackerAuth = () => {
+ {modalResetOpen && ( + + + + )}
diff --git a/src/pages/TrackerRegistration/TrackerRegistration.js b/src/pages/TrackerRegistration/TrackerRegistration.js new file mode 100644 index 00000000..68a51a01 --- /dev/null +++ b/src/pages/TrackerRegistration/TrackerRegistration.js @@ -0,0 +1,76 @@ +import React, { useState } from "react"; + +import AuthHeader from "@components/Common/AuthHeader/AuthHeader"; +import { Footer } from "@components/Common/Footer/Footer"; +import ModalLayout from "@components/Common/ModalLayout/ModalLayout"; +import { ModalTrackerRegistration } from "@components/Modal/ModalTrackerRegistration/ModalTrackerRegistration"; +import SideBar from "@components/SideBar/SideBar"; + +import arrowInfo from "assets/icons/trackerIntroInfo.svg"; +import authImg from "assets/images/partnerProfile/authCandidateFormImg.png"; +import registrationImg from "assets/images/trackerRegistrationImg.png"; + +import "./trackerRegistration.scss"; + +export const TrackerRegistration = () => { + const [modalConfirmOpen, setModalConfirm] = useState(false); + + return ( +
+ + +
+
+

+ Создайте свое{" "} + + рабочее пространство + arrow + +

+
+
+
+ Ваше имя * + +
+
+ Придумайте пароль* + +
+
+ Ваш email * + +
+
+ Повторите пароль* + +
+
+
+ +
+ img +

+ Создавайте и редактируйте задачи и проекты вместе с другими + участниками команды. +

+
+
+ img +
+
+ {modalConfirmOpen && ( + + + + )} +
+
+ ); +}; diff --git a/src/pages/TrackerRegistration/trackerRegistration.scss b/src/pages/TrackerRegistration/trackerRegistration.scss new file mode 100644 index 00000000..a857c569 --- /dev/null +++ b/src/pages/TrackerRegistration/trackerRegistration.scss @@ -0,0 +1,95 @@ +.trackerRegistration { + &__content { + font-family: "LabGrotesque", sans-serif; + background-color: #f1f1f1; + color: #000000; + padding: 50px 0 0; + min-height: 100vh; + + @media (max-width: 1375px) { + padding-top: 100px; + } + + .container { + padding-bottom: 30px; + } + } + + &__form { + position: relative; + border-radius: 12px; + background: #FFF; + padding: 59px 115px 70px 102px; + + &__inputs { + display: flex; + flex-wrap: wrap; + max-width: 650px; + row-gap: 25px; + column-gap: 44px; + } + + &__submit { + display: flex; + align-items: center; + + button { + border-radius: 44px; + padding: 9px 39px; + background: #52B709; + font-weight: 500; + font-size: 18px; + color: #FFF; + border: none; + margin-right: 165px; + } + } + + &__info { + display: flex; + align-items: center; + img { + margin-right: 31px; + } + + p { + font-size: 16px; + font-weight: 400; + line-height: 22px; + color: #000; + max-width: 430px; + } + } + + &__img { + position: absolute; + top: -100px; + right: 58px; + } + } + &__inputContainer { + display: flex; + flex-direction: column; + row-gap: 15px; + max-width: 300px; + width: 100%; + margin-bottom: 44px; + + span { + font-weight: 400; + font-size: 15px; + color: #000; + } + + input { + outline: none; + padding: 8px 12px 9px; + background-color: #EFF2F7; + border-radius: 8px; + border: none; + font-weight: 400; + font-size: 15px; + color: #000; + } + } +}