diff --git a/src/App.js b/src/App.js index 92c42c04..75b8d6dc 100644 --- a/src/App.js +++ b/src/App.js @@ -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 = () => { }/> }/> }/> - }/> + }/> }/> }/> }/> diff --git a/src/components/UI/ModalErrorLogin/ModalErrorLogin.js b/src/components/UI/ModalErrorLogin/ModalErrorLogin.js new file mode 100644 index 00000000..37aa0780 --- /dev/null +++ b/src/components/UI/ModalErrorLogin/ModalErrorLogin.js @@ -0,0 +1,26 @@ +import React from "react"; + +import "./modalErrorLogin.scss"; + +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 new file mode 100644 index 00000000..83bae3a1 --- /dev/null +++ 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); +} diff --git a/src/images/astralLogo.png b/src/images/astralLogo.png new file mode 100644 index 00000000..6d9cecc3 Binary files /dev/null and b/src/images/astralLogo.png differ diff --git a/src/images/konturLogo.png b/src/images/konturLogo.png new file mode 100644 index 00000000..3d6f1971 Binary files /dev/null and b/src/images/konturLogo.png differ diff --git a/src/pages/PartnerSettings/PartnerSettings.js b/src/pages/PartnerSettings/PartnerSettings.js new file mode 100644 index 00000000..eb8b4066 --- /dev/null +++ b/src/pages/PartnerSettings/PartnerSettings.js @@ -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 ( +
+ +
+ +
+

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

+
+
+

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

+ +

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

+
+ +
+ +

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

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

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

+

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

+ +
+
+ +
+
+ +
+
+ +

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

+
+ +
+ +
+ + +
+ + Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и + использования персональных данных + +
+
+
+
+
+
+ ); +}; + +export default PartnerSettings; diff --git a/src/pages/PartnerSettings/partnerSettings.scss b/src/pages/PartnerSettings/partnerSettings.scss new file mode 100644 index 00000000..d55066e3 --- /dev/null +++ b/src/pages/PartnerSettings/partnerSettings.scss @@ -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; + } + } + } +} 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 ( -
- -
- ) -};