From df9e1d5a238f4c8b9f1d3342f972ad935f14f11d Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Tue, 28 Mar 2023 20:42:18 +0300 Subject: [PATCH 1/5] 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 @@ + + + + + + + + + + From 9bab7d17cd7dc5aaaf31ad0d3fef90a92334c609 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Wed, 29 Mar 2023 19:43:49 +0300 Subject: [PATCH 2/5] Fixed modal and added new img --- src/components/UI/ModalCreate/ModalCreate.js | 7 +- .../UI/ModalCreate/ModalCreate.scss | 57 ++++++-- .../UI/ModalRegistration/ModalRegistration.js | 2 +- src/components/UI/ModalTiket/ModalTiket.js | 105 +++++++++----- src/components/UI/ModalTiket/ModalTiket.scss | 136 ++++++++++++++---- src/images/archive.svg | 6 + src/images/delete.svg | 5 + src/images/edit.svg | 11 ++ src/images/fileModal.svg | 5 + src/images/link.svg | 5 + src/images/plus.svg | 3 + src/images/send.svg | 11 ++ 12 files changed, 270 insertions(+), 83 deletions(-) create mode 100644 src/images/archive.svg create mode 100644 src/images/delete.svg create mode 100644 src/images/edit.svg create mode 100644 src/images/fileModal.svg create mode 100644 src/images/link.svg create mode 100644 src/images/plus.svg create mode 100644 src/images/send.svg diff --git a/src/components/UI/ModalCreate/ModalCreate.js b/src/components/UI/ModalCreate/ModalCreate.js index c6fd5af0..de7d8813 100644 --- a/src/components/UI/ModalCreate/ModalCreate.js +++ b/src/components/UI/ModalCreate/ModalCreate.js @@ -40,10 +40,11 @@ export const ModalCreate = ({ active, setActive, title }) => { onChange={(e) => setInputValue(e.target.value)} > + - + setActive(false)}> ); diff --git a/src/components/UI/ModalCreate/ModalCreate.scss b/src/components/UI/ModalCreate/ModalCreate.scss index 66d56d3b..b7b8492e 100644 --- a/src/components/UI/ModalCreate/ModalCreate.scss +++ b/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); + } + } } } diff --git a/src/components/UI/ModalRegistration/ModalRegistration.js b/src/components/UI/ModalRegistration/ModalRegistration.js index aa8fae28..07566aff 100644 --- a/src/components/UI/ModalRegistration/ModalRegistration.js +++ b/src/components/UI/ModalRegistration/ModalRegistration.js @@ -41,7 +41,7 @@ export const ModalRegistration = ({ active, setActive }) => {
- +
У вас уже есть аккаунт?

Войти

diff --git a/src/components/UI/ModalTiket/ModalTiket.js b/src/components/UI/ModalTiket/ModalTiket.js index eb62a34a..6e39d147 100644 --- a/src/components/UI/ModalTiket/ModalTiket.js +++ b/src/components/UI/ModalTiket/ModalTiket.js @@ -1,15 +1,20 @@ import React, { useState } from "react"; -import "./ModalTiket.scss"; -import creatorMock from "../../../images/avatarMoсkCreator.png"; import avatarMock1 from "../../../images/avatarMoсk1.png"; import avatarMock2 from "../../../images/avatarMoсk2.png"; import category from "../../../images/category.png"; -import comments from "../../../images/commentsBoard.svg"; import watch from "../../../images/watch.png"; -import files from "../../../images/filesBoard.svg"; +import file from "../../../images/fileModal.svg"; import task from "../../../images/tasksMock.png"; import arrow from "../../../images/arrowStart.png"; +import link from "../../../images/link.svg"; +import archive from "../../../images/archive.svg"; +import del from "../../../images/delete.svg"; +import edit from "../../../images/edit.svg"; +import send from "../../../images/send.svg"; +import plus from "../../../images/plus.svg"; + +import "./ModalTiket.scss"; export const ModalTiket = ({ active, setActive }) => { const [tiket] = useState({ @@ -44,13 +49,10 @@ export const ModalTiket = ({ active, setActive }) => {

Проект: {tiket.name} -
-

Редактировать

-

Удалить

-

+ Задача
{tiket.code}

{tiket.descriptions}

@@ -58,48 +60,79 @@ export const ModalTiket = ({ active, setActive }) => {

{tiket.descriptions}

-

- - {0} - Коментариев +

+

- + {0} Файлов

+
+ + +
- setActive(false)}> - {tiket.code} -

Создатель : {tiket.creator}

-
- {workers.map((worker, index) => { - return ( -
- -

{worker.name}

-
- ); - })} +
+ setActive(false)}> + {tiket.code} +

Создатель : {tiket.creator}

+
+ {workers.map((worker, index) => { + return ( +
+ +

{worker.name}

+
+ ); + })} +
+ +
+ + Добавить участников +
-
- - Добавить участников +
+
+ + Длительность : +

{"8:30:22"}

+
+ +
-
- - Длительность : -

{"8:30:22"}

+
+
+ +

редактировать

+
+
+ +

ссылка на проект

+
+
+ +

в архив

+
+
+ +

удалить

+
- -
diff --git a/src/components/UI/ModalTiket/ModalTiket.scss b/src/components/UI/ModalTiket/ModalTiket.scss index cd9974f2..f8cef4e2 100644 --- a/src/components/UI/ModalTiket/ModalTiket.scss +++ b/src/components/UI/ModalTiket/ModalTiket.scss @@ -30,46 +30,35 @@ margin: 26px 0 0 21px; .title-project { + color: #1458dd; font-family: "LabGrotesque", sans-serif; display: flex; align-items: center; font-weight: 700; - font-size: 16px; + font-size: 22px; + line-height: 32px; &__category { margin-right: 17px; } - - &__menu { - display: flex; - align-items: center; - margin-left: 110px; - - p { - font-weight: 400; - font-size: 14px; - color: #252c32; - margin: 0 30px 0 0; - - &:hover { - cursor: pointer; - text-decoration: underline; - } - } - } } &__task { - margin-top: 22px; + margin-top: -5px; padding: 18px; + button { + img { + margin-right: 5px; + } + } + h5 { font-family: "Inter", sans-serif; font-weight: 500; font-style: normal; font-size: 16px; line-height: 24px; - color: #1a1919; } } @@ -93,12 +82,23 @@ flex-direction: row; margin: 29px 0 0 -5px; - .comment { - width: 100px; + .tasks { justify-content: space-evenly; + + button { + width: 180px; + height: 40px; + background: #52b709; + border-radius: 44px; + font-weight: 400; + font-size: 12px; + line-height: 32px; + border: none; + color: #ffffff; + } } - .comment, + .tasks, .file { display: flex; align-items: center; @@ -107,7 +107,61 @@ .file { justify-content: space-between; margin-left: 20px; - width: 70px; + + button { + display: flex; + align-items: center; + justify-content: center; + background: white; + width: 166px; + height: 40px; + border: 0.5px solid #1458dd; + border-radius: 44px; + font-weight: 400; + font-size: 12px; + line-height: 32px; + color: #1458dd; + + img { + margin-right: 9px; + } + } + + span { + margin: 0 3px 0 11px; + font-weight: 500; + font-size: 12px; + line-height: 15px; + color: #6e7c87; + } + } + } + + &__input { + margin: 20px 0 20px 0; + display: flex; + align-items: center; + justify-content: space-between; + width: 438px; + height: 40px; + background: #f1f1f1; + border-radius: 44px; + + input { + width: 80%; + background: inherit; + border: none; + outline: none; + padding-left: 30px; + font-weight: 400; + font-size: 12px; + line-height: 32px; + border-radius: 44px; + } + + img { + cursor: pointer; + margin-right: 18px; } } } @@ -115,14 +169,12 @@ .workers { position: relative; border-left: 1px solid #f1f1f1; - width: 300px; - padding: 40px; .exit { cursor: pointer; position: absolute; - top: 22px; - right: 31px; + top: 35px; + right: 40px; &:before, &:after { @@ -224,5 +276,31 @@ color: #807777; } } + + &_box { + padding: 25px 85px 40px 40px; + border-bottom: 1px solid #f1f1f1; + + &-middle { + padding: 0px 40px 25px 40px; + border-bottom: 1px solid #f1f1f1; + } + + &-bottom { + padding: 40px 0 75px 56px; + font-weight: 400; + font-size: 14px; + line-height: 38px; + + div { + display: flex; + align-items: center; + + p { + margin: 0 0 0 12px; + } + } + } + } } } diff --git a/src/images/archive.svg b/src/images/archive.svg new file mode 100644 index 00000000..f5239b62 --- /dev/null +++ b/src/images/archive.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/delete.svg b/src/images/delete.svg new file mode 100644 index 00000000..9484862d --- /dev/null +++ b/src/images/delete.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/edit.svg b/src/images/edit.svg new file mode 100644 index 00000000..bea8d068 --- /dev/null +++ b/src/images/edit.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/fileModal.svg b/src/images/fileModal.svg new file mode 100644 index 00000000..0a0dbb9d --- /dev/null +++ b/src/images/fileModal.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/link.svg b/src/images/link.svg new file mode 100644 index 00000000..e383f42e --- /dev/null +++ b/src/images/link.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/plus.svg b/src/images/plus.svg new file mode 100644 index 00000000..64f79cb0 --- /dev/null +++ b/src/images/plus.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/send.svg b/src/images/send.svg new file mode 100644 index 00000000..67e53dcd --- /dev/null +++ b/src/images/send.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + From 8bd7bb7535fe4941681d50abb72672500fcc72c2 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Mon, 3 Apr 2023 14:37:27 +0300 Subject: [PATCH 3/5] Fixed settings page and modals --- src/components/UI/ModalCreate/ModalCreate.js | 3 +- .../PartnerSettings/partnerSettings.scss | 61 ++++++++++++++++++- src/pages/Tracker/Tracker.js | 21 ++++--- 3 files changed, 75 insertions(+), 10 deletions(-) diff --git a/src/components/UI/ModalCreate/ModalCreate.js b/src/components/UI/ModalCreate/ModalCreate.js index de7d8813..fbf6099d 100644 --- a/src/components/UI/ModalCreate/ModalCreate.js +++ b/src/components/UI/ModalCreate/ModalCreate.js @@ -4,7 +4,7 @@ import { setProject } from "../../../redux/projectsTrackerSlice"; import "./ModalCreate.scss"; -export const ModalCreate = ({ active, setActive, title }) => { +export const ModalCreate = ({ active, setActive, title, desc }) => { const [inputValue, setInputValue] = useState(""); const dispatch = useDispatch(); @@ -33,6 +33,7 @@ export const ModalCreate = ({ active, setActive, title }) => { >

{title}

+

{desc}

{ function createTiket() { tabTaskMok.filter((item) => { if (item.name == selectedTab.name) { + let idItem = 0; + + item.tasks.forEach((item) => { + idItem = item.id; + }); + let newTiket = { task: valueTiket, description: "Сверстать часть таблицы. Сверстать часть таблицы", @@ -371,7 +377,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, - id: item.tasks.length + 1, + id: idItem + 1, }; item.tasks.push(newTiket); @@ -398,10 +404,11 @@ export const Tracker = () => {
-

Трекер

@@ -477,7 +484,7 @@ export const Tracker = () => { onClick={(e) => e.stopPropagation()} >
-

Введите название карточки

+

Введите название новой колонки

Date: Fri, 7 Apr 2023 21:49:09 +0300 Subject: [PATCH 4/5] Added page in free worker --- src/App.js | 143 +++++++++--------- src/components/SliderWorkers/SliderWorkers.js | 39 ++--- .../SliderWorkers/sliderWorkers.scss | 4 + .../UI/FreeDevelopers/FreeDevelopers.js | 78 ++++++++++ .../UI/FreeDevelopers/freeDevelopers.scss | 104 +++++++++++++ .../AuthForDevelopers/AuthForDevelopers.js | 6 +- 6 files changed, 287 insertions(+), 87 deletions(-) create mode 100644 src/components/UI/FreeDevelopers/FreeDevelopers.js create mode 100644 src/components/UI/FreeDevelopers/freeDevelopers.scss diff --git a/src/App.js b/src/App.js index 3e807c38..cdda277c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,10 @@ -import React from 'react' -import {BrowserRouter as Router, Route, Routes, Navigate} from 'react-router-dom'; - +import React from "react"; +import { + BrowserRouter as Router, + Route, + Routes, + Navigate, +} from "react-router-dom"; import AuthForPartners from "./pages/AuthForPartners/AuthForPartners"; import AuthForDevelopers from "./pages/AuthForDevelopers/AuthForDevelopers"; @@ -8,80 +12,81 @@ 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 {ProfileCalendar} from "./components/ProfileCalendar/ProfileCalendar"; -import FormPage from './pages/FormPage/FormPage.js' -import SingleReportPage from './pages/SingleReportPage/SingleReportPage' -import {QuizPage} from './pages/quiz/QuizPage' -import {InterjacentPage} from './pages/quiz/InterjacentPage' -import {QuizTestPage} from './pages/quiz/QuizTestPage' -import {InstructionPage} from './pages/quiz/InstructionPage' -import {ResultPage} from './pages/quiz/ResultPage' -import {Profile} from './pages/Profile/Profile.js' -import {Summary} from './pages/Summary/Summary' -import {ViewReport} from './pages/ViewReport/ViewReport' -import {Tracker} from './pages/Tracker/Tracker' -import {Payouts} from './pages/Payouts/Payouts' -import { PartnerSettings } from "./pages/PartnerSettings/PartnerSettings" -import {PartnerRequests} from './pages/PartnerRequests/PartnerRequests' -import {PartnerAddRequest} from './pages/PartnerAddRequest/PartnerAddRequest' -import {PartnerBid} from './pages/PartnerBid/PartnerBid' -import {PartnerCategories} from "./pages/PartnerСategories/PartnerСategories"; -import {PartnerTreaties} from "./pages/PartnerTreaties/PartnerTreaties"; -import {PartnerEmployees} from "./pages/PartnerEmployees/PartnerEmployees"; - -import './fonts/stylesheet.css' -import 'bootstrap/dist/css/bootstrap.min.css' - - +import FreeDevelopers from "./components/UI/FreeDevelopers/FreeDevelopers"; +import { ProfileCalendar } from "./components/ProfileCalendar/ProfileCalendar"; +import FormPage from "./pages/FormPage/FormPage.js"; +import SingleReportPage from "./pages/SingleReportPage/SingleReportPage"; +import { QuizPage } from "./pages/quiz/QuizPage"; +import { InterjacentPage } from "./pages/quiz/InterjacentPage"; +import { QuizTestPage } from "./pages/quiz/QuizTestPage"; +import { InstructionPage } from "./pages/quiz/InstructionPage"; +import { ResultPage } from "./pages/quiz/ResultPage"; +import { Profile } from "./pages/Profile/Profile.js"; +import { Summary } from "./pages/Summary/Summary"; +import { ViewReport } from "./pages/ViewReport/ViewReport"; +import { Tracker } from "./pages/Tracker/Tracker"; +import { Payouts } from "./pages/Payouts/Payouts"; +import { PartnerSettings } from "./pages/PartnerSettings/PartnerSettings"; +import { PartnerRequests } from "./pages/PartnerRequests/PartnerRequests"; +import { PartnerAddRequest } from "./pages/PartnerAddRequest/PartnerAddRequest"; +import { PartnerBid } from "./pages/PartnerBid/PartnerBid"; +import { PartnerCategories } from "./pages/PartnerСategories/PartnerСategories"; +import { PartnerTreaties } from "./pages/PartnerTreaties/PartnerTreaties"; +import { PartnerEmployees } from "./pages/PartnerEmployees/PartnerEmployees"; +import "./fonts/stylesheet.css"; +import "bootstrap/dist/css/bootstrap.min.css"; const App = () => { return ( - <> - + <> + + + } /> + } /> + } /> - + } /> + } /> + } /> - }/> - }/> + } /> + } /> - }/> - }/> - }/> + + } /> + } /> + } /> + } /> + } /> + - }/> - }/> + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } + /> + - - }/> - }/> - }/> - }/> - }/> - - - - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - - - }/> - - - - ) + } /> + + + + ); }; -export default App +export default App; diff --git a/src/components/SliderWorkers/SliderWorkers.js b/src/components/SliderWorkers/SliderWorkers.js index a994609f..28f3f155 100644 --- a/src/components/SliderWorkers/SliderWorkers.js +++ b/src/components/SliderWorkers/SliderWorkers.js @@ -6,8 +6,9 @@ import mockWorker from "../../images/mokPerson.png"; import "./sliderWorkers.scss"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; +import { Link } from "react-router-dom"; -export const SliderWorkers = ({title, titleInfo, subTitle}) => { +export const SliderWorkers = ({ title, titleInfo, subTitle }) => { const [workers] = useState([ { avatar: mockWorker, @@ -15,7 +16,11 @@ export const SliderWorkers = ({title, titleInfo, subTitle}) => { }, { avatar: mockWorker, - skils: "React / Vue Front end, Middle разработчик", + skils: "Vue / React Front end, Senior разработчик", + }, + { + avatar: mockWorker, + skils: "NodeJs Fullstack, Middle разработчик", }, { avatar: mockWorker, @@ -23,11 +28,7 @@ export const SliderWorkers = ({title, titleInfo, subTitle}) => { }, { avatar: mockWorker, - skils: "React / Vue Front end, Middle разработчик", - }, - { - avatar: mockWorker, - skils: "React / Vue Front end, Middle разработчик", + skils: "React / PHP Fullstack, Middle разработчик", }, ]); @@ -49,13 +50,14 @@ export const SliderWorkers = ({title, titleInfo, subTitle}) => { return (
- {Boolean(title) ? + {Boolean(title) ? (

{title}

{titleInfo}

- : "" - } + ) : ( + "" + )} {workers.map((worker, index) => { return ( @@ -63,23 +65,26 @@ export const SliderWorkers = ({title, titleInfo, subTitle}) => {

{worker.skils}

- + + Подробное резюме +
); })} - {Boolean(subTitle) ? + {Boolean(subTitle) ? (

Дополните свою команду опытными ИТ-специалистами

- Даём финансовые, юридические и кадровые гарантии, предоставляем SLA - и отвечаем за работу команды. Вам не нужно искать, оформлять или - увольнять сотрудника — все хлопоты мы берем на себя. + Даём финансовые, юридические и кадровые гарантии, предоставляем + SLA и отвечаем за работу команды. Вам не нужно искать, оформлять + или увольнять сотрудника — все хлопоты мы берем на себя.

- : "" - } + ) : ( + "" + )}
); diff --git a/src/components/SliderWorkers/sliderWorkers.scss b/src/components/SliderWorkers/sliderWorkers.scss index 55b9af26..42139c07 100644 --- a/src/components/SliderWorkers/sliderWorkers.scss +++ b/src/components/SliderWorkers/sliderWorkers.scss @@ -59,6 +59,9 @@ } &__resume { + display: flex; + align-items: center; + justify-content: center; margin-top: 5px; width: 177px; height: 40px; @@ -73,6 +76,7 @@ &:hover { transition: 0.5s; background-color: #52b709a8; + text-decoration: none; } } } diff --git a/src/components/UI/FreeDevelopers/FreeDevelopers.js b/src/components/UI/FreeDevelopers/FreeDevelopers.js new file mode 100644 index 00000000..71ca8626 --- /dev/null +++ b/src/components/UI/FreeDevelopers/FreeDevelopers.js @@ -0,0 +1,78 @@ +import React from "react"; + +import AuthHeader from "../../AuthHeader/AuthHeader"; +import SideBar from "../../SideBar/SideBar"; +import { Footer } from "../../Footer/Footer"; +import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs"; + +import mockWorker from "../../../images/mokPerson.png"; +import arrow from "../../../images/arrow_left.png"; + +import "./freeDevelopers.scss"; +import { Link } from "react-router-dom"; + +export const FreeDevelopers = ({}) => { + return ( +
+ + +
+ + +

+ Свободные разработчики для Вашей команды +

+ + + Вернуться + + +
+
+ +
+

Дмитрий, PHP Back end - разработчик, Middle

+
+
+
+ +
+ +
+
+

Описание опыта работы

+
+ +
+
+ Godesigner - сервис для фриланс дизайнеров, копирайтеров и их + заказчиков +
+

Стек – PHP (li3), HTML, CSS, JavaScript, MYSQL, Nginx.

+
    +
  • Расширение функционала старых модулей проекта
    • +
  • создание и проектирование новых модулей сайта
    • +
  • написание backend части проекта
    • +
  • усовершенствование и расширение функционала админ-панели
    • +
  • работа с визуальной составляющей
    • +
  • создание алгоритма рассылки писем по электронной почте
    • +
  • + использование API сторонних сервисов, мессенджеров (WhatsApp) +
    • +
+

Время разработки: 2 года.

+
+
+ +
+
+
+ ); +}; + +export default FreeDevelopers; diff --git a/src/components/UI/FreeDevelopers/freeDevelopers.scss b/src/components/UI/FreeDevelopers/freeDevelopers.scss new file mode 100644 index 00000000..4a390ded --- /dev/null +++ b/src/components/UI/FreeDevelopers/freeDevelopers.scss @@ -0,0 +1,104 @@ +.free-dev { + font-family: "LabGrotesque", sans-serif; + overflow: hidden; + position: relative; + background-color: #f1f1f1; + + .link { + font-size: 12px; + line-height: 16px; + color: #5b6871; + + img { + margin-right: 20px; + } + } + + h2 { + font-style: normal; + font-weight: 500; + font-size: 30px; + line-height: 32px; + color: #000000; + margin: 32px 0 36px 0; + + span { + color: #52b709; + font-size: 30px; + } + } + + &_page { + margin: 24px 0 30px 0; + } + + &__title { + background: #ffffff; + border-radius: 12px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + padding: 20px 63px 20px 45px; + margin: 40px 0 23px 0; + + &-box { + display: flex; + } + + &-name { + display: flex; + flex-direction: column; + justify-content: space-evenly; + margin-left: 47px; + + div { + width: 239px; + height: 8px; + background: #52b709; + border-radius: 12px; + } + } + + button { + background: #52b709; + border-radius: 44px; + width: 202px; + height: 50px; + font-weight: 500; + font-size: 16px; + line-height: 32px; + color: #ffffff; + border: none; + } + } + + &__body { + background: #ffffff; + border-radius: 12px; + margin-bottom: 100px; + + &-title { + background: #e1fccf; + border-radius: 12px 12px 0px 0px; + font-weight: 400; + font-size: 18px; + line-height: 32px; + color: #000000; + padding: 20px 0 17px 51px; + } + + &-text { + font-weight: 700; + font-size: 16px; + line-height: 32px; + color: #000000; + padding: 26px 0 30px 52px; + + h5 { + font-size: 16px; + margin-bottom: 30px; + } + } + } +} diff --git a/src/pages/AuthForDevelopers/AuthForDevelopers.js b/src/pages/AuthForDevelopers/AuthForDevelopers.js index eb1b027c..ba7e4d01 100644 --- a/src/pages/AuthForDevelopers/AuthForDevelopers.js +++ b/src/pages/AuthForDevelopers/AuthForDevelopers.js @@ -41,7 +41,11 @@ const AuthForDevelopers = () => { return (
- +
Date: Mon, 10 Apr 2023 18:08:41 +0300 Subject: [PATCH 5/5] Fixed auth page and adaptation freeDev --- src/components/AuthHeader/AuthHeader.js | 14 +- src/components/AuthHeader/authHeader.scss | 6 +- src/components/SideBar/SideBar.js | 5 +- src/components/SideBar/sidebar.scss | 28 +-- .../SliderWorkers/sliderWorkers.scss | 6 + .../UI/FreeDevelopers/FreeDevelopers.js | 21 ++- .../UI/FreeDevelopers/freeDevelopers.scss | 164 ++++++++++++++++-- src/images/LogoITguild.svg | 9 + 8 files changed, 213 insertions(+), 40 deletions(-) create mode 100644 src/images/LogoITguild.svg diff --git a/src/components/AuthHeader/AuthHeader.js b/src/components/AuthHeader/AuthHeader.js index 8f1c65d3..0e576084 100644 --- a/src/components/AuthHeader/AuthHeader.js +++ b/src/components/AuthHeader/AuthHeader.js @@ -5,6 +5,13 @@ import userIcon from "../../images/userIcon.png"; import "./authHeader.scss"; export const AuthHeader = ({}) => { + function scrollToForm() { + window.scrollTo({ + top: 850, + behavior: "smooth", + }); + } + return (
@@ -27,7 +34,12 @@ export const AuthHeader = ({}) => { - + { + e.preventDefault(); + scrollToForm(); + }} + >
diff --git a/src/components/AuthHeader/authHeader.scss b/src/components/AuthHeader/authHeader.scss index 1447a2b9..f221a916 100644 --- a/src/components/AuthHeader/authHeader.scss +++ b/src/components/AuthHeader/authHeader.scss @@ -51,6 +51,10 @@ } } } + + img { + cursor: pointer; + } } } } @@ -61,7 +65,7 @@ } } -@media (max-width: 1024px) { +@media (max-width: 1375px) { .auth-header { display: none; } diff --git a/src/components/SideBar/SideBar.js b/src/components/SideBar/SideBar.js index d0194e23..89702468 100644 --- a/src/components/SideBar/SideBar.js +++ b/src/components/SideBar/SideBar.js @@ -1,6 +1,7 @@ import React, { useState } from "react"; import arrow from "../../images/sideBarArrow.svg"; +import LogoITguild from "../../images/LogoITguild.svg"; import "./sidebar.scss"; @@ -41,9 +42,7 @@ export const SideBar = () => {
-

IT

-

guild

- Аутстафинговая компания +
  • diff --git a/src/components/SideBar/sidebar.scss b/src/components/SideBar/sidebar.scss index 7fdc5822..98864db8 100644 --- a/src/components/SideBar/sidebar.scss +++ b/src/components/SideBar/sidebar.scss @@ -7,7 +7,7 @@ height: 100%; background: #e1fccf; - @media (max-width: 1024px) { + @media (max-width: 1375px) { position: fixed; width: 100% !important; height: 80px; @@ -75,7 +75,7 @@ } } - @media (max-width: 1024px) { + @media (max-width: 1375px) { flex-direction: row; height: 100%; @@ -121,25 +121,7 @@ &__title { display: flex; - flex-wrap: wrap; - h3 { - color: #52b709; - font-size: 35px; - line-height: 32px; - margin-right: 10px; - } - - p { - width: 70%; - font-size: 30px; - line-height: 32px; - color: #000000; - } - - span { - font-size: 12px; - margin-left: 0px; - } + margin-top: 24px; } &__navigation { @@ -175,7 +157,7 @@ } } - @media (max-width: 1024px) { + @media (max-width: 1375px) { &__title { margin-top: 35px; } @@ -199,7 +181,7 @@ left: 79px; } - @media (max-width: 1024px) { + @media (max-width: 1375px) { left: 0; width: 100%; height: 535px; diff --git a/src/components/SliderWorkers/sliderWorkers.scss b/src/components/SliderWorkers/sliderWorkers.scss index 42139c07..fa95f0a2 100644 --- a/src/components/SliderWorkers/sliderWorkers.scss +++ b/src/components/SliderWorkers/sliderWorkers.scss @@ -125,7 +125,13 @@ } } + @media (max-width: 1375px) { + margin-top: 50px; + } + @media (max-width: 1024px) { + margin-top: 0; + &__title { flex-direction: column; padding: 120px 0 56px 0; diff --git a/src/components/UI/FreeDevelopers/FreeDevelopers.js b/src/components/UI/FreeDevelopers/FreeDevelopers.js index 71ca8626..adbc02a3 100644 --- a/src/components/UI/FreeDevelopers/FreeDevelopers.js +++ b/src/components/UI/FreeDevelopers/FreeDevelopers.js @@ -40,7 +40,7 @@ export const FreeDevelopers = ({}) => {
- +
@@ -66,6 +66,25 @@ export const FreeDevelopers = ({}) => {

Время разработки: 2 года.

+ +
+
+ Godesigner - сервис для фриланс дизайнеров, копирайтеров и их + заказчиков +
+

Стек – PHP (li3), HTML, CSS, JavaScript, MYSQL, Nginx.

+
    +
  • Расширение функционала старых модулей проекта
    • +
  • создание и проектирование новых модулей сайта
    • +
+
+
+ +
+

Для просмотра полного резюме разработчика авторизуйтесь

+ + Войти +
diff --git a/src/components/UI/FreeDevelopers/freeDevelopers.scss b/src/components/UI/FreeDevelopers/freeDevelopers.scss index 4a390ded..ed73e21f 100644 --- a/src/components/UI/FreeDevelopers/freeDevelopers.scss +++ b/src/components/UI/FreeDevelopers/freeDevelopers.scss @@ -60,23 +60,35 @@ } } - button { - background: #52b709; - border-radius: 44px; - width: 202px; - height: 50px; - font-weight: 500; - font-size: 16px; - line-height: 32px; - color: #ffffff; - border: none; + @media (max-width: 720px) { + flex-direction: column; + } + + @media (max-width: 450px) { + flex-direction: column; + + &-box { + flex-direction: column; + align-items: center; + + img { + width: 50%; + } + } + + &-name { + margin: 10px 0 10px 0; + text-align: center; + align-items: center; + } } } &__body { + position: relative; background: #ffffff; border-radius: 12px; - margin-bottom: 100px; + margin-bottom: 160px; &-title { background: #e1fccf; @@ -99,6 +111,136 @@ font-size: 16px; margin-bottom: 30px; } + + &-bottom { + margin-top: 50px; + opacity: 0.25; + } + } + + .logIn { + position: absolute; + bottom: 75px; + border: 3px solid #52b709; + border-radius: 12px; + background: rgba(255, 255, 255, 0.76); + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 97px; + cursor: pointer; + + h3 { + font-weight: 500; + font-size: 22px; + line-height: 18px; + color: #000000; + margin-right: 50px; + } + + a { + width: 140px; + height: 50px; + color: white; + text-decoration: none; + } + + @media (max-width: 920px) { + flex-direction: column; + padding: 15px; + height: 20%; + + h3 { + margin: 0 0 0 0; + text-align: center; + } + + a { + margin-top: 15px; + height: 25px; + height: 40px; + } + } + } + } + + @media (max-width: 1333px) { + .auth-menu { + position: fixed; + width: 100% !important; + height: 80px; + margin-bottom: 50px; + + .auth-body.active { + left: 0; + width: 100%; + height: 535px; + } + + .auth-body { + &__title, + &__politic { + margin-top: 35px; + } + + &__contacts { + margin: 50px 0 25px 0; + } + } + } + + .free-dev_page { + margin-top: 110px; + } + + .auth-header { + display: none; + } + + .auth-title { + flex-direction: row; + height: 100%; + + .text { + margin: 0; + flex-direction: row; + + .burger { + margin-bottom: 5px; + } + + h3 { + display: none; + } + } + + .outstaffing { + margin: 0; + width: 150px; + font-size: 12px; + transform: none; + + img { + margin-right: 5px; + width: 15px; + } + } } } } + +.button-green { + align-items: center; + justify-content: center; + display: flex; + background: #52b709; + border-radius: 44px; + width: 202px; + height: 50px; + font-weight: 500; + font-size: 16px; + line-height: 32px; + color: #ffffff; + border: none; +} diff --git a/src/images/LogoITguild.svg b/src/images/LogoITguild.svg new file mode 100644 index 00000000..2e27863c --- /dev/null +++ b/src/images/LogoITguild.svg @@ -0,0 +1,9 @@ + + + + + + + + +