From 3b605280b226eccfe86ef23ea40902b2323f1558 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Mon, 29 May 2023 09:37:18 +0300 Subject: [PATCH] Moving components out of a folder UI --- src/App.js | 2 +- .../ModalLayout/ModalLayout.jsx | 0 .../ModalLayout/modalLayout.scss | 1 - .../FreeDevelopers/FreeDevelopers.jsx | 16 +- .../FreeDevelopers/freeDevelopers.scss | 0 .../UI/ModalAspirant/ModalAspirant.jsx | 28 +- .../UI/ModalAspirant/modalAspirant.scss | 251 ++++++++---------- .../ModalRegistration/ModalRegistration.jsx | 118 ++++---- .../ModalRegistration/modalRegistration.scss | 240 +++++++---------- src/pages/PartnerBid/PartnerBid.jsx | 5 +- 10 files changed, 292 insertions(+), 369 deletions(-) rename src/components/{UI => Common}/ModalLayout/ModalLayout.jsx (100%) rename src/components/{UI => Common}/ModalLayout/modalLayout.scss (99%) rename src/components/{UI => }/FreeDevelopers/FreeDevelopers.jsx (88%) rename src/components/{UI => }/FreeDevelopers/freeDevelopers.scss (100%) diff --git a/src/App.js b/src/App.js index 2b2e246a..5df6ffa7 100644 --- a/src/App.js +++ b/src/App.js @@ -12,7 +12,7 @@ import Home from "./pages/Home/Home"; import Candidate from "./components/Candidate/Candidate"; import Calendar from "./components/Calendar/Calendar"; import ReportForm from "./components/ReportForm/ReportForm"; -import FreeDevelopers from "./components/UI/FreeDevelopers/FreeDevelopers"; +import FreeDevelopers from "./components/FreeDevelopers/FreeDevelopers"; import { TicketFullScreen } from "./components/UI/TicketFullScreen/TicketFullScreen"; import { ProfileCalendar } from "./components/ProfileCalendar/ProfileCalendar"; import Article from "./pages/Article/Article"; diff --git a/src/components/UI/ModalLayout/ModalLayout.jsx b/src/components/Common/ModalLayout/ModalLayout.jsx similarity index 100% rename from src/components/UI/ModalLayout/ModalLayout.jsx rename to src/components/Common/ModalLayout/ModalLayout.jsx diff --git a/src/components/UI/ModalLayout/modalLayout.scss b/src/components/Common/ModalLayout/modalLayout.scss similarity index 99% rename from src/components/UI/ModalLayout/modalLayout.scss rename to src/components/Common/ModalLayout/modalLayout.scss index 005151b3..0f9639c2 100644 --- a/src/components/UI/ModalLayout/modalLayout.scss +++ b/src/components/Common/ModalLayout/modalLayout.scss @@ -15,7 +15,6 @@ position: relative; background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%); border-radius: 24px; - padding: 60px 60px 30px 60px; display: flex; flex-direction: column; diff --git a/src/components/UI/FreeDevelopers/FreeDevelopers.jsx b/src/components/FreeDevelopers/FreeDevelopers.jsx similarity index 88% rename from src/components/UI/FreeDevelopers/FreeDevelopers.jsx rename to src/components/FreeDevelopers/FreeDevelopers.jsx index 261568ca..649948b6 100644 --- a/src/components/UI/FreeDevelopers/FreeDevelopers.jsx +++ b/src/components/FreeDevelopers/FreeDevelopers.jsx @@ -1,15 +1,15 @@ import React from "react"; import { Link } from "react-router-dom"; -import AuthHeader from "../../AuthHeader/AuthHeader"; -import SideBar from "../../SideBar/SideBar"; -import { Footer } from "../../Footer/Footer"; -import { scrollToForm } from "../../../helper"; -import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs"; -import Button from "../../Common/Button/Button"; +import AuthHeader from "../AuthHeader/AuthHeader"; +import SideBar from "../SideBar/SideBar"; +import { Footer } from "../Footer/Footer"; +import { scrollToForm } from "../../helper"; +import { ProfileBreadcrumbs } from "../ProfileBreadcrumbs/ProfileBreadcrumbs"; +import Button from "../Common/Button/Button"; -import mockWorker from "../../../assets/images/mock/mokPerson.png"; -import arrow from "../../../assets/icons/arrows/arrow_left.png"; +import mockWorker from "../../assets/images/mock/mokPerson.png"; +import arrow from "../../assets/icons/arrows/arrow_left.png"; import "./freeDevelopers.scss"; diff --git a/src/components/UI/FreeDevelopers/freeDevelopers.scss b/src/components/FreeDevelopers/freeDevelopers.scss similarity index 100% rename from src/components/UI/FreeDevelopers/freeDevelopers.scss rename to src/components/FreeDevelopers/freeDevelopers.scss diff --git a/src/components/UI/ModalAspirant/ModalAspirant.jsx b/src/components/UI/ModalAspirant/ModalAspirant.jsx index 089b0b11..398143e3 100644 --- a/src/components/UI/ModalAspirant/ModalAspirant.jsx +++ b/src/components/UI/ModalAspirant/ModalAspirant.jsx @@ -1,7 +1,8 @@ import React, { useState } from "react"; import { Link } from "react-router-dom"; -import ModalLayout from "../ModalLayout/ModalLayout"; +import ModalLayout from "../../Common/ModalLayout/ModalLayout"; +import Button from "../../Common/Button/Button"; import avatar from "../../../assets/images/mock/mokPerson.png"; import logoTg from "../../../assets/icons/tgLogo.svg"; @@ -26,23 +27,18 @@ export const ModalAspirant = ({ active, setActive, level }) => { } }; - // TODO: Исправить стили тут, и заменить в модалках return ( - -
+ +

