Merge branch 'main' into trackerTask

# Conflicts: # src/pages/Quiz/QuizPage.js
2024-02-14 14:59:20 +03:00
parent 6ec0264bbf 04db457944
commit f1a21a0821
98 changed files with 1071 additions and 931 deletions
--- a/src/components/AllTaskTableTracker/AllTaskTableItem/AllTaskTableItem.jsx
+++ b/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) => {
--- a/src/components/AllTaskTableTracker/AllTaskTableItem/allTaskTableItem.scss
+++ b/src/components/AllTaskTableTracker/AllTaskTableItem/allTaskTableItem.scss
@ -3,7 +3,7 @@
  transform: rotate(45deg) !important;
 }

-.taskList {
+.task-list {
  &__table {
    margin-top: 20px;
    font-size: 14px;
--- a/src/components/AllTaskTableTracker/AllTaskTableTracker.jsx
+++ b/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>
--- a/src/components/ArchiveTableTracker/ArchiveTableTracker.jsx
+++ b/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>
--- a/src/components/ArchiveTableTracker/ArchiveTasksItem/ArchiveTasksItem.jsx
+++ b/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>
--- a/src/components/ArchiveTableTracker/ArchiveTasksItem/archiveTasksItem.scss
+++ b/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;
 }
--- a/src/components/AuthBox/AuthBox.jsx
+++ b/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"}
--- a/src/components/AuthBox/authBox.scss
+++ b/src/components/AuthBox/authBox.scss
@ -93,7 +93,7 @@
      color: #000000;
    }

-    .inputWrapper {
+    .input-wrapper {
      width: 100%;
      position: relative;

--- a/src/components/Calendar/calendarComponent.scss
+++ b/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;
--- a/src/components/Candidate/candidate.scss
+++ b/src/components/Candidate/candidate.scss
@ -9,7 +9,7 @@
    min-height: 100vh;
  }

-  .profileBreadcrumbs {
+  .profile-breadcrumbs {
    position: relative;
    z-index: -1;
  }
--- a/src/components/CardControl/CardControl.jsx
+++ b/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>
--- a/src/components/CardControl/CardControl.scss
+++ b/src/components/CardControl/CardControl.scss
@ -60,7 +60,7 @@
        font-weight: 700;
      }
    }
-    &Link {
+    &-link {
      width: 48px;
      height: 48px;
      background: #ddeec6;
--- a/src/components/CatalogPersonCard/CatalogPersonCard.jsx
+++ b/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>
  );
 };
--- a/src/components/CatalogPersonCard/catalogPersonCard.scss
+++ b/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;
  }
--- a/src/components/CategoriesItem/CategoriesItem.jsx
+++ b/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" />
--- a/src/components/CategoriesItem/categoriesItem.scss
+++ b/src/components/CategoriesItem/categoriesItem.scss
@ -1,4 +1,4 @@
-.categoriesItem {
+.categories-item {
  display: flex;
  flex-direction: column;
  padding: 33px 32px 25px 28px;
--- a/src/components/Common/ModalLayout/modalLayout.scss
+++ b/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;
          }
--- a/src/components/FileTracker/FileTracker.jsx
+++ b/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>
      )}
--- a/src/components/Modal/AcceptModal/AcceptModal.jsx
+++ b/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}
--- a/src/components/Modal/AcceptModal/acceptModal.scss
+++ b/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;
--- a/src/components/Modal/ModalRegistration/ModalRegistration.jsx
+++ b/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" : ""}
--- a/src/components/Modal/ModalRegistration/modalRegistration.scss
+++ b/src/components/Modal/ModalRegistration/modalRegistration.scss
@ -112,7 +112,7 @@
            padding-left: 20px;
          }

