From 44af2ee09d3b8dbfad25d49a0034f1868673e5ec Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Thu, 16 Mar 2023 21:41:01 +0300 Subject: [PATCH 1/4] Added page settings --- src/App.js | 129 +++++++++--------- ...ersonalBackEnd.png => PersonalBackEnd.png} | Bin src/pages/PartnerSettings/PartnerSettings.js | 68 +++++++++ .../PartnerSettings/partnerSettings.scss | 74 ++++++++++ src/pages/Settings/Settings.js | 11 -- 5 files changed, 206 insertions(+), 76 deletions(-) rename src/images/{personalBackEnd.png => PersonalBackEnd.png} (100%) create mode 100644 src/pages/PartnerSettings/PartnerSettings.js create mode 100644 src/pages/PartnerSettings/partnerSettings.scss delete mode 100644 src/pages/Settings/Settings.js diff --git a/src/App.js b/src/App.js index ba98af3c..30210324 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,76 +12,71 @@ 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 {Settings} from './pages/Settings/Settings' -import {PartnerRequests} from './pages/PartnerRequests/PartnerRequests' -import {PartnerAddRequest} from './pages/PartnerAddRequest/PartnerAddRequest' -import {PartnerBid} from './pages/PartnerBid/PartnerBid' -import {PartnerPersonalInfo} from "./pages/PartnerPersonalInfo/PartnerPersonalInfo"; - -import './fonts/stylesheet.css' -import 'bootstrap/dist/css/bootstrap.min.css' - - +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 { PartnerPersonalInfo } from "./pages/PartnerPersonalInfo/PartnerPersonalInfo"; +import "./fonts/stylesheet.css"; +import "bootstrap/dist/css/bootstrap.min.css"; const App = () => { return ( - <> - + <> + + + } /> + } /> - + } /> + } /> + } /> - }/> - }/> + } /> + } /> - }/> - }/> - }/> + + } /> + } /> + } /> + } /> + } /> + - }/> - }/> + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + - - }/> - }/> - }/> - }/> - }/> - - - - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - - - }/> - - - - ) + } /> + + + + ); }; -export default App +export default App; diff --git a/src/images/personalBackEnd.png b/src/images/PersonalBackEnd.png similarity index 100% rename from src/images/personalBackEnd.png rename to src/images/PersonalBackEnd.png diff --git a/src/pages/PartnerSettings/PartnerSettings.js b/src/pages/PartnerSettings/PartnerSettings.js new file mode 100644 index 00000000..f26c85cb --- /dev/null +++ b/src/pages/PartnerSettings/PartnerSettings.js @@ -0,0 +1,68 @@ +import React from "react"; +import { Footer } from "../../components/Footer/Footer"; + +import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"; +import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader"; + +import "./partnerSettings.scss"; + +export const PartnerSettings = () => { + return ( +
+ +
+ +
+

Настройки акаунта

+
+
+

Вход в систему

+

Изменение логина

+
+ +
+ +

Изменение пароля

+
+ +
+ +
+ + +
+ + Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и + использования персональных данных + +
+
+

Документы и отчеты

+

Изменить провадера ЭДО

+
+ +
+ +
+ + +
+ + Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и + использования персональных данных + +
+
+
+
+
+
+ ); +}; + +export default PartnerSettings; diff --git a/src/pages/PartnerSettings/partnerSettings.scss b/src/pages/PartnerSettings/partnerSettings.scss new file mode 100644 index 00000000..658d463a --- /dev/null +++ b/src/pages/PartnerSettings/partnerSettings.scss @@ -0,0 +1,74 @@ +.settings { + background: #f1f1f1; + + &__page { + max-width: 1160px !important; + margin-top: 23px; + } + + &__title { + color: #5b6871; + font-size: 20px; + line-height: 24px; + } + + &__lable { + &-first, + &-second { + font-size: 15px; + line-height: 18px; + color: #000000; + } + + &-first { + margin: 39px 0 10px 0; + } + &-second { + margin: 31px 0 10px 0; + } + } + + &__input { + background: #eff2f7; + border-radius: 8px; + width: 373px; + height: 35px; + border: none; + + input { + font-size: 15px; + background: #eff2f7; + height: 100%; + margin-left: 15px; + width: 85%; + border: none; + outline: none; + } + } +} + +.partner-settings { + margin-bottom: 110px; + + &__body { + display: flex; + flex-direction: row; + justify-content: space-between; + margin-top: 27px; + } + + &__login { + } + + &__report { + } + + &__report, + &__login { + width: 500px; + height: 435px; + background: #ffffff; + border-radius: 12px; + padding: 30px 60px; + } +} diff --git a/src/pages/Settings/Settings.js b/src/pages/Settings/Settings.js deleted file mode 100644 index 32f53ae3..00000000 --- a/src/pages/Settings/Settings.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader"; - -export const Settings = () => { - return ( -
- -
- ) -}; From 3a65009ec91141f54ad0c1b2d16cc3bbc081e39e Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Fri, 17 Mar 2023 20:02:53 +0300 Subject: [PATCH 2/4] Finished this page --- src/images/astralLogo.png | Bin 0 -> 3092 bytes src/images/konturLogo.png | Bin 0 -> 2300 bytes src/pages/PartnerSettings/PartnerSettings.js | 40 ++++- .../PartnerSettings/partnerSettings.scss | 155 +++++++++++++++++- 4 files changed, 181 insertions(+), 14 deletions(-) create mode 100644 src/images/astralLogo.png create mode 100644 src/images/konturLogo.png diff --git a/src/images/astralLogo.png b/src/images/astralLogo.png new file mode 100644 index 0000000000000000000000000000000000000000..6d9cecc3c6265a2e341efa022f105221e4664c73 GIT binary patch literal 3092 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 WSwrvX)&AiC0000 { @@ -22,6 +24,7 @@ export const PartnerSettings = () => {

Вход в систему

+

Изменение логина

@@ -32,11 +35,11 @@ export const PartnerSettings = () => {
-
- - +
+ +
- + Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и использования персональных данных @@ -44,15 +47,36 @@ export const PartnerSettings = () => {

Документы и отчеты

Изменить провадера ЭДО

+ +
+
+ +
+
+ +
+
+ +

+ Изменение названия компании +

-
- - +
+ +
- + Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и использования персональных данных diff --git a/src/pages/PartnerSettings/partnerSettings.scss b/src/pages/PartnerSettings/partnerSettings.scss index 658d463a..d55066e3 100644 --- a/src/pages/PartnerSettings/partnerSettings.scss +++ b/src/pages/PartnerSettings/partnerSettings.scss @@ -45,6 +45,69 @@ outline: none; } } + + &__agreement { + font-size: 12px; + line-height: 18px; + color: #000000; + font-weight: 300; + } + + &__buttons { + width: 87%; + display: flex; + flex-direction: row; + justify-content: space-between; + margin: 36px 0 30px 0; + + &-cancel, + &-save { + border-radius: 44px; + width: 151px; + height: 40px; + font-size: 14px; + line-height: 32px; + } + + &-cancel { + color: #6f6f6f; + background: white; + border: 0.5px solid #8dc63f; + } + + &-save { + color: #ffffff; + background: #52b709; + border: none; + } + } + + @media (max-width: 570px) { + &__input { + width: 95%; + } + + &__buttons { + margin: 15px 0 14px 0; + width: 100%; + flex-direction: column-reverse; + align-items: center; + + &-save { + margin-bottom: 15px; + } + } + } +} + +.checkbox { + &__first { + margin: 0px 0 0 20px; + } + + &__second { + margin: 0px 20px 0 0; + } } .partner-settings { @@ -57,12 +120,6 @@ margin-top: 27px; } - &__login { - } - - &__report { - } - &__report, &__login { width: 500px; @@ -71,4 +128,90 @@ border-radius: 12px; padding: 30px 60px; } + + &__logo { + display: flex; + align-items: center; + justify-content: space-between; + + div { + display: flex; + align-items: center; + + label input { + display: none; + } + + label span { + cursor: pointer; + height: 24px; + width: 24px; + border: none; + display: inline-block; + position: relative; + background: #eff1f3; + border-radius: 8px; + padding: 3px; + } + + [type="checkbox"]:checked + span:before { + content: "\2714"; + position: absolute; + top: -5px; + left: 2px; + font-size: 23px; + color: #1c1243; + font-weight: 300; + } + } + } + + &__label { + &-first, + &-second { + display: flex; + align-items: center; + } + + &-second { + flex-direction: row-reverse; + } + } + + @media (max-width: 1200px) { + margin-bottom: 15px; + + &__body { + flex-direction: column; + } + &__report { + margin-top: 50px; + } + } + + @media (max-width: 570px) { + &__report, + &__login { + width: 100%; + height: 100%; + padding: 20px 30px; + } + + &__logo { + flex-direction: column; + align-items: flex-start; + } + + &__label { + &-second, + &-first { + flex-direction: row; + } + } + .checkbox { + &__second { + margin: 0px 0 0 20px; + } + } + } } From 2bc8457af7ceb8a875b516cc2d478afb04327b93 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Fri, 17 Mar 2023 21:50:11 +0300 Subject: [PATCH 3/4] Added modal error --- src/components/UI/ModalErrorLogin/ModalErrorLogin.js | 9 +++++++++ src/components/UI/ModalErrorLogin/modalErrorLogin.scss | 0 2 files changed, 9 insertions(+) create mode 100644 src/components/UI/ModalErrorLogin/ModalErrorLogin.js create mode 100644 src/components/UI/ModalErrorLogin/modalErrorLogin.scss diff --git a/src/components/UI/ModalErrorLogin/ModalErrorLogin.js b/src/components/UI/ModalErrorLogin/ModalErrorLogin.js new file mode 100644 index 00000000..65a18cbd --- /dev/null +++ b/src/components/UI/ModalErrorLogin/ModalErrorLogin.js @@ -0,0 +1,9 @@ +import React from "react"; + +import "./modalErrorLogin.scss"; + +export const ModalErrorLogin = ({}) => { + return
; +}; + +export default ModalErrorLogin; diff --git a/src/components/UI/ModalErrorLogin/modalErrorLogin.scss b/src/components/UI/ModalErrorLogin/modalErrorLogin.scss new file mode 100644 index 00000000..e69de29b From 7ca123900249e894a1685eb7fb3d558ba04f8ed4 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Mon, 20 Mar 2023 13:05:27 +0300 Subject: [PATCH 4/4] 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
; +export const ModalErrorLogin = ({ active, setActive }) => { + return ( +
setActive(false)} + > +
e.stopPropagation()} + > +

Ошибка входа

+

Введены некоректные данные для входа

+ + setActive(false)}> +
+
+ ); }; 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); +}