Выбранный кандидат

-
-
+
+

{level.spec} {level.skils}, {level.level}{" "}

-
+
@@ -52,9 +48,9 @@ export const ModalAspirant = ({ active, setActive, level }) => {
-
+

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

-
+

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

@@ -78,11 +74,11 @@ export const ModalAspirant = ({ active, setActive, level }) => { onChange={(e) => setTime(e.target.value)} >
- - +
setActive(false)}> -
diff --git a/src/components/UI/ModalAspirant/modalAspirant.scss b/src/components/UI/ModalAspirant/modalAspirant.scss index b027e9bb..515e2980 100644 --- a/src/components/UI/ModalAspirant/modalAspirant.scss +++ b/src/components/UI/ModalAspirant/modalAspirant.scss @@ -1,173 +1,148 @@ -.modal-aspt { - z-index: 99; - height: 100%; - width: 100%; - background-color: rgba(0, 0, 0, 0.11); - position: fixed; - top: 0; - left: 0; +.aspirant { display: flex; - align-items: center; - justify-content: center; - transform: scale(0); + flex-direction: row; + background: #ffffff; + border: 1px solid #dde2e4; + border-radius: 8px; + padding: 0; - &__content { - position: relative; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - background: #ffffff; - border: 1px solid #dde2e4; - border-radius: 8px; + &-decs { + padding: 54px 25px 51px 61px; + border-right: 1px solid #f1f1f1; - .aspt-decs { - padding: 54px 25px 51px 61px; - border-right: 1px solid #f1f1f1; + h1 { + display: block; + font-weight: 500; + font-size: 30px; + line-height: 32px; + color: #000000; + text-align: left; + } - h1 { - display: block; - font-weight: 500; - font-size: 30px; - line-height: 32px; - color: #000000; - text-align: left; - } + &__avatar { + margin-top: 76px; - &__avatar { - margin-top: 76px; + &_title { + display: flex; + flex-direction: row; + align-items: center; - &_title { - display: flex; - flex-direction: row; - align-items: center; - - img { - width: 48px; - height: 48px; - margin: 0 22px 0 0; - } - - p { - font-weight: 500; - font-size: 16px; - line-height: 24px; - } - } - - &_back { - margin: 40px 0 0 0; - - a { - display: flex; - align-items: center; - font-size: 12px; - line-height: 16px; - color: #5b6871; - text-decoration: none; - } - - div { - background: #8dc63f; - opacity: 0.3; - width: 48px; - height: 48px; - border-radius: 44px; - display: flex; - align-items: center; - justify-content: center; - margin: 0 15px 0 0; - - img { - margin: 0; - width: 50%; - } - } - - p { - font-size: 12px; - line-height: 16px; - color: #5b6871; - } - } - } - - &__telega { - text-align: left; - - h4 { - color: #52b709; - font-size: 14px; - margin: 55px 0 34px 0; - } - - p, - h4 { - font-weight: 900; - line-height: 24px; + img { + width: 48px; + height: 48px; + margin: 0 22px 0 0; } p { - width: 50%; + font-weight: 500; + font-size: 16px; + line-height: 24px; + } + } + + &_back { + margin: 40px 0 0 0; + + a { + display: flex; + align-items: center; font-size: 12px; + line-height: 16px; + color: #5b6871; + text-decoration: none; } - &-logo { + div { + background: #8dc63f; + opacity: 0.3; + width: 48px; + height: 48px; + border-radius: 44px; display: flex; - flex-direction: row; + align-items: center; + justify-content: center; + margin: 0 15px 0 0; img { - margin: 0 19px 0 0; + margin: 0; + width: 50%; } } + + p { + font-size: 12px; + line-height: 16px; + color: #5b6871; + } } } - .form-interview { + &__telega { text-align: left; - padding: 54px 61px 51px 72px; + + h4 { + color: #52b709; + font-size: 14px; + margin: 55px 0 34px 0; + } + + p, + h4 { + font-weight: 900; + line-height: 24px; + } p { - font-weight: 400; - font-size: 15px; - line-height: 18px; - margin-bottom: 10px; + width: 50%; + font-size: 12px; } - button { - width: 174px; - height: 46px; - color: white; - border: none; - font-size: 18px; - line-height: 32px; - background: #52b709; - border-radius: 44px; - } - - .input { - background: #eff2f7; - border-radius: 8px; + &-logo { display: flex; - justify-content: center; - width: 294px; - height: 35px; - margin: 0 0 36px 0; + flex-direction: row; - input { - background: #eff2f7; - width: 90%; - border: none; - outline: none; - font-size: 15px; + img { + margin: 0 19px 0 0; } } } } -} -.modal-aspt.active { - transform: scale(1); + .form-interview { + text-align: left; + padding: 54px 61px 51px 72px; + + p { + font-weight: 400; + font-size: 15px; + line-height: 18px; + margin-bottom: 10px; + } + + &__submit { + width: 174px; + height: 46px; + font-size: 18px; + } + + .input { + background: #eff2f7; + border-radius: 8px; + display: flex; + justify-content: center; + width: 294px; + height: 35px; + margin: 0 0 36px 0; + + input { + background: #eff2f7; + width: 90%; + border: none; + outline: none; + font-size: 15px; + } + } + } } .send { diff --git a/src/components/UI/ModalRegistration/ModalRegistration.jsx b/src/components/UI/ModalRegistration/ModalRegistration.jsx index 120a9a08..b97b6955 100644 --- a/src/components/UI/ModalRegistration/ModalRegistration.jsx +++ b/src/components/UI/ModalRegistration/ModalRegistration.jsx @@ -1,5 +1,8 @@ import React from "react"; +import ModalLayout from "../../Common/ModalLayout/ModalLayout"; +import Button from "../../Common/Button/Button"; + import telegramLogo from "../../../assets/icons/tgLogo.svg"; import doc from "../../../assets/icons/doc.svg"; import anyMoment from "../../../assets/icons/anyMoment.svg"; @@ -8,71 +11,68 @@ import "./modalRegistration.scss"; export const ModalRegistration = ({ active, setActive }) => { return ( -
setActive(false)} - > -
e.stopPropagation()} - > -
-

- Подключайтесь к

itguild.

-

-

- Зарегистрируйтесь и назначайте собеседования любым специалистам без - задержек -

+ +
+

+ Подключайтесь к

itguild.

+

+

+ Зарегистрируйтесь и назначайте собеседования любым специалистам без + задержек +

-
-
-
Ваше имя
- -
E-mail
- -
- -
-
Название компании
- -
Пароль
- -
+
+
+
Ваше имя
+ +
E-mail
+
-
- -
- У вас уже есть аккаунт?

Войти

-
+ +
+
Название компании
+ +
Пароль
+
-
-

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

-
- -

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

-
-

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

-
- -

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

-
-

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

-
- -

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

-
+
+ +
+ У вас уже есть аккаунт?

Войти

+
- setActive(false)}>
-
+
+

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

