personal area partner with fixes report

src/pages/PartnerAddRequest/PartnerAddRequest.js

@@ -0,0 +1,98 @@
+import React from 'react';
+
+import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
+import {Footer} from "../../components/Footer/Footer";
+
+import arrowDown from "../../images/selectArrow.png"
+
+import './partnerAddRequest.scss'
+
+export const PartnerAddRequest = () => {
+    return (
+        <div className='partnerAddRequest'>
+            <ProfileHeader />
+            <div className='container'>
+                <h2 className='partnerAddRequest__title'>Страница добавления заявки</h2>
+                <div className='partnerAddRequest__section'>
+                    <div className='partnerAddRequest__form'>
+                        <div className='partnerAddRequest__form__block form__block'>
+                            <h3 className='form__block__title'>Данные открытой позиции</h3>
+                            <div className='form__block__section'>
+                                <h3>Название вакансии</h3>
+                                <div className='form__block__section__input'>
+                                    <input type='text' placeholder='Вакансия'/>
+                                </div>
+                            </div>
+                            <div className='form__block__section'>
+                                <h3>Выберите специализацию</h3>
+                                <div className='form__block__section__selects'>
+                                    <div className='form__block__section__select'>
+                                        <span>Разработка</span>
+                                        <img src={arrowDown} />
+                                    </div>
+                                    <div className='form__block__section__select'>
+                                        <span>Backend Developer</span>
+                                        <img src={arrowDown} />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className='partnerAddRequest__form__block form__block'>
+                            <h3 className='form__block__title'>Квалификация</h3>
+                            <div className='form__block__section'>
+                                <h3>Выберите уровень знаний </h3>
+                                <div className='form__block__section__select'>
+                                    <span>Разработка</span>
+                                    <img src={arrowDown} />
+                                </div>
+                            </div>
+                            <div className='form__block__section'>
+                                <h3>Введите необходимое описание</h3>
+                                <textarea/>
+                            </div>
+                            <div className='form__block__section'>
+                                <h3>Необходимое количество человек на позицию</h3>
+                                <div className='form__block__section__select'>
+                                    <span>2</span>
+                                    <img src={arrowDown} />
+                                </div>
+                            </div>
+                            <div className='form__block__buttons'>
+                                <button className='form__block__cancel'>Отмена</button>
+                                <button className='form__block__save'>Сохранить</button>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='partnerAddRequest__info'>
+                        <div className='partnerAddRequest__info__block'>
+                            <h4>Процесс:</h4>
+                            <p>
+                                При аутстафе мы предоставляем вам
+                                it-специалистов при этом они находятся в
+                                нашем штате.
+                                <br/><br/>
+                                Вы сможете прособеседовать наших
+                                специалистов, посмотреть проекты и Git.
+                            </p>
+                        </div>
+                        <div className='partnerAddRequest__info__block'>
+                            <h4>Отчетность:</h4>
+                            <p>
+                                Вы можете обратиться к специалисту
+                                напрямую.
+                                <br/><br/>
+                                Каждый день специалисты описывают
+                                выполненные работы и затраченные
+                                на это часы.
+                                <br/><br/>
+                                Можем выделить руководителя проекта
+                                и тестировщиков.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <Footer />
+        </div>
+    )
+}

src/pages/PartnerAddRequest/partnerAddRequest.scss