-          .inputContainer {
+          .input-container {
            margin: 0 0 20px 0;
            width: 100%;
          }
--- a/src/components/Modal/ModalReset/ModalReset.js
+++ b/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>
--- a/src/components/Modal/ModalReset/modalReset.scss
+++ b/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;
--- a/src/components/Modal/ModalResetPassword/ModalResetPassword.jsx
+++ b/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();
--- a/src/components/Modal/ModalResetPassword/modalResetPassword.scss
+++ b/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;
--- a/src/components/Modal/ModalTrackerRegistration/ModalTrackerRegistration.js
+++ b/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>
--- a/src/components/Modal/ModalTrackerRegistration/modalTrackerRegistration.scss
+++ b/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;
  }
 }
--- a/src/components/Modal/Tracker/ListEmployees/listEmployees.scss
+++ b/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;
--- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
+++ b/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>
              )}
--- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
+++ b/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;
--- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
+++ b/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>
                    )}
--- a/src/components/Modal/Tracker/TicketFullScreen/ticketFullScreen.scss
+++ b/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;
  }
--- a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
+++ b/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
--- a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss
+++ b/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;
--- a/src/components/Navigation/Navigation.jsx
+++ b/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>
--- a/src/components/PartnerPersonCard/PartnerPersonCard.jsx
+++ b/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>
--- a/src/components/PartnerPersonCard/partnerPersonCard.scss
+++ b/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;
--- a/src/components/ProfileBreadcrumbs/ProfileBreadcrumbs.jsx
+++ b/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}>
--- a/src/components/ProfileBreadcrumbs/profileBreadcrumbs.scss
+++ b/src/components/ProfileBreadcrumbs/profileBreadcrumbs.scss
@ -1,4 +1,4 @@
-.profileBreadcrumbs {
+.profile-breadcrumbs {
  display: flex;
  margin-bottom: 12px;

--- a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
+++ b/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={() => {
@ -286,15 +286,15 @@ export const ProfileCalendarComponent = React.memo(
                ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}`
                : `${getCorrectDate(endDate)} - ${getCorrectDate(startDate)}`
              : activePeriod
-              ? "Выберите диапазон на календаре"
-              : "Выбрать диапазон"}
+                ? "Выберите диапазон на календаре"
+                : "Выбрать диапазон"}
          </span>
          <span>
            {totalRangeHours
              ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}`
              : endDate
-              ? "0 часов"
-              : ""}
+                ? "0 часов"
+                : ""}
          </span>
          {endDate && (
            <BaseButton
--- a/src/components/ProfileHeader/profileHeader.scss
+++ b/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;
--- a/src/components/ProjectTicket/ProjectTicket.jsx
+++ b/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);
--- a/src/components/ProjectTicket/projectTicket.scss
+++ b/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 {
--- a/src/components/ReportForm/ReportForm.jsx
+++ b/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}
--- a/src/components/ReportForm/reportForm.scss
+++ b/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;
    }
--- a/src/components/ShortReport/ShortReport.jsx
+++ b/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>
--- a/src/components/ShortReport/shortReport.scss
+++ b/src/components/ShortReport/shortReport.scss
@ -2,7 +2,7 @@
  margin-bottom: 30px;
 }

-.viewReport {
+.view-report {
  &__title-box {
    display: flex;
    align-items: center;
--- a/src/components/StarRating/StarRating.scss
+++ b/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%;
--- a/src/components/TaskItem/taskItem.scss
+++ b/src/components/TaskItem/taskItem.scss
@ -30,6 +30,7 @@
  &__hours {
    margin-left: 3.3rem;
    display: flex;
+
    &-value {
      width: 34px;
      height: 34px;
--- a/src/components/TrackerSelectColumn/TrackerSelectColumn.jsx
+++ b/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
--- a/src/components/TrackerSelectColumn/trackerSelectColumn.scss
+++ b/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;

--- a/src/components/TrackerTaskComment/TrackerTaskComment.jsx
+++ b/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">
--- a/src/components/features/quiz/CardAviableTest.jsx
+++ b/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>
--- a/src/components/features/quiz/quiz.scss
+++ b/src/components/features/quiz/quiz.scss
@ -469,7 +469,7 @@ $maxWidthContainer: 1123;
        font-weight: 700;
      }
    }
-    &Link {
+    &-link {
      width: 48px;
      height: 48px;
      background: #ddeec6;