+
+ +

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

+
+

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

+
+ +

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

+
+

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

+
+ +

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

+
+
+ setActive(false)} className="exit"> + ); }; diff --git a/src/components/UI/ModalRegistration/modalRegistration.scss b/src/components/UI/ModalRegistration/modalRegistration.scss index 0dc24776..7aa00ffb 100644 --- a/src/components/UI/ModalRegistration/modalRegistration.scss +++ b/src/components/UI/ModalRegistration/modalRegistration.scss @@ -1,174 +1,128 @@ -.modal-registration { - z-index: 9; - height: 100%; - width: 100%; - background-color: rgba(0, 0, 0, 0.11); - position: fixed; - top: 0; - left: 0; +.registration { + background: white; display: flex; - align-items: center; - justify-content: center; - transform: scale(0); + flex-direction: row; + padding: 0; + justify-content: space-between; + border: 1px solid #dde2e4; + border-radius: 8px; + width: 1088px; + height: 529px; - &__content { - position: relative; - background: white; - display: flex; - flex-direction: row; + &-body { + &__left { + padding: 60px 0 30px 77px; - justify-content: space-between; - border: 1px solid #dde2e4; - border-radius: 8px; - width: 1088px; - height: 529px; + h2 { + font-weight: 500; + font-size: 35px; + line-height: 32px; + display: flex; + justify-content: space-between; + width: 405px; + margin: 0 auto; + } - .body-reg { - &__left { - padding: 60px 0 30px 77px; + h2 > p { + font-size: 35px; + color: #52b709; + } - h2 { - font-weight: 500; - font-size: 35px; - line-height: 32px; + &-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; - 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; - } + flex-direction: column; h5 { - display: flex; - align-items: flex-end; - font-size: 16px; - line-height: 28px; + font-weight: 400; + font-size: 15px; + line-height: 18px; + } - p { - color: #406128; - text-decoration: underline; - margin: 0 0 0 5px; - } + input { + width: 294px; + height: 35px; + background: #eff2f7; + border-radius: 8px; + border: none; + margin-bottom: 35px; + padding-left: 20px; } } } - &__right { - border-left: 1px solid #f1f1f1; - padding: 80px 32px 46px 25px; + .button-box { display: flex; - flex-direction: column; - justify-content: space-between; + flex-direction: row; + margin-top: 10px; - h4 { - font-weight: 900; - font-size: 14px; - line-height: 24px; - color: #52b709; - margin-right: 100px; - width: 180px; + &__submit { + width: 174px; + height: 46px; + font-size: 18px; + margin-right: 55px; } - &-text { + h5 { display: flex; - flex-direction: row; + align-items: flex-end; + font-size: 16px; + line-height: 28px; p { - font-weight: 400; - font-size: 12px; - line-height: 22px; - width: 205px; - } - - img { - margin: 0 18px 20px 0; + color: #406128; + text-decoration: underline; + margin: 0 0 0 5px; } } } } - span { - cursor: pointer; - position: absolute; - top: 30px; - right: 36px; - &:before, - &:after { - content: ""; - position: absolute; - width: 16px; - height: 2px; - background: #263238; + &__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; } - &:before { - transform: rotate(45deg); - } - &:after { - transform: rotate(-45deg); + &-text { + display: flex; + flex-direction: row; + + p { + font-weight: 400; + font-size: 12px; + line-height: 22px; + width: 205px; + } + + img { + margin: 0 18px 20px 0; + } } } } } - -.modal-registration.active { - transform: scale(1); -} diff --git a/src/pages/PartnerBid/PartnerBid.jsx b/src/pages/PartnerBid/PartnerBid.jsx index bb507c22..9a13a3ea 100644 --- a/src/pages/PartnerBid/PartnerBid.jsx +++ b/src/pages/PartnerBid/PartnerBid.jsx @@ -13,11 +13,10 @@ import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileB import { Footer } from "../../components/Footer/Footer"; import { Navigation } from "../../components/Navigation/Navigation"; import { Loader } from "../../components/Loader/Loader"; -import ModalLayout from "../../components/UI/ModalLayout/ModalLayout"; - -import { apiRequest } from "../../api/request"; +import ModalLayout from "../../components/Common/ModalLayout/ModalLayout"; import { getCorrectDate } from "../../components/Calendar/calendarHelper"; +import { apiRequest } from "../../api/request"; import { urlForLocal } from "../../helper"; import arrowSwitchDate from "../../assets/icons/arrows/arrowViewReport.png";