fix

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 = () => {
               <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/>}/>

src/components/UI/ModalErrorLogin/ModalErrorLogin.js

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

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

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 (
+    <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;

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;
+      }
+    }
+  }
+}

src/pages/Settings/Settings.js

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