@@ -0,0 +1,228 @@
+.partnerAddRequest {
+  background: #F1F1F1;
+  height: 100%;
+  min-height: 100vh;
+  font-family: 'LabGrotesque', sans-serif;
+
+  .container {
+    max-width: 1160px;
+    margin-top: 23px;
+
+    @media (max-width: 570px) {
+      margin-top: 0;
+    }
+  }
+
+  &__title {
+    color: #000000;
+    font-weight: 700;
+    font-size: 22px;
+    line-height: 32px
+  }
+
+  &__section {
+    margin-top: 25px;
+    display: flex;
+    column-gap: 30px;
+
+    @media (max-width: 1020px) {
+      flex-direction: column;
+      row-gap: 22px;
+    }
+  }
+
+  &__form {
+    display: flex;
+    flex-direction: column;
+    row-gap: 22px;
+
+    @media (max-width: 1020px) {
+      order: 2;
+    }
+  }
+
+  .form__block {
+    background: #FFFFFF;
+    border-radius: 12px;
+    padding: 25px 95px 30px 55px;
+    min-width: 600px;
+    width: 100%;
+
+    @media (max-width: 750px) {
+      padding: 15px 50px 15px 30px;
+      min-width: auto;
+    }
+
+    &__title {
+      font-weight: 700;
+      font-size: 20px;
+      line-height: 24px;
+      color: #5B6871;
+      margin-bottom: 35px;
+    }
+
+    &__section {
+      margin-bottom: 35px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      h3 {
+        font-weight: 400;
+        font-size: 15px;
+        line-height: 18px;
+        color: #000000;
+        margin-bottom: 10px;
+      }
+
+      &__input {
+        background: #EFF2F7;
+        border-radius: 8px;
+        padding: 8px 12px;
+        margin-bottom: 35px;
+
+        @media (max-width: 1020px) {
+          max-width: 500px;
+        }
+
+        input {
+          background: none;
+          border: none;
+          color: #000000;
+          font-weight: 400;
+          font-size: 15px;
+          line-height: 18px;
+          outline: none;
+        }
+      }
+
+      &__selects {
+        display: flex;
+        column-gap: 32px;
+        justify-content: space-between;
+
+        @media (max-width: 1020px) {
+          justify-content: normal;
+        }
+
+        @media (max-width: 515px) {
+          flex-direction: column;
+          row-gap: 20px;
+        }
+      }
+
+      &__select {
+        padding: 8px 15px 9px 12px;
+        background: #EFF2F7;
+        border-radius: 12px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        max-width: 202px;
+        width: 100%;
+
+        span {
+          color: #000000;
+          font-weight: 400;
+          font-size: 15px;
+          line-height: 18px;
+        }
+      }
+
+      textarea {
+        background: #EFF2F7;
+        border-radius: 8px;
+        width: 100%;
+        border: none;
+        height: 100px;
+        resize: none;
+        outline: none;
+        padding: 5px;
+        color: #000000;
+        font-weight: 400;
+        font-size: 15px;
+        line-height: 18px;
+
+        @media (max-width: 1020px) {
+          max-width: 500px;
+        }
+      }
+    }
+
+    &__buttons {
+      display: flex;
+      margin-top: 50px;
+
+      button {
+        max-width: 150px;
+        width: 100%;
+        height: 40px;
+      }
+    }
+
+    &__cancel {
+      border: 0.5px solid #8DC63F;
+      border-radius: 44px;
+      color: #6F6F6F;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 32px;
+      background: none;
+      margin-right: 23px;
+    }
+
+    &__save {
+      background: #52B709;
+      border-radius: 44px;
+      color: #FFFFFF;
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 32px;
+      border: none;
+    }
+  }
+
+  footer {
+    margin-top: 70px;
+  }
+
+  &__info {
+    background: #FFFFFF;
+    border-radius: 12px;
+    width: 100%;
+    padding: 90px 48px 200px 62px;
+    display: flex;
+    flex-direction: column;
+    row-gap: 140px;
+
+    @media (max-width: 1020px) {
+      order: 1;
+      padding: 20px;
+      flex-direction: row;
+      column-gap: 50px;
+    }
+
+    @media (max-width: 500px) {
+      flex-direction: column;
+      row-gap: 20px;
+    }
+
+    &__block {
+      h4 {
+        color: #5B6871;
+        font-weight: 700;
+        font-size: 20px;
+        line-height: 24px;
+      }
+
+      p {
+        color: #000000;
+        font-weight: 400;
+        font-size: 15px;
+        line-height: 18px;
+      }
+    }
+  }
+}

src/pages/PartnerRequests/PartnerRequests.js

