Finished this page

src/pages/PartnerSettings/PartnerSettings.js

@@ -4,6 +4,8 @@ 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 = () => {
@@ -22,6 +24,7 @@ export const PartnerSettings = () => {
           <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>
@@ -32,11 +35,11 @@ export const PartnerSettings = () => {
                 <input></input>
               </div>
 
-              <div>
+              <div className="settings__buttons">
-                <button>Отмена</button>
+                <button className="settings__buttons-cancel">Отмена</button>
-                <button>Сохранить</button>
+                <button className="settings__buttons-save">Сохранить</button>
               </div>
-              <span>
+              <span className="settings__agreement">
                 Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и
                 использования персональных данных
               </span>
@@ -44,15 +47,36 @@ export const PartnerSettings = () => {
             <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>
+              <div className="settings__buttons">
-                <button>Отмена</button>
+                <button className="settings__buttons-cancel">Отмена</button>
-                <button>Сохранить</button>
+                <button className="settings__buttons-save">Сохранить</button>
               </div>
-              <span>
+              <span className="settings__agreement">
                 Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и
                 использования персональных данных
               </span>

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