This commit is contained in:
Николай Полтщук 2023-03-20 14:38:52 +03:00
commit eb30ede5c0
8 changed files with 414 additions and 13 deletions

View File

@ -21,7 +21,7 @@ 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 { PartnerSettings } from "./pages/PartnerSettings/PartnerSettings"
import {PartnerRequests} from './pages/PartnerRequests/PartnerRequests'
import {PartnerAddRequest} from './pages/PartnerAddRequest/PartnerAddRequest'
import {PartnerBid} from './pages/PartnerBid/PartnerBid'
@ -67,7 +67,7 @@ const App = () => {
<Route exact path='view' element={<ViewReport/>}/>
<Route exact path='tracker' element={<Tracker/>}/>
<Route exact path='payouts' element={<Payouts/>}/>
<Route exact path='settings' element={<Settings/>}/>
<Route exact path='settings' element={<PartnerSettings/>}/>
<Route exact path='requests' element={<PartnerRequests/>}/>
<Route exact path='add-request' element={<PartnerAddRequest/>}/>
<Route exact path='bid' element={<PartnerBid/>}/>

View File

@ -0,0 +1,26 @@
import React from "react";
import "./modalErrorLogin.scss";
export const ModalErrorLogin = ({ active, setActive }) => {
return (
<div
className={active ? "modal-error active" : "modal-error"}
onClick={() => setActive(false)}
>
<div
className="modal-error__content"
onClick={(e) => e.stopPropagation()}
>
<h2>Ошибка входа</h2>
<p>Введены некоректные данные для входа</p>
<button className="modal-error__content-button">
Попробовать еще раз
</button>
<span onClick={() => setActive(false)}></span>
</div>
</div>
);
};
export default ModalErrorLogin;

View File

@ -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);
}

BIN
src/images/astralLogo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
src/images/konturLogo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -0,0 +1,92 @@
import React from "react";
import { Footer } from "../../components/Footer/Footer";
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
import kontur from "../../images/konturLogo.png";
import astral from "../../images/astralLogo.png";
import "./partnerSettings.scss";
export const PartnerSettings = () => {
return (
<div className="settings">
<ProfileHeader />
<div className="container settings__page">
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/profile" },
{ name: "Данные моего персонала", link: "/profile/employees" },
]}
/>
<div className="partner-settings">
<h2 className="infoPersonal__title">Настройки акаунта</h2>
<div className="partner-settings__body">
<div className="partner-settings__login">
<h3 className="settings__title">Вход в систему</h3>
<p className="settings__lable-first">Изменение логина</p>
<div className="settings__input">
<input></input>
</div>
<p className="settings__lable-second">Изменение пароля</p>
<div className="settings__input">
<input></input>
</div>
<div className="settings__buttons">
<button className="settings__buttons-cancel">Отмена</button>
<button className="settings__buttons-save">Сохранить</button>
</div>
<span className="settings__agreement">
Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и
использования персональных данных
</span>
</div>
<div className="partner-settings__report">
<h3 className="settings__title">Документы и отчеты</h3>
<p className="settings__lable-first">Изменить провадера ЭДО</p>
<div className="partner-settings__logo">
<div>
<label className="partner-settings__label-first">
<img src={astral}></img>
<input type="checkbox" />
<span className="checkbox__first"></span>
</label>
</div>
<div>
<label className="partner-settings__label-second">
<img src={kontur}></img>
<input type="checkbox" />
<span className="checkbox__second"></span>
</label>
</div>
</div>
<p className="settings__lable-second">
Изменение названия компании
</p>
<div className="settings__input">
<input></input>
</div>
<div className="settings__buttons">
<button className="settings__buttons-cancel">Отмена</button>
<button className="settings__buttons-save">Сохранить</button>
</div>
<span className="settings__agreement">
Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и
использования персональных данных
</span>
</div>
</div>
</div>
</div>
<Footer />
</div>
);
};
export default PartnerSettings;

View File

@ -0,0 +1,217 @@
.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;
}
}
&__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 {
margin-bottom: 110px;
&__body {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 27px;
}
&__report,
&__login {
width: 500px;
height: 435px;
background: #ffffff;
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;
}
}
}
}

View File

@ -1,11 +0,0 @@
import React from 'react';
import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
export const Settings = () => {
return (
<div className='settings'>
<ProfileHeader />
</div>
)
};