@@ -0,0 +1,64 @@
+import React, {useState} from 'react';
+import {Link} from "react-router-dom";
+
+import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
+import {Footer} from "../../components/Footer/Footer";
+
+import './partnerRequests.scss'
+
+export const PartnerRequests = () => {
+    const [items] = useState([
+        {
+            name: 'PHP разработчик ',
+            count: 4
+        },
+        {
+            name: 'PHP разработчик ',
+            count: 4
+        },
+        {
+            name: 'PHP разработчик ',
+            count: 4
+        },
+        {
+            name: 'PHP разработчик ',
+            count: 4
+        }
+    ])
+    return (
+        <div className='partnerRequests'>
+            <ProfileHeader />
+            <div className='container'>
+                <h2 className='partnerRequests__title'>Запросы</h2>
+                <div className='partnerRequests__section'>
+                    <div className='partnerRequests__section__items'>
+                        {
+                            items.map((item, index) => {
+                                return <Link key={index} to={''} className='partnerRequests__section__item'>
+                                            <p className='partnerRequests__section__item__name'>
+                                                {item.name}
+                                            </p>
+                                            <p className='partnerRequests__section__item__count'>
+                                                Подходящие кандидаты<span>{item.count}</span>
+                                            </p>
+                                        </Link>
+                            })
+                        }
+                    </div>
+                    <div className='partnerRequests__section__info'>
+                        <h3>Инструкция: подачи заявки</h3>
+                        <p>
+                            Оператор компании заводит заявку и указывает необходимые параметры —
+                            количество сотрудников, стек, уровень специалиста
+                        </p>
+                        <Link to={'/profile/add-request'}>
+                            <span>+</span>
+                            Создать запрос
+                        </Link>
+                    </div>
+                </div>
+            </div>
+            <Footer/>
+        </div>
+    )
+};

src/pages/PartnerRequests/partnerRequests.scss

@@ -0,0 +1,199 @@
+.partnerRequests {
+  background: #F1F1F1;
+  height: 100%;
+  min-height: 100vh;
+  font-family: 'LabGrotesque', sans-serif;
+
+  .container {
+    max-width: 1160px;
+    margin-top: 23px;
+
+    @media (max-width: 570px) {
+      margin-top: 0;
+    }
+  }
+
+  &__title {
+    color: #000000;
+    font-weight: 700;
+    font-size: 22px;
+    line-height: 32px;
+  }
+
+  &__section {
+    margin-top: 25px;
+    background: #FFFFFF;
+    border-radius: 12px;
+    padding: 33px 45px 40px;
+    display: flex;
+    column-gap: 30px;
+
+    @media (max-width: 795px) {
+      padding: 20px 25px 25px;
+    }
+
+    @media (max-width: 750px) {
+      flex-direction: column;
+    }
+
+    &__items {
+      display: flex;
+      width: 77%;
+      flex-wrap: wrap;
+      column-gap: 20px;
+      row-gap: 25px;
+
+      @media (max-width: 795px) {
+        row-gap: 10px;
+        column-gap: 15px;
+      }
+
+      @media (max-width: 750px) {
+        order: 2;
+        width: 100%;
+      }
+    }
+
+    &__item {
+      display: flex;
+      width: 48%;
+      flex-direction: column;
+      background: #F1F1F1;
+      border-radius: 12px;
+      padding: 20px 27px 15px 25px;
+      transition: 0.3s all ease;
+      position: relative;
+      max-height: 100px;
+
+      @media (max-width: 585px) {
+        width: 100%;
+      }
+
+      &:before {
+        content: '...';
+        position: absolute;
+        right: 27px;
+        bottom: 17%;
+        color: #6F6F6F;
+        font-size: 23px;
+      }
+
+      &:hover {
+        text-decoration: none;
+        box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
+        transform: scale(1.02);
+      }
+
+      &__name {
+        color: #111112;
+        font-weight: 700;
+        font-size: 16px;
+        line-height: 32px;
+        margin-bottom: 9px;
+      }
+
+      &__count {
+        color: #6F6F6F;
+        font-weight: 500;
+        font-size: 12px;
+        line-height: 24px;
+        display: flex;
+        margin-bottom: 0;
+
+        span {
+          color: #6F6F6F;
+          font-weight: 500;
+          font-size: 14px;
+          line-height: 24px;
+          background: #DDDDDD;
+          border-radius: 4px;
+          width: 21px;
+          height: 24px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-left: 8px;
+        }
+      }
+    }
+
+    &__info {
+      display: flex;
+      flex-direction: column;
+      width: 22%;
+      padding-top: 5px;
+
+      @media (max-width: 750px) {
+        order: 1;
+        width: 100%;
+        text-align: center;
+        margin-bottom: 20px;
+
+        a {
+          margin: 0 auto;
+          width: 100%;
+        }
+      }
+
+      h3 {
+        color: #52B709;
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 24px;
+        margin-bottom: 30px;
+
+        @media (max-width: 1085px) {
+          margin-bottom: 15px;
+          line-height: 18px;
+        }
+      }
+
+      p {
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 24px;
+        color: #000000;
+        margin-bottom: 25px;
+
+        @media (max-width: 1085px) {
+          margin-bottom: 10px;
+          line-height: 19px;
+        }
+      }
+
+      a {
+        background: #52B709;
+        max-width: 150px;
+        border-radius: 44px;
+        height: 40px;
+        border: none;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 32px;
+        color: #FFFFFF;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transition: 0.3s all ease;
+
+        span {
+          color: white;
+          font-weight: 700;
+          font-size: 20px;
+          margin-right: 8px;
+        }
+
+        &:hover {
+          box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
+          transform: scale(1.02);
+          text-decoration: none;
+          color: #FFFFFF;
+        }
+      }
+    }
+  }
+
+  footer {
+    margin-top: 70px;
+  }
+}

