loaders, outSelectClose, notifications

# Conflicts:
#	src/pages/Quiz/QuizPage.js

src/components/AllTaskTableTracker/AllTaskTableItem/AllTaskTableItem.jsx

@@ -9,14 +9,14 @@ const AllTaskTableItem = ({ task, projects }) => {
     e.target?.classList.toggle("open-desc-item");
     e.target
       .closest("td")
-      ?.querySelector(".taskList__table__name-project")
+      ?.querySelector(".task-list__table__name-project")
       .classList.toggle("hide-desc");
   }
 
   return (
     <tr key={task.id}>
       <td>
-        <div className="taskList__table__title-task">
+        <div className="task-list__table__title-task">
           <p>{task.title}</p>
 
           <img
@@ -27,7 +27,7 @@ const AllTaskTableItem = ({ task, projects }) => {
             }}
           />
         </div>
-        <div className="taskList__table__name-project hide-desc">
+        <div className="task-list__table__name-project hide-desc">
           <h4>Проект:</h4>
           <p>
             {projects?.map((project) => {

src/components/AllTaskTableTracker/AllTaskTableItem/allTaskTableItem.scss

@@ -3,7 +3,7 @@
   transform: rotate(45deg) !important;
 }
 
-.taskList {
+.task-list {
   &__table {
     margin-top: 20px;
     font-size: 14px;

src/components/AllTaskTableTracker/AllTaskTableTracker.jsx

@@ -34,7 +34,7 @@ const AllTaskTableTracker = ({ filteredAllTasks, projects, loader }) => {
 
   return (
     <>
-      <table className="taskList__table">
+      <table className="task-list__table">
         <thead>
           <tr>
             <th>Задача</th>

src/components/ArchiveTableTracker/ArchiveTableTracker.jsx

@@ -26,7 +26,7 @@ const ArchiveTableTracker = ({ filterCompleteTasks, loader }) => {
             ) : (
               <tr>
                 <td>
-                  <div className="archive__noItem">
+                  <div className="archive__no-item">
                     <p>В данном месяце у вас не было задач</p>
                   </div>
                 </td>

src/components/ArchiveTableTracker/ArchiveTasksItem/ArchiveTasksItem.jsx

@@ -7,8 +7,8 @@ import "./archiveTasksItem.scss";
 const ArchiveTasksItem = ({ task, index }) => {
   return (
     <tr key={index}>
-      <td className="archive__completeTask__description">
-        <p className="completeTask__title">{task.title}</p>
+      <td className="archive__complete-task__description">
+        <p className="complete-task__title">{task.title}</p>
         {/*<p*/}
         {/*  className="date"*/}
         {/*  dangerouslySetInnerHTML={{*/}
@@ -16,7 +16,7 @@ const ArchiveTasksItem = ({ task, index }) => {
         {/*  }}*/}
         {/*/>*/}
       </td>
-      <td className="archive__completeTask__time">
+      <td className="archive__complete-task__time">
         <p>
           {new Date(
             task.timers.reduce((acc, cur) => acc + cur.deltaSeconds, 0) * 1000
@@ -25,7 +25,7 @@ const ArchiveTasksItem = ({ task, index }) => {
             .slice(11, 19)}
         </p>
       </td>
-      <td className="archive__completeTask__info">
+      <td className="archive__complete-task__info">
         <div>
           <p>{getCorrectDate(task.updated_at)}</p>
         </div>

src/components/ArchiveTableTracker/ArchiveTasksItem/archiveTasksItem.scss

@@ -1,10 +1,10 @@
-.completeTask__title {
+.complete-task__title {
   white-space: nowrap;
   max-width: 250px;
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
-.archive__completeTask__time {
+.archive__complete-task__time {
   text-align: center;
 }

src/components/AuthBox/AuthBox.jsx

@@ -90,7 +90,7 @@ export const AuthBox = ({ title }) => {
         <input id="loginEmail" type="text" name="email" placeholder="E-mail" />
 
         <label htmlFor="password">Ваш пароль</label>
-        <div className="inputWrapper">
+        <div className="input-wrapper">
           <input
             id="loginPassword"
             type={showPassword ? "text" : "password"}

src/components/AuthBox/authBox.scss

@@ -93,7 +93,7 @@
       color: #000000;
     }
 
-    .inputWrapper {
+    .input-wrapper {
       width: 100%;
       position: relative;
 

src/components/Calendar/calendarComponent.scss

@@ -226,7 +226,7 @@
   }
 }
 
-.selectDays {
+.select-days {
   border-style: dashed !important;
 
   &:hover {
@@ -234,7 +234,7 @@
   }
 }
 
-.selectedDay {
+.selected-day {
   background-color: #edf1ff !important;
 
   &:hover {
@@ -267,7 +267,7 @@
   pointer-events: none;
 }
 
-.selectDateRange {
+.select-date-range {
   display: flex;
   align-items: center;
   column-gap: 16px;
@@ -293,7 +293,7 @@
 }
 
 @media (max-width: 575.98px) {
-  .selectDateRange {
+  .select-date-range {
     font-size: 14px;
     text-align: center;
     column-gap: 8px;

src/components/Candidate/candidate.scss

@@ -9,7 +9,7 @@
     min-height: 100vh;
   }
 
-  .profileBreadcrumbs {
+  .profile-breadcrumbs {
     position: relative;
     z-index: -1;
   }

src/components/CardControl/CardControl.jsx

@@ -14,7 +14,7 @@ export const CardControl = ({ title, path, description, img }) => {
       </div>
       <div className="control-card__info">
         <p dangerouslySetInnerHTML={{ __html: description }}></p>
-        <div className="control-card__infoLink">
+        <div className="control-card__info-link">
           <img src={rightArrow} alt="arrow" />
         </div>
       </div>

src/components/CardControl/CardControl.scss

@@ -60,7 +60,7 @@
         font-weight: 700;
       }
     }
-    &Link {
+    &-link {
       width: 48px;
       height: 48px;
       background: #ddeec6;

src/components/CatalogPersonCard/CatalogPersonCard.jsx

@@ -12,30 +12,30 @@ export const CatalogPersonCard = ({
   description
 }) => {
   return (
-    <div className="catalogPersonCard">
-      <div className="catalogPersonCard__head">
-        <div className="catalogPersonCard__avatar">
+    <div className="catalog-person-card">
+      <div className="catalog-person-card__head">
+        <div className="catalog-person-card__avatar">
           <img src={img} alt="avatar" />
-          <span className="catalogPersonCard__skill">{level}</span>
+          <span className="catalog-person-card__skill">{level}</span>
         </div>
-        <div className="catalogPersonCard__info">
-          <span className="catalogPersonCard__name">{name}</span>
-          <span className="catalogPersonCard__salary">{salary} / час</span>
-          <p className="catalogPersonCard__category">
+        <div className="catalog-person-card__info">
+          <span className="catalog-person-card__name">{name}</span>
+          <span className="catalog-person-card__salary">{salary} / час</span>
+          <p className="catalog-person-card__category">
             <span>Разработка:</span> {category}
           </p>
         </div>
       </div>
-      <div className="catalogPersonCard__items">
+      <div className="catalog-person-card__items">
         {skills.map((item, index) => {
           return (
-            <div className="catalogPersonCard__skillItem" key={index}>
+            <div className="catalog-person-card__skill-item" key={index}>
               {item}
             </div>
           );
         })}
       </div>
-      <p className="catalogPersonCard__description">{description}</p>
+      <p className="catalog-person-card__description">{description}</p>
     </div>
   );
 };

src/components/CatalogPersonCard/catalogPersonCard.scss

@@ -1,5 +1,5 @@
-.catalogPersonCard {
-  background: #FFFFFF;
+.catalog-person-card {
+  background: #ffffff;
   padding: 29px 32px;
   border-radius: 8px;
   display: flex;
@@ -25,7 +25,7 @@
     bottom: -10px;
     padding: 3.5px 19px;
     border-radius: 44px;
-    background: #1458DD;
+    background: #1458dd;
     color: white;
     font-size: 14px;
   }
@@ -45,7 +45,7 @@
   }
 
   &__salary {
-    color: #1458DD;
+    color: #1458dd;
     font-weight: 700;
     font-size: 18px;
     line-height: 22px;
@@ -53,7 +53,7 @@
 
   &__category {
     span {
-      color: #6F6F6F;
+      color: #6f6f6f;
       font-size: 12px;
       line-height: 18px;
       font-weight: 400;
@@ -72,25 +72,25 @@
     row-gap: 16px;
     margin-top: 22px;
     padding-bottom: 17px;
-    border-bottom: 0.5px solid #B3DF93;
+    border-bottom: 0.5px solid #b3df93;
   }
 
-  &__skillItem {
+  &__skill-item {
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 12px;
-    color: #6F6F6F;
+    color: #6f6f6f;
     width: 62px;
     height: 26px;
-    border: 0.5px solid #8DC63F;
+    border: 0.5px solid #8dc63f;
     border-radius: 44px;
   }
 
   &__description {
     margin-top: 17px;
     max-width: 245px;
-    color: #6F6F6F;
+    color: #6f6f6f;
     font-size: 12px;
     line-height: 18px;
   }

src/components/CategoriesItem/CategoriesItem.jsx

@@ -10,14 +10,16 @@ export const CategoriesItem = ({ img, title, skills, available, link }) => {
     <Link
       to={link}
       className={
-        available ? "categoriesItem" : "categoriesItem categoriesItem__disable"
+        available
+          ? "categories-item"
+          : "categories-item categories-item__disable"
       }
     >
-      <div className="categoriesItem__title">
+      <div className="categories-item__title">
         <img src={img} alt="img" />
         <h5>{title}</h5>
       </div>
-      <div className="categoriesItem__description">
+      <div className="categories-item__description">
         <p>{skills}</p>
         <div className="more">
           <img src={rightArrow} alt="arrow" />

src/components/CategoriesItem/categoriesItem.scss

@@ -1,4 +1,4 @@
-.categoriesItem {
+.categories-item {
   display: flex;
   flex-direction: column;
   padding: 33px 32px 25px 28px;

src/components/Common/ModalLayout/modalLayout.scss

@@ -29,7 +29,7 @@
       &__info {
         font-size: 15px;
         font-weight: 300;
-        margin: 12px 0 20px;
+        margin-top: 8px;
       }
 
       @media (max-width: 805px) {
@@ -52,13 +52,14 @@
         flex-direction: column;
         justify-content: space-between;
         align-items: center;
+        row-gap: 5px;
       }
 
       .invite-person-block {
         display: flex;
         flex-direction: column;
         align-items: center;
-        row-gap: 10px;
+        row-gap: 5px;
         &__input {
           margin: 0;
           min-width: 240px;
@@ -86,11 +87,10 @@
 
         span {
           text-align: center;
-          margin: 5px 0;
+          margin-top: 15px;
         }
 
         .invite-person-block {
-          row-gap: 5px;
           &__btn {
             margin: 5px auto;
           }

src/components/FileTracker/FileTracker.jsx

@@ -24,14 +24,14 @@ const FileTracker = ({ file, setDeletedTask, taskId }) => {
 
   return (
     <div
-      className={openImg ? "taskFile ImgOpened" : "taskFile"}
+      className={openImg ? "task-file img-opened" : "task-file"}
       key={file.id}
       onClick={() => {
         if (openImg) setOpenImg(!openImg);
       }}
     >
       <img
-        className="imgFile"
+        className="img-file"
         src={backendImg(file.file?.url)}
         alt="img"
         onClick={() => {
@@ -39,7 +39,7 @@ const FileTracker = ({ file, setDeletedTask, taskId }) => {
         }}
       />
       {!openImg && (
-        <div className="deleteFile" onClick={() => deleteFile(file)}>
+        <div className="delete-file" onClick={() => deleteFile(file)}>
           <img src={close} alt="delete" />
         </div>
       )}

src/components/Modal/AcceptModal/AcceptModal.jsx

@@ -6,10 +6,10 @@ import "./acceptModal.scss";
 
 export const AcceptModal = ({ title, closeModal, agreeHandler }) => {
   return (
-    <div className="backDrop">
-      <div className="acceptModal">
-        <h3 className="acceptModal__title">{title}</h3>
-        <div className="acceptModal__buttons">
+    <div className="back-drop">
+      <div className="accept-modal">
+        <h3 className="accept-modal__title">{title}</h3>
+        <div className="accept-modal__buttons">
           <button
             className="agree"
             onClick={() => {
@@ -24,7 +24,7 @@ export const AcceptModal = ({ title, closeModal, agreeHandler }) => {
           </button>
         </div>
         <img
-          className="acceptModal__close"
+          className="accept-modal__close"
           src={close}
           alt="close"
           onClick={closeModal}

src/components/Modal/AcceptModal/acceptModal.scss

@@ -1,4 +1,4 @@
-.backDrop {
+.back-drop {
   height: 100%;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.8);
@@ -10,7 +10,7 @@
   align-items: center;
   justify-content: center;
 
-  .acceptModal {
+  .accept-modal {
     border-radius: 20px;
     background: linear-gradient(180deg, #fff 0%, #ebebeb 100%);
     padding: 50px 34px 25px;

src/components/Modal/ModalRegistration/ModalRegistration.jsx

@@ -73,7 +73,7 @@ export const ModalRegistration = ({ active, setActive }) => {
 
         <div className="input-body">
           <div className="input-body__box">
-            <div className="inputContainer">
+            <div className="input-container">
               <h5>Ваше имя</h5>
               <input
                 className={validationErrors.username ? "error" : ""}
@@ -84,7 +84,7 @@ export const ModalRegistration = ({ active, setActive }) => {
               />
               <span>{validationErrors.username}</span>
             </div>
-            <div className="inputContainer">
+            <div className="input-container">
               <h5>E-mail</h5>
               <input
                 type="email"
@@ -99,7 +99,7 @@ export const ModalRegistration = ({ active, setActive }) => {
           </div>
 
           <div className="input-body__box">
-            <div className="inputContainer">
+            <div className="input-container">
               <h5>Пароль</h5>
               <input
                 className={validationErrors.password ? "error" : ""}
@@ -111,7 +111,7 @@ export const ModalRegistration = ({ active, setActive }) => {
               />
               <span>{validationErrors.password}</span>
             </div>
-            <div className="inputContainer">
+            <div className="input-container">
               <h5>Повторите пароль</h5>
               <input
                 className={validationErrors.secondPassword ? "error" : ""}

src/components/Modal/ModalRegistration/modalRegistration.scss

@@ -112,7 +112,7 @@
             padding-left: 20px;
           }
 
-          .inputContainer {
+          .input-container {
             margin: 0 0 20px 0;
             width: 100%;
           }

src/components/Modal/ModalReset/ModalReset.js

@@ -6,17 +6,17 @@ import "./modalReset.scss";
 
 export const ModalReset = ({ setModalReset }) => {
   return (
-    <div className="modalReset">
-      <h3 className="modalReset__title">Восстановление доступа</h3>
-      <div className="modalReset__input">
+    <div className="modal-reset">
+      <h3 className="modal-reset__title">Восстановление доступа</h3>
+      <div className="modal-reset__input">
         <span>Укажите e-mail, для которого хотите восстановить пароль.</span>
         <input placeholder="e-mail" />
       </div>
-      <button className="modalReset__submit">Восстановить</button>
+      <button className="modal-reset__submit">Восстановить</button>
       <img
         onClick={() => setModalReset(false)}
         src={close}
-        className="modalReset__close"
+        className="modal-reset__close"
         alt="close"
       />
     </div>

src/components/Modal/ModalReset/modalReset.scss

@@ -1,8 +1,8 @@
-.modalReset {
+.modal-reset {
   display: flex;
   flex-direction: column;
   border-radius: 20px;
-  background: linear-gradient(180deg, #FFF 0%, #EBEBEB 100%);
+  background: linear-gradient(180deg, #fff 0%, #ebebeb 100%);
   padding: 23px 110px 8px 36px;
   row-gap: 29px;
   position: relative;
@@ -28,7 +28,7 @@
       padding: 8px 12px;
       font-size: 15px;
       border-radius: 8px;
-      background-color: #EFF2F7;
+      background-color: #eff2f7;
       outline: none;
       border: none;
       max-width: 300px;
@@ -37,9 +37,9 @@
 
   &__submit {
     border-radius: 44px;
-    background: #52B709;
+    background: #52b709;
     padding: 9px 46px;
-    color: #FFF;
+    color: #fff;
     font-size: 16px;
     font-weight: 500;
     line-height: 32px;

src/components/Modal/ModalResetPassword/ModalResetPassword.jsx

@@ -117,16 +117,16 @@ export const ModalResetPassword = ({ active, setActive }) => {
   };
   return (
     <ModalLayout active={active} setActive={setActive}>
-      <div className="resetPassword">
+      <div className="reset-password">
         <img
-          className="resetPassword__close"
+          className="reset-password__close"
           src={close}
           alt="close"
           onClick={() => setActive(false)}
         />
-        <h3 className="resetPassword__title">Восстановление пароля</h3>
+        <h3 className="reset-password__title">Восстановление пароля</h3>
         {!step ? (
-          <div className="resetPassword__email">
+          <div className="reset-password__email">
             <h5>Введите ваш e-mail:</h5>
             <input
               type="email"
@@ -149,7 +149,7 @@ export const ModalResetPassword = ({ active, setActive }) => {
               <Loader style={"green"} />
             ) : (
               <button
-                className="resetPassword__btn"
+                className="reset-password__btn"
                 onClick={(e) => {
                   e.preventDefault();
                   submitHandler();
@@ -160,11 +160,11 @@ export const ModalResetPassword = ({ active, setActive }) => {
             )}
           </div>
         ) : (
-          <div className="resetPassword__email">
+          <div className="reset-password__email">
             <img
               src={arrow}
               onClick={() => setStep(false)}
-              className="resetPassword__email__arrow"
+              className="reset-password__email__arrow"
             />
             <h5>Введите код подтверждения:</h5>
             <input
@@ -185,7 +185,7 @@ export const ModalResetPassword = ({ active, setActive }) => {
               placeholder="token"
             />
             {inputsError.token && (
-              <span className="warningText">Введите данные</span>
+              <span className="warning-text">Введите данные</span>
             )}
             <h5>Введите новый пароль:</h5>
             <input
@@ -206,13 +206,13 @@ export const ModalResetPassword = ({ active, setActive }) => {
               className={inputsError.password ? "error" : ""}
             />
             {inputsError.password && (
-              <span className="warningText">Минимум 6 символов</span>
+              <span className="warning-text">Минимум 6 символов</span>
             )}
             {loader ? (
               <Loader style={"green"} />
             ) : (
               <button
-                className="resetPassword__btn"
+                className="reset-password__btn"
                 onClick={(e) => {
                   e.preventDefault();
                   resetPassword();

src/components/Modal/ModalResetPassword/modalResetPassword.scss

@@ -1,4 +1,4 @@
-.resetPassword {
+.reset-password {
   width: 280px;
   position: relative;
 
@@ -62,7 +62,14 @@
     justify-content: center;
     align-items: center;
     background-color: #ffffff;
-    background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%), linear-gradient(36deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 47%, rgba(255, 255, 255, 0.17) 50%, rgba(255, 255, 255, 0) 100%);
+    background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
+      linear-gradient(
+        36deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(255, 255, 255, 0.16) 47%,
+        rgba(255, 255, 255, 0.17) 50%,
+        rgba(255, 255, 255, 0) 100%
+      );
     color: #ffffff;
     font-weight: 500;
     font-size: 15px;
@@ -75,7 +82,7 @@
     border: 1px solid red;
   }
 
-  .warningText {
+  .warning-text {
     color: red;
     font-size: 12px;
     margin-bottom: 10px;

src/components/Modal/ModalTrackerRegistration/ModalTrackerRegistration.js

@@ -7,11 +7,11 @@ import "./modalTrackerRegistration.scss";
 
 export const ModalTrackerRegistration = ({ setModalReset, email }) => {
   return (
-    <div className="modalConfirmTracker">
-      <h3 className="modalConfirmTracker__title">
+    <div className="modal-confirm-tracker">
+      <h3 className="modal-confirm-tracker__title">
         Спасибо за регистрацию. Теперь можете войти в кабинет
       </h3>
-      <p className="modalConfirmTracker__info">
+      <p className="modal-confirm-tracker__info">
         Мы отправили ссылку
         <br />
         для активации вашего аккаунта на почту
@@ -20,14 +20,14 @@ export const ModalTrackerRegistration = ({ setModalReset, email }) => {
       <Link
         to={"/registration-setting"}
         onClick={() => setModalReset(false)}
-        className="modalConfirmTracker__btn"
+        className="modal-confirm-tracker__btn"
       >
         Понятно
       </Link>
       <img
         onClick={() => setModalReset(false)}
         src={close}
-        className="modalReset__close"
+        className="modal-reset__close"
         alt="close"
       />
     </div>

src/components/Modal/ModalTrackerRegistration/modalTrackerRegistration.scss

@@ -1,4 +1,4 @@
-.modalConfirmTracker {
+.modal-confirm-tracker {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -27,13 +27,13 @@
 
   &__btn {
     border-radius: 44px;
-    background: #52B709;
+    background: #52b709;
     outline: none;
     border: none;
     font-size: 16px;
     font-weight: 500;
     line-height: 32px;
-    color: #FFF;
+    color: #fff;
     padding: 9px 37px;
   }
 }

src/components/Modal/Tracker/ListEmployees/listEmployees.scss

@@ -13,7 +13,7 @@
         width: 100%;
       }
 
-      .projectPersons {
+      .project-persons {
         display: flex;
         position: relative;
         left: 5px;
@@ -37,7 +37,7 @@
         }
       }
 
-      .onePerson {
+      .one-person {
         display: flex;
         position: relative;
         left: -15px;
@@ -63,7 +63,7 @@
         display: flex;
       }
 
-      .countPersons {
+      .count-persons {
         color: #252c32;
         border: 1px solid #dde2e4;
         background: white;
@@ -73,7 +73,7 @@
       .add-person {
         background: #00c5a8;
         color: white;
-        font-size: 14px;
+        font-size: 18px;
         transition: all 0.15s ease;
         left: -28px;
         z-index: 2;

src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx

@@ -558,7 +558,7 @@ export const ModalTiсket = ({
         (div) =>
           div.classList &&
           (div.classList.contains("button-add-worker") ||
-            div.classList.contains("dropdownList"))
+            div.classList.contains("dropdown-list"))
       )
     ) {
       setDropListOpen(false);
@@ -570,7 +570,7 @@ export const ModalTiсket = ({
       !path.find(
         (div) =>
           div.classList &&
-          (div.classList.contains("deadLine") ||
+          (div.classList.contains("dead-line") ||
             div.classList.contains("react-datepicker-popper"))
       )
     ) {
@@ -622,7 +622,7 @@ export const ModalTiсket = ({
                 }}
               />
             ) : (
-              <h5 className="taskName">{inputsValue.title}</h5>
+              <h5 className="task-name">{inputsValue.title}</h5>
             )}
             <div className="content__description">
               {editOpen ? (
@@ -674,13 +674,13 @@ export const ModalTiсket = ({
               </div>
             )}
             {/*{uploadedFile && (*/}
-            {/*  <div className="fileLoaded">*/}
+            {/*  <div className="file-loaded">*/}
             {/*    {uploadedFile.map((file) => {*/}
             {/*      return (*/}
-            {/*        <div className="loadedFile" key={file.id}>*/}
+            {/*        <div className="loaded-file" key={file.id}>*/}
             {/*          <img src={backendImg(file.url)} alt="img" key={file.id} />*/}
             {/*          <div*/}
-            {/*            className="deleteFile"*/}
+            {/*            className="delete-file"*/}
             {/*            onClick={() => deleteLoadedFile(file)}*/}
             {/*          >*/}
             {/*            <img src={close} alt="delete" />*/}
@@ -758,7 +758,8 @@ export const ModalTiсket = ({
         <div className="workers">
           <div className="workers_box task__info">
             <span className="exit" onClick={() => setActive(false)}></span>
-            Создатель: <p className="workers__creator">{task.user?.fio}</p>
+            <h5>Создатель: </h5>
+            <p className="workers__creator">{task.user?.fio}</p>
             {executor ? (
               <>
                 <h5>Исполнитель: </h5>
@@ -780,7 +781,7 @@ export const ModalTiсket = ({
                 </div>
               </>
             ) : (
-              <div className="add-worker moreItems ">
+              <div className="add-worker more-items">
                 <button
                   className="button-add-worker"
                   onClick={() => setDropListOpen(true)}
@@ -789,16 +790,16 @@ export const ModalTiсket = ({
                 </button>
                 <span>Добавить исполнителя</span>
                 {dropListOpen && (
-                  <div className="dropdownList">
+                  <div className="dropdown-list">
                     <img
                       src={close}
-                      className="dropdownList__close"
+                      className="dropdown-list__close"
                       onClick={() => setDropListOpen(false)}
                     />
                     {correctProjectUsers.map((person) => {
                       return (
                         <div
-                          className="dropdownList__person"
+                          className="dropdown-list__person"
                           key={person.user_id}
                           onClick={() => taskExecutor(person)}
                         >
@@ -845,7 +846,7 @@ export const ModalTiсket = ({
                 </div>
               </div>
             )}
-            <div className="add-worker moreItems">
+            <div className="add-worker more-items">
               <button
                 className="button-add-worker"
                 onClick={() => setDropListMembersOpen(true)}
@@ -854,17 +855,17 @@ export const ModalTiсket = ({
               </button>
               <span>Добавить участника</span>
               {dropListMembersOpen && (
-                <div className="dropdownList">
+                <div className="dropdown-list">
                   <img
                     src={close}
-                    className="dropdownList__close"
+                    className="dropdown-list__close"
                     onClick={() => setDropListMembersOpen(false)}
                   />
                   {users.length ? (
                     users.map((person) => {
                       return (
                         <div
-                          className="dropdownList__person"
+                          className="dropdown-list__person"
                           key={person.user_id}
                           onClick={() => addMember(person)}
                         >
@@ -881,7 +882,7 @@ export const ModalTiсket = ({
                       );
                     })
                   ) : (
-                    <p className="noUsers">Нет пользователей</p>
+                    <p className="no-users">Нет пользователей</p>
                   )}
                 </div>
               )}
@@ -889,14 +890,14 @@ export const ModalTiсket = ({
           </div>
 
           <div className="workers_box-middle">
-            <div className="deadLine">
+            <div className="dead-line">
               <div
-                className="deadLine__container"
+                className="dead-line__container"
                 onClick={() => setDatePickerOpen(!datePickerOpen)}
               >
                 <img src={calendarIcon} alt="calendar" />
                 <span>
-                  {deadLine ? getCorrectDate(deadLine) : "Срок исполнения:"}
+                  {deadLine ? getCorrectDate(deadLine) : "Срок исполнения"}
                 </span>
               </div>
               <DatePicker
@@ -913,7 +914,7 @@ export const ModalTiсket = ({
               />
             </div>
             <div className="time">
-              <img src={watch}></img>
+              <p>⏱</p>
               <p>
                 {correctTimerTime(currentTimerCount.hours)}:
                 {correctTimerTime(currentTimerCount.minute)}:
@@ -990,7 +991,7 @@ export const ModalTiсket = ({
                   {correctProjectTags.map((tag) => {
                     return (
                       <div
-                        className="tagItem"
+                        className="tag-item"
                         key={tag.id}
                         onClick={() => addTagToTask(tag.id)}
                       >
@@ -1000,7 +1001,7 @@ export const ModalTiсket = ({
                     );
                   })}
                   {!Boolean(correctProjectTags.length) && (
-                    <p className="tags__dropDown__noItem">Нет тегов</p>
+                    <p className="tags__dropDown__no-item">Нет тегов</p>
                   )}
                 </div>
               )}

src/components/Modal/Tracker/ModalTicket/modalTicket.scss

@@ -66,6 +66,7 @@
       margin-left: 15px;
 
       &__category {
+        height: 22px;
         margin-right: 5px;
       }
 
@@ -144,17 +145,17 @@
         margin-bottom: 0;
       }
 
-      .taskName {
+      .task-name {
         max-width: 550px;
         text-overflow: ellipsis;
         -webkit-line-clamp: 2;
       }
 
-      .fullName {
+      .full-name {
         max-width: 800px;
       }
 
-      .fullDescription {
+      .full-description {
         max-width: 800px;
       }
 
@@ -193,7 +194,7 @@
             margin: 10px 0;
           }
 
-          &__subComment {
+          &__sub-comment {
             &:before {
               content: "";
               background: #e4e4e6;
@@ -366,22 +367,22 @@
       margin-top: 33px;
       overflow-y: auto;
 
-      .taskFile {
+      .task-file {
         cursor: pointer;
         position: relative;
-        .imgFile {
+        .img-file {
           max-width: 170px;
           max-height: 104px;
           object-fit: contain;
         }
 
         &:hover {
-          .deleteFile {
+          .delete-file {
             background: rgb(226, 226, 226, 0.6);
           }
         }
 
-        .deleteFile {
+        .delete-file {
           position: absolute;
           cursor: pointer;
           display: flex;
@@ -402,7 +403,7 @@
         }
       }
 
-      .ImgOpened {
+      .img-opened {
         position: fixed;
         width: 100vw;
         height: 100vh;
@@ -414,7 +415,7 @@
         z-index: 100;
         background-color: rgba(0, 0, 0, 0.2);
 
-        .imgFile {
+        .img-file {
           width: 90vw;
           height: 90vh;
           max-width: none;
@@ -423,18 +424,18 @@
       }
     }
 
-    .fileLoaded {
+    .file-loaded {
       display: flex;
       align-items: center;
       margin: 10px 0 0;
 
-      .loadedFile {
+      .loaded-file {
         position: relative;
         img {
           max-width: 100px;
           object-fit: contain;
         }
-        .deleteFile {
+        .delete-file {
           position: absolute;
           cursor: pointer;
           display: flex;
@@ -454,7 +455,7 @@
           }
         }
         &:hover {
-          .deleteFile {
+          .delete-file {
             background: rgb(226, 226, 226, 0.6);
           }
         }
@@ -725,7 +726,7 @@
       }
     }
 
-    .deadLine {
+    .dead-line {
       position: relative;
       &__container {
         padding: 5px 10px 5px;
@@ -846,7 +847,8 @@
     .time {
       display: flex;
       align-items: center;
-      justify-content: space-between;
+      justify-content: center;
+      column-gap: 5px;
       font-size: 13px;
       margin-top: 5px;
       width: 160px;
@@ -860,7 +862,7 @@
     &__creator {
       font-size: 14px;
       font-weight: 500;
-      
+
       max-width: 200px;
       overflow: hidden;
       white-space: nowrap;
@@ -924,7 +926,7 @@
         }
       }
 
-      .dropdownList {
+      .dropdown-list {
         position: absolute;
         background: white;
         padding: 10px;
@@ -937,7 +939,7 @@
         flex-direction: column;
         row-gap: 8px;
 
-        .noUsers {
+        .no-users {
           font-size: 14px;
           text-align: center;
         }
@@ -1064,7 +1066,7 @@
               top: 5px;
             }
 
-            .tagItem {
+            .tag-item {
               display: flex;
               align-items: center;
               justify-content: space-between;
@@ -1091,7 +1093,7 @@
               }
             }
 
-            &__noItem {
+            &__no-item {
               line-height: 20px;
               font-size: 15px;
               margin: 0;

src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx

@@ -565,7 +565,7 @@ export const TicketFullScreen = () => {
         (div) =>
           div.classList &&
           (div.classList.contains("button-add-worker") ||
-            div.classList.contains("dropdownList"))
+            div.classList.contains("dropdown-list"))
       )
     ) {
       setDropListOpen(false);
@@ -577,7 +577,7 @@ export const TicketFullScreen = () => {
       !path.find(
         (div) =>
           div.classList &&
-          (div.classList.contains("deadLine") ||
+          (div.classList.contains("dead-line") ||
             div.classList.contains("react-datepicker-popper"))
       )
     ) {
@@ -674,7 +674,7 @@ export const TicketFullScreen = () => {
                       }}
                     />
                   ) : (
-                    <h5 className="fullName nameFullScreen">
+                    <h5 className="full-name name-fullscreen">
                       {inputsValue.title}
                     </h5>
                   )}
@@ -708,7 +708,7 @@ export const TicketFullScreen = () => {
                     ) : (
                       <div className="ticket__description">
                         <div
-                          className="fullDescription fullScreenDescription"
+                          className="full-description fullscreen-description"
                           dangerouslySetInnerHTML={{
                             __html: inputsValue.description
                           }}
@@ -717,7 +717,7 @@ export const TicketFullScreen = () => {
                     )}
                   </div>
                   {Boolean(taskFiles.length) && (
-                    <div className="task__files filesFullScreen">
+                    <div className="task__files files-fullscreen">
                       {taskFiles.map((file) => {
                         return (
                           <FileTracker
@@ -731,17 +731,17 @@ export const TicketFullScreen = () => {
                     </div>
                   )}
                   {uploadedFile && (
-                    <div className="fileLoaded">
+                    <div className="file-loaded">
                       {uploadedFile.map((file) => {
                         return (
-                          <div className="loadedFile" key={file.id}>
+                          <div className="loaded-file" key={file.id}>
                             <img
                               src={backendImg(file.url)}
                               alt="img"
                               key={file.id}
                             />
                             <div
-                              className="deleteFile"
+                              className="delete-file"
                               onClick={() => deleteLoadedFile(file)}
                             >
                               <img src={fileDelete} alt="delete" />
@@ -775,7 +775,7 @@ export const TicketFullScreen = () => {
                       {caseOfNum(taskFiles.length, "files")}
                     </div>
                   </div>
-                  <div className="content__input commentFullScreen">
+                  <div className="content__input comment-fullscreen">
                     <input
                       placeholder="Оставить комментарий"
                       value={inputsValue.comment}
@@ -809,7 +809,7 @@ export const TicketFullScreen = () => {
                   </div>
                 </div>
               </div>
-              <div className="workers fullScreenWorkers">
+              <div className="workers fullscreen-workers">
                 <div className="workers_box task__info">
                   <div className="workers__creator">
                     Создатель: <p>{taskInfo.user?.fio}</p>
@@ -836,7 +836,7 @@ export const TicketFullScreen = () => {
                       </div>
                     </>
                   ) : (
-                    <div className="add-worker moreItems ">
+                    <div className="add-worker more-items ">
                       <button
                         className="button-add-worker"
                         onClick={() => setDropListOpen(true)}
@@ -845,16 +845,16 @@ export const TicketFullScreen = () => {
                       </button>
                       <span>Добавить исполнителя</span>
                       {dropListOpen && (
-                        <div className="dropdownList">
+                        <div className="dropdown-list">
                           <img
                             src={close}
-                            className="dropdownList__close"
+                            className="dropdown-list__close"
                             onClick={() => setDropListOpen(false)}
                           />
                           {correctProjectUsers.map((person) => {
                             return (
                               <div
-                                className="dropdownList__person"
+                                className="dropdown-list__person"
                                 key={person.user_id}
                                 onClick={() => taskExecutor(person)}
                               >
@@ -901,7 +901,7 @@ export const TicketFullScreen = () => {
                       </div>
                     </div>
                   )}
-                  <div className="add-worker moreItems">
+                  <div className="add-worker more-items">
                     <button
                       className="button-add-worker"
                       onClick={() => setDropListMembersOpen(true)}
@@ -910,17 +910,17 @@ export const TicketFullScreen = () => {
                     </button>
                     <span>Добавить участника</span>
                     {dropListMembersOpen && (
-                      <div className="dropdownList">
+                      <div className="dropdown-list">
                         <img
                           src={close}
-                          className="dropdownList__close"
+                          className="dropdown-list__close"
                           onClick={() => setDropListMembersOpen(false)}
                         />
                         {users.length ? (
                           users.map((person) => {
                             return (
                               <div
-                                className="dropdownList__person"
+                                className="dropdown-list__person"
                                 key={person.user_id}
                                 onClick={() => addMember(person)}
                               >
@@ -937,7 +937,7 @@ export const TicketFullScreen = () => {
                             );
                           })
                         ) : (
-                          <p className="noUsers">Нет пользователей</p>
+                          <p className="no-users">Нет пользователей</p>
                         )}
                       </div>
                     )}
@@ -945,9 +945,9 @@ export const TicketFullScreen = () => {
                 </div>
 
                 <div className="workers_box-middle">
-                  <div className="deadLine">
+                  <div className="dead-line">
                     <div
-                      className="deadLine__container"
+                      className="dead-line__container"
                       onClick={() => setDatePickerOpen(!datePickerOpen)}
                     >
                       <img src={calendarIcon} alt="calendar" />
@@ -1049,7 +1049,7 @@ export const TicketFullScreen = () => {
                         {correctProjectTags.map((tag) => {
                           return (
                             <div
-                              className="tagItem"
+                              className="tag-item"
                               key={tag.id}
                               onClick={() => addTagToTask(tag.id)}
                             >
@@ -1059,7 +1059,7 @@ export const TicketFullScreen = () => {
                           );
                         })}
                         {!Boolean(correctProjectTags.length) && (
-                          <p className="tags__dropDown__noItem">Нет тегов</p>
+                          <p className="tags__dropDown__no-item">Нет тегов</p>
                         )}
                       </div>
                     )}

src/components/Modal/Tracker/TicketFullScreen/ticketFullScreen.scss

@@ -2,11 +2,11 @@
   background: #f5f5f5;
 }
 
-.fullName {
+.full-name {
   display: flex;
   align-items: center;
   span {
-    color: #6F6F6F;
+    color: #6f6f6f;
     font-weight: 500;
     font-size: 12px;
     line-height: 17px;
@@ -39,7 +39,7 @@
     span {
       display: flex;
       width: 120px;
-      color: #6F6F6F;
+      color: #6f6f6f;
       font-weight: 500;
       font-size: 12px;
       line-height: 17px;
@@ -47,9 +47,9 @@
   }
 }
 
-.fullScreenWorkers {
+.fullscreen-workers {
   @media (max-width: 880px) {
-    background: #DFF1FF;
+    background: #dff1ff;
 
     .workers_box {
       @media (max-width: 880px) {
@@ -84,7 +84,7 @@
       gap: 20px;
       border-bottom: none !important;
 
-      .deadLine {
+      .dead-line {
         width: 100%;
       }
 
@@ -122,13 +122,13 @@
   }
 }
 
-.commentFullScreen {
+.comment-fullscreen {
   @media (max-width: 520px) {
     width: auto !important;
   }
 }
 
-.filesFullScreen {
+.files-fullscreen {
   @media (max-width: 520px) {
     justify-content: space-evenly;
     max-height: 400px !important;
@@ -141,13 +141,13 @@
   }
 }
 
-.nameFullScreen {
+.name-fullscreen {
   @media (max-width: 520px) {
     white-space: inherit !important;
   }
 }
 
-.fullScreenDescription {
+.fullscreen-description {
   @media (max-width: 1190px) {
     white-space: inherit !important;
   }

src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx

@@ -413,11 +413,11 @@ export const TrackerModal = ({
           <div className="select__person">
             <div className="title-project select-person">
               <h4>Добавьте участника</h4>
-              <p className="select-person__info">
-                Выберите пользователя в списке или добавьте по e-mail
-              </p>
               <div className="invite__blocks">
                 <div className="add-person-block">
+                  <p className="select-person__info">
+                    Выберите пользователя в списке
+                  </p>
                   <div
                     className={
                       selectWorkersOpen
@@ -468,8 +468,8 @@ export const TrackerModal = ({
                     Добавить
                   </BaseButton>
                 </div>
-                <span>или</span>
                 <div className="invite-person-block">
+                  <span>или добавьте по e-mail</span>
                   <div className="input-container invite-person-block__input">
                     <input
                       className="name-project"
@@ -494,13 +494,14 @@ export const TrackerModal = ({
       {modalType === "create-ticket-project" && (
         <>
           <div className="title-project">
-            <div className="createTaskHead">
-              <div className="createTaskBody__right__owner">
+            <div className="create-task-head">
+              <div className="create-task-body__right__owner">
                 <p>Создание задачи</p>
               </div>
             </div>
-            <div className="createTaskBody">
-              <div className="createTaskBody__left">
+            <div className="create-task-body">
+              <div className="create-task-body__left">
+                <h4>Введите название и описание задачи</h4>
                 <div className="input-container">
                   <input
                     maxLength="100"
@@ -532,14 +533,14 @@ export const TrackerModal = ({
                   }}
                 />
               </div>
-              <div className="createTaskBody__right">
-                <div className="createTaskBody__right__tags">
+              <div className="create-task-body__right">
+                <div className="create-task-body__right__tags">
                   <div className="tags__selected">
                     <div className="tags__selected__items">
                       {taskTags.map((tag) => {
                         return (
                           <div
-                            className="selectedTag"
+                            className="selected-tag"
                             key={tag.id}
                             style={{ background: tag.color }}
                           >
@@ -596,7 +597,7 @@ export const TrackerModal = ({
                         );
                       })}
                       {Boolean(!correctProjectTags.length) && (
-                        <p className="noTags">Нет тегов</p>
+                        <p className="no-tags">Нет тегов</p>
                       )}
                     </div>
                   )}
@@ -688,7 +689,7 @@ export const TrackerModal = ({
                     </div>
                   )}
                 </div>
-                <div className="createTaskBody__right__deadLine">
+                <div className="create-task-body__right__dead-line">
                   <img src={calendarImg} alt="calendar" />
                   <p onClick={() => setDatePickerOpen(!datePickerOpen)}>
                     {deadLineDate

src/components/Modal/Tracker/TrackerModal/trackerModal.scss

@@ -305,7 +305,7 @@
     }
   }
 
-  .createTaskHead {
+  .create-task-head {
     width: 100%;
     padding: 5px 10px;
     display: flex;
@@ -319,7 +319,7 @@
       color: #000000;
     }
 
-    &__selectColumn {
+    &__select-column {
       display: flex;
       column-gap: 8px;
       cursor: pointer;
@@ -335,7 +335,7 @@
     }
   }
 
-  .createTaskBody {
+  .create-task-body {
     padding: 15px 20px;
     display: flex;
     column-gap: 20px;
@@ -448,7 +448,7 @@
               gap: 8px;
               max-width: 393px;
 
-              .selectedTag {
+              .selected-tag {
                 display: flex;
                 padding: 7px 7px 7px 8px;
                 border-radius: 35px;
@@ -525,7 +525,7 @@
               }
             }
 
-            .noTags {
+            .no-tags {
               text-align: center;
               font-size: 18px;
             }
@@ -603,7 +603,7 @@
         font-size: 16px;
       }
 
-      &__deadLine {
+      &__dead-line {
         display: flex;
         align-items: center;
         column-gap: 5px;

src/components/Navigation/Navigation.jsx

@@ -61,7 +61,7 @@ export const Navigation = () => {
       },
       {
         path: "/treaties",
-        name: "Договора"
+        name: "Договоры"
       },
       {
         path: "/settings",
@@ -88,8 +88,8 @@ export const Navigation = () => {
           })}
         </nav>
 
-        <div className="profile-header__personalInfo">
-          <h3 className="profile-header__personalInfoName">
+        <div className="profile-header__personal-info">
+          <h3 className="profile-header__personal-info-name">
             {profileInfo?.fio ? profileInfo?.fio : profileInfo?.username}
           </h3>
           <NavLink end to={"/profile"}>
@@ -97,7 +97,7 @@ export const Navigation = () => {
               src={
                 profileInfo?.photo ? urlForLocal(profileInfo.photo) : avatarMok
               }
-              className="profile-header__personalInfoAvatar"
+              className="profile-header__personal-info-avatar"
               alt="avatar"
             />
           </NavLink>

src/components/PartnerPersonCard/PartnerPersonCard.jsx

@@ -9,18 +9,18 @@ import "./partnerPersonCard.scss";
 
 export const PartnerPersonCard = ({ name, img, userId }) => {
   return (
-    <div className="partnerPersonCard">
-      <div className="partnerPersonCard__img">
+    <div className="partner-person-card">
+      <div className="partner-person-card__img">
         <img src={urlForLocal(img)} alt="avatar" />
       </div>
-      <div className="partnerPersonCard__info">
-        <h2 className="partnerPersonCard__name">{name}</h2>
+      <div className="partner-person-card__info">
+        <h2 className="partner-person-card__name">{name}</h2>
         <Link
-          className="partnerPersonCard__report"
+          className="partner-person-card__report"
           to={`/profile/employees/report/${userId}`}
         >
           Подробный отчет
-          <div className="partnerPersonCard__more">
+          <div className="partner-person-card__more">
             <img src={rightArrow} alt="arrow" />
           </div>
         </Link>

src/components/PartnerPersonCard/partnerPersonCard.scss

@@ -1,25 +1,28 @@
-.partnerPersonCard {
+.partner-person-card {
   display: flex;
   position: relative;
+  width: 300px;
 
   &__img {
     background: white;
-    border-radius: 12px;
-    padding: 25px;
+    border-radius: 12px 0 0 12px;
+    padding: 5px;
     z-index: 2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     img {
-      width: 77px;
-      height: 77px;
+      width: 70px;
+      height: 70px;
     }
   }
 
   &__info {
     position: relative;
-    background: #E1FCCF;
+    background: #e1fccf;
     z-index: 1;
-    padding: 15px 15px 15px 30px;
-    left: -15px;
-    border-radius: 12px;
+    padding: 10px;
+    border-radius: 0 12px 12px 0;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -34,8 +37,8 @@
   }
 
   &__more {
-    width: 41px;
-    height: 41px;
+    width: 30px;
+    height: 30px;
     background: white;
     border-radius: 50px;
     display: flex;

src/components/ProfileBreadcrumbs/ProfileBreadcrumbs.jsx

@@ -5,7 +5,7 @@ import "./profileBreadcrumbs.scss";
 
 export const ProfileBreadcrumbs = ({ links }) => {
   return (
-    <div className="profileBreadcrumbs">
+    <div className="profile-breadcrumbs">
       {links.map((link, index) => {
         return (
           <Link key={index} to={link.link}>

src/components/ProfileBreadcrumbs/profileBreadcrumbs.scss

@@ -1,4 +1,4 @@
-.profileBreadcrumbs {
+.profile-breadcrumbs {
   display: flex;
   margin-bottom: 12px;
 

src/components/ProfileCalendar/ProfileCalendarComponent.jsx

@@ -246,13 +246,13 @@ export const ProfileCalendarComponent = React.memo(
                   key={day}
                   className={
                     startRangeDays
-                      ? `selectDays ${
+                      ? `select-days ${
                           String(startDate?._d) === String(day._d) ||
                           endDate === day
-                            ? "selectedDay"
+                            ? "selected-day"
                             : ""
                         } ${endDate ? "disable" : ""} ${
-                          selectedRangeDays[day] ? "selectedDay" : ""
+                          selectedRangeDays[day] ? "selected-day" : ""
                         }`
                       : dayStyles(day)
                   }
@@ -272,7 +272,7 @@ export const ProfileCalendarComponent = React.memo(
             )}
           </div>
         </div>
-        <div className="selectDateRange">
+        <div className="select-date-range">
           <span
             className="select"
             onClick={() => {

src/components/ProfileHeader/profileHeader.scss

@@ -84,12 +84,12 @@
     }
   }
 
-  &__personalInfo {
+  &__personal-info {
     display: flex;
     column-gap: 20px;
     align-items: center;
 
-    &Name {
+    &-name {
       margin-bottom: 0;
       font-size: 12px;
       line-height: 32px;
@@ -103,7 +103,7 @@
       }
     }
 
-    &Avatar {
+    &-avatar {
       width: 37px;
       height: 37px;
       border-radius: 100px;

src/components/ProjectTicket/ProjectTicket.jsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 
 import { deleteProject, modalToggle } from "@redux/projectsTrackerSlice";
 
-import { copyProjectLink } from "@utils/helper";
+import { copyProjectLink, urlForLocal } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
@@ -18,7 +18,6 @@ import archiveSet from "assets/icons/archive.svg";
 import del from "assets/icons/delete.svg";
 import edit from "assets/icons/edit.svg";
 import link from "assets/icons/link.svg";
-import avatarProject from "assets/images/avatarMok.png";
 
 import "./projectTicket.scss";
 
@@ -27,8 +26,8 @@ export const ProjectTicket = ({ project, index }) => {
   const [modalAdd, setModalAdd] = useState(false);
   const [modalDelete, setModalDelete] = useState(false);
   const [acceptModalOpen, setAcceptModalOpen] = useState(false);
-  const [path, setPath] = useState("");
   const dispatch = useDispatch();
+  const navigate = useNavigate();
   const { showNotification } = useNotification();
 
   useEffect(() => {
@@ -84,18 +83,30 @@ export const ProjectTicket = ({ project, index }) => {
         <div className="project__link">{project.name}</div>
 
         <div className="project__info">
-          <p>Открытые задачи</p>
+          {/* <p>Открытые задачи</p>
           <span className="count">
             {project.columns.reduce(
               (accumulator, currentValue) =>
                 accumulator + currentValue.tasks.length,
               0
             )}
-          </span>
-          <img src={avatarProject} alt="#" className="project__avatar" />
+          </span> */}
+          <img
+            src={urlForLocal(project.owner_info.avatar)}
+            alt="avatar"
+            className="project__avatar"
+          />
+          <span>{project.owner_info.fio}</span>
         </div>
       </Link>
 
+      {/* <Link
+        to={`/profile/statistics/${project.id}`}
+        className="project__statistics"
+      >
+        Посмотреть статистику
+      </Link> */}
+
       <span
         className="menu-settings"
         onClick={() => {
@@ -105,13 +116,6 @@ export const ProjectTicket = ({ project, index }) => {
         ...
       </span>
 
-      <Link
-        to={`/profile/statistics/${project.id}`}
-        className="project__statistics"
-      >
-        Посмотреть статистику
-      </Link>
-
       <TrackerModal
         active={modalAdd}
         setActive={setModalAdd}
@@ -131,9 +135,9 @@ export const ProjectTicket = ({ project, index }) => {
             <img src={edit}></img>
             <p>редактировать</p>
           </div>
-          <div>
+          <div onClick={copyProjectLink(project.id)}>
             <img src={link}></img>
-            <p onClick={copyProjectLink(project.id)}>скопировать ссылку</p>
+            <p>скопировать ссылку</p>
           </div>
           <div
             onClick={() => {
@@ -144,7 +148,14 @@ export const ProjectTicket = ({ project, index }) => {
             <img src={archiveSet}></img>
             <p>в архив</p>
           </div>
-
+          <div
+            onClick={() => {
+              navigate(`/profile/statistics/${project.id}`);
+            }}
+          >
+            <img src={archiveSet}></img>
+            <p>статистика</p>
+          </div>
           <div
             onClick={() => {
               setModalDelete(true);

src/components/ProjectTicket/projectTicket.scss

@@ -40,7 +40,6 @@
     display: flex;
     align-items: center;
     position: relative;
-    margin-bottom: 30px;
 
     p {
       color: #6f6f6f;
@@ -50,6 +49,11 @@
       line-height: 17px;
     }
 
+    span {
+      color: blue;
+      font-size: 15px;
+    }
+
     .count {
       margin-left: 8px;
       width: 26px;
@@ -78,16 +82,16 @@
 
   .menu-settings {
     position: absolute;
-    font-size: 21px;
+    font-size: 30px;
     color: #6f6f6f;
     right: 15px;
-    top: 0px;
+    top: -10px;
   }
 
   &__avatar {
     width: 25px;
     height: 25px;
-    margin-left: 56px;
+    margin-right: 10px;
   }
 
   &__open-tracker {

src/components/ReportForm/ReportForm.jsx

@@ -249,7 +249,7 @@ const ReportForm = () => {
                         value={inputs[index].task}
                         className={
                           !input.task && reportSuccess === "Заполните задачи"
-                            ? "checkTask"
+                            ? "check-task"
                             : ""
                         }
                         name="text"
@@ -273,7 +273,7 @@ const ReportForm = () => {
                         className={
                           !input.hours_spent &&
                           reportSuccess === "Заполните задачи"
-                            ? "checkTask"
+                            ? "check-task"
                             : ""
                         }
                         name="number"
@@ -308,7 +308,7 @@ const ReportForm = () => {
               })}
 
               <div className="report-form__form-add">
-                <p className="addMore" onClick={addInput}>
+                <p className="add-more" onClick={addInput}>
                   +
                 </p>
                 <span>Добавить задачу</span>
@@ -368,7 +368,7 @@ const ReportForm = () => {
                 {reportSuccess && (
                   <p
                     className={`report-form__footer-done ${
-                      reportSuccess === "Заполните задачи" ? "errorText" : ""
+                      reportSuccess === "Заполните задачи" ? "error-text" : ""
                     }`}
                   >
                     {reportSuccess}

src/components/ReportForm/reportForm.scss

@@ -194,7 +194,7 @@
       flex-direction: column;
 
       &--description {
-        .checkTask {
+        .check-task {
           border-color: #fc0000;
         }
 
@@ -229,7 +229,7 @@
           margin-left: 0px;
         }
 
-        .checkTask {
+        .check-task {
           border-color: #fc0000;
         }
 
@@ -267,7 +267,7 @@
     align-items: center;
     justify-content: center;
 
-    .addMore {
+    .add-more {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -383,7 +383,7 @@
       margin-left: 20px;
     }
 
-    .errorText {
+    .error-text {
       color: #bf3c3c;
       font-weight: 600;
     }

src/components/ShortReport/ShortReport.jsx

@@ -75,9 +75,9 @@ export const ShortReport = () => {
 
   return (
     <div>
-      <div className="viewReport__info short-report">
-        <div className="viewReport__title-box">
-          <h2 className="viewReport__title">
+      <div className="view-report__info short-report">
+        <div className="view-report__title-box">
+          <h2 className="view-report__title">
             Ваши отчеты - <span>просмотр отчета за день</span>
           </h2>
           <Link to={`/profile/calendar/view/${dateCreate}`}>
@@ -85,11 +85,11 @@ export const ShortReport = () => {
           </Link>
         </div>
 
-        <div className="viewReport__bar">
-          <h3 className="viewReport__bar__date">
+        <div className="view-report__bar">
+          <h3 className="view-report__bar__date">
             {getCorrectDate(reportDate)}
           </h3>
-          <p className="viewReport__bar__hours">
+          <p className="view-report__bar__hours">
             Вами потрачено на работу:{" "}
             <span>
               {totalHours} {hourOfNum(totalHours)}
@@ -99,9 +99,9 @@ export const ShortReport = () => {
       </div>
       {loader && <Loader style="green" />}
       {Boolean(taskText.length) && (
-        <div className="viewReport__content">
+        <div className="view-report__content">
           <div className="table__container">
-            <table className="viewReport__done">
+            <table className="view-report__done">
               <thead>
                 <tr>
                   <th>
@@ -123,7 +123,7 @@ export const ShortReport = () => {
                           </p>
                         </td>
                         <td>
-                          <div className="viewReport__done__hours__item">
+                          <div className="view-report__done__hours__item">
                             <span>{task.hours}</span>
                             <p className="hours">
                               {hourOfNum(task.hours)} на задачу
@@ -145,7 +145,7 @@ export const ShortReport = () => {
             </table>
           </div>
           {Boolean(difficulties.length) && (
-            <div className="viewReport__item">
+            <div className="view-report__item">
               <h3>Какие сложности возникли?</h3>
               {difficulties.map((item, index) => {
                 return <p key={index}>{item}</p>;
@@ -153,7 +153,7 @@ export const ShortReport = () => {
             </div>
           )}
           {Boolean(tomorrowTask.length) && (
-            <div className="viewReport__item">
+            <div className="view-report__item">
               <h3>Что планируется сделать завтра?</h3>
               {tomorrowTask.map((item, index) => {
                 return <p key={index}>{item}</p>;
@@ -163,7 +163,7 @@ export const ShortReport = () => {
         </div>
       )}
       {!Boolean(taskText.length) && !loader && (
-        <div className="viewReport__noTask">
+        <div className="view-report__no-task">
           <p>
             В этот день вы <span>не заполняли</span> отчет
           </p>

src/components/ShortReport/shortReport.scss

@@ -2,7 +2,7 @@
   margin-bottom: 30px;
 }
 
-.viewReport {
+.view-report {
   &__title-box {
     display: flex;
     align-items: center;

src/components/StarRating/StarRating.scss

@@ -3,6 +3,7 @@
   align-items: center;
   font-size: var(--size);
   line-height: 0.75;
+
   &__body {
     position: relative;
     &::before {
@@ -11,6 +12,7 @@
       color: var(--color);
     }
   }
+
   &__active {
     position: absolute;
     height: 100%;
@@ -28,6 +30,7 @@
       color: var(--color);
     }
   }
+
   &__items {
     display: flex;
     position: absolute;
@@ -36,6 +39,7 @@
     left: 0;
     top: 0;
   }
+
   &__item {
     flex: 0 0 20%;
     height: 100%;

src/components/TaskItem/taskItem.scss

@@ -30,6 +30,7 @@
   &__hours {
     margin-left: 3.3rem;
     display: flex;
+
     &-value {
       width: 34px;
       height: 34px;

src/components/TrackerSelectColumn/TrackerSelectColumn.jsx

@@ -12,13 +12,13 @@ export const TrackerSelectColumn = ({ columns, task, currentColumn }) => {
   const [openSelect, setOpenSelect] = useState(false);
   return (
     <div
-      className="trackerSelectColumn"
+      className="tracker-select-column"
       onClick={() => setOpenSelect(!openSelect)}
     >
       <p>{currentColumn.title}</p>
       <img className={openSelect ? "open" : ""} src={arrowDown} alt="arrow" />
       {openSelect && (
-        <div className="trackerSelectColumn__dropDown">
+        <div className="tracker-select-column__dropDown">
           {columns.map((column) => {
             return (
               <p

src/components/TrackerSelectColumn/trackerSelectColumn.scss

@@ -1,4 +1,4 @@
-.trackerSelectColumn {
+.tracker-select-column {
   display: none;
 
   @media (max-width: 900px) {
@@ -9,7 +9,7 @@
     align-items: center;
     padding: 2px 6px;
     cursor: pointer;
-    border: 1px solid #e3e2e2;;
+    border: 1px solid #e3e2e2;
     border-radius: 8px;
     position: relative;
 

src/components/TrackerTaskComment/TrackerTaskComment.jsx

@@ -80,7 +80,7 @@ export const TrackerTaskComment = ({
           : "",
         "comments__list__item",
         commentsEditOpen ? "comment__edit--open" : "",
-        comment.parent_id ? "comments__list__item__subComment" : ""
+        comment.parent_id ? "comments__list__item__sub-comment" : ""
       ].join(" ")}
     >
       <div className="comments__list__item__info">

src/components/features/quiz/CardAviableTest.jsx

@@ -29,7 +29,7 @@ export const CardAvailableTest = ({ title, description, path, status }) => {
         </div>
         <div className="card-available-test__info">
           <p dangerouslySetInnerHTML={{ __html: description }}></p>
-          <div className="card-available-test__infoLink">
+          <div className="card-available-test__info-link">
             <img src={rightArrow} alt="arrow" />
           </div>
         </div>

src/components/features/quiz/quiz.scss

@@ -469,7 +469,7 @@ $maxWidthContainer: 1123;
         font-weight: 700;
       }
     }
-    &Link {
+    &-link {
       width: 48px;
       height: 48px;
       background: #ddeec6;

src/pages/Auth/auth.scss

@@ -326,14 +326,14 @@
     }
   }
 
-  &__partnersForPart {
+  &__partners-for-part {
     background: #406128;
     color: white;
     margin-left: -35px;
   }
 
-  &__partnersForPart,
-  &__developersForPart {
+  &__partners-for-part,
+  &__developers-for-part {
     width: 220px;
     height: 50px;
     border-radius: 44px;
@@ -341,7 +341,7 @@
     border: none;
   }
 
-  &__developersForPart {
+  &__developers-for-part {
     background-color: #52b7098c;
     color: #2d6505;
   }
@@ -353,7 +353,7 @@
       flex-direction: column;
     }
 
-    &__partnersForPart {
+    &__partners-for-part {
       margin: 15px 0 0 0;
     }
   }

src/pages/AuthForCandidate/AuthForCandidate.jsx

@@ -128,7 +128,7 @@ export const AuthForCandidate = () => {
           <p className="auth-candidate__start__description">
             Для нас не имеет значение Ваша локация.
           </p>
-          <div className="auth-candidate__start__categoriesWrapper">
+          <div className="auth-candidate__start__categories-wrapper">
             <StepsForCandidate step="шаг 1 - выберите специализацию" />
             {personalInfoItems.map((item, index) => {
               return (

src/pages/AuthForCandidate/authForCandidate.scss

@@ -32,7 +32,7 @@
       line-height: 32px;
     }
 
-    &__categoriesWrapper {
+    &__categories-wrapper {
       position: relative;
       margin-top: 200px;
       width: 100%;
@@ -47,7 +47,7 @@
         grid-template-columns: 1fr;
       }
 
-      .categoriesItem {
+      .categories-item {
         @media (max-width: 1094px) {
           flex: 0 0 48.6%;
         }

src/pages/CatalogSpecialists/CatalogSpecialists.jsx

@@ -145,25 +145,25 @@ const CatalogSpecialists = () => {
     }
   ];
   return (
-    <section className="catalogSpecialists">
+    <section className="catalog-specialists">
       <AuthHeader />
-      <div className="container catalogSpecialists__wrapper">
+      <div className="container catalog-specialists__wrapper">
         <ProfileBreadcrumbs
           links={[
             { name: "Главная", link: "/auth" },
             { name: "Свободные разработчики", link: "/" }
           ]}
         />
-        <div className="catalogSpecialists__head">
+        <div className="catalog-specialists__head">
           <h2>Каталог специалистов</h2>
-          <div className="catalogSpecialists__count countInfo">
-            <div className="countInfo__imgWrapper">
+          <div className="catalog-specialists__count count-info">
+            <div className="count-info__imgWrapper">
               <img src={mockWorker} alt="worker" />
             </div>
             <p>🖐 50+ специалистов доступны</p>
           </div>
         </div>
-        <div className="catalogSpecialists__items">
+        <div className="catalog-specialists__items">
           {personalInfoItems.map((item, index) => {
             return (
               <CategoriesItem
@@ -177,14 +177,14 @@ const CatalogSpecialists = () => {
             );
           })}
         </div>
-        <h3 className="catalogSpecialists__searchTitle">
+        <h3 className="catalog-specialists__search-title">
           Найти специалиста по навыкам
         </h3>
-        <div className="catalogSpecialists__searchBlock">
+        <div className="catalog-specialists__search-block">
           <input type="text" />
           <button>Поиск</button>
         </div>
-        <div className="catalogSpecialists__employees">
+        <div className="catalog-specialists__employees">
           {mockPersons.map((person, index) => {
             return (
               <CatalogPersonCard

src/pages/CatalogSpecialists/catalogSpecialists.scss

@@ -1,12 +1,12 @@
-.catalogSpecialists {
+.catalog-specialists {
   background: #f1f1f1;
   height: 100%;
   min-height: 100vh;
   font-family: "LabGrotesque", sans-serif;
 
-   &__wrapper {
-     padding-top: 24px;
-   }
+  &__wrapper {
+    padding-top: 24px;
+  }
 
   &__head {
     display: flex;
@@ -24,7 +24,7 @@
 
   &__count {
     border-radius: 38px;
-    border: 1px solid #E3E3E9;
+    border: 1px solid #e3e3e9;
     padding: 6px 32px 6px 6px;
     width: 100%;
     max-width: 450px;
@@ -40,7 +40,7 @@
     }
   }
 
-  .countInfo {
+  .count-info {
     &__imgWrapper {
       width: 46px;
       height: 46px;
@@ -64,22 +64,22 @@
     margin-bottom: 45px;
   }
 
-  &__searchTitle {
+  &__search-title {
     font-size: 25px;
     line-height: 32px;
     color: #000000;
     margin-bottom: 25px;
   }
 
-  &__searchBlock {
+  &__search-block {
     display: flex;
     justify-content: space-between;
     margin-bottom: 39px;
 
     input {
       border-radius: 5px;
-      border: 0.5px solid #B0BABF;
-      background: #F4F4F4;
+      border: 0.5px solid #b0babf;
+      background: #f4f4f4;
       outline: none;
       height: 50px;
       padding: 0 10px;
@@ -91,7 +91,7 @@
       padding: 9px 36px;
       border-radius: 44px;
       border: none;
-      background-color: #52B709;
+      background-color: #52b709;
       color: white;
       font-size: 16px;
       margin-left: 20px;

src/pages/CompanyInfo/CompanyInfo.jsx

@@ -13,54 +13,54 @@ import "./companyInfo.scss";
 
 export const CompanyInfo = () => {
   return (
-    <div className="companyInfo">
+    <div className="company-info">
       <AuthHeader />
       <SideBar />
-      <div className="companyInfo__content">
+      <div className="company-info__content">
         <div className="container">
-          <h1 className="companyInfo__title">
+          <h1 className="company-info__title">
             <span>Арендуйте IT специалистов:</span>
             <br />
             быстро, выгодно, на любой срок.
           </h1>
-          <div className="arrowElement arrowDown">
+          <div className="arrow-element arrow-down">
             <img src={arrow} alt="arrow" />
           </div>
-          <p className="companyInfo__subTitle">
+          <p className="company-info__subTitle">
             Мы предоставляем вам «в аренду» IT-специалистов. При этом они
             находятся в нашем штате. Оплата происходит за отработанные часы
           </p>
-          <div className="companyInfo__info">
-            <div className="companyInfo__countingBlock">
-              <div className="companyInfo__countingBlock__head">
+          <div className="company-info__info">
+            <div className="company-info__counting-block">
+              <div className="company-info__counting-block__head">
                 <img src={countingImg} alt="countingImg" />
-                <div className="countingBlock__info">
-                  <h3 className="countingBlock__title">
+                <div className="counting-block__info">
+                  <h3 className="counting-block__title">
                     Экономия бюджета компании - главное преимущество
                     аутстаффинга
                   </h3>
-                  <p className="countingBlock__subTitle">
+                  <p className="counting-block__subTitle">
                     Приблизительный просчет дал результаты в экономии до 50%
                     бюджета
                   </p>
                 </div>
-                <div className="arrowElement">
+                <div className="arrow-element">
                   <img src={arrow} alt="arrow" />
                 </div>
               </div>
-              <div className="companyInfo__countingBlock__bottom">
-                <span className="titleBottom">Давайте просчитаем:</span>
-                <p className="subTitleBottom">
+              <div className="company-info__counting-block__bottom">
+                <span className="title-bottom">Давайте просчитаем:</span>
+                <p className="subtitle-bottom">
                   Оплата работы <span>разработчика</span> в штат 1500 руб/ч (250
                   000 руб/мес).
                 </p>
               </div>
-              <img className="countingBlockImg" src={calcImg} alt="calc" />
+              <img className="counting-block-img" src={calcImg} alt="calc" />
             </div>
-            <div className="companyInfo__info__img">
+            <div className="company-info__info__img">
               <img src={braceImg} alt="brace" />
             </div>
-            <div className="companyInfo__info__items">
+            <div className="company-info__info__items">
               <div className="info__item">
                 <ul>
                   <li>НДФЛ (13% от зарплаты)</li>
@@ -80,11 +80,11 @@ export const CompanyInfo = () => {
                 </ul>
               </div>
             </div>
-            <div className="companyInfo__info__total">
-              <span className="companyInfo__info__total__title">
+            <div className="company-info__info__total">
+              <span className="company-info__info__total__title">
                 В итоге у нас получается:
               </span>
-              <div className="companyInfo__info__total__text">
+              <div className="company-info__info__total__text">
                 <p>
                   Специалист с изначальной расценкой в 1 500 руб/ч с учетом всех
                   остальных расходов

src/pages/CompanyInfo/companyInfo.scss

@@ -1,7 +1,7 @@
-.companyInfo {
+.company-info {
   &__content {
     font-family: "LabGrotesque", sans-serif;
-    background-color: #F1F1F1;
+    background-color: #f1f1f1;
     padding-top: 60px;
 
     @media (max-width: 1375px) {
@@ -18,7 +18,7 @@
     margin: 0 auto;
     text-align: center;
     span {
-      color: #52B709;
+      color: #52b709;
       font-weight: 700;
     }
 
@@ -39,10 +39,10 @@
     }
   }
 
-  .arrowElement {
+  .arrow-element {
     width: 48px;
     height: 48px;
-    background-color: #D3E4BC;
+    background-color: #d3e4bc;
     border-radius: 50px;
     display: flex;
     justify-content: center;
@@ -53,7 +53,7 @@
     }
   }
 
-  .arrowDown {
+  .arrow-down {
     margin: 35px auto 45px;
     img {
       transform: rotate(90deg);
@@ -118,7 +118,7 @@
       }
 
       span {
-        color: #52B709;
+        color: #52b709;
         font-weight: 700;
       }
 
@@ -145,7 +145,7 @@
     }
   }
 
-  &__countingBlock {
+  &__counting-block {
     padding: 27px 185px 26px 45px;
     border-radius: 12px;
     background: white;
@@ -190,13 +190,13 @@
       flex-direction: column;
       row-gap: 12px;
 
-      .titleBottom {
+      .title-bottom {
         font-size: 21px;
         font-weight: 700;
         line-height: 48px;
       }
 
-      .subTitleBottom {
+      .subtitle-bottom {
         color: #000000;
         font-weight: 500;
         font-size: 18px;
@@ -204,7 +204,7 @@
       }
 
       span {
-        color: #52B709;
+        color: #52b709;
       }
 
       @media (max-width: 780px) {
@@ -213,7 +213,7 @@
       }
     }
 
-    .countingBlock__info {
+    .counting-block__info {
       display: flex;
       flex-direction: column;
       row-gap: 12px;
@@ -223,7 +223,7 @@
       }
     }
 
-    .countingBlock {
+    .counting-block {
       &__title {
         font-size: 18px;
         font-weight: 500;
@@ -232,13 +232,13 @@
       }
 
       &__subTitle {
-        color: #6F6F6F;
+        color: #6f6f6f;
         font-size: 12px;
         line-height: 20px;
       }
     }
 
-    .countingBlockImg {
+    .counting-block-img {
       position: absolute;
       right: -140px;
       top: -55px;

src/pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion.scss

@@ -1,60 +1,65 @@
-@import './../../assets/functions.scss';
+@import "./../../assets/functions.scss";
 
 .frequently-asked-question {
-	background: #f5f5f5;
-	height: 100%;
-	min-height: 100vh;
-	font-family: "LabGrotesque", sans-serif;
-	display: flex;
-	flex-direction: column;
-	@media (max-width: 1375px) {
-	 margin-top: 80px;
+  background: #f5f5f5;
+  height: 100%;
+  min-height: 100vh;
+  font-family: "LabGrotesque", sans-serif;
+  display: flex;
+  flex-direction: column;
+
+  @media (max-width: 1375px) {
+    margin-top: 80px;
   }
-	&__container {
-	  flex: 1 1 auto;
-	  margin-top: 30px;
-	}
-	&__title {
-	  font-weight: 500;
-	  @include adaptiv-value("font-size", 38, 24, 1);
-	  line-height: 84%;
-	  margin: 42px 0 30px 0;
-	  color: #000000;
-	}
-	&__back {
-	  margin: 0 0 30px 0;
-	  display: flex;
-	  align-items: center;
-	  cursor: pointer;
-	  gap: 19px;
-	  p {
-		 font-size: 12px;
-		 line-height: 167%;
-		 color: #6f6f6f;
-	  }
-	}
-	&__arrow {
-	  background: rgba(141, 198, 63, 0.5098039216);	 
-	  width: 48px;
-	  height: 48px;
-	  border-radius: 44px;
-	  display: flex;
-	  align-items: center;
-	  justify-content: center;
-	  transform: rotate(180deg);
-	}
-	&__answer {
-	  font-weight: 400;
-	  font-size: 20px;
-	  line-height: 120%;
-	  background: #ffffff;
-	  border-radius: 12px;
-	  word-break: break-word;
-	  color: #000000;
-	  @include adaptiv-value("padding-top", 33, 15, 1);
-	  @include adaptiv-value("padding-bottom", 33, 15, 1);
-	  @include adaptiv-value("padding-left", 41, 22, 1);
-	  @include adaptiv-value("padding-right", 41, 22, 1);
-	}
- }
- 
+
+  &__container {
+    flex: 1 1 auto;
+    margin-top: 30px;
+  }
+
+  &__title {
+    font-weight: 500;
+    @include adaptiv-value("font-size", 38, 24, 1);
+    line-height: 84%;
+    margin: 42px 0 30px 0;
+    color: #000000;
+  }
+
+  &__back {
+    margin: 0 0 30px 0;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    gap: 19px;
+    p {
+      font-size: 12px;
+      line-height: 167%;
+      color: #6f6f6f;
+    }
+  }
+
+  &__arrow {
+    background: rgba(141, 198, 63, 0.5098039216);
+    width: 48px;
+    height: 48px;
+    border-radius: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transform: rotate(180deg);
+  }
+
+  &__answer {
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 120%;
+    background: #ffffff;
+    border-radius: 12px;
+    word-break: break-word;
+    color: #000000;
+    @include adaptiv-value("padding-top", 33, 15, 1);
+    @include adaptiv-value("padding-bottom", 33, 15, 1);
+    @include adaptiv-value("padding-left", 41, 22, 1);
+    @include adaptiv-value("padding-right", 41, 22, 1);
+  }
+}

src/pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions.scss

@@ -5,32 +5,39 @@
   font-family: "LabGrotesque", sans-serif;
   display: flex;
   flex-direction: column;
+
   @media (max-width: 1375px) {
     margin-top: 80px;
   }
+
   &__container {
     flex: 1 1 auto;
     margin: 30px 0;
   }
+
   &__about {
     display: flex;
     align-items: center;
     margin: 30px 0;
+
     @media (max-width: 600px) {
       flex-wrap: wrap;
       row-gap: 25px;
     }
   }
+
   &__title {
     font-weight: 500;
     font-size: 48px;
     line-height: 67%;
     color: #000000;
     margin: 0 13px 0 0;
+
     @media (max-width: 600px) {
       order: 1;
     }
   }
+
   &__arrow {
     background: rgba(128, 119, 119, 0.3);
     flex: 0 0 27px;
@@ -40,10 +47,12 @@
     align-items: center;
     justify-content: center;
     margin: 0 24px 0 0;
+
     @media (max-width: 600px) {
       order: 2;
     }
   }
+
   &__description {
     font-weight: 400;
     font-size: 18px;
@@ -52,15 +61,16 @@
     color: #000000;
     white-space: pre-line;
   }
+
   &__items {
     display: grid;
     grid-row-gap: 49px;
     grid-column-gap: 29px;
     grid-template-columns: 1fr 1fr;
+
     @media (max-width: 750px) {
       grid-template-columns: 1fr;
       grid-gap: 60px;
     }
   }
 }
-

src/pages/PartnerAddRequest/PartnerAddRequest.js

@@ -168,7 +168,7 @@ export const PartnerAddRequest = () => {
   };
 
   return (
-    <div className="partnerAddRequest">
+    <div className="partner-add-request">
       <ProfileHeader />
       <Navigation />
       <div className="container">
@@ -184,14 +184,14 @@ export const PartnerAddRequest = () => {
             }
           ]}
         />
-        <h2 className="partnerAddRequest__title">
+        <h2 className="partner-add-request__title">
           {editRequest
             ? "Страница редактирования заявки"
             : "Страница добавления заявки"}
         </h2>
-        <div className="partnerAddRequest__section">
-          <div className="partnerAddRequest__form">
-            <div className="partnerAddRequest__form__block form__block">
+        <div className="partner-add-request__section">
+          <div className="partner-add-request__form">
+            <div className="partner-add-request__form__block form__block">
               <h3 className="form__block__title">Данные открытой позиции</h3>
               <div className="form__block__section">
                 <h3>Название вакансии</h3>
@@ -326,7 +326,7 @@ export const PartnerAddRequest = () => {
                 )}
               </div>
             </div>
-            <div className="partnerAddRequest__form__block form__block">
+            <div className="partner-add-request__form__block form__block">
               <h3 className="form__block__title">Квалификация</h3>
               <div className="form__block__section">
                 <h3>Выберите уровень знаний </h3>
@@ -421,9 +421,9 @@ export const PartnerAddRequest = () => {
               </div>
             </div>
           </div>
-          <div className="partnerAddRequest__info">
-            <div className="partnerAddRequest__info__block">
-              <div className="partnerAddRequest__info__block__title">
+          <div className="partner-add-request__info">
+            <div className="partner-add-request__info__block">
+              <div className="partner-add-request__info__block__title">
                 <img src={processImg} alt="process" />
                 <h4>Процесс:</h4>
               </div>
@@ -436,8 +436,8 @@ export const PartnerAddRequest = () => {
                 проекты и Git.
               </p>
             </div>
-            <div className="partnerAddRequest__info__block">
-              <div className="partnerAddRequest__info__block__title">
+            <div className="partner-add-request__info__block">
+              <div className="partner-add-request__info__block__title">
                 <img src={reportImg} alt="reportImg" />
                 <h4>Отчетность:</h4>
               </div>
@@ -452,8 +452,8 @@ export const PartnerAddRequest = () => {
                 Можем выделить руководителя проекта и тестировщиков.
               </p>
             </div>
-            <div className="partnerAddRequest__info__block">
-              <div className="partnerAddRequest__info__block__title">
+            <div className="partner-add-request__info__block">
+              <div className="partner-add-request__info__block__title">
                 <img src={documentsImg} alt="documentsImg" />
                 <h4>
                   Обмен <br />
@@ -462,7 +462,7 @@ export const PartnerAddRequest = () => {
               </div>
               <p>
                 В Личном кабинете платформы получайте отчеты выполненных работ и
-                счета на согласование и оплату
+                счеты на согласование и оплату
               </p>
             </div>
           </div>

src/pages/PartnerAddRequest/partnerAddRequest.scss

@@ -1,8 +1,8 @@
-.partnerAddRequest {
-  background: #F1F1F1;
+.partner-add-request {
+  background: #f1f1f1;
   height: 100%;
   min-height: 100vh;
-  font-family: 'LabGrotesque', sans-serif;
+  font-family: "LabGrotesque", sans-serif;
 
   .container {
     max-width: 1160px;
@@ -17,7 +17,7 @@
     color: #000000;
     font-weight: 700;
     font-size: 22px;
-    line-height: 32px
+    line-height: 32px;
   }
 
   &__section {
@@ -42,7 +42,7 @@
   }
 
   .form__block {
-    background: #FFFFFF;
+    background: #ffffff;
     border-radius: 12px;
     padding: 25px 95px 30px 55px;
     min-width: 600px;
@@ -58,7 +58,7 @@
       font-weight: 700;
       font-size: 20px;
       line-height: 24px;
-      color: #5B6871;
+      color: #5b6871;
       margin-bottom: 35px;
     }
 
@@ -79,7 +79,7 @@
       }
 
       &__input {
-        background: #EFF2F7;
+        background: #eff2f7;
         border-radius: 8px;
         padding: 8px 12px;
         margin-bottom: 35px;
@@ -115,7 +115,7 @@
 
       &__select {
         padding: 8px 15px 9px 12px;
-        background: #EFF2F7;
+        background: #eff2f7;
         border-radius: 12px;
         cursor: pointer;
         display: flex;
@@ -140,7 +140,7 @@
       }
 
       textarea {
-        background: #EFF2F7;
+        background: #eff2f7;
         border-radius: 8px;
         width: 100%;
         border: none;
@@ -177,9 +177,9 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      border: 0.5px solid #8DC63F;
+      border: 0.5px solid #8dc63f;
       border-radius: 44px;
-      color: #6F6F6F;
+      color: #6f6f6f;
       font-weight: 400;
       font-size: 14px;
       line-height: 32px;
@@ -192,9 +192,9 @@
     }
 
     &__save {
-      background: #52B709;
+      background: #52b709;
       border-radius: 44px;
-      color: #FFFFFF;
+      color: #ffffff;
       font-weight: 700;
       font-size: 14px;
       line-height: 32px;
@@ -210,14 +210,14 @@
       display: flex;
       gap: 5px;
       flex-wrap: wrap;
-      background: #EFF2F7;
+      background: #eff2f7;
       border-radius: 8px;
       padding: 8px 12px 9px;
       position: relative;
       cursor: pointer;
 
       .skill {
-        background: #8DC63F;
+        background: #8dc63f;
         border-radius: 12px;
         font-weight: 400;
         font-size: 12px;
@@ -304,7 +304,7 @@
         font-size: 12px;
         line-height: 14px;
         color: #263238;
-        background: #8DC63F;
+        background: #8dc63f;
         border-radius: 12px;
         padding: 5px;
         max-width: 100px;
@@ -319,7 +319,7 @@
   }
 
   &__info {
-    background: #FFFFFF;
+    background: #ffffff;
     border-radius: 12px;
     width: 100%;
     padding: 74px 48px 136px 62px;
@@ -350,7 +350,7 @@
         }
 
         h4 {
-          color: #5B6871;
+          color: #5b6871;
           font-weight: 700;
           font-size: 20px;
           line-height: 24px;
@@ -367,7 +367,7 @@
       }
 
       &:last-child {
-        .partnerAddRequest__info__block__title {
+        .partner-add-request__info__block__title {
           margin-bottom: 35px;
         }
       }

src/pages/PartnerBid/PartnerBid.jsx

@@ -74,7 +74,7 @@ export const PartnerBid = () => {
     4: "Senior"
   });
   return (
-    <div className="partnerBid">
+    <div className="partner-bid">
       <ProfileHeader />
       <Navigation />
       <ModalLayout active={modalDelete} setActive={setModalDelete}>
@@ -110,13 +110,13 @@ export const PartnerBid = () => {
             { name: "Просмотр заявки - PHP разработчик", link: "/profile/bid" }
           ]}
         />
-        <h2 className="partnerBid__title">Страница заявки </h2>
+        <h2 className="partner-bid__title">Страница заявки </h2>
         {loader && <Loader />}
         {!loader && (
           <>
-            <div className="partnerBid__qualification">
+            <div className="partner-bid__qualification">
               <h3>{requestInfo.title}</h3>
-              <div className="partnerBid__qualification__buttons">
+              <div className="partner-bid__qualification__buttons">
                 <Link to="/profile/edit-request">Редактировать</Link>
                 <img
                   src={deleteBtn}
@@ -125,14 +125,14 @@ export const PartnerBid = () => {
                 />
               </div>
             </div>
-            <div className="partnerBid__switcher">
+            <div className="partner-bid__switcher">
               <div
                 className={
                   partnerRequests[
                     partnerRequests.findIndex((el) => el.id === requestId) - 1
                   ]?.id
-                    ? "partnerBid__switcher__prev switchDate"
-                    : "partnerBid__switcher__prev switchDate disable"
+                    ? "partner-bid__switcher__prev switch-date"
+                    : "partner-bid__switcher__prev switch-date disable"
                 }
                 onClick={() => {
                   dispatch(
@@ -153,8 +153,8 @@ export const PartnerBid = () => {
                   partnerRequests[
                     partnerRequests.findIndex((el) => el.id === requestId) + 1
                   ]?.id
-                    ? "partnerBid__switcher__next switchDate"
-                    : "partnerBid__switcher__next switchDate disable"
+                    ? "partner-bid__switcher__next switch-date"
+                    : "partner-bid__switcher__next switch-date disable"
                 }
                 onClick={() => {
                   dispatch(
@@ -229,22 +229,25 @@ export const PartnerBid = () => {
                 </tbody>
               </table>
             </div>
-            <div className="partnerBid__suitable">
-              <div className="partnerBid__suitable__title">
+            <div className="partner-bid__suitable">
+              <div className="partner-bid__suitable__title">
                 <p>Подходящие сотрудники по запросу</p>
               </div>
-              <div className="partnerBid__suitable__persons">
+              <div className="partner-bid__suitable__persons">
                 {requestInfo.result_profiles.length &&
                   requestInfo.result_profiles.map((person, index) => {
                     return (
-                      <div key={index} className="partnerBid__suitable__person">
+                      <div
+                        key={index}
+                        className="partner-bid__suitable__person"
+                      >
                         <img src={urlForLocal(person.photo)} alt="avatar" />
                         <p>
                           {person.fio} - {person.position_title},{" "}
                           {levels[person.level]}
                         </p>
                         <Link
-                          className="partnerBid__suitable__person__more"
+                          className="partner-bid__suitable__person__more"
                           to={`/candidate/${person.id}`}
                         >
                           Подробнее

src/pages/PartnerBid/partnerBid.scss

@@ -1,4 +1,4 @@
-.partnerBid {
+.partner-bid {
   background: #f1f1f1;
   height: 100%;
   min-height: 100vh;
@@ -78,7 +78,7 @@
       justify-content: space-between;
     }
 
-    .switchDate {
+    .switch-date {
       width: 48px;
       height: 48px;
       background: #8dc63f;

src/pages/PartnerEmployeeReport/PartnerEmployeeReport.jsx

@@ -73,7 +73,7 @@ export const PartnerEmployeeReport = () => {
   }, [requestDates]);
 
   return (
-    <div className="employeeReport">
+    <div className="employee-report">
       <ProfileHeader />
       <Navigation />
       <div className="container">
@@ -84,30 +84,30 @@ export const PartnerEmployeeReport = () => {
           ]}
         />
         {!Object.keys(userInfo).length ? (
-          <div className="employeeReport__loader">
+          <div className="employee-report__loader">
             <Loader style={"green"} height={80} width={80} />
           </div>
         ) : (
           <>
-            <div className="employeeReport__info">
-              <div className="employeeReport__name">
+            <div className="employee-report__info">
+              <div className="employee-report__name">
                 <h2>{userInfo.fio}</h2>
                 <p>{userInfo.position}</p>
               </div>
-              <div className="employeeReport__skills">
+              <div className="employee-report__skills">
                 {userInfo?.stack &&
                   userInfo.stack.map((skill, index) => {
                     return <span key={index}>{skill}</span>;
                   })}
               </div>
             </div>
-            <div className="employeeReport__wrapper">
+            <div className="employee-report__wrapper">
               {loader ? (
-                <div className="employeeReport__loader">
+                <div className="employee-report__loader">
                   <Loader style={"green"} height={80} width={80} />
                 </div>
               ) : (
-                <div className="employeeReport__calendar ">
+                <div className="employee-report__calendar ">
                   <ProfileCalendarComponent
                     userId={params.uuid}
                     setValueHandler={(value) => setValue(value)}

src/pages/PartnerEmployeeReport/partnerEmployeeReport.scss

@@ -1,5 +1,5 @@
-.employeeReport {
-  background: #F1F1F1;
+.employee-report {
+  background: #f1f1f1;
   height: 100%;
   min-height: 100vh;
   font-family: "LabGrotesque", sans-serif;
@@ -42,7 +42,7 @@
       font-size: 12px;
       line-height: 14px;
       color: #263238;
-      background: #8DC63F;
+      background: #8dc63f;
       border-radius: 12px;
       padding: 5px;
       max-width: 130px;

src/pages/PartnerEmployees/PartnerEmployees.js

@@ -23,7 +23,7 @@ export const PartnerEmployees = () => {
     return <Navigate to="/profile/categories" replace />;
   }
   return (
-    <div className="partnerEmployees">
+    <div className="partner-employees">
       <ProfileHeader />
       <Navigation />
       <div className="container">
@@ -37,17 +37,17 @@ export const PartnerEmployees = () => {
             }
           ]}
         />
-        <h2 className="partnerEmployees__title">Backend разработчики</h2>
-        <div className="partnerEmployees__items">
+        <h2 className="partner-employees__title">Backend разработчики</h2>
+        <div className="partner-employees__items">
           {partnerEmployees.map((person) => {
             return (
-              <div className="partnerEmployees__item" key={person.id}>
-                <div className="partnerEmployees__item__name">
+              <div className="partner-employees__item" key={person.id}>
+                <div className="partner-employees__item__name">
                   <img src={person.personAvatar} alt="avatar" />
                   <h4>{person.name}</h4>
                 </div>
-                <div className="partnerEmployees__item__info">
-                  <div className="partnerEmployees__item__info__qualification">
+                <div className="partner-employees__item__info">
+                  <div className="partner-employees__item__info__qualification">
                     <h5>{person.qualification}</h5>
                     <span>{person.level}</span>
                     <div className="info_summary">
@@ -58,10 +58,10 @@ export const PartnerEmployees = () => {
                       </Link>
                     </div>
                   </div>
-                  <div className="partnerEmployees__item__info__project">
+                  <div className="partner-employees__item__info__project">
                     <span className="name">Проект:</span>
                     <h5>{person.project}</h5>
-                    <div className="partnerEmployees__item__info__project__details">
+                    <div className="partner-employees__item__info__project__details">
                       <div className="details__item">
                         <p>Открытые задачи</p>
                         <span className="count">

src/pages/PartnerEmployees/partnerEmployees.scss

@@ -1,8 +1,8 @@
-.partnerEmployees {
-  background: #F1F1F1;
+.partner-employees {
+  background: #f1f1f1;
   height: 100%;
   min-height: 100vh;
-  font-family: 'LabGrotesque', sans-serif;
+  font-family: "LabGrotesque", sans-serif;
 
   &__title {
     color: #000000;
@@ -19,13 +19,13 @@
   }
 
   &__item {
-    background: #E1FCCF;
+    background: #e1fccf;
     border-radius: 12px;
     display: flex;
     position: relative;
 
     &__name {
-      background: #FFFFFF;
+      background: #ffffff;
       border-radius: 12px;
       padding: 25px 22px 25px;
       display: flex;
@@ -57,9 +57,9 @@
       justify-content: space-between;
 
       &:after {
-        content: '';
+        content: "";
         position: absolute;
-        background: #52B709;
+        background: #52b709;
         border-radius: 12px;
         height: 4px;
         width: 51%;
@@ -80,7 +80,7 @@
         }
 
         span {
-          color: #6F6F6F;
+          color: #6f6f6f;
           font-weight: 500;
           font-size: 14px;
         }
@@ -102,7 +102,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            background: #FFFFFF;
+            background: #ffffff;
             border-radius: 50px;
             width: 41px;
             height: 41px;
@@ -135,7 +135,7 @@
 
             p {
               margin-bottom: 0;
-              color: #6F6F6F;
+              color: #6f6f6f;
               font-weight: 500;
               font-size: 13px;
               line-height: 24px;
@@ -153,12 +153,12 @@
               justify-content: center;
               margin-left: 8px;
               padding: 0 6px;
-              background: #DDDDDD;
+              background: #dddddd;
               border-radius: 4px;
               font-weight: 500;
               font-size: 14px;
               line-height: 24px;
-              color: #6F6F6F;
+              color: #6f6f6f;
             }
           }
         }
@@ -166,7 +166,6 @@
     }
   }
 
-
   .container {
     max-width: 1160px;
     margin-top: 23px;

src/pages/PartnerRequests/PartnerRequests.jsx

@@ -41,7 +41,7 @@ export const PartnerRequests = () => {
     });
   }, []);
   return (
-    <div className="partnerRequests">
+    <div className="partner-requests">
       <ProfileHeader />
       <Navigation />
       <div className="container">
@@ -51,26 +51,26 @@ export const PartnerRequests = () => {
             { name: "Запросы и открытые позиции", link: "/profile/requests" }
           ]}
         />
-        <h2 className="partnerRequests__title">Запросы</h2>
+        <h2 className="partner-requests__title">Запросы</h2>
         {loader && <Loader />}
         {Boolean(requests.length) && !loader && (
-          <div className="partnerRequests__section">
-            <div className="partnerRequests__section__items">
+          <div className="partner-requests__section">
+            <div className="partner-requests__section__items">
               {requests.map((item, index) => {
                 return (
                   <Link
                     key={index}
                     to={"/profile/bid"}
-                    className="partnerRequests__section__item"
+                    className="partner-requests__section__item"
                     onClick={() => {
                       dispatch(setPartnerRequestId(item.id));
                       dispatch(setPartnerRequests(requests));
                     }}
                   >
-                    <p className="partnerRequests__section__item__name">
+                    <p className="partner-requests__section__item__name">
                       {item.position.name}
                     </p>
-                    <p className="partnerRequests__section__item__count">
+                    <p className="partner-requests__section__item__count">
                       Подходящие кандидаты
                       <span>{item.result_count}</span>
                     </p>
@@ -78,11 +78,11 @@ export const PartnerRequests = () => {
                 );
               })}
             </div>
-            <div className="partnerRequests__section__info">
-              <h3>Инструкция: подачи заявки</h3>
+            <div className="partner-requests__section__info">
+              <h3>Инструкция по подаче заявки</h3>
               <p>
-                Оператор компании заводит заявку и указывает необходимые
-                параметры — количество сотрудников, стек, уровень специалиста
+                Оператор компании создает заявку и указывает необходимые
+                параметры: количество сотрудников, стек, уровень специалиста
               </p>
               <BaseButton>
                 <Link to={"/profile/add-request"}>
@@ -94,9 +94,9 @@ export const PartnerRequests = () => {
           </div>
         )}
         {!Boolean(requests.length) && !loader && (
-          <div className="partnerRequests__noItems">
-            <div className="partnerRequests__noItems__create">
-              <div className="partnerRequests__noItems__create__link">
+          <div className="partner-requests__no-items">
+            <div className="partner-requests__no-items__create">
+              <div className="partner-requests__no-items__create__link">
                 <img src={cursorImg} alt="cursor" />
                 <p>У вас ещё нет запросов на сотрудников</p>
                 <BaseButton>
@@ -106,20 +106,20 @@ export const PartnerRequests = () => {
                   </Link>
                 </BaseButton>
               </div>
-              <div className="partnerRequests__noItems__create__instruction">
-                <h3>Инструкция: подачи заявки</h3>
+              <div className="partner-requests__no-items__create__instruction">
+                <h3>Инструкция по подаче заявки</h3>
                 <p>
-                  Оператор компании заводит заявку и указывает необходимые
-                  параметры — количество сотрудников, стек, уровень специалиста
+                  Оператор компании создает заявку и указывает необходимые
+                  параметры: количество сотрудников, стек, уровень специалиста
                 </p>
               </div>
             </div>
-            <div className="partnerRequests__noItems__freeEmployees">
+            <div className="partner-requests__no-items__free-employees">
               <SliderWorkers
                 title={"Свободные разработчики"}
                 titleInfo={"в нашей базе"}
               />
-              <p className="catalogLink">
+              <p className="catalog-link">
                 Перейти в полный <Link to={"/profile/catalog"}>КАТАЛОГ</Link>{" "}
                 сотрудников
               </p>

src/pages/PartnerRequests/partnerRequests.scss

@@ -1,4 +1,4 @@
-.partnerRequests {
+.partner-requests {
   background: #f1f1f1;
   height: 100%;
   min-height: 100vh;
@@ -189,7 +189,7 @@
     }
   }
 
-  &__noItems {
+  &__no-items {
     display: flex;
     flex-direction: column;
 
@@ -330,14 +330,14 @@
       }
     }
 
-    &__freeEmployees {
+    &__free-employees {
       h2 {
         font-weight: 500;
         font-size: 30px;
         line-height: 32px;
       }
 
-      .catalogLink {
+      .catalog-link {
         margin-top: 70px;
         width: 100%;
         font-weight: 700;

src/pages/PartnerSettings/PartnerSettings.jsx

@@ -120,7 +120,7 @@ export const PartnerSettings = () => {
               </div>
 
               <p className="settings__label">Изменение пароля</p>
-              <div className="settings__input oldPassword">
+              <div className="settings__input old-password">
                 <input
                   className={inputsError.password ? "warning" : ""}
                   placeholder="Старый пароль"

src/pages/PartnerSettings/partnerSettings.scss

@@ -54,7 +54,7 @@
     }
   }
 
-  .oldPassword {
+  .old-password {
     margin-bottom: 25px;
   }
 

src/pages/PartnerTreaties/PartnerTreaties.js

@@ -31,10 +31,10 @@ export const PartnerTreaties = () => {
         <ProfileBreadcrumbs
           links={[
             { name: "Главная", link: "/profile" },
-            { name: "Договора и отчетность", link: "/profile/treaties" }
+            { name: "Договоры и отчетность", link: "/profile/treaties" }
           ]}
         />
-        <h2 className="treaties__title">Договора и отчетность</h2>
+        <h2 className="treaties__title">Договоры и отчетность</h2>
         <div className="treaties__tabs">
           <div className="treaties__tabs__head">
             <div
@@ -56,7 +56,7 @@ export const PartnerTreaties = () => {
               onClick={() => toggleTabs(3)}
             >
               <img src={checkImg} alt="img" />
-              <p>Счета</p>
+              <p>Счеты</p>
             </div>
           </div>
           <div className="treaties__tabs__content">
@@ -73,7 +73,7 @@ export const PartnerTreaties = () => {
                   <img src={arrowDown} alt="arrow" />
                 </div>
               </div>
-              <div className="treaties__tabs__content__main__item item notPaid">
+              <div className="treaties__tabs__content__main__item item not-paid">
                 <div className="item__info">
                   <p className="number">
                     Договор № К-1-2022
@@ -166,7 +166,7 @@ export const PartnerTreaties = () => {
                   </div>
                 </div>
               </div>
-              <div className="treaties__tabs__content__main__item item notPaid">
+              <div className="treaties__tabs__content__main__item item not-paid">
                 <div className="item__info">
                   <p className="number">Акт №4 от 10.03.23</p>
                   <div className="item__person__act">
@@ -179,11 +179,11 @@ export const PartnerTreaties = () => {
                         </div>
                       </div>
                       <img
-                        className="personArrow"
+                        className="person-arrow"
                         src={arrowItem}
                         alt="arrow"
                       />
-                      <p className="moreInfo">к Доп. соглашению № 1</p>
+                      <p className="more-info">к Доп. соглашению № 1</p>
                     </div>
                     <div className="arrow">
                       <img src={arrowDown} alt="arrow" />
@@ -225,11 +225,11 @@ export const PartnerTreaties = () => {
                         </div>
                       </div>
                       <img
-                        className="personArrow"
+                        className="person-arrow"
                         src={arrowItem}
                         alt="arrow"
                       />
-                      <p className="moreInfo">к Доп. соглашению № 1</p>
+                      <p className="more-info">к Доп. соглашению № 1</p>
                     </div>
                     <div className="arrow">
                       <img src={arrowDown} alt="arrow" />
@@ -278,7 +278,7 @@ export const PartnerTreaties = () => {
                   </div>
                 </div>
               </div>
-              <div className="treaties__tabs__content__main__item item notPaid">
+              <div className="treaties__tabs__content__main__item item not-paid">
                 <div className="item__info">
                   <p className="number">Акт №4 от 10.03.23</p>
                   <div className="item__person__act">
@@ -291,11 +291,11 @@ export const PartnerTreaties = () => {
                         </div>
                       </div>
                       <img
-                        className="personArrow"
+                        className="person-arrow"
                         src={arrowItem}
                         alt="arrow"
                       />
-                      <p className="moreInfo">к Доп. соглашению № 1</p>
+                      <p className="more-info">к Доп. соглашению № 1</p>
                     </div>
                     <div className="arrow">
                       <img src={arrowDown} alt="arrow" />
@@ -337,11 +337,11 @@ export const PartnerTreaties = () => {
                         </div>
                       </div>
                       <img
-                        className="personArrow"
+                        className="person-arrow"
                         src={arrowItem}
                         alt="arrow"
                       />
-                      <p className="moreInfo">к Доп. соглашению № 1</p>
+                      <p className="more-info">к Доп. соглашению № 1</p>
                     </div>
                     <div className="arrow">
                       <img src={arrowDown} alt="arrow" />

src/pages/PartnerTreaties/partnerTreaties.scss

@@ -1,8 +1,8 @@
 .treaties {
-  background: #F1F1F1;
+  background: #f1f1f1;
   height: 100%;
   min-height: 100vh;
-  font-family: 'LabGrotesque', sans-serif;
+  font-family: "LabGrotesque", sans-serif;
 
   &__title {
     font-weight: 700;
@@ -43,7 +43,7 @@
       width: calc(100% - 150px);
 
       &__main {
-        background: #FFFFFF;
+        background: #ffffff;
         border-radius: 0 12px 12px 12px;
         flex-wrap: wrap;
         column-gap: 34px;
@@ -69,7 +69,7 @@
           .img {
             width: 32px;
             height: 32px;
-            background: #E2E5CF;
+            background: #e2e5cf;
             border-radius: 50px;
             display: flex;
             align-items: center;
@@ -101,8 +101,8 @@
           }
         }
 
-        .notPaid {
-          background: #EBEBEB;
+        .not-paid {
+          background: #ebebeb;
         }
 
         .persons {
@@ -137,7 +137,7 @@
               .img {
                 width: 48px;
                 height: 48px;
-                background: #CFE0B8;
+                background: #cfe0b8;
                 display: flex;
                 justify-content: center;
                 align-items: center;
@@ -215,7 +215,7 @@
               align-items: center;
 
               .arrow {
-                background: #CFE0B8;
+                background: #cfe0b8;
                 border-radius: 50px;
                 display: flex;
                 align-items: center;
@@ -229,12 +229,12 @@
                 display: flex;
                 flex-direction: column;
 
-                .personArrow {
+                .person-arrow {
                   margin-top: 20px;
                   max-width: 125px;
                 }
 
-                .moreInfo {
+                .more-info {
                   font-weight: 300;
                   font-size: 10px;
                   line-height: 17px;
@@ -321,7 +321,7 @@
                 display: flex;
 
                 p {
-                  color: #A29EB6;
+                  color: #a29eb6;
                 }
               }
 
@@ -347,7 +347,7 @@
               }
 
               .total {
-                color: #1458DD;
+                color: #1458dd;
               }
             }
           }
@@ -377,7 +377,6 @@
     }
   }
 
-
   .container {
     max-width: 1160px;
     margin-top: 23px;

src/pages/PartnerСategories/PartnerСategories.jsx

@@ -146,7 +146,7 @@ export const PartnerCategories = () => {
   //   }
   // ]);
   return (
-    <div className="partnerCategories">
+    <div className="partner-categories">
       <ProfileHeader />
       <Navigation />
       <div className="container">
@@ -156,11 +156,11 @@ export const PartnerCategories = () => {
             { name: "Данные моего персонала", link: "/profile/employees" }
           ]}
         />
-        <h2 className="partnerCategories__title">Данные персонала</h2>
+        <h2 className="partner-categories__title">Данные персонала</h2>
         {loader ? (
           <Loader style={"green"} height={80} width={80} />
         ) : (
-          <div className="partnerCategories__items">
+          <div className="partner-categories__items">
             {Boolean(staff) ? (
               staff.map((card) => {
                 return (
@@ -173,7 +173,7 @@ export const PartnerCategories = () => {
                 );
               })
             ) : (
-              <span className="partnerCategories__empty">
+              <span className="partner-categories__empty">
                 У вас нет нанятого персонала
               </span>
             )}
@@ -184,8 +184,8 @@ export const PartnerCategories = () => {
             {/*      key={index}*/}
             {/*      className={*/}
             {/*        item.available*/}
-            {/*          ? "partnerCategories__item item"*/}
-            {/*          : "partnerCategories__item item item__disable"*/}
+            {/*          ? "partner-categories__item item"*/}
+            {/*          : "partner-categories__item item item__disable"*/}
             {/*      }*/}
             {/*      onClick={() => {*/}
             {/*        dispatch(setPartnerEmployees(mokPersons));*/}
@@ -202,7 +202,7 @@ export const PartnerCategories = () => {
             {/*        </div>*/}
             {/*      </div>*/}
             {/*      {!item.available && (*/}
-            {/*        <div className="item__disableHover">*/}
+            {/*        <div className="item__disable-hover">*/}
             {/*          <p>У вас нет персонала из категории</p>*/}
             {/*          <button>Подобрать</button>*/}
             {/*        </div>*/}

src/pages/PartnerСategories/partnerСategories.scss

@@ -1,8 +1,8 @@
-.partnerCategories {
-  background: #F1F1F1;
+.partner-categories {
+  background: #f1f1f1;
   height: 100%;
   min-height: 100vh;
-  font-family: 'LabGrotesque', sans-serif;
+  font-family: "LabGrotesque", sans-serif;
 
   &__title {
     color: #000000;
@@ -15,25 +15,20 @@
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
-    //flex-wrap: wrap;
-    //margin-top: 25px;
-    //row-gap: 24px;
-    //column-gap: 21px;
+    justify-content: center;
   }
-
   &__empty {
     font-size: 18px;
     font-weight: 500;
     margin-top: 20px;
   }
 
-
   .item {
     display: flex;
     flex-direction: column;
     padding: 33px 32px 25px 28px;
     width: 32%;
-    background: #FFFFFF;
+    background: #ffffff;
     border-radius: 12px;
     transition: all 0.3s ease;
     position: relative;
@@ -65,12 +60,12 @@
           opacity: 0;
         }
 
-        .item__disableHover {
+        .item__disable-hover {
           opacity: 1;
         }
       }
 
-      &Hover {
+      &-hover {
         position: absolute;
         display: flex;
         left: 0;
@@ -78,7 +73,7 @@
         align-items: center;
         justify-content: space-between;
         padding: 16px 13px 16px 21px;
-        border: 3px solid #52B709;
+        border: 3px solid #52b709;
         bottom: 0;
         border-radius: 12px;
         opacity: 0;
@@ -97,12 +92,12 @@
           width: 140px;
           height: 50px;
           border: none;
-          background: #52B709;
+          background: #52b709;
           border-radius: 44px;
           font-weight: 500;
           font-size: 15px;
           line-height: 32px;
-          color: #FFFFFF;
+          color: #ffffff;
         }
       }
     }
@@ -130,7 +125,7 @@
       p {
         max-width: 181px;
         margin-bottom: 0;
-        color: #6F6F6F;
+        color: #6f6f6f;
         font-weight: 400;
         font-size: 12px;
         line-height: 20px;
@@ -142,13 +137,12 @@
         justify-content: center;
         width: 48px;
         height: 48px;
-        background: #DDEEC6;
+        background: #ddeec6;
         border-radius: 50px;
       }
     }
   }
 
-
   .container {
     max-width: 1160px;
     margin-top: 23px;

src/pages/Profile/Profile.js

@@ -81,7 +81,7 @@ export const Profile = () => {
       {
         path: "profile/treaties",
         img: paymentIcon,
-        title: "Договора и отчетность",
+        title: "Договоры и отчетность",
         description: "Ключевые условия<br/> договора"
       },
       {

src/pages/ProjectTracker/ProjectTracker.js

@@ -1,3 +1,4 @@
+import moment from "moment";
 import React, { useEffect, useRef, useState } from "react";
 import { HexColorPicker } from "react-colorful";
 import { useDispatch, useSelector } from "react-redux";
@@ -44,6 +45,7 @@ import TrackerSelectColumn from "@components/TrackerSelectColumn/TrackerSelectCo
 import arrow from "assets/icons/arrows/arrowCalendar.png";
 import arrowDown from "assets/icons/arrows/selectArrow.png";
 import calendarIcon from "assets/icons/calendar.svg";
+import category from "assets/icons/category.svg";
 import close from "assets/icons/close.png";
 import commentsBoard from "assets/icons/commentsBoard.svg";
 import del from "assets/icons/delete.svg";
@@ -62,6 +64,7 @@ export const ProjectTracker = () => {
   const dispatch = useDispatch();
   const projectId = useParams();
 
+  const currentDate = new Date().getFullYear();
   const [openColumnSelect, setOpenColumnSelect] = useState({});
   const [selectedTab, setSelectedTab] = useState(0);
   const [priorityTask, setPriorityTask] = useState(0);
@@ -383,7 +386,7 @@ export const ProjectTracker = () => {
         (div) =>
           div.classList &&
           (div.classList.contains("tasks__head__executor") ||
-            div.classList.contains("tasks__head__executorDropdown"))
+            div.classList.contains("tasks__head__executor-dropdown"))
       )
     ) {
       setSelectedExecutorOpen(false);
@@ -483,8 +486,10 @@ export const ProjectTracker = () => {
             <div className="tracker__tabs__content__tasks tasks active__content">
               <div className="tasks__head">
                 <div className="tasks__head__wrapper">
-                  <h5>{projectBoard.name}</h5>
-
+                  <div className="tasks__head__title">
+                    <img src={category}></img>
+                    <h5>{projectBoard.name}</h5>
+                  </div>
                   <div className="tasks__head__add">
                     <BaseButton
                       onClick={() => {
@@ -509,8 +514,8 @@ export const ProjectTracker = () => {
                       <div
                         className={
                           projectBoard.projectUsers?.length == 1
-                            ? "onePerson"
-                            : "projectPersons"
+                            ? "one-person"
+                            : "project-persons"
                         }
                       >
                         {projectBoard.projectUsers.slice(0, 3).map((person) => {
@@ -529,7 +534,7 @@ export const ProjectTracker = () => {
                       </div>
                     )}
                     {projectBoard.projectUsers?.length > 3 && (
-                      <span className="countPersons">
+                      <span className="count-persons">
                         +{projectBoard.projectUsers?.length - 3}
                       </span>
                     )}
@@ -541,7 +546,6 @@ export const ProjectTracker = () => {
                     >
                       +
                     </span>
-                    <p>добавить участника</p>
 
                     <ListEmployees
                       active={personListOpen}
@@ -568,7 +572,7 @@ export const ProjectTracker = () => {
                     </div>
                   </div>
                   {selectedExecutor ? (
-                    <div className="tasks__head__executorSelected">
+                    <div className="tasks__head__executor-selected">
                       <p>{selectedExecutor.user.fio}</p>
                       <img
                         className="avatar"
@@ -600,11 +604,11 @@ export const ProjectTracker = () => {
                         alt="arrow"
                       />
                       {selectExecutorOpen && (
-                        <div className="tasks__head__executorDropdown">
+                        <div className="tasks__head__executor-dropdown">
                           {projectBoard.projectUsers.map((user) => {
                             return (
                               <div
-                                className="executorDropdown__person"
+                                className="executor-dropdown__person"
                                 key={user.user_id}
                                 onClick={() => executorFilter(user)}
                               >
@@ -635,91 +639,80 @@ export const ProjectTracker = () => {
                       }}
                     >
                       <p>Список тегов</p>
-                      <span>+</span>
+                      <img
+                        className={tags.open ? "open" : ""}
+                        src={arrowDown}
+                        alt="arrow"
+                      />
                     </div>
                     {tags.open && (
                       <div className="tags__list">
-                        <div
-                          className="addNewTag"
-                          onClick={() =>
-                            setTags((prevState) => ({
-                              ...prevState,
-                              add: true
-                            }))
-                          }
-                        >
-                          <p>Добавить новый тег</p>
-                          <span>+</span>
-                        </div>
-
+                        {!tags.add && !tags.edit && (
+                          <div
+                            className="add-new-tag"
+                            onClick={() =>
+                              setTags((prevState) => ({
+                                ...prevState,
+                                add: true
+                              }))
+                            }
+                          >
+                            <p>Добавить новый тег</p>
+                            <span>+</span>
+                          </div>
+                        )}
                         {!tags.add && !tags.edit && (
                           <div className="tags__list__created">
                             {projectBoard.mark.map((tag) => {
                               return (
-                                <div className="tagItem" key={tag.id}>
-                                  <p className="tagItem__description">
-                                    {tag.title}
-                                  </p>
-                                  <div className="tagItem__info">
-                                    <span className="tagItem__info__name">
-                                      {tag.slug}
-                                    </span>
+                                <div className="tag-item" key={tag.id}>
+                                  <div className="tag-item__info">
                                     <span
-                                      className="tagItem__info__color"
+                                      className="tag-item__color"
                                       style={{ background: tag.color }}
                                     />
-
-                                    <div className="tagItem__info__images">
-                                      <img
-                                        src={edit}
-                                        alt="edit"
-                                        onClick={() => {
-                                          setTags((prevState) => ({
-                                            ...prevState,
-                                            edit: true
-                                          }));
-                                          setTagInfo({
-                                            description: tag.title,
-                                            name: tag.slug,
-                                            editMarkId: tag.id
-                                          });
-                                          setColor(tag.color);
-                                        }}
-                                      />
-                                      <img
-                                        onClick={() => deleteTag(tag.id)}
-                                        className="delete"
-                                        src={close}
-                                        alt="delete"
-                                      />
+                                    <div>
+                                      <span className="tag-item__info__name">
+                                        {tag.slug}
+                                      </span>
+                                      <p className="tag-item__description">
+                                        {tag.title}
+                                      </p>
                                     </div>
                                   </div>
+                                  <div className="tag-item__images">
+                                    <img
+                                      src={edit}
+                                      alt="edit"
+                                      onClick={() => {
+                                        setTags((prevState) => ({
+                                          ...prevState,
+                                          edit: true
+                                        }));
+                                        setTagInfo({
+                                          description: tag.title,
+                                          name: tag.slug,
+                                          editMarkId: tag.id
+                                        });
+                                        setColor(tag.color);
+                                      }}
+                                    />
+                                    <img
+                                      onClick={() => deleteTag(tag.id)}
+                                      className="delete"
+                                      src={close}
+                                      alt="delete"
+                                    />
+                                  </div>
                                 </div>
                               );
                             })}
                           </div>
                         )}
                         {(tags.add || tags.edit) && (
-                          <div className="formTag">
-                            <img
-                              src={arrow}
-                              className="arrow"
-                              alt="arrow"
-                              onClick={() => {
-                                setTags((prevState) => ({
-                                  ...prevState,
-                                  add: false,
-                                  edit: false
-                                }));
-                                setTagInfo({
-                                  description: "",
-                                  name: ""
-                                });
-                                setColor("#aabbcc");
-                              }}
-                            />
+                          <div className="form-tag">
                             <input
-                              className="formTag__input"
+                              className="form-tag__input"
                               placeholder="Описание метки"
                               maxLength="25"
                               value={tagInfo.description}
@@ -731,7 +724,7 @@ export const ProjectTracker = () => {
                               }
                             />
                             <input
-                              className="formTag__input"
+                              className="form-tag__input"
                               placeholder="Тег"
                               value={tagInfo.name}
                               maxLength="10"
@@ -749,12 +742,31 @@ export const ProjectTracker = () => {
                               }}
                               className={
                                 tagInfo.name && tagInfo.description
-                                  ? "formTag__btn"
-                                  : "formTag__btn disable"
+                                  ? "form-tag__btn"
+                                  : "form-tag__btn disable"
                               }
                             >
                               {tags.add ? "Добавить" : "Изменить"}
                             </button>
+                            {(tags.add || tags.edit) && (
+                              <button
+                                className={"form-tag__btn"}
+                                onClick={() => {
+                                  setTags((prevState) => ({
+                                    ...prevState,
+                                    add: false,
+                                    edit: false
+                                  }));
+                                  setTagInfo({
+                                    description: "",
+                                    name: ""
+                                  });
+                                  setColor("#aabbcc");
+                                }}
+                              >
+                                Отмена
+                              </button>
+                            )}
                           </div>
                         )}
                       </div>
@@ -859,8 +871,17 @@ export const ProjectTracker = () => {
                             </div>
                           </div>
                         )}
-                        <div className="tasksContainer">
+                        <div className="tasks-container">
                           {column.tasks.map((task) => {
+                            const dateDeadline = new Date(task.dead_line);
+                            const currentDate = moment().format(
+                              "YYYY-MM-DD HH:mm:ss"
+                            );
+                            const titleColor =
+                              task.dead_line &&
+                              dateDeadline < new Date(currentDate)
+                                ? "red"
+                                : "#1a1919";
                             return (
                               <div
                                 key={task.id}
@@ -889,7 +910,10 @@ export const ProjectTracker = () => {
                                     }
                                   }}
                                 >
-                                  <p className="task__board__item__title">
+                                  <p
+                                    className="task__board__item__title"
+                                    style={{ color: titleColor }}
+                                  >
                                     {task.title}
                                   </p>
                                 </div>
@@ -899,26 +923,12 @@ export const ProjectTracker = () => {
                                   }}
                                   className="tasks__board__item__description"
                                 ></p>
-                                <div className="tasks__board__item__executor">
-                                  <img
-                                    src={
-                                      task.executor?.avatar
-                                        ? urlForLocal(task.executor?.avatar)
-                                        : avatarMok
-                                    }
-                                    alt="avatar"
-                                  />
-                                  <span>
-                                    {task.executor?.fio ||
-                                      "Исполнитель не назначен"}
-                                  </span>
-                                </div>
                                 {Boolean(task.mark.length) && (
                                   <div className="tasks__board__item__tags">
                                     {task.mark.map((tag) => {
                                       return (
                                         <div
-                                          className="tagItem"
+                                          className="tag-item"
                                           key={tag.id}
                                           style={{ background: tag.color }}
                                         >
@@ -928,38 +938,57 @@ export const ProjectTracker = () => {
                                     })}
                                   </div>
                                 )}
-                                {typeof task.execution_priority ===
-                                  "number" && (
-                                  <div className="tasks__board__item__priority">
-                                    <p>Приоритет:</p>
-                                    <span
-                                      className={
-                                        priorityClass[task.execution_priority]
-                                      }
-                                    >
-                                      {priority[task.execution_priority]}
-                                    </span>
-                                  </div>
-                                )}
-                                {task.dead_line && (
-                                  <div className="tasks__board__item__deadLine">
-                                    <img src={calendarIcon} alt="calendar" />
-                                    <span>
-                                      {getCorrectDate(task.dead_line)}
-                                    </span>
-                                  </div>
-                                )}
+                                <div className="tasks__board__item__container">
+                                  {typeof task.execution_priority ===
+                                    "number" && (
+                                    <div className="tasks__board__item__priority">
+                                      <p>⚡</p>
+                                      <span
+                                        className={
+                                          priorityClass[task.execution_priority]
+                                        }
+                                      >
+                                        {priority[task.execution_priority]}
+                                      </span>
+                                    </div>
+                                  )}
+                                  {task.dead_line && (
+                                    <div className="tasks__board__item__dead-line">
+                                      <p>⌛</p>
+                                      <span>
+                                        {getCorrectDate(task.dead_line)}
+                                      </span>
+                                    </div>
+                                  )}
+                                </div>
+
                                 <div className="tasks__board__item__info">
-                                  <div className="tasks__board__item__info__more">
+                                  <div className="tasks__board__item__executor">
                                     <img
-                                      src={commentsBoard}
-                                      alt="commentsImg"
+                                      src={
+                                        task.executor?.avatar
+                                          ? urlForLocal(task.executor?.avatar)
+                                          : avatarMok
+                                      }
+                                      alt="avatar"
                                     />
-                                    <span>{task.comment_count}</span>
+                                    <span>
+                                      {task.executor?.fio ||
+                                        "Исполнитель не назначен"}
+                                    </span>
                                   </div>
-                                  <div className="tasks__board__item__info__more">
-                                    <img src={filesBoard} alt="filesImg" />
-                                    <span>{task.file_count}</span>
+                                  <div className="tasks__board__item__info__tags">
+                                    <div className="tasks__board__item__info__more">
+                                      <img
+                                        src={commentsBoard}
+                                        alt="commentsImg"
+                                      />
+                                      <span>{task.comment_count}</span>
+                                    </div>
+                                    <div className="tasks__board__item__info__more">
+                                      <img src={filesBoard} alt="filesImg" />
+                                      <span>{task.file_count}</span>
+                                    </div>
                                   </div>
                                 </div>
                                 <TrackerSelectColumn
@@ -978,17 +1007,17 @@ export const ProjectTracker = () => {
                   })}
                 {Boolean(projectBoard?.columns) &&
                   !Boolean(projectBoard.columns.length) && (
-                    <div className="tasks__board__noItems">
+                    <div className="tasks__board__no-items">
                       В проекте нет задач.
                     </div>
                   )}
                 {filteredNoTasks && (
-                  <div className="tasks__board__noTasks">
-                    <div className="tasks__board__noTasksInfo">
-                      <img src={trackerNoTasks} alt="noTasks" />
+                  <div className="tasks__board__no-tasks">
+                    <div className="tasks__board__no-tasks-info">
+                      <img src={trackerNoTasks} alt="no-tasks" />
                       <p>Пока нет подходящих задач</p>
                     </div>
-                    <p className="tasks__board__noTasksMore">
+                    <p className="tasks__board__no-tasks-more">
                       Ставьте задачи, следите за прогрессом, ведите учёт
                       рабочего времени
                     </p>

src/pages/Quiz/QuizPage.js

@@ -137,7 +137,8 @@ export const QuizPage = () => {
             {/*</div>*/}
             <div className="quiz-page__block">Доступные тесты</div>
             <div className="quiz-page__cards-test">
-              {questionnaires.length ? (
+              {questionnaires &&
+                questionnaires.length > 0 &&
                 questionnaires.map((item, index) => (
                   <CardAvailableTest
                     description={item.description}
@@ -147,9 +148,9 @@ export const QuizPage = () => {
                     passedTest={item.passedTest}
                     key={index}
                   />
-                ))
-              ) : (
-                <h1>Анкет нет</h1>
+                ))}
+              {questionnaires && questionnaires.length === 0 && (
+                <h1>Нет доступных тестов</h1>
               )}
             </div>
             {/*<div className="block-text">*/}

src/pages/Quiz/quiz-page.scss

@@ -5,6 +5,7 @@
   font-family: "LabGrotesque", sans-serif;
   display: flex;
   flex-direction: column;
+
   &__container {
     max-width: 1160px;
     margin: 23px auto 42px auto;
@@ -12,9 +13,11 @@
     width: 100%;
     padding: 0 15px;
   }
+
   &__title {
     margin: 0 0 39px 0;
   }
+
   &__block {
     background: #e1fccf;
     border-radius: 12px;
@@ -25,21 +28,26 @@
     padding: 20px;
     margin: 0 0 16px 0;
   }
+
   &__cards-test {
     display: grid;
     grid-gap: 29px;
     grid-template-columns: 1fr 1fr 1fr;
     margin-bottom: 29px;
+
     @media (max-width: 955px) {
       grid-template-columns: 1fr 1fr;
     }
+
     @media (max-width: 668px) {
       grid-template-columns: 1fr;
     }
   }
+
   &__specialization {
     margin: 0 0 26px 0;
   }
+
   &__categories-items {
     display: grid;
     grid-gap: 24px;
@@ -53,6 +61,7 @@
     }
   }
 }
+
 .interjacent-page-quiz {
   background: #f1f1f1;
   height: 100%;
@@ -60,12 +69,15 @@
   font-family: "LabGrotesque", sans-serif;
   display: flex;
   flex-direction: column;
+
   &__title {
     margin: 0 0 39px 0;
   }
+
   &__passing-information {
     margin: 0 0 32px 0;
   }
+
   &__container {
     max-width: 1160px;
     margin: 23px auto 42px auto;
@@ -73,6 +85,7 @@
     width: 100%;
     padding: 0 15px;
   }
+
   &__introduction-items {
     display: flex;
     flex-wrap: wrap;
@@ -88,6 +101,7 @@
   font-family: "LabGrotesque", sans-serif;
   display: flex;
   flex-direction: column;
+
   &__container {
     max-width: 1160px;
     margin: 23px auto 42px auto;
@@ -95,12 +109,15 @@
     width: 100%;
     padding: 0 15px;
   }
+
   &__title {
     margin: 0 0 39px 0;
   }
+
   &__passing-information {
     margin: 0 0 29px 0;
   }
+
   &__block-green {
     font-weight: 400;
     font-size: 18px;
@@ -110,6 +127,7 @@
     border-radius: 12px 12px 0px 0px;
     padding: 20px 51px;
   }
+
   &__introduction {
     display: flex;
     flex-wrap: wrap;
@@ -123,6 +141,7 @@
   font-family: "LabGrotesque", sans-serif;
   display: flex;
   flex-direction: column;
+
   &__container {
     max-width: 1160px;
     margin: 23px auto 42px auto;
@@ -130,9 +149,11 @@
     width: 100%;
     padding: 0 15px;
   }
+
   &__title {
     margin: 0 0 39px 0;
   }
+
   &__report-quiz {
     margin: 0 0 28px 0;
   }

src/pages/RegistrationForCandidate/RegistrationForCandidate.js

@@ -51,10 +51,10 @@ export const RegistrationForCandidate = () => {
     );
 
   return (
-    <div className="registrationCandidate">
+    <div className="registration-candidate">
       <AuthHeader />
       <div className="container">
-        <div className="registrationCandidate__start">
+        <div className="registration-candidate__start">
           <h2 className="auth-candidate__start__title">
             Хочу в команду <span>IT-специалистов</span>
           </h2>
@@ -65,28 +65,28 @@ export const RegistrationForCandidate = () => {
             Для нас не имеет значения Ваша локация.
           </p>
           <StepsForCandidate step="шаг 2 - заполните данные" />
-          <div className="registrationCandidate__formWrapper">
-            <div className="registrationCandidate__info">
-              <div className="registrationCandidate__info__category">
+          <div className="registration-candidate__form-wrapper">
+            <div className="registration-candidate__info">
+              <div className="registration-candidate__info__category">
                 <img src={BackEndImg} alt="img" />
                 <p>Backend разработчики</p>
               </div>
-              <p className="registrationCandidate__info__skills">
+              <p className="registration-candidate__info__skills">
                 Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript
               </p>
               <Link
                 to="/auth-candidate"
-                className="registrationCandidate__info__arrow"
+                className="registration-candidate__info__arrow"
               >
                 <img src={arrowBtn} alt="img" />
               </Link>
             </div>
             {/* форма регистрации */}
             <form
-              className="registrationCandidate__form"
+              className="registration-candidate__form"
               onSubmit={handleSubmit}
             >
-              <div className="registrationCandidate__form__input">
+              <div className="registration-candidate__form__input">
                 <label htmlFor="name">Ваше имя</label>
                 <input
                   className={validationErrors.username ? "error" : ""}
@@ -98,7 +98,7 @@ export const RegistrationForCandidate = () => {
                 />
                 <span>{validationErrors.username}</span>
               </div>
-              <div className="registrationCandidate__form__input">
+              <div className="registration-candidate__form__input">
                 <label htmlFor="summary">Если есть ссылка на резюме</label>
                 <input
                   className={validationErrors.summary ? "error" : ""}
@@ -110,7 +110,7 @@ export const RegistrationForCandidate = () => {
                 />
                 <span>{validationErrors.summary}</span>
               </div>
-              <div className="registrationCandidate__form__input">
+              <div className="registration-candidate__form__input">
                 <label htmlFor="email">Ваш e-mail</label>
                 <input
                   className={validationErrors.email ? "error" : ""}
@@ -122,7 +122,7 @@ export const RegistrationForCandidate = () => {
                 />
                 <span>{validationErrors.email}</span>
               </div>
-              <div className="registrationCandidate__form__input">
+              <div className="registration-candidate__form__input">
                 <label htmlFor="tg">Ваш telegram</label>
                 <input
                   className={validationErrors.tg ? "error" : ""}
@@ -134,7 +134,7 @@ export const RegistrationForCandidate = () => {
                 />
                 <span>{validationErrors.tg}</span>
               </div>
-              <div className="registrationCandidate__form__input">
+              <div className="registration-candidate__form__input">
                 <label htmlFor="password">Придумайте пароль</label>
                 <input
                   className={validationErrors.password ? "error" : ""}
@@ -146,7 +146,7 @@ export const RegistrationForCandidate = () => {
                 />
                 <span>{validationErrors.password}</span>
               </div>
-              <div className="registrationCandidate__form__input">
+              <div className="registration-candidate__form__input">
                 <label htmlFor="secondPassword">Повторите пароль</label>
                 <input
                   className={validationErrors.secondPassword ? "error" : ""}
@@ -158,7 +158,7 @@ export const RegistrationForCandidate = () => {
                 />
                 <span>{validationErrors.secondPassword}</span>
               </div>
-              <div className="registrationCandidate__form__submit">
+              <div className="registration-candidate__form__submit">
                 <button type="submit">Отправить</button>
               </div>
             </form>

src/pages/RegistrationForCandidate/registationForCandidate.scss

@@ -1,4 +1,4 @@
-.registrationCandidate {
+.registration-candidate {
   font-family: "LabGrotesque", sans-serif;
   position: relative;
   background-color: #f1f1f1;
@@ -39,7 +39,7 @@
     }
   }
 
-  &__formWrapper {
+  &__form-wrapper {
     position: relative;
     margin-top: 200px;
     display: flex;

src/pages/RegistrationSetting/RegistrationSetting.js

@@ -71,33 +71,33 @@ export const RegistrationSetting = () => {
   const [step, setStep] = useState(1);
 
   return (
-    <div className="registrationSetting">
+    <div className="registration-setting">
       <AuthHeader />
       <SideBar />
-      <div className="registrationSetting__content">
+      <div className="registration-setting__content">
         <div className="container">
-          <h1 className="registrationSetting__title">
+          <h1 className="registration-setting__title">
             Добро пожаловать{" "}
             <span>
               в ITGuild
               <img src={arrowInfo} alt="arrow" />
             </span>
           </h1>
-          <div className="registrationSetting__question questionBlock">
-            <div className="questionBlock__head">
-              <span className="questionBlock__suptitle">
+          <div className="registration-setting__question question-block">
+            <div className="question-block__head">
+              <span className="question-block__suptitle">
                 Эти ответы помогут сформировать кабинет
               </span>
-              <div className="questionBlock__steps">
+              <div className="question-block__steps">
                 <span className="active" />
                 <span className={step >= 2 ? "active" : ""} />
                 <span className={step >= 3 ? "active" : ""} />
               </div>
             </div>
-            <h3 className="questionBlock__question">
+            <h3 className="question-block__question">
               Со сколькими людьми ты будешь работать?
             </h3>
-            <div className="questionBlock__answers">
+            <div className="question-block__answers">
               {questions.countPeople.map((item, index) => {
                 return (
                   <button
@@ -118,15 +118,15 @@ export const RegistrationSetting = () => {
               })}
             </div>
             <img
-              className="registrationSetting__question__img"
+              className="registration-setting__question__img"
               src={registrationImg}
               alt="img"
             />
           </div>
           {step >= 2 && (
-            <div className="registrationSetting__question questionBlock">
-              <h3 className="questionBlock__question">Какая у тебя роль?</h3>
-              <div className="questionBlock__answers">
+            <div className="registration-setting__question question-block">
+              <h3 className="question-block__question">Какая у тебя роль?</h3>
+              <div className="question-block__answers">
                 {questions.role.map((item, index) => {
                   return (
                     <button
@@ -147,7 +147,7 @@ export const RegistrationSetting = () => {
             </div>
           )}
           {step >= 3 && (
-            <div className="registrationSetting__environment environment">
+            <div className="registration-setting__environment environment">
               <span className="environment__suptitle">
                 Организуй комфортную среду для продуктивности
               </span>
@@ -191,7 +191,7 @@ export const RegistrationSetting = () => {
                   );
                 })}
               </div>
-              <button className="registrationSetting__continue registrationSetting__done">
+              <button className="registration-setting__continue registration-setting__done">
                 Готово
               </button>
             </div>
@@ -206,7 +206,7 @@ export const RegistrationSetting = () => {
                   setStep((prevState) => prevState + 1);
                 }
               }}
-              className="registrationSetting__continue"
+              className="registration-setting__continue"
             >
               Продолжить
             </button>

src/pages/RegistrationSetting/registrationSetting.scss

@@ -1,4 +1,4 @@
-.registrationSetting {
+.registration-setting {
   &__content {
     font-family: "LabGrotesque", sans-serif;
     background-color: #f1f1f1;
@@ -21,7 +21,7 @@
     margin-bottom: 46px;
     color: #000000;
     span {
-      color: #52B709;
+      color: #52b709;
       position: relative;
       img {
         position: absolute;
@@ -48,7 +48,7 @@
   }
 
   &__question {
-    background: #FFFFFF;
+    background: #ffffff;
     border-radius: 12px;
     padding: 46.5px 75.5px 38px;
     position: relative;
@@ -60,17 +60,18 @@
     }
   }
 
-  .questionBlock {
+  .question-block {
     display: flex;
     flex-direction: column;
     margin-bottom: 18px;
+
     &__head {
       display: flex;
       margin-bottom: 33px;
     }
 
     &__suptitle {
-      color: #6F6F6F;
+      color: #6f6f6f;
       font-size: 14px;
       margin-right: 70px;
     }
@@ -83,12 +84,12 @@
       span {
         width: 75px;
         height: 6.5px;
-        background: #B0BABF;
+        background: #b0babf;
         border-radius: 77px;
       }
 
       .active {
-        background: #6F6F6F;
+        background: #6f6f6f;
       }
     }
 
@@ -105,14 +106,14 @@
 
       button {
         border-radius: 12px;
-        border: 1px solid #8DC63F;
+        border: 1px solid #8dc63f;
         padding: 4px 30px;
         line-height: 32px;
         font-size: 15px;
       }
 
       .active {
-        background: #1458DD;
+        background: #1458dd;
         color: whitesmoke;
         font-weight: 500;
         border: none;
@@ -123,13 +124,13 @@
   &__environment {
     margin-top: 13px;
     padding: 32px 20px 42px 44px;
-    background: #E2EBEF;
+    background: #e2ebef;
     border-radius: 12px;
 
     .environment {
       &__suptitle {
         font-size: 14px;
-        color: #6F6F6F;
+        color: #6f6f6f;
         margin-left: 31px;
       }
 
@@ -181,7 +182,7 @@
             column-gap: 22.4px;
 
             p {
-              color: #6F6F6F;
+              color: #6f6f6f;
               font-size: 12px;
               max-width: 189px;
             }
@@ -190,7 +191,7 @@
               width: 48px;
               height: 48px;
               border-radius: 50px;
-              background: #DDEEC6;
+              background: #ddeec6;
               margin-left: auto;
               display: flex;
               align-items: center;
@@ -204,12 +205,12 @@
 
   .item--active {
     opacity: 1;
-    border: 2px solid #1458DD;
+    border: 2px solid #1458dd;
   }
 
   &__continue {
     margin: 6px 0 0 75.5px;
-    background-color: #52B709;
+    background-color: #52b709;
     width: 174px;
     height: 46px;
     color: white;

src/pages/Summary/Summary.js

@@ -95,7 +95,7 @@ export const Summary = () => {
               <p>Вернуться</p>
             </div>
           )}
-          <div className={openGit ? "summary__info openGit" : "summary__info"}>
+          <div className={openGit ? "summary__info open-git" : "summary__info"}>
             <div className="summary__person">
               <img
                 src={
@@ -136,7 +136,7 @@ export const Summary = () => {
             </div>
             <div className="skills__section__items">
               {editSkills ? (
-                <div className="editSkills">
+                <div className="edit-skills">
                   {selectedSkills &&
                     selectedSkills.map((skill) => {
                       return (
@@ -156,9 +156,9 @@ export const Summary = () => {
                         </span>
                       );
                     })}
-                  <div className="selectSkills">
+                  <div className="select-skills">
                     <div
-                      className="selectSkills__name"
+                      className="select-skills__name"
                       onClick={() => setSelectSkillsOpen(!selectSkillsOpen)}
                     >
                       Выберите скилл
@@ -168,7 +168,7 @@ export const Summary = () => {
                       />
                     </div>
                     {selectSkillsOpen && (
-                      <div className="selectSkills__dropDown">
+                      <div className="select-skills__dropDown">
                         {skillsList.map((skill) => {
                           return (
                             <p
@@ -179,7 +179,7 @@ export const Summary = () => {
                                 ])
                               }
                               key={skill.id}
-                              className="selectSkills__item"
+                              className="select-skills__item"
                             >
                               {skill.name}
                             </p>
@@ -253,12 +253,12 @@ export const Summary = () => {
           </div>
         )}
         {openGit && (
-          <div className="summary__sectionGit">
+          <div className="summary__section-git">
             <div className="summary__sections__head">
               <h3>Ваши репозитории</h3>
               <button>Редактировать</button>
             </div>
-            <div className="summary__sectionGitItems">
+            <div className="summary__section-git-items">
               {Boolean(gitInfo.length) &&
                 gitInfo.map((itemGit) => {
                   return (
@@ -267,23 +267,23 @@ export const Summary = () => {
                       target="_blank"
                       rel="noreferrer"
                       key={itemGit.id}
-                      className="summary__sectionGitItem gitItem"
+                      className="summary__section-git-item git-item"
                     >
-                      <div className="gitItem__info">
-                        <div className="gitItem__info__about">
+                      <div className="git-item__info">
+                        <div className="git-item__info__about">
                           <img src={gitImgItem} alt="gitImg" />
-                          <div className="gitItem__info__name">
+                          <div className="git-item__info__name">
                             <h4>{itemGit.title}</h4>
                             <p>{itemGit.description}</p>
                           </div>
                         </div>
-                        <div className="gitItem__info__specification">
-                          <span className="gitItem__lineSkill" />
+                        <div className="git-item__info__specification">
+                          <span className="git-item__lineSkill" />
                           <p>{itemGit.main_stack}</p>
                         </div>
                       </div>
                       <a
-                        className="gitItem__link"
+                        className="git-item__link"
                         href={itemGit.link}
                         target="_blank"
                         rel="noreferrer"
@@ -294,7 +294,7 @@ export const Summary = () => {
                   );
                 })}
               {!Boolean(gitInfo.length) && (
-                <p className="noGitItems">Нет актуальных проектов</p>
+                <p className="no-git-items">Нет актуальных проектов</p>
               )}
             </div>
           </div>

src/pages/Summary/summary.scss

@@ -86,7 +86,7 @@
     }
   }
 
-  .openGit {
+  .open-git {
     .summary__name {
       max-width: none;
 
@@ -250,7 +250,7 @@
       }
     }
 
-    .editSkills {
+    .edit-skills {
       display: flex;
       flex-wrap: wrap;
       gap: 14px;
@@ -273,7 +273,7 @@
         }
       }
 
-      .selectSkills {
+      .select-skills {
         position: relative;
         display: flex;
         flex-direction: column;
@@ -384,10 +384,10 @@
     padding: 15px 35px 15px 50px !important;
   }
 
-  &__sectionGit {
+  &__section-git {
     margin-top: 25px;
 
-    &Items {
+    &-items {
       margin-top: 25px;
       display: flex;
       flex-wrap: wrap;
@@ -395,7 +395,7 @@
       column-gap: 25px;
       justify-content: space-between;
 
-      .noGitItems {
+      .no-git-items {
         width: 100%;
         font-size: 20px;
         background: #ffffff;
@@ -405,7 +405,7 @@
         font-weight: 600;
       }
 
-      .gitItem {
+      .git-item {
         width: 48%;
         display: flex;
         align-items: center;

src/pages/Tracker/Tracker.jsx

@@ -74,14 +74,20 @@ export const Tracker = () => {
     });
     apiRequest(
       `/task/get-user-tasks?user_id=${localStorage.getItem("id")}&expand=timers`
-    ).then((el) => {
-      const allTasks = el ? el.filter((item) => item.status !== 0) : [];
-      const completedTasks = el ? el.filter((item) => item.status === 0) : [];
-      setAllTasks(allTasks);
-      setFilteredAllTasks(allTasks);
-      setAllCompletedTasks(completedTasks);
-      setFilterCompleteTasks(completedTasks);
-    });
+    )
+      .then((el) => {
+        const allTasks = el?.length
+          ? el.filter((item) => item.status !== 0)
+          : [];
+        const completedTasks = el?.length
+          ? el.filter((item) => item.status === 0)
+          : [];
+        setAllTasks(allTasks);
+        setFilteredAllTasks(allTasks);
+        setAllCompletedTasks(completedTasks);
+        setFilterCompleteTasks(completedTasks);
+      })
+      .catch((err) => console.error(err));
   }, []);
 
   const toggleTabs = (index) => {
@@ -211,8 +217,7 @@ export const Tracker = () => {
                     >
                       <img src={addProjectImg} alt="#"></img>
                       <p className="create-project-btn__text">
-                        Ставьте задачи, следите за прогрессом, ведите учёт
-                        рабочего времени
+                        Добавить проект
                       </p>
                     </BaseButton>
                   </div>
@@ -236,12 +241,12 @@ export const Tracker = () => {
           <div
             className={
               tab === 2
-                ? "tracker__tabs__content__allTasks taskList tasks active__content"
+                ? "tracker__tabs__content__all-tasks task-list tasks active__content"
                 : "tracker__tabs__content__projects"
             }
           >
-            <div className="taskList__head">
-              <div className="taskList__tasks-period">
+            <div className="task-list__head">
+              <div className="task-list__tasks-period">
                 <div className="month-period">
                   <p>
                     {25} - {35}
@@ -260,7 +265,7 @@ export const Tracker = () => {
                 </div>
               </div>
 
-              <div className="taskList__head__search">
+              <div className="task-list__head__search">
                 <img src={search} alt="search" />
                 <input
                   type="text"
@@ -269,12 +274,12 @@ export const Tracker = () => {
                 />
               </div>
 
-              <div className="taskList__filters">
-                <BaseButton styles={"taskList__filters-filter"}>
+              <div className="task-list__filters">
+                <BaseButton styles={"task-list__filters-filter"}>
                   <img src={filterIcon} alt="#" />
                   <p>Фильтр</p>
                 </BaseButton>
-                <BaseButton styles={"taskList__filters-clear"}>
+                <BaseButton styles={"task-list__filters-clear"}>
                   <p> Очистить фильтр</p>
                 </BaseButton>
               </div>
@@ -288,18 +293,18 @@ export const Tracker = () => {
               projects={projects}
             />
 
-            <div className="taskList__time">
-              <div className="taskList__time-compited">
+            <div className="task-list__time">
+              <div className="task-list__time-compited">
                 <h4>Учет моего рабочего времени за день</h4>
                 <h3>
                   Задач выполнено: <p>{2}</p>
                 </h3>
               </div>
-              <div className="taskList__time-all">
+              <div className="task-list__time-all">
                 <h3>Общее время:</h3>
                 <p>{"4 ч 34 мин"}</p>
               </div>
-              <div className="taskList__time-status">
+              <div className="task-list__time-status">
                 <div>
                   <img src={statusTimeTask} alt="#" />
                   <p>Сверка пройдена</p>
@@ -311,7 +316,7 @@ export const Tracker = () => {
               </div>
             </div>
 
-            <div className="taskList__end">
+            <div className="task-list__end">
               <BaseButton styles={"close-day"}>
                 Закрыть сегодняшний день
               </BaseButton>
@@ -381,23 +386,23 @@ export const Tracker = () => {
                      )}`}
                 </p>
               </div>
-              <div className="archive__tasksWrapper">
+              <div className="archive__tasks-wrapper">
                 {Boolean(
                   projects?.filter((project) => project.status === 10).length
                 ) ? (
                   projects?.map((project, index) => {
                     return project.status === 10 ? (
                       <div
-                        className="archive__completeTask-project"
+                        className="archive__complete-task-project"
                         key={index}
                       >
-                        <div className="archive__completeTask__description">
+                        <div className="archive__complete-task__description">
                           <p className="project-title-archive">
                             {project.name}
                           </p>
                           <p className="date">{project.date}</p>
                         </div>
-                        <div className="archive__completeTask__creator">
+                        <div className="archive__complete-task__creator">
                           <img src={mockAvatar} alt="#" />
                           <div className="creator-title">
                             <h4>Создатель проекта:</h4>
@@ -410,7 +415,7 @@ export const Tracker = () => {
                     );
                   })
                 ) : (
-                  <div className="archive__noItem-project">
+                  <div className="archive__no-item-project">
                     <img src={archiveTrackerProjects} alt="#" />
                     <p>В архиве проектов нет</p>
                   </div>

src/pages/Tracker/tracker.scss

@@ -171,7 +171,7 @@
 
         .create-project-btn {
           width: 300px;
-          height: 113px;
+          height: 83px;
           border-radius: 12px;
           background: #ecf8e5;
           color: #000000;
@@ -219,6 +219,15 @@
           border-bottom: 1px solid #dde2e4;
           padding: 0 35px 15px;
 
+          &__title {
+            display: flex;
+            align-items: center;
+            column-gap: 5px;
+            img {
+              height: 22px;
+            }
+          }
+
           @media (max-width: 1000px) {
             padding: 0 15px 15px;
           }
@@ -250,7 +259,7 @@
             font-size: 22px;
             line-height: 32px;
             margin-bottom: 0;
-            max-width: 21%;
+            max-width: 160px;
             word-break: break-all;
             overflow: hidden;
             white-space: nowrap;
@@ -366,7 +375,7 @@
               border-color: gray;
             }
 
-            &Selected {
+            &-selected {
               display: flex;
               align-items: center;
               border-radius: 8px;
@@ -427,7 +436,7 @@
               transform: rotate(180deg);
             }
 
-            &Dropdown {
+            &-dropdown {
               position: absolute;
               top: 33px;
               left: 0;
@@ -440,7 +449,7 @@
               row-gap: 7px;
               width: 100%;
 
-              .executorDropdown__person {
+              .executor-dropdown__person {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
@@ -456,8 +465,8 @@
                 }
 
                 img {
-                  width: 15px;
-                  height: 15px;
+                  width: 20px;
+                  height: 20px;
                 }
 
                 &:hover {
@@ -502,6 +511,13 @@
 
           &__tags {
             position: relative;
+            img {
+              transition: all 0.15s ease;
+              margin-left: 5px;
+            }
+            .open {
+              transform: rotate(180deg);
+            }
             .tags {
               &__add {
                 display: flex;
@@ -538,16 +554,19 @@
               }
               &__list {
                 position: absolute;
-                border-radius: 2px;
+                border-radius: 8px;
                 background: #d9d9d9;
                 z-index: 8;
-
-                // padding: 0 8px 10px;
                 top: 30px;
-                width: 265px;
+                left: -35px;
+                width: 216px;
                 display: flex;
                 flex-direction: column;
 
+                @media (max-width: 900px) {
+                  left: 0px;
+                }
+
                 .close {
                   cursor: pointer;
                   width: 20px;
@@ -564,15 +583,16 @@
                   margin-top: 8px;
                   padding: 0 8px 8px;
 
-                  .tagItem {
+                  .tag-item {
                     display: flex;
                     align-items: center;
                     flex-direction: row;
                     justify-content: space-between;
+                    column-gap: 5px;
                     padding: 0px 8px;
                     border-radius: 8px;
-                    height: 50px;
-                    max-height: 50px;
+                    height: 40px;
+                    max-height: 40px;
                     background: #fff;
 
                     &__description {
@@ -585,6 +605,29 @@
                       text-overflow: ellipsis;
                     }
 
+                    &__color {
+                      width: 22.25px;
+                      height: 23.217px;
+                      border-radius: 8px;
+                    }
+
+                    &__images {
+                      display: flex;
+                      flex-direction: column-reverse;
+                      row-gap: 3px;
+
+                      img {
+                        height: 14px;
+                        width: 14px;
+                        cursor: pointer;
+                      }
+
+                      .delete {
+                        width: 16px;
+                        height: 16px;
+                      }
+                    }
+
                     &__info {
                       display: flex;
                       align-items: center;
@@ -594,41 +637,21 @@
                         font-size: 12px;
                         font-weight: 600;
                       }
-
-                      &__color {
-                        width: 22.25px;
-                        height: 23.217px;
-                        border-radius: 8px;
-                      }
-
-                      &__images {
-                        display: flex;
-                        flex-direction: column-reverse;
-                        row-gap: 6px;
-
-                        img {
-                          cursor: pointer;
-                        }
-
-                        .delete {
-                          width: 14px;
-                          height: 14px;
-                        }
-                      }
                     }
                   }
                 }
 
-                .addNewTag {
+                .add-new-tag {
                   display: flex;
                   align-items: center;
                   column-gap: 15px;
                   border-radius: 8px;
-                  background: #252c32;
-                  color: white;
-                  height: 42px;
+                  background: white;
+                  color: #252c32;
+                  height: 40px;
                   cursor: pointer;
                   justify-content: center;
+                  margin: 8px 8px 0px;
 
                   p {
                     font-size: 15px;
@@ -648,7 +671,7 @@
                   }
                 }
 
-                .formTag {
+                .form-tag {
                   display: flex;
                   flex-direction: column;
                   padding: 8px;
@@ -676,7 +699,7 @@
                     border: none;
                     background: #252c32;
                     color: whitesmoke;
-                    margin: 10px auto 0;
+                    margin: 0 auto 0;
                     border-radius: 10px;
                     font-size: 15px;
                     padding: 5px 12px;
@@ -749,7 +772,7 @@
             transform: scaleX(1);
           }
 
-          .tasksContainer {
+          .tasks-container {
             display: flex;
             flex-direction: column;
             row-gap: 8px;
@@ -785,7 +808,7 @@
 
           &__item {
             width: 328px;
-            padding: 6px 10px;
+            padding: 6px 10px 8px 10px;
             position: relative;
             box-shadow: 0px 3px 2px -2px rgba(0, 0, 0, 0.06),
               0px 5px 3px -2px rgba(0, 0, 0, 0.02);
@@ -824,7 +847,7 @@
                 color: #1a1919;
                 font-weight: 500;
                 font-size: 16px;
-                line-height: 24px;
+                line-height: 20px;
                 margin-bottom: 0;
                 max-height: 100px;
                 overflow: hidden;
@@ -860,13 +883,24 @@
               -webkit-box-orient: vertical;
             }
 
+            &__container {
+              display: flex;
+              justify-content: space-between;
+            }
+
             &__info {
               display: flex;
               column-gap: 10px;
               align-items: center;
+              justify-content: space-between;
               pointer-events: none;
               margin-top: 5px;
 
+              &__tags {
+                display: flex;
+                column-gap: 5px;
+              }
+
               &__more {
                 cursor: pointer;
                 display: flex;
@@ -921,7 +955,7 @@
               }
             }
 
-            &__deadLine {
+            &__dead-line {
               display: flex;
               align-items: center;
               column-gap: 5px;
@@ -970,7 +1004,7 @@
               row-gap: 3px;
               margin: 3px 0;
 
-              .tagItem {
+              .tag-item {
                 padding: 3px 10px;
                 border-radius: 10px;
                 color: white;
@@ -979,7 +1013,7 @@
             }
           }
 
-          .openItems {
+          .open-items {
             cursor: pointer;
             border-radius: 44px;
             width: 33px;
@@ -994,11 +1028,11 @@
             color: white;
           }
 
-          .moreItems {
+          .more-items {
             background: #8bcc60;
           }
 
-          .lessItems {
+          .less-items {
             background: #f92828;
           }
 
@@ -1037,7 +1071,7 @@
             }
           }
 
-          &__noItems {
+          &__no-items {
             font-weight: 500;
             font-size: 25px;
             transform: scaleY(-1);
@@ -1047,12 +1081,12 @@
             }
           }
 
-          &__noTasks {
+          &__no-tasks {
             display: flex;
             flex-direction: column;
             transform: scaleY(-1);
 
-            &Info {
+            &-info {
               display: flex;
               align-items: center;
               margin-bottom: 15px;
@@ -1069,7 +1103,7 @@
               }
             }
 
-            &More {
+            &-more {
               font-size: 14px;
               line-height: 22px;
             }
@@ -1139,14 +1173,14 @@
         display: flex;
       }
 
-      &__allTasks {
+      &__all-tasks {
         max-width: 1160px;
         padding: 0 20px;
         margin: 0 auto;
         display: flex;
         flex-direction: column;
 
-        .taskList {
+        .task-list {
           &__head {
             display: flex;
             justify-content: space-between;
@@ -1549,7 +1583,7 @@
             }
           }
 
-          &__tasksWrapper {
+          &__tasks-wrapper {
             margin-top: 20px;
             display: flex;
             flex-direction: column;
@@ -1581,7 +1615,7 @@
             }
           }
 
-          &__completeTask {
+          &__complete-task {
             display: flex;
             justify-content: space-between;
             align-items: center;
@@ -1599,7 +1633,7 @@
               color: #111112;
             }
 
-            .completeTask__title {
+            .complete-task__title {
               font-weight: 700;
               font-size: 18px;
               line-height: 32px;
@@ -1858,7 +1892,7 @@
             }
           }
 
-          &__noItem {
+          &__no-item {
             padding: 23px 0 19px;
             color: #6f6f6f;
 

src/pages/TrackerIntro/TrackerIntro.js

@@ -15,64 +15,64 @@ import "./trackerIntro.scss";
 
 export const TrackerIntro = () => {
   return (
-    <div className="trackerIntro">
+    <div className="tracker-intro">
       <AuthHeader />
       <SideBar />
-      <div className="trackerIntro__content">
+      <div className="tracker-intro__content">
         <div className="container">
-          <div className="trackerIntro__intro">
-            <div className="trackerIntro__intro__info">
-              <div className="trackerIntro__intro__suptitle">
+          <div className="tracker-intro__intro">
+            <div className="tracker-intro__intro__info">
+              <div className="tracker-intro__intro__suptitle">
                 <img src={introInfo} alt="img" />
                 <span>Подключись и пользуйся бесплатно!</span>
               </div>
-              <h1 className="trackerIntro__intro__title">
+              <h1 className="tracker-intro__intro__title">
                 Сервис для планирования и работы
                 <span> для Вашей команды</span>
                 <img src={arrowInfo} alt="img" />
               </h1>
-              <p className="trackerIntro__intro__subtitle">
+              <p className="tracker-intro__intro__subtitle">
                 Российский сервис для совместной работы команд. Все процессы
                 компании в одном месте: проекты, задачи, цели, сотрудники,
                 документы, переписки, отчеты
               </p>
-              <NavLink to="/tracker-auth" className="trackerIntro__btn">
+              <NavLink to="/tracker-auth" className="tracker-intro__btn">
                 Начать работу
               </NavLink>
             </div>
             <img
-              className="trackerIntro__intro__img"
+              className="tracker-intro__intro__img"
               src={introImg}
               alt="img"
             />
           </div>
         </div>
-        <div className="trackerIntro__board">
-          <div className="trackerIntro__boardImg">
+        <div className="tracker-intro__board">
+          <div className="tracker-intro__board-img">
             <img className="board" src={trackerBoard} alt="board" />
             <img className="heard" src={trackerHeard} alt="heard" />
           </div>
-          <div className="trackerIntro__board__info">
+          <div className="tracker-intro__board__info">
             <p>
               Управление большим количеством проектов и гибкая настройка
               структуры под любые процессы
             </p>
-            <NavLink to="/tracker-registration" className="trackerIntro__btn">
+            <NavLink to="/tracker-registration" className="tracker-intro__btn">
               Начать работу
             </NavLink>
           </div>
         </div>
         <div className="container">
-          <div className="trackerIntro__info">
-            <h2 className="trackerIntro__info__title">
+          <div className="tracker-intro__info">
+            <h2 className="tracker-intro__info__title">
               Используйте сервис, который позаботится о персональных данных
               вашей компании и<br />
               <span> не уйдет с рынка.</span>
               <img src={arrowInfo} alt="img" />
             </h2>
-            <div className="trackerIntro__info__items">
-              <div className="trackerIntro__info__item">
-                <div className="trackerIntro__info__itemHead">
+            <div className="tracker-intro__info__items">
+              <div className="tracker-intro__info__item">
+                <div className="tracker-intro__info__item-head">
                   <span>+</span>
                   <h3>
                     Настраиваемые
@@ -85,8 +85,8 @@ export const TrackerIntro = () => {
                   работу вашей команды.
                 </p>
               </div>
-              <div className="trackerIntro__info__item">
-                <div className="trackerIntro__info__itemHead">
+              <div className="tracker-intro__info__item">
+                <div className="tracker-intro__info__item-head">
                   <span>+</span>
                   <h3>
                     Учет

src/pages/TrackerIntro/trackerIntro.scss

@@ -1,4 +1,4 @@
-.trackerIntro {
+.tracker-intro {
   &__content {
     font-family: "LabGrotesque", sans-serif;
     background-color: #f1f1f1;
@@ -14,7 +14,7 @@
   }
 
   &__intro {
-   display: flex;
+    display: flex;
     justify-content: space-between;
     align-items: end;
     padding: 50px 0 75px;
@@ -73,7 +73,7 @@
       margin-bottom: 75px;
 
       span {
-        color: #52B709;
+        color: #52b709;
       }
 
       img {
@@ -137,7 +137,7 @@
   }
 
   &__btn {
-    background: #52B709;
+    background: #52b709;
     border-radius: 44px;
     padding: 9px 48px;
     color: white;
@@ -160,7 +160,7 @@
     align-items: end;
     margin: 0 auto 115px;
 
-    &Img {
+    &-img {
       position: relative;
       margin-bottom: 34px;
     }
@@ -242,7 +242,7 @@
       margin-bottom: 100px;
 
       span {
-        color: #52B709;
+        color: #52b709;
       }
 
       img {
@@ -281,20 +281,20 @@
         max-width: none;
       }
 
-      &Head {
+      &-head {
         display: flex;
         align-items: center;
         margin-bottom: 45px;
 
         span {
-          background: #52B709;
+          background: #52b709;
           border-radius: 44px;
           display: flex;
           align-items: center;
           justify-content: center;
           width: 71px;
           height: 71px;
-          color: #FFFFFF;
+          color: #ffffff;
           font-size: 30px;
 
           @media (max-width: 650px) {

src/pages/TrackerRegistration/TrackerRegistration.js

@@ -66,7 +66,7 @@ export const TrackerRegistration = () => {
           </h1>
           <div className="tracker-registration__form">
             <div className="tracker-registration__form__inputs">
-              <div className="tracker-registration__inputContainer">
+              <div className="tracker-registration__input-container">
                 <h5>Ваше имя</h5>
                 <input
                   placeholder="Имя"
@@ -77,7 +77,7 @@ export const TrackerRegistration = () => {
                 />
                 <span>{validationErrors.username}</span>
               </div>
-              <div className="tracker-registration__inputContainer">
+              <div className="tracker-registration__input-container">
                 <h5>Ваш e-mail</h5>
                 <input
                   onChange={handleChange}
@@ -89,7 +89,7 @@ export const TrackerRegistration = () => {
                 />
                 <span>{validationErrors.email}</span>
               </div>
-              <div className="tracker-registration__inputContainer">
+              <div className="tracker-registration__input-container">
                 <h5>Придумайте пароль</h5>
                 <input
                   placeholder="Пароль"
@@ -101,7 +101,7 @@ export const TrackerRegistration = () => {
                 />
                 <span>{validationErrors.password}</span>
               </div>
-              <div className="tracker-registration__inputContainer">
+              <div className="tracker-registration__input-container">
                 <h5>Повторите пароль</h5>
                 <input
                   placeholder="Повторите пароль"

src/pages/TrackerRegistration/trackerRegistration.scss

@@ -18,7 +18,7 @@
   &__form {
     position: relative;
     border-radius: 12px;
-    background: #FFF;
+    background: #fff;
     padding: 20px;
 
     @media (max-width: 1000px) {
@@ -46,10 +46,10 @@
       button {
         border-radius: 44px;
         padding: 9px 39px;
-        background: #52B709;
+        background: #52b709;
         font-weight: 500;
         font-size: 18px;
-        color: #FFF;
+        color: #fff;
         border: none;
         margin-right: 165px;
       }
@@ -99,7 +99,7 @@
       }
     }
   }
-  &__inputContainer {
+  &__input-container {
     display: flex;
     flex-direction: column;
     max-width: 300px;
@@ -119,7 +119,7 @@
     input {
       outline: none;
       padding: 8px 12px 9px;
-      background-color: #EFF2F7;
+      background-color: #eff2f7;
       border-radius: 8px;
       margin: 10px 0;
       border: none;

src/pages/ViewReport/ViewReport.jsx

@@ -101,11 +101,11 @@ export const ViewReport = () => {
   }, []);
 
   return (
-    <div className="viewReport">
+    <div className="view-report">
       <ProfileHeader />
       <Navigation />
       <div className="container">
-        <div className="viewReport__info">
+        <div className="view-report__info">
           {localStorage.getItem("role_status") !== "18" && (
             <>
               <ProfileBreadcrumbs
@@ -115,13 +115,13 @@ export const ViewReport = () => {
                   { name: "Просмотр отчета за день", link: "/profile/view" }
                 ]}
               />
-              <h2 className="viewReport__title">
+              <h2 className="view-report__title">
                 Ваши отчеты - <span>просмотр отчета за день</span>
               </h2>
             </>
           )}
           <Link
-            className="viewReport__back"
+            className="view-report__back"
             to={
               localStorage.getItem("role_status") === "18"
                 ? `/profile/employees/report/${params.id}`
@@ -132,14 +132,14 @@ export const ViewReport = () => {
             <p>Вернуться</p>
           </Link>
           {localStorage.getItem("role_status") !== "18" && (
-            <div className="viewReport__bar">
+            <div className="view-report__bar">
               <Link
                 to="/profile/calendar/report"
                 onClick={() => dispatch(setEditReport(reportInfo))}
                 className={
                   taskText.length
-                    ? "viewReport__bar__edit"
-                    : "viewReport__bar__edit disable"
+                    ? "view-report__bar__edit"
+                    : "view-report__bar__edit disable"
                 }
               >
                 Редактировать
@@ -151,24 +151,24 @@ export const ViewReport = () => {
                   onClick={deleteReport}
                   className={
                     taskText.length
-                      ? "viewReport__bar__delete"
-                      : "viewReport__bar__delete disable"
+                      ? "view-report__bar__delete"
+                      : "view-report__bar__delete disable"
                   }
                 >
-                  Удалить отчет
+                  Удалить
                 </button>
               )}
             </div>
           )}
         </div>
-        <div className="viewReport__switch-date">
+        <div className="view-report__switch-date">
           <div onClick={() => previousDay()}>
             <Link
               to={`/profile/calendar/view/${getCreatedDate(
                 previousReportDay
               )}/${params.id}`}
             >
-              <div className="viewReport__switch-date__prev switch-date">
+              <div className="view-report__switch-date__prev switch-date">
                 <img src={arrowSwitchDate} alt="arrow" />
               </div>
             </Link>
@@ -187,7 +187,7 @@ export const ViewReport = () => {
                 params.id
               }`}
             >
-              <div className={`viewReport__switch-date__next switch-date`}>
+              <div className={`view-report__switch-date__next switch-date`}>
                 <img src={arrowSwitchDate} alt="arrow" />
               </div>
             </Link>
@@ -195,13 +195,13 @@ export const ViewReport = () => {
         </div>
         {loader && <Loader width={75} height={75} />}
         {Boolean(taskText.length) && (
-          <div className="viewReport__content">
+          <div className="view-report__content">
             <div className="table__container">
-              <table className="viewReport__done">
+              <table className="view-report__done">
                 <thead>
                   <tr>
                     <th>
-                      <p>Какие задачи выполнены?</p>
+                      <p>Выполненные задачи</p>
                     </th>
                     <th>
                       <p>Время</p>
@@ -219,7 +219,7 @@ export const ViewReport = () => {
                             </p>
                           </td>
                           <td>
-                            <div className="viewReport__done__hours__item">
+                            <div className="view-report__done__hours__item">
                               <span>{Math.floor(task.hours)}</span>
                               <p className="hours">
                                 {hourOfNum(Math.floor(task.hours))}
@@ -241,15 +241,15 @@ export const ViewReport = () => {
               </table>
             </div>
             {Boolean(difficulties.length) && (
-              <div className="viewReport__item">
-                <h3>Какие сложности возникли?</h3>
+              <div className="view-report__item">
+                <h3>Возникшие сложности</h3>
                 {difficulties.map((item, index) => {
                   return <p key={index}>{item}</p>;
                 })}
               </div>
             )}
             {Boolean(tomorrowTask.length) && (
-              <div className="viewReport__item">
+              <div className="view-report__item">
                 <h3>Что планируется сделать завтра?</h3>
                 {tomorrowTask.map((item, index) => {
                   return <p key={index}>{item}</p>;
@@ -259,7 +259,7 @@ export const ViewReport = () => {
           </div>
         )}
         {!Boolean(taskText.length) && !loader && (
-          <div className="viewReport__noTask">
+          <div className="view-report__no-task">
             {localStorage.getItem("role_status") === "4" ? (
               <p>
                 В этот день вы <span>не заполняли</span> отчет

src/pages/ViewReport/viewReport.scss

@@ -1,8 +1,8 @@
-.viewReport {
-  background: #F1F1F1;
+.view-report {
+  background: #f1f1f1;
   height: 100%;
   min-height: 100vh;
-  font-family: 'LabGrotesque', sans-serif;
+  font-family: "LabGrotesque", sans-serif;
 
   .container {
     max-width: 1160px;
@@ -25,7 +25,7 @@
     line-height: 32px;
     color: #000000;
     span {
-      color: #52B709;
+      color: #52b709;
     }
 
     @media (max-width: 500px) {
@@ -56,11 +56,11 @@
   &__bar {
     display: flex;
     margin-top: 20px;
-    background: #FFFFFF;
+    background: #ffffff;
     border-radius: 12px;
     padding: 20px 33px;
     align-items: center;
-    column-gap: 60px;
+    column-gap: 20px;
     height: 72px;
     justify-content: space-between;
 
@@ -78,7 +78,7 @@
       font-weight: 500;
       line-height: 32px;
       padding: 8px 24px;
-      background: #E1FCCF;
+      background: #e1fccf;
       border-radius: 44px;
       border: none;
 
@@ -88,9 +88,14 @@
     }
 
     &__delete {
-      background: white;
-      border-radius: 12px;
-      border: 1px dashed #8BCC60;
+      color: #000000;
+      font-size: 15px;
+      font-weight: 500;
+      line-height: 32px;
+      padding: 8px 24px;
+      background: whitesmoke;
+      border-radius: 44px;
+      border: none;
     }
 
     .disable {
@@ -133,7 +138,7 @@
     .switch-date {
       width: 48px;
       height: 48px;
-      background: #8DC63F;
+      background: #8dc63f;
       border-radius: 50px;
       display: flex;
       justify-content: center;
@@ -178,7 +183,6 @@
     border-collapse: separate;
     border-spacing: 28px 0;
 
-
     @media (max-width: 1205px) {
       display: grid;
       border-collapse: collapse;
@@ -287,7 +291,7 @@
 
     &__hours {
       width: 25%;
-      background: #FFFFFF;
+      background: #ffffff;
       border-radius: 12px;
       padding: 32px 40px 18px;
       display: flex;
@@ -332,7 +336,7 @@
         span {
           max-width: 48px;
           height: 48px;
-          background: #8DC63F;
+          background: #8dc63f;
           border-radius: 50px;
           display: flex;
           align-items: center;
@@ -344,9 +348,8 @@
           width: 100%;
 
           @media (max-width: 900px) {
-            max-width: 28px;
-            height: 28px;
-            font-size: 15px;
+            max-width: 40px;
+            height: 40px;
           }
         }
 
@@ -369,7 +372,7 @@
     display: flex;
     flex-direction: column;
     row-gap: 10px;
-    background: #FFFFFF;
+    background: #ffffff;
     border-radius: 12px;
     margin: 20px 0;
     padding: 15px;
@@ -399,9 +402,9 @@
     margin-bottom: 0;
   }
 
-  &__noTask {
+  &__no-task {
     padding: 25px 10px;
-    background: #FFFFFF;
+    background: #ffffff;
     border-radius: 12px;
     text-align: center;
 
@@ -416,7 +419,7 @@
       }
 
       span {
-        color: #8BCC60;
+        color: #8bcc60;
         font-weight: 500;
       }
     }