src/pages/Profile/Profile.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {useSelector} from "react-redux";
 import {Link} from "react-router-dom";
 
@@ -22,79 +22,114 @@ import './profile.scss'
 export const Profile = () => {
 
   const profileInfo = useSelector(getProfileInfo);
+  const [user] = useState('developer')
+  const [profileItemsInfo] = useState({
+    developer: [
+      {
+        path: '/calendar',
+        img: reportsIcon,
+        title: 'Ваша отчетность',
+        description: '<span></span>Отработанных в этом месяце часов'
+      },
+      {
+        path: '/summary',
+        img: summaryIcon,
+        title: 'Данные и резюме',
+        description: 'Ваше резюме<br/><span>заполнено</span>'
+      },
+      {
+        path: '/tracker',
+        img: timerIcon,
+        title: 'Трекер времени',
+        description: 'Сколько времени занимает<br/> выполнение задач'
+      },
+      {
+        path: '/payouts',
+        img: paymentIcon,
+        title: 'Выплаты',
+        description: 'У вас <span>подтвержден</span><br/> статус самозанятого'
+      },
+      {
+        path: '/settings',
+        img: settingIcon,
+        title: 'Настройки аккаунта',
+        description: 'Перейдите чтобы начать<br/> редактирование'
+      }
+    ],
+    partner: [
+      {
+        path: '/requests',
+        img: reportsIcon,
+        title: 'Запросы и открытые позиции',
+        description: '<span>У вас 2 вакансии<br/></span>открытые от лица компании'
+      },
+      {
+        path: '',
+        img: summaryIcon,
+        title: 'Данные персонала',
+        description: 'Наши специалисты <br/><span>уже работающие у вас</span>'
+      },
+      {
+        path: '/tracker',
+        img: timerIcon,
+        title: 'Трекер времени',
+        description: 'Контроль времени и<br/> выполнение задач'
+      },
+      {
+        path: '',
+        img: paymentIcon,
+        title: 'Договора и отчетность',
+        description: 'Ключевые условия<br/> договора'
+      },
+      {
+        path: '',
+        img: settingIcon,
+        title: 'Настройки аккаунта',
+        description: 'Перейдите чтобы начать<br/> редактирование'
+      }
+    ]
+  })
 
   return (
       <div className='profile'>
         <ProfileHeader/>
         <div className='container'>
-          <h2 className='profile__title'>Добрый день, <span>{profileInfo.fio}</span></h2>
+          <h2 className='profile__title'>
+            {user === 'developer' ?
+                <span><p>Добрый день,&nbsp;</p>{profileInfo.fio}</span>
+                :
+              'ООО НДВ Консалтинг'
+            }
+          </h2>
           <div className='summary__info'>
             <div className='summary__person'>
               <img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : ''} className='summary__avatar' alt='avatar'/>
-              <p className='summary__name'>{profileInfo.fio}, {profileInfo.specification} разработчик</p>
+              <p className='summary__name'>
+                {user === 'developer' ?
+                    <span>{profileInfo.fio}, {profileInfo.specification} разработчик</span>
+                    :
+                    'ООО НДВ Консалтинг'
+                }
+              </p>
             </div>
           </div>
           <div className='profile__items'>
-            <Link to={'/profile/calendar'} className='item'>
-              <div className='item__about'>
-                <img src={reportsIcon} alt='report'/>
-                <h3>Ваша отчетность</h3>
-              </div>
-              <div className='item__info'>
-                <p><span></span>Отработанных в этом месяце часов</p>
-                <div className='item__infoLink'>
-                  <img src={rightArrow} alt='arrow'/>
-                </div>
-              </div>
-            </Link>
-            <Link to={'/profile/summary'} className='item'>
-              <div className='item__about'>
-                <img src={summaryIcon} alt='summary'/>
-                <h3>Данные и резюме</h3>
-              </div>
-              <div className='item__info'>
-                <p>Ваше резюме<br/><span>заполнено</span></p>
-                <div className='item__infoLink'>
-                  <img src={rightArrow} alt='arrow'/>
-                </div>
-              </div>
-            </Link>
-            <Link to={'/profile'} className='item'>
-              <div className='item__about'>
-                <img src={timerIcon} alt='timer'/>
-                <h3>Трекер времени</h3>
-              </div>
-              <div className='item__info'>
-                <p>Сколько времени занимает<br/> выполнение задач</p>
-                <div className='item__infoLink'>
-                  <img src={rightArrow} alt='arrow'/>
-                </div>
-              </div>
-            </Link>
-            <Link to={'/profile'} className='item'>
-              <div className='item__about'>
-                <img src={paymentIcon} alt='payment'/>
-                <h3>Выплаты</h3>
-              </div>
-              <div className='item__info'>
-                <p>У вас <span>подтвержден</span><br/> статус самозанятого</p>
-                <div className='item__infoLink'>
-                  <img src={rightArrow} alt='arrow'/>
-                </div>
-              </div>
-            </Link>
-            <Link to={'/profile'} className='item'>
-              <div className='item__about'>
-                <img src={settingIcon} alt='settings'/>
-                <h3>Настройки аккаунта</h3>
-              </div>
-              <div className='item__info'>
-                <p>Перейдите чтобы начать<br/> редактирование</p>
-                <div className='item__infoLink'>
-                  <img src={rightArrow} alt='arrow'/>
-                </div>
-              </div>
-            </Link>
+            {
+              profileItemsInfo[user].map((item, index) => {
+                return <Link key={index} to={`/profile${item.path}`} className='item'>
+                          <div className='item__about'>
+                            <img src={item.img} alt='itemImg'/>
+                            <h3>{item.title}</h3>
+                          </div>
+                          <div className='item__info'>
+                            <p dangerouslySetInnerHTML={{__html: item.description}}></p>
+                            <div className='item__infoLink'>
+                              <img src={rightArrow} alt='arrow'/>
+                            </div>
+                          </div>
+                        </Link>
+              })
+            }
           </div>
         </div>
         <Footer/>

src/pages/Profile/profile.scss

@@ -10,6 +10,10 @@
     line-height: 32px;
     color: #000000;
     span {
+      display: flex;
+      p {
+        color: black;
+      }
       color: #52B709;
     }
 
@@ -17,6 +21,10 @@
       font-size: 17px;
       margin-top: 20px;
     }
+
+    @media (max-width: 500px) {
+      font-size: 15px;
+    }
   }
 
   &__info {
@@ -63,6 +71,7 @@
 
       @media (max-width: 925px) {
         width: 100%;
+        padding: 15px 25px;
       }
 
       &__about {
@@ -71,6 +80,10 @@
         align-items: center;
         margin-bottom: 30px;
 
+        @media (max-width: 925px) {
+          margin-bottom: 15px;
+        }
+
         h3 {
           color: #000000;
           font-weight: 500;

src/pages/Summary/Summary.js

@@ -31,7 +31,7 @@ export const Summary = () => {
               <img src={arrow} alt='arrow'/>
               <p>Вернуться</p>
             </div>}
-            <div className='summary__info'>
+            <div className={openGit ? 'summary__info openGit' : 'summary__info'}>
               <div className='summary__person'>
                 <img src={urlForLocal(profileInfo.photo)} className='summary__avatar' alt='avatar'/>
                 <p className='summary__name'>{profileInfo.fio}, {profileInfo.specification} разработчик</p>
@@ -57,7 +57,15 @@ export const Summary = () => {
           </div>
           }
           {profileInfo.vc_text && !openGit &&
-          <div className='summary__experience' dangerouslySetInnerHTML={transformHtml(profileInfo.vc_text)}>
+          <div className='summary__experience'>
+            <div className='experience__block'>
+              <div className="summary__sections__head">
+                  <h3>Описание опыта работы</h3>
+                  <button>Редактировать раздел</button>
+              </div>
+              <div className="experience__content" dangerouslySetInnerHTML={{__html:profileInfo.vc_text}}>
+              </div>
+            </div>
           </div>
           }
           {openGit &&

src/pages/Summary/summary.scss

@@ -55,7 +55,7 @@
     justify-content: space-between;
 
     @media (max-width: 930px) {
-      padding: 0 40px;
+      padding: 0 25px;
     }
 
     @media (max-width: 690px) {
@@ -73,7 +73,7 @@
     align-items: center;
     column-gap: 45px;
 
-    @media (max-width: 690px) {
+    @media (max-width: 825px) {
       column-gap: 20px;
     }
 
@@ -95,6 +95,16 @@
     }
   }
 
+  .openGit {
+    .summary__name {
+      max-width: none;
+
+      @media (max-width: 490px) {
+        max-width: 280px;
+      }
+    }
+  }
+
   &__name {
     font-weight: 500;
     font-size: 16px;
@@ -102,12 +112,12 @@
     position: relative;
     white-space: nowrap;
 
-    @media (max-width: 915px) {
-      max-width: 220px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
+    //@media (max-width: 915px) {
+    //  max-width: 220px;
+    //  overflow: hidden;
+    //  white-space: nowrap;
+    //  text-overflow: ellipsis;
+    //}
 
     @media (max-width: 690px) {
       font-size: 14px;
@@ -115,8 +125,8 @@
       line-height: 15px;
     }
 
-    @media (max-width: 640px) {
-      max-width: 180px;
+    @media (max-width: 550px) {
+      max-width: 200px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -124,7 +134,7 @@
     }
 
     @media (max-width: 450px) {
-      max-width: 120px;
+      max-width: 150px;
     }
 
     &:after {
@@ -268,6 +278,11 @@
           line-height: 32px;
           margin-bottom: 0;
         }
+
+        a:hover {
+          text-decoration: none;
+          color: #007bff;
+        }
       }
     }
   }

src/pages/ViewReport/ViewReport.js

@@ -112,15 +112,15 @@ export const ViewReport = () => {
                                 </tr>
                                 </thead>
                                 <tbody>
-                                {taskText.length && taskText.map((task) => {
+                                {taskText.length && taskText.map((task, index) => {
                                     return <tr key={task.id}>
                                                 <td>
-                                                    <p>{task.task}</p>
+                                                    <p>{index + 1}. {task.task}</p>
                                                 </td>
                                                 <td>
                                                     <div className='viewReport__done__hours__item'>
                                                         <span>{task.hours}</span>
-                                                        <p>часа на задачу</p>
+                                                        <p className='hours'>часов на задачу</p>
                                                     </div>
                                                 </td>
                                             </tr>

src/pages/ViewReport/viewReport.scss

@@ -270,15 +270,11 @@
 
       p {
         font-weight: 400;
-        font-size: 12px;
-        line-height: 24px;
+        font-size: 15px;
+        line-height: 20px;
+        max-width: 755px;
         color: #000000;
 
-        @media (max-width: 750px) {
-          font-size: 10px;
-          line-height: 18px;
-        }
-
         @media (max-width: 465px) {
           text-align: center;
           line-height: 14px;
@@ -330,6 +326,15 @@
         align-items: center;
         min-width: 155px;
 
+        .hours {
+          font-size: 15px;
+
+          @media (max-width: 1170px) {
+            font-size: 13px;
+            text-align: center;
+          }
+        }
+
         @media (max-width: 900px) {
           column-gap: 0;
           justify-content: space-between;
@@ -337,14 +342,14 @@
           width: 100%;
         }
 
-        @media (max-width: 575px) {
+        @media (max-width: 775px) {
           flex-direction: column;
           justify-content: center;
           row-gap: 10px;
         }
 
         span {
-          width: 48px;
+          max-width: 48px;
           height: 48px;
           background: #8DC63F;
           border-radius: 50px;
@@ -355,11 +360,12 @@
           font-size: 22px;
           line-height: 32px;
           color: #000000;
+          width: 100%;
 
           @media (max-width: 900px) {
-            width: 25px;
-            height: 25px;
-            font-size: 18px;
+            max-width: 28px;
+            height: 28px;
+            font-size: 15px;
           }
         }
 
@@ -404,8 +410,8 @@
 
     p {
       font-weight: 400;
-      font-size: 12px;
-      line-height: 24px;
+      font-size: 15px;
+      line-height: 20px;
 
       @media (max-width: 650px) {
         font-size